TileBoard - New dashboard for Homeassistant

Got it working - created a custom.css in the styles directory with:

.item {
    border-radius: 8px !important;
  }

The “!important” was actually important - without it, corners would not round in a mobile view (i.e. http:xyz?mobile)

1 Like

I don’t have that issue

Not sure if you still need help with rounding numbers for temperature, but here is my config.

CONFIG.JS for Weather (TYPES.WEATHER)

    fields: {
      temperature: function () {return Math.round(this.states['sensor.dark_sky_temperature'].state);},
      temperatureUnit: '&sensor.dark_sky_temperature.attributes.unit_of_measurement',
      windSpeed: function () {return Math.round(this.states['sensor.dark_sky_wind_speed'].state);},
      windSpeedUnit: ' ' + '&sensor.dark_sky_wind_speed.attributes.unit_of_measurement',
      humidity: function () {return Math.round(this.states['sensor.dark_sky_humidity'].state);},
      humidityUnit: ' ' + '&sensor.dark_sky_humidity.attributes.unit_of_measurement',

      list: [
        'Feels like &sensor.dark_sky_apparent_temperature_rounded.state '
          + '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
        'High  '
          + '&sensor.dark_sky_daytime_high_temperature_0_rounded.state '
          + '&sensor.dark_sky_daytime_high_temperature_0d.attributes.unit_of_measurement',
        'Low  '
          + '&sensor.dark_sky_overnight_low_temperature_0_rounded.state '
          + '&sensor.dark_sky_overnight_low_temperature_0d.attributes.unit_of_measurement',
        '&sensor.dark_sky_precip_probability.state'
          + '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
          + ' chance of rain'
        ]

CONFIG.JS for Weather List

   position: [0, 2],
   type: TYPES.WEATHER_LIST,
   width: 2,
   height: 1.45,
   title: false,
   id: {},
   icons: {
      'clear-day': 'clear',
      'clear-night': 'nt-clear',
      'cloudy': 'cloudy',
      'rain': 'rain',
      'sleet': 'sleet',
      'snow': 'snow',
      'wind': 'hazy',
      'fog': 'fog',
      'partly-cloudy-day': 'partlycloudy',
      'partly-cloudy-night': 'nt-partlycloudy'
   },
   hideHeader: true,
   secondaryTitle: 'Wind',
   list: [1,2,3,4,5,6,7].map(function (id) {

      return {
         date: function () {
            if (id === 1) {
            return "Tomorrow";
            }
            var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
            return d.toString().split(' ')[0];
         },
         icon: "&sensor.dark_sky_icon_" + id + "d" + ".state",
         primary: function (item, entity) {
           var high = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
              + id + 'd.state', item, entity);
           var low = this.parseFieldValue('&sensor.dark_sky_overnight_low_temperature_'
              + id + 'd.state', item, entity);
           var unit = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
              + id + 'd.attributes.unit_of_measurement', item, entity);

           high = parseInt(high);
           low = parseInt(low);

           return high + ' / ' + low + ' ' + unit;
          },
          secondary: function (item, entity) {
           var wind = this.parseFieldValue('&sensor.dark_sky_wind_speed_'
              + id + 'd.state', item, entity);
           var windunit = this.parseFieldValue('&sensor.dark_sky_wind_speed_'
              + id + 'd.attributes.unit_of_measurement', item, entity);

           wind = parseInt(wind);

           return wind + ' ' + windunit;
		  }
      }
   })

SENSORS.YAML

# Rounded Numbers
  - platform: template
    sensors:
      dark_sky_apparent_temperature_rounded:
        friendly_name: 'Dark Sky Apparent Temperature Rounded'
        value_template: '{{ states("sensor.dark_sky_apparent_temperature")|round }}'
      dark_sky_daytime_high_temperature_0_rounded:
        friendly_name: 'Dark Sky Daytime High Temperature 0 Rounded'
        value_template: '{{ states("sensor.dark_sky_daytime_high_temperature_0d")|round }}'
      dark_sky_overnight_low_temperature_0_rounded:
        friendly_name: 'Dark Sky Overnight Low Temperature 0 Rounded'
        value_template: '{{ states("sensor.dark_sky_overnight_low_temperature_0d")|round }}'

EXAMPLE:

1 Like

How can I have a device_tracker item that doesn’t show a map (I just want the picture)?

Have Tileboard setup and working fine now for a few months. I am using it on an old Ipad 2 mounted on the wall. Tileboards starts up fine (Safari with link added to the homescreen) but after an hour or so safari closes andI am left with the IPAD icon screen. I not sure how long it takes and haven’t seen if an error appears or something because it appears to be random. I am running tile board of the webserver on a Synology NAS - not sure if that has something to do with it.

Questions:

  • is anyone else having this issue when using on an ipad?
  • Is there an error log somewhere that I can view to see if anything happens just before

thanks

FYI - I’m using a sensor icon for now:

                  {
                     position: [0, 1],
                     type: TYPES.SENSOR_ICON,
                     title: '',
                     id: 'person.jesse',
                     bg: '&person.jesse.attributes.entity_picture',
                     states: {
                        home: "Home",
                        not_home: "Away"
                     },
                     customStyles: function (item, entity) {
                        if (entity.state !== 'home') {
                            return {
                                'opacity': 0.8,
                                'filter': 'grayscale()',
                            };
                        } else {
                            return {
                                'opacity': 1,
                                'filter': '',
                            };
                        }
                     },                     
                  }, 

I was able to successfully use events to switch pages like you said. But I cannot switch to a hidden page. I have a few hidden pages that I want shown temporarily (ex. show garage camera page when garage opens). Any idea how to show a hidden page temporarily or achieve what I’m trying to achieve?
Thanks

ScottSuine,

I had the exact same issue. I have traced my issue to the camera. When I don’t have the camera in my main page it stays on, but if the camera is on a tile in the main view it only stays on for 1 to 2 hours.

I have “solved” this by using guided access. I have a 3rd gen iPad and I triple click my home button when TileBoard is active. Then to get out I need to triple click the home button. I have watched it when tileboard would have closed, and it stays on and reloads. At first I thought this would be a hassle but it really isn’t one. I have two apps that the kids use in the morning, and they have no problem getting out of guided access and going into the apps they need. Now if I could only get them to put TileBoard back and and into Guided Access. :slight_smile:

1 Like

@knemo and @apop,

Thanks for the info. Sorry, my RL has been a bit busy, and I just didn’t have time to see if I could fix this. I will do this shortly and post back.

Thanks again.

@apop,
Same issue. Says parseFileValue is undefined.

@knemo
I have hit my guessing limit. :slight_smile:

I tried editing the code to get my summary, but it shows nothing for summary.

This is what I am trying.

                secondary: function (item, entity) {
                var wind = '&sensor.dark_sky_summary_' + id + 'd.state';
                wind = wind; 
                }

This might be doable with the darksky weather platform instead of the sensor platform. I’m going to try and work on it and I’ll post back here if I come up with anything.

The rounding worked. Just couldn’t get the summary anymore.

1 Like

So I played around more. I guess it matters where the var is in relation to the return. But this is the code that is working for me. Thanks @apop and @knemo

 // WEATHER LIST \\
            { 
                position: [3, 0],
                type: TYPES.WEATHER_LIST,
                width: 3,
                height: 2,
                theme: ITEM_TRANSPARENT,
                title: '',
                id: {},
                icons: {
                    'clear-day': 'clear',
                    'clear-night': 'nt-clear',
                    'cloudy': 'cloudy',
                    'rain': 'rain',
                    'sleet': 'sleet',
                    'snow': 'snow',
                    'wind': 'hazy',
                    'fog': 'fog',
                    'partly-cloudy-day': 'partlycloudy',
                    'partly-cloudy-night': 'nt-partlycloudy'
                    },
                hideHeader: false,
                secondaryTitle: 'Summary',
                list: [0,1,2,3,4,5,6].map(function (id) {
                  var wind = "&sensor.dark_sky_summary_" + id + "d.state";
                  var weekday = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
                  return {
                    date: function () {
                    if ( id === 0 ) {
                    return "Today";
                    }
                    else if (id === 1) {
                    return "Tomorrow";
                    }
                    var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
                    return weekday[d.getDay()];
                  },
                  icon: "&sensor.dark_sky_icon_" + id + "d" + ".state",
                  primary: function (item, entity) {
                  var high = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
                  + id + 'd.state', item, entity);
                  var low = this.parseFieldValue('&sensor.dark_sky_overnight_low_temperature_'
                  + id + 'd.state', item, entity);
                  var unit = this.parseFieldValue('&sensor.dark_sky_daytime_high_temperature_'
                  + id + 'd.attributes.unit_of_measurement', item, entity);

                  high = parseInt(high);
                  low = parseInt(low);

                  return high + ' / ' + low + ' ' + unit;
                  },
                  secondary: wind,
                };
                })
            },

2 Likes

@JesseWebDotCom

this is the code I have for that function:

// MY TRACKER \\
            {
                position: [0, 3.5],
                type: TYPES.DEVICE_TRACKER,
                width: 0.5,
                height: 0.5,
                title: '',
                id: 'device_tracker.my_phone',
                states: {
                    home: "Home",
                    not_home: "Away",
                },
                zoomLevels: [],
                bgSuffix: '@attributes.entity_picture',
                hideEntityPicture: false, //hide entity pic, if you need only map
                slidesDelay: 2,
                customStyles: function (item, entity) {
                    if (entity.state !== 'home') {
                        return {
                            'opacity': 0.8,
                            'filter': 'grayscale()',
                        };
                    } else {
                        return {
                            'opacity': 1,
                            'filter': '',
                        };
                    }
                }
            },

Thanks for this tip. Yes I do have a video feed on the front page so most likely the cause. Have just done this and will see how it goes.
Any idea why the video tile kills safari?

How do you create and use a custom theme? I tried adding this to custom.css and later themes.css:

.-theme-samsung4s8 .item {
    border-radius: 8px !important;
}

And then reference it in my config.js:

customTheme: CUSTOM_THEMES.SAMSUNG4S8

But neither worked.

Any way to hide the volume slider on a MEDIA_PLAYER item?

JesseWebDotCom, try putting this code in custom.css file in tileboard/styles folder; works for me:

.media-player-table--td-volume .media-player--volume {
    display: none;
}

I have had this happen a few times if I leave the dashboard running for a while, I think sometimes the the websocket connection disconnects or gets logged out.

I sometimes get an error appear in the HA log also, it may be worth checking that.

worked perfectly, thanks!

1 Like

QUESTION: Anyone know how to make and use a custom theme?
ANSWER:

  1. Add your css code to styles\custom.css:
.-theme-samsung4s8 .item {
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
  1. At the top of your config.js, register your custom theme:
CUSTOM_THEMES.SAMSUNG4S8 = 'samsung4s8';
  1. In your config.js, set your desired config to use your new custom theme:
var CONFIG = {
   customTheme: CUSTOM_THEMES.SAMSUNG4S8,