TileBoard - New dashboard for Homeassistant

Thanks for sharing your code. It works, BUT when the page is loaded and the light is off, the light tile is not loaded (empty tile). When I turn the light on, it appears and keeps there even if I turn it off. Do you have this problem?

I am having an issue with INPUT_DATETIME. The tile displays the correct date, and the underlying sensor in Home Assistant has the correct date. But when a user clicks on the tile to open the input the month displayed is wrong - right now the month shows as 04 instead of 05 for May. If the user corrects to 05 and closes the input, the date saves correctly - the issue is only on opening the tile for input.

Has anyone else seen this?

As this is my first post, just also wanted to say TileBoard is fantastic.

Can TileBoard switch pages based on an HA sensor (ex. if garage opened, show garage camera page for 10 seconds and then switch back to the main page)?

Yes it can, you can setup any observable action/event to load a page in TileBoard. I set this up by creating an automation event to open a page in TileBoard when the sensor is triggered. Then you can create another automation to automatically “Time Out” that camera page to go back to your main screen after 10 seconds or so. Works like a charm

Awesome. I’m assuming it can take advantage of the new “stream” live camera functionality home assistant just added in the past month or so, correct?

If so, I’m going to give this a whirl. Hopefully I can create something beautiful and functional used through tablets and phones.

Is there a way to hide a media player when its not playing (ex. state = off or idle)?

hidden: function (item, entity) {return entity.state === "off"}

should work.

Works, thank you. Slightly modified for my use case:

hidden: function (item, entity) {return (entity.state === "off" || entity.state === "idle")}     

How is everyone making the tiles have round corners?

You’ll need to set a border-radius in your custom.css file.

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.