TileBoard - New dashboard for Homeassistant

Apologies for the necro-post, but with DarkSky being unavailable to new subscribers there may be others who are seeking to set up the TileBoard Weather-List tile with OpenWeatherMap. Here’s how to do it.

The OpenWeatherMap integration doesn’t set up individual sensors for the values in the 5-day forecast, so you first have to create new template sensors from the weather.openweathermap entity. In your sensors.yaml, add the following template sensors, then restart HA.

  - platform: template
    sensors:
      owm_daytime_high_temperature_1d:
        friendly_name: "OpenWeatherMap Forecast High Temperature 1d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').1.temperature }}"
      owm_daytime_high_temperature_2d:
        friendly_name: "OpenWeatherMap Forecast High Temperature 2d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').2.temperature }}"
      owm_daytime_high_temperature_3d:
        friendly_name: "OpenWeatherMap Forecast High Temperature 3d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').3.temperature }}"
      owm_daytime_high_temperature_4d:
        friendly_name: "OpenWeatherMap Forecast High Temperature 4d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').4.temperature }}"
      owm_daytime_high_temperature_5d:
        friendly_name: "OpenWeatherMap Forecast High Temperature 5d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').5.temperature }}"
      owm_overnight_low_temperature_1d:
        friendly_name: "OpenWeatherMap Forecast Low Temperature 1d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').1.templow }}"
      owm_overnight_low_temperature_2d:
        friendly_name: "OpenWeatherMap Forecast Low Temperature 2d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').2.templow }}"
      owm_overnight_low_temperature_3d:
        friendly_name: "OpenWeatherMap Forecast Low Temperature 3d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').3.templow }}"
      owm_overnight_low_temperature_4d:
        friendly_name: "OpenWeatherMap Forecast Low Temperature 4d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').4.templow }}"
      owm_overnight_low_temperature_5d:
        friendly_name: "OpenWeatherMap Forecast Low Temperature 5d"
        unit_of_measurement: '°C'
        value_template: "{{ state_attr('weather.openweathermap','forecast').5.templow }}"
      owm_condition_1d:
        friendly_name: "OpenWeatherMap Forecast Condition 1d"
        value_template: "{{ state_attr('weather.openweathermap','forecast').1.condition }}"
      owm_condition_2d:
        friendly_name: "OpenWeatherMap Forecast Condition 2d"
        value_template: "{{ state_attr('weather.openweathermap','forecast').2.condition }}"
      owm_condition_3d:
        friendly_name: "OpenWeatherMap Forecast Condition 3d"
        value_template: "{{ state_attr('weather.openweathermap','forecast').3.condition }}"
      owm_condition_4d:
        friendly_name: "OpenWeatherMap Forecast Condition 4d"
        value_template: "{{ state_attr('weather.openweathermap','forecast').4.condition }}"
      owm_condition_5d:
        friendly_name: "OpenWeatherMap Forecast Condition 5d"
        value_template: "{{ state_attr('weather.openweathermap','forecast').5.condition }}"
      owm_wind_speed_1d:
        friendly_name: "OpenWeatherMap Forecast Wind Speed 1d"
        unit_of_measurement: 'km/h'
        value_template: "{{ '%.2f'|format(state_attr('weather.openweathermap','forecast').1.wind_speed * 3.6) }}"
      owm_wind_speed_2d:
        friendly_name: "OpenWeatherMap Forecast Wind Speed 2d"
        unit_of_measurement: 'km/h'
        value_template: "{{ '%.2f'|format(state_attr('weather.openweathermap','forecast').2.wind_speed * 3.6) }}"
      owm_wind_speed_3d:
        friendly_name: "OpenWeatherMap Forecast Wind Speed 3d"
        unit_of_measurement: 'km/h'
        value_template: "{{ '%.2f'|format(state_attr('weather.openweathermap','forecast').3.wind_speed * 3.6) }}"
      owm_wind_speed_4d:
        friendly_name: "OpenWeatherMap Forecast Wind Speed 4d"
        unit_of_measurement: 'km/h'
        value_template: "{{ '%.2f'|format(state_attr('weather.openweathermap','forecast').4.wind_speed * 3.6) }}"
      owm_wind_speed_5d:
        friendly_name: "OpenWeatherMap Forecast Wind Speed 5d"
        unit_of_measurement: 'km/h'
        value_template: "{{ '%.2f'|format(state_attr('weather.openweathermap','forecast').5.wind_speed * 3.6) }}"

Note I’m in Canada, and temperatures are reported in Celsius here. The wind speed is reported in m/s in my area, so I used a multiplication factor of 3.6 to convert it to km/h. The '%.2f'|format(...) code formats the result to 2 decimal places.

Once sensors.yaml is saved and HA is restarted, it should create the new sensor entities. Next we can create the weather-list tile in TileBoard as follows:

{
   position: [0, 0],
   type: TYPES.WEATHER_LIST,
   width: 2,
   height: 1.5,
   title: 'Forecast',
   id: {},
   state: false,
   icons: {
      'clear-day': 'clear',
      'clear-night': 'nt-clear',
      'cloudy': 'cloudy',
      'rain': 'rain',
      'sleet': 'sleet',
      'snow': 'snow',
      'snowy-rainy': 'sleet',
      'wind': 'hazy',
      'fog': 'fog',
      'partly-cloudy-day': 'partlycloudy',
      'partly-cloudy-night': 'nt-partlycloudy',
      'pouring': 'rain'
   },
   hideHeader: false,
   secondaryTitle: 'Wind',
   list: [1,2,3,4,5].map(function (id) {
      var forecast = "&sensor.owm_overnight_low_temperature_" + id + "d.state - ";
      forecast += "&sensor.owm_daytime_high_temperature_" + id + "d.state";
      forecast += "&sensor.owm_daytime_high_temperature_" + id + "d.attributes.unit_of_measurement";

      var wind = "&sensor.owm_wind_speed_" + id + "d.state";
      wind += " &sensor.owm_wind_speed_" + id + "d.attributes.unit_of_measurement";

      return {
         date: function () {
            var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
            return d.toString().split(' ').slice(1, 3).join(' ');
         },
         icon: "&sensor.owm_condition_" + id + "d.state",
         //iconImage: null, replace icon with image
         primary: forecast,
         secondary: wind
      }
   })
}

I added in a couple more icon definitions (for ‘snowy-rainy’ and ‘pouring’), which otherwise don’t map across to icons matching TileBoard’s expectations. There may be more that I haven’t come across yet.

Adding state: false hides the little rectangle in the top right of the tile, which would otherwise obscure the headings.

Result looks like this:

Screenshot 2021-03-25 181005

3 Likes

I am not able to pull up tileboard. Here is the error that I getting. I have tried to start from scratch several times. Here is the error I am getting. Any help is appreciated.

Loading failed for the with source “http://192.168.1.4:8123/local/tileboard/scripts/app-184eb365.js”. index.html:33:1

It says that the script file is not present. Just make sure that you’ve extracted the files in the proper directory and with all subdirectories included.

I think there was an error in my first download. I downloaded again and those files were there. I appreciate the quite response.

Nice work.
Note that there is no need to create separate entities in HA. The extra forecast states can be dynamically computed from tileboard (which I personally prefer as then there is no need to maintain and sync two separate places).
For example:

{
   position: [0, 0],
   type: TYPES.WEATHER_LIST,
   width: 2,
   height: 1.5,
   title: 'Forecast',
   id: {},
   state: false,
   icons: {
      'clear-day': 'clear',
      'clear-night': 'nt-clear',
      'cloudy': 'cloudy',
      'rain': 'rain',
      'sleet': 'sleet',
      'snow': 'snow',
      'snowy-rainy': 'sleet',
      'wind': 'hazy',
      'fog': 'fog',
      'partly-cloudy-day': 'partlycloudy',
      'partly-cloudy-night': 'nt-partlycloudy',
      'pouring': 'rain'
   },
   hideHeader: false,
   secondaryTitle: 'Wind',
   list: [1,2,3,4,5].map(function (id) {
      var ENTITY_ID = 'weather.openweathermap'
      return {
         date: function () {
            var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
            return d.toString().split(' ').slice(1, 3).join(' ');
         },
         icon: function () {
            var entityState = this.states[ENTITY_ID];
            return entityState.attributes.forecast[id].condition
         },
         //iconImage: null, replace icon with image
         primary: function () {
            var entityState = this.states[ENTITY_ID];
            var forecast = entityState.attributes.forecast[id]
            return forecast.templow + ' - ' + forecast.temperature + ' °C'
         },
         secondary: function () {
            var entityState = this.states[ENTITY_ID];
            var forecast = entityState.attributes.forecast[id]
            return Number.parseInt(forecast.wind_speed * 3.6) + ' km/h'
         }
      }
   })
},

Hi,

I’m new to this Home Assistant, but idea was to get separate screen connected to Raspberry to work as wall panel. I followed these instructions first: Installing Home Assistant Supervised on a Raspberry Pi with Debian 10 (this was ok)
then moved to: https://singlebox.tv/2020/01/03/how-to-all-in-one-home-assistant-and-touch-panel/ and tried to use it, but got an error and tried instead instructions as told in how-to-use
" * Make sure that you have Home Assistant 0.77 or greater installed as only new authentication system is supported from now on

  • Download the latest release zip file ( Tileboard.zip ) from and unpack to a directory of your choice
  • In chosen directory rename config.example.js to config.js and adjust it for your needs
  • Create a directory called tileboard inside www directory in HA’s config path and copy all unpacked files there.
  • TileBoard will be available at http://HASS_IP:8123/local/tileboard/index.html and will prompt you for your login credentials after restarting Home Assistant."

So I took that zip and copied all to HA to …www/tileboard folder. (I emptied it totally first.) Now I get error:
x.x.x.x:8123 says
The “config.js” configuration file has loaded but window.CONFIG is not defined!
Please make sure that it defines a CONFIG variable with proper configuration.

Now I’m totally lost. What does above mean and where I should fix it?

Thanks for any help :slight_smile: :slight_smile:

Haa, I found it :slight_smile: :blush:
I was missing ‘’ around my token.

Thank @rchl, this is awesome! I like it also because it allows more flexibility in interpreting and formatting the values retrieved from entities. Using your example, I was able to also add in the wind bearing as follows:

   secondary: function () {

      var entityState = this.states[ENTITY_ID];

      var forecast = entityState.attributes.forecast[id]

      var bearingList = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N']

      var bearingId = Number.parseInt(1 + (8 * (forecast.wind_bearing - 22.5) / 360))

      return bearingList[bearingId]  + ' ' + Number.parseInt(forecast.wind_speed * 3.6) + ' km/h'

   }

While this admittedly could be done by adding another template entity in HA, doing it in TileBoard is much more concise.

Is there a way to use Tileboard with Nabu Casa? I get an “unable to connect” error. Here is a sample of the URL I am using: https://(nabu_casa_url).ui.nabu.casa/local/tileboard/index.html. I also created a long live token and put it in the config but did not have any luck.

Hi,
thank you for good example :slight_smile:
I got this working except: I can’t get icons to work :frowning: My icons say only “undefined”.
Where should I have those icons loaded? Do I need some additional configuration for those?
I haven’t been able to find any instructions for icons so far.
Thanks again.

Added: I’d really appreciate if someone could explain how these icons should work. I’m using zip-version of Tileboard as instructed and none of icons are appearing.
Haa: now I managed to get some appear, but I have still “undefined” text between weather icon and temperature… So I assume that files in assets-folder are these icons?
Hmm: can it be simply that icon mappings are missing? So that I have to add rest of those in icons list? at least that seemed to help…

Now I’ve gotten it mostly work, but there are 2 things I’d like to adjust:

  • column titles: where to chance Date and Forecast texts?
  • where I can adjust columns as Forecast aligns with temperature but not with icon
    image

dear guys, how can i use a function for the group title? a anonymous function

Can you share how you did get the icons to work?
I have some and others not…

image

Hi,
Updated - deleted this part as it was wrong. See answers from rob51i03 and rchl, they explain this :slight_smile:

How did you get it to show low temperature? Mine just gives undefined error even if tried to check syntax from openweathermap fields.

Edited: I tried to look fields from OpenWeatherMap, but that don’t match much, so I’m quite confused… (https://openweathermap.org/api/hourly-forecast#parameter) or (https://openweathermap.org/api/one-call-api#parameter)

Hi all,

Is there a there a way to have a tile icon based on the state of a different entity?

For example:

icon: function (item, entity) {
     if (this.states['REPLACE WITH SEPERATE ENTITY'].state==playing)
          return 'mdi-pause'
     else
          return 'mdi-play '
}

Hi ,
Unable to find the main.less file.
Could you please help me out
Thank You

Hi,

Could you be so nice and explain, where the first part of icon mapping is taken? I’m still missing many of icons, but I can’t figure out what term I should map :frowning:
like in:

 icons: {
      'clear-day': 'clear',

where can I find all possibilities for ‘clear-day’ part of terms?

Hi @G3THD,

Did you check the examples? https://github.com/resoai/TileBoard/blob/0a1f78b2f0fdd25a9648a601e02a6ef8ee4c75eb/TILE_EXAMPLES.md

Hi,
How to display google calendar events on tile?
Thank You

These may vary, depending on which API service you are using to obtain your weather forecast, so Home Assistant’s Developer Tools are your best resource here. Navigate to Developer Tools > States and then enter the name of your weather entity, e.g. weather.openweathermap in the Entity field.
In the State Attributes that appear below, look for “condition” values. For example:

forecast:
  - datetime: '2021-04-08T13:43:06.903858-04:00'
    temperature: 23
    templow: 13
    condition: sunny
    precipitation_probability: 0
  - datetime: '2021-04-09T13:43:06.903893-04:00'
    temperature: 14
    templow: 8
    condition: rainy
    precipitation_probability: 60
  - datetime: '2021-04-10T13:43:06.903927-04:00'
    temperature: 19
    templow: 9
    condition: partlycloudy
    precipitation_probability: 0

There you will find the precise values for the weather conditions that are currently missing / not mapping to tileboard’s icons. Do this over time, each time you have a missing icon in your forecast, until you have captured all the possibilities.

1 Like

I’ll add to that that TileBoard uses the icon set from https://peter.build/weather-underground-icons/ and that one doesn’t have icons for some of the possible states.

For reference, here are also the state mappings that TileBoard has by default as of now: https://github.com/resoai/TileBoard/blob/313b7476eb0e8ede1208cdda454433dbcb63f185/TILE_EXAMPLES.md#L627-L644

Some of the states are mapped to unknown because there is not really any good icon available for those.

1 Like