Dear @resoai , how can i use a function for the group title? a anonymous function
Not at the moment.
Not possible at the moment but you can control group’s visibility to show or hide the whole group.
thanks… i was trying to replace the group names eg: tomorrow with the actual week day name.
Can’t do that now.
Dear TileBoard team,
I stucked a little bit and would need small advise: what is the best and proper way of setting entity state in HA by TileBoard function()? So far I used hassio RESTapi, however due to security reasons would like to avoid using tokens.
is it possible to let the climate tile get 0,5 steps?
You can create a function like this:
var currentGroup1 = 'Group title';
function setGroupTitle(newTitle) {
var path = "//div[contains(@class,'group-title') and text() = '" + currentGroup1 + "']";
var group = document.evaluate(path, document, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null);
group.singleNodeValue.innerHTML = newTitle;
currentGroup1 = newTitle;
}
You can call that in a function (like in this case in the action of a tile):
action: function(item, entity) {
setGroupTitle('New title')
},
A click on that tile changes the group with Group title to New title.
Obviously this needs more work, but basically you can use xpath and javascript for any element.
This is because tileboard is HTML and thus can be manipulated
1 Like
Is there a way to use colored MDI icons in Tileboard? For example I would like to use lightbulb-outline in white if my lights are turned of and lightbuld-on in yellow if they are turned on.
Yes,
You need the custom css with something like
.item.-th-light.-on .mdi-lightbulb-on:before {
color: #fdd835 !important;
}
anyone knows why there isnt a theme.css or a main.css in the /styles folder? All i see is the styles-6f173982.css and styles-6f173982.css.map
Thanks
i put this in the custom.css file and it doesnt seem to have an impact. Upon looking at the developer mode tab, I have that error
. not sure how to correct it.
It does look like the custom.css is in the wrong place. Is it inside the /styles directory?
You are not supposed to change the original styles as those changes would be lost on update.
yup custom.css is in the /styles directory.
Are you using the addon?
And what is the content of your custom.css?
it seems like it’s a cache issue. I cleared cash and i see the changes I have in custom.css
This is all I have in there
it looks like i have to clear cache everytime i make changes in custom.css to see the change, pressing F5 doesn’t do it. This is quite annoying… not sure if you know what the issue is. Before I can just hit F5 and see the changes i made in custom.css.
You can press shift+F5 to force a reload.
1 Like
just tried it and it works. Thanks a bunch, appreciate the help!
Hi
I am new and I am trying to build my verson of Tileboard!
It 's appear better for me than Lovelace 
I have some issue with weather icon !
Should be :
is:
the small icon are missing and I have a “undefined” top right !
For the second, should be :
and is :
What is the issue?
items: [
{
position: [0, 0],
height: 1.2,
//classes: ['-compact'], // enable this if you want a little square tile (1x1)
type: TYPES.WEATHER,
id: 'group.weather',
state: '&weather.openweathermap.state', // label with weather summary (e.g. Sunny)
// Resolved value must either match one of the supported icons or be mapped
// to one using the 'icons' option. See the 'icons' option for more information.
icon: '&weather.openweathermap.state',
// Use this one if you have an URL of the image to show.
//iconImage: '&sensor.my_weather_icon.state',
// A map from sensor's state (key) to icon name (value).
// The value must match the format:
// [dark-][nt-]icon_name
// where dark- (optional) selects the dark version of the icon,
// and nt- (optional) selects the night version of the icon and the icon_name can be one of:
// chanceflurries
// chancerain
// chancesleet
// chancesnow
// chancetstorms
// clear
// cloudy
// flurries
// fog
// hazy
// mostlycloudy
// mostlysunny
// partlycloudy
// partlysunny
// rain
// sleet
// snow
// sunny
// tstorms
// unknown
// So for example, to map 'clear-night' sensor value to a respective icon, set the value to
// 'nt-clear' (for light icon) or 'dark-nt-clear' (for dark icon).
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'unknown',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'rain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'wind': 'unknown',
'windy': 'unknown',
'windy-variant': 'unknown'
},
// A map from sensor's state (key) to human readable and possibly localized strings.
states: {
'clear-night': 'Clear, night',
'cloudy': 'Cloudy',
'exceptional': 'Exceptional',
'fog': 'Fog',
'hail': 'Hail',
'lightning': 'Lightning',
'lightning-rainy': 'Lightning, rainy',
'partlycloudy': 'Partly cloudy',
'pouring': 'Pouring',
'rainy': 'Rainy',
'snowy': 'Snowy',
'snowy-rainy': 'Snowy, rainy',
'sunny': 'Sunny',
'windy': 'Windy',
'windy-variant': 'Windy'
},
fields: { // most of that fields are optional
summary: '&weather.openweathermap.state',
temperature: '&sensor.openweathermap_temperature.state',
temperatureUnit: '&sensor.openweathermap_temperature.attributes.unit_of_measurement',
windSpeed: '&sensor.openweathermap_wind_speed.state',
windSpeedUnit: '&sensor.openweathermap_wind_speed.attributes.unit_of_measurement',
humidity: '&sensor.openweathermap_humidity.state',
humidityUnit: '&sensor.openweathermap_humidity.attributes.unit_of_measurement',
pressure: '&sensor.openweathermap_pressure.state',
pressureUnit: '&sensor.openweathermap_pressure.attributes.unit_of_measurement',
list: [
// custom line
'Rain: '
+ '&sensor.openweathermap_rain.state '
+ '&sensor.openweathermap_rain.attributes.unit_of_measurement',
'Snow: '
+ '&sensor.openweathermap_snow.state '
+ '&sensor.openweathermap_snow.attributes.unit_of_measurement',
'Cloud coverage '
+ '&sensor.openweathermap_cloud_coverage.state'
+ '&sensor.openweathermap_cloud_coverage.attributes.unit_of_measurement',
]
}
},
{
position: [1, 0],
type: TYPES.WEATHER_LIST,
width: 2,
height: 1.2,
title: 'TEST',
id: {},
icons: {
'clear-day': 'clear',
'clear-night': 'nt-clear',
'cloudy': 'cloudy',
'exceptional': 'unknown',
'fog': 'fog',
'hail': 'sleet',
'lightning': 'chancestorms',
'lightning-rainy': 'tstorms',
'partly-cloudy-day': 'partlycloudy',
'partly-cloudy-night': 'nt-partlycloudy',
'pouring': 'rain',
'snowy': 'snow',
'snowy-rainy': 'sleet',
'wind': 'unknown',
'windy': 'unknown',
'windy-variant': 'unknown'
},
hideHeader: false,
secondaryTitle: 'Wind',
// dateFormat: 'MMM d', // default value
list: [1,2,3,4,5].map(function (id) {
var ENTITY_ID = 'weather.openweathermap'
return {
date: function () {
var entityState = this.states[ENTITY_ID];
return entityState.attributes.forecast[id].datetime
},
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]
// Wind speed. Convert m/s to km/h.
// return Number.parseInt(forecast.wind_speed * 3.6) + ' km/h'
// Or if you prefer precipitation
return (forecast.precipitation || 0) + ' mm'
}
}
})
}
thank you in advance for your help
sebastien