Great work!
Just one question. I installed TileBoard now through the Supervisor by adding the repository. How do I access the web page to the dashboard on my old iPad?
hello. i think the the forecast in this format is not correct. it is only the date that changes but it does not drag along the forecasts. i will explain and add some photos to my resoning: i created 2 forecast lists - one with the forecast provided by default(without the algorithm for nexr days) and one with the forecast including the next day algorithm. by comparing the lines, i can see only the text for the hour was replaced by the text for the day. the temperatures are the same. that means that the coding does not really search for the forecast of the next day, but dusplays the forecast for the next hour. by searching in the output of the weather.owm in HA, i can see that the temperature for the next day are nowhere near the one displayed.
please confirm/infirm my statement. thank You in advance.
hello. for the undefined add a line with “state: false” without the quote signs. the icons do not display because their definition is not identical to the one used by the weather app in HA. if it is openweathermap then you can replace the current definition with the one here below:
‘sunny’: ‘clear’,
‘clear-night’: ‘nt-clear’,
‘cloudy’: ‘cloudy’,
‘rainy’: ‘rain’,
‘sleet’: ‘sleet’,
‘snowy’: ‘snow’,
‘windy’: ‘hazy’,
‘fog’: ‘fog’,
‘partlycloudy’: ‘partlycloudy’,
‘night-partly-cloudy’: ‘nt-partlycloudy’
the values displayed in the wind area are infact the values for precipitation as the template of the code you use has the return value active for precipitation, not for wind speed. remove the // fro the line with the wind speed definition and add it // to the active line. that way the info displayed will be in pahse with the title - wind for wind.
Hi resoai,
i have a question, your are speaking about main.css.
I do not find it in repost folder!
i am not a js specialist! how can i implement it or add custom format?
thank you
sebastien
You should create a file called custom.css and add your CSS code there. Please do not edit any other files.
Hello
For me openweather is too inaccurate so I made weather tiles using default home assistant weather Met.no. Titles etc. in Greek so you can edit them to your preference.
{
position: [7, 2.5],
width: 1,
height: 1.5,
type: TYPES.WEATHER,
title: false,
id: 'weather.spiti',
state: '&weather.spiti.state',
icon: '&weather.spiti.state',
icons: {
'sunny': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rainy': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'snowy-rainy': 'sleet',
'wind': 'hazy',
'fog': 'fog',
'partlycloudy': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'rain'
},
states: { 'sunny': 'Αίθριος',
'clear-night': 'Ξαστεριά',
'cloudy': 'Νεφελώδης',
'rainy': 'Βροχερός',
'sleet': 'sleet',
'snow': 'Χιονόπτωση',
'snowy-rainy': 'sleet',
'wind': 'hazy',
'fog': 'Ομιχλώδης',
'partlycloudy': 'Μερικώς Νεφελώδης',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'Βροχερός'
},
fields: {
temperature: '&weather.spiti.attributes.temperature ',
temperatureUnit: '°C',
windSpeed: '&weather.spiti.attributes.wind_speed ',
windSpeedUnit: ' kmh',
humidity: '&weather.spiti.attributes.humidity',
humidityUnit: '&sensor.spiti_humidity.attributes.unit_of_measurement',
list: [
'Ατμ. Πίεση: '
+ '&weather.spiti.attributes.pressure '
+ 'hPa',
'Ύψος Βροχής: '
+ '&sensor.precipitation_today.state '
+ 'mm',
//'Snow: '
//+ '&sensor.openweathermap_snow.state '
//+ '&sensor.openweathermap_snow.attributes.unit_of_measurement'
]
}
},
{
position: [6, 4],
type: TYPES.WEATHER_LIST,
width: 2,
height: 1,
title: false,
id: {},
state: false,
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'rainy': 'rain',
'sleet': 'sleet',
'snow': 'snow',
'snowy-rainy': 'sleet',
'wind': 'hazy',
'fog': 'fog',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'rain'
},
hideHeader: true,
secondaryTitle: 'Wind',
list: [0,1,2,3,4].map(function (id) {
var ENTITY_ID = 'weather.spiti'
return {
date: function () {
var d = new Date(Date.now() + id * 24 * 60 * 60 * 1000);
var weekday = new Array(7);
weekday[6] = "Κυριακή";
weekday[0] = "Δευτέρα";
weekday[1] = "Τρίτη";
weekday[2] = "Τετάρτη";
weekday[3] = "Πέμπτη";
weekday[4] = "Παρασκευή";
weekday[5] = "Σάββατο";
return weekday[d.getDay()];
// 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) + ' km/h'
}
/*secondary: function () {
var entityState = this.states[ENTITY_ID];
var forecast = entityState.attributes.forecast[id]
return Number.parseInt(forecast.precipitation) + 'mm'
}*/
}
})
},
Only this needed to conf yaml
sensor
- platform: template
precipitation_today:
friendly_name: "Today Forecast Precipitation"
value_template: "{{ state_attr('weather.spiti','forecast').0.precipitation}}"
2 Likes
Hi anyone know if there’s a way to make the state of sensors show up as whole numbers in the text list tile?
Thanks
Hi Vegetate7,
Thank you for sharing scrip for dual sensor.
It’s works fine I see the temp+humidity but I can not managed the position of the text.
I have copy/pst the poposed text in a file named custom.css. This file is tileboard/styles folder but if I change font size or margin nothing append !
What I am doing wrong?
thank you for your help
sebastien
Hi Resoai,
I have used your code to have a batterie level info.
my code is :
{
position: [0, 0],
width: 1,
id: 'sensor.lumi_lumi_sensor_test_1_power',
title: 'SENSOR 1',
value: '&sensor.lumi_lumi_sensor_test_1_power',
unit: '%',
icon: function(){
var battery_level = this.states[item].attributes.battery_level || 0;
var battery_round = parseInt(battery_level / 10) * 10;
if (battery_round >= 100) return 'mdi-battery';
else if (battery_round > 0) return 'mdi-battery-' + battery_round;
else return 'mdi-battery-alert';
}
The result is :
What is wrong on code (no icon) and hos can I increase a little bit the size of the batterie level?
thank you
regards
sébastien
this.states[item].attributes.battery_level
I’ll let you figure this one out yourself 
Unfortunately I can not give much help here. My code is quite old, the classes in original code can be changed, ot you using diferent theme or something else. Try to use browser’s developing tools (like in Chrome for example) to figure out which classes actually used.
I’m thinking that it might be a good idea to ask questions in Discussions · resoai/TileBoard · GitHub instead of using this huge thread.
Feel free to open a discussion there with your questions.
1 Like
Hi
I am using this for outside temperature:
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Outside',
//subtitle: "Temperature",
id: 'sensor.lumi_lumi_weather_temperature_buro',
state: 'Humidity: &sensor.lumi_lumi_weather_humidity_buro.state%',
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
My wisch is to change the color of the temperature text in red if the temperature is negative!
And if it’s possible the text have to flash/blink!
is this possible?
thans you 
Hi,
I want to add the AUTOMATION tile.
Using the id Tileboard gives an error: 'entity ‘1621087924816’ not found.
This is my automation (from automation.yaml):
- id: ‘1621087924816’
alias: Keuken licht aan
description: ‘’
Look up name of the entity in dev tools.
I much prefer using TileBoard to HADashboard or Lovelace.
There is one thing I am struggling to do. Can anyone tell me if there is a way of getting an entity logbook to show up in Tileboard?
Hi, can you share your .css?
Thanks.
Thanks Resoai…that did the job !
Hi all,
I want to create a list with weather alert !
My sensor give me this 
I have tried this :
{
position: [0, 3],
width: 2,
height: 1,
title: 'Meteo alert',
id: {}, // since we are binding each list item to different sensor, so we simply use an empty object
type: TYPES.TEXT_LIST,
state: false,
list: [
{
title: 'Time to office',
icon: 'mdi-weather-cloudy-alert',
Value: function () {
var entityState ='sensor.25_weather_alert';
return Neige-verglas
},
{
title: 'Pluie-inondation',
icon: 'mdi-weather-cloudy-alert',
value: function () {
var entityState = 'sensor.25_weather_alert';
return Pluie-inondation
},
{
title: 'Vent violent',
icon: 'mdi-weather-cloudy-alert',
Value: function () {
var entityState = 'sensor.25_weather_alert';
return Vent_violent
},
{
title: 'Inondation',
icon: 'mdi-weather-cloudy-alert',
value: Value: function () {
var entityState = 'sensor.25_weather_alert';
return Inondation
},
]
},
But it doesnt work.
Can you please help me?
thank you in advance
regards
Here are my two Google Nest thermostats in the LL UI:
What is the closest I can get to this in TileBoard? I tried a climate tile and it was pretty miserable looking, so I switched to a basic sensor tile to just show temp without all of the control:
{
position: [0, 0],
type: TYPES.SENSOR,
title: 'Down',
subtitle: "Temperature",
id: 'sensor.downstairs_temperature',
unit: 'F', // override default entity unit
state: 'Humidity: &sensor.downstairs_humidity.state%',
filter: function (value) { // optional
var num = parseFloat(value);
return num && !isNaN(num) ? num.toFixed(1) : value;
}
},
But I do not see a way to incorporate my HVAC_MODES… The idea being to color the tile based on if the system is heating, cooling, or off.
For reference:
hvac_modes:
- 'off'
- cool
- heat_cool
- heat
- fan_only
min_temp: 45
max_temp: 95
fan_modes:
- 'on'
- 'off'
preset_modes:
- none
- eco
current_temperature: 73
temperature: null
target_temp_high: 73
target_temp_low: 65
fan_mode: 'off'
hvac_action: 'off'
preset_mode: none
friendly_name: Upstairs
supported_features: 27
Can anyone help either get the climate dial looking decent, or help incorporate climate attributes into a sensor tile?