A while ago I’ve mentioned my Docker Image for TileBoard. It didn’t work anymore since the version 2 release. Took me a while after the first users noticed it, but it is fixed now… 
Please see https://hub.docker.com/r/fbrinker/tileboard for details.
I’ve also added version tags now, so you can stick with an older version if anything breaks for you.
Best regards,
Florian
Hi. One question regarding blinds.
I grouped blinds in my house (ground floor, first floor, whole house…) and I used TYPES.COVER for this.
The issue I’m having is that all blinds in the group must have the same state in order to close them or open them.
For example, all blinds in the house are closed except for one and I am unable to open all blinds in the group:
The Up arrow will be available only after I close the last blind, but from HA I can open or close the blinds:
Here is the current config:
{
position: [0, 2],
title: 'wholehouse',
type: TYPES.COVER,
id: 'cover.wholehouse',
state: false,
}
I tried different scenarios, changed the states, removed states…
Am I missing something in my config?
Thanks
Unfortunately I do not have any blinds to play around, I assume you used cover soup to group all of them together?
TileBoard disables up arrow when the state of the entity is either open or if position is know and position is set to 100%:
You could probably use template cover that would actually send relevant commands to all cover yet will not report the state.
Does the sensor have its id set to any entity that updates regularly?
Yes it has. The Tiles are configured as following:
{
position: [3, 1],
width: 2,
height: 1,
type: TYPES.SENSOR,
title: '',
id: 'sensor.solaredge_current_power',
unit: 'W', // override default entity unit
state: false, // hidding state
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
},
refresh: 10000, // 100 seconds
bgOpacity: 0.7,
bg: '<local-url>.png',
},
You can remove refresh as it does not work with this tile. You can also try adding a random string to the URL to avoid it being cached by the browser: bg: '<local-url>.png?' + 3000 + Math.random() * 1000;
Ok thanks! So then the background only refreshes when the whole page refreshes, right? I would like it to refresh without having to a full refresh
Nope. It should refresh when sensor value of that tile changes. The extra random bit is for tile’s bg to avoid caching the image.
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:
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
Tileboard.zip ) from and unpack to a directory of your choiceconfig.example.js to config.js and adjust it for your needstileboard inside www directory in HA’s config path and copy all unpacked files there.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
Haa, I found it 
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
I got this working except: I can’t get icons to work 
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:
dear guys, how can i use a function for the group title? a anonymous function