Still missing the obvious I guess.
I’ve added the classes in custom.css
i was assuming it would be like this
customStyles: function (item, entity) {
if (entity.state == 'home' ) {
return { classes: '-red' };
} else {
return {
classes: '-green'
};
}
},
I need a last little push in the right direction.
There’s another option. classes and not customStyles.
Thanks , how would above look like using classes .?
/* classes: Additional CSS classes. Use 'compact' for a compact (1x1) tile
* (optional)
*/
classes: ['-compact'],
/* customStyles: Additional styles. Enables tile customisation based on state.
* Can be used both as a object `{ 'background-color': '#FF0000' }` or,
* as a function function (item, entity) { return { 'background-color': '#FF0000' } }
* (optional)
*/
customStyles: Object || Function,
But I checked, and I’m afraid, the classes can only be static. You’d have to propose a PR introducing parseFieldValue here:
PS. Using customStyles won’t do what you like, because it cannot be applied to a child node. https://stackoverflow.com/questions/11346575/set-css-style-for-child-nodes-in-style-attribute
Thanks for elaborating, i’ll find an alternative way to report the data for this particular tile.
appreciate the help so far 
I’ve learned something new today,
I’m trying to get camera playback when I click a camera thumbnail. I have blue iris and mostly HikVision cams but also a dahua. Does anyone have this working where it streams (ideally with audio?). Is it possible to have an iframe load when you tap the camera thumbnail so I can just load the url for the stream from blue iris?
Hello,
I have been trying to add a second “page” for 24 hours but I can’t always give me an error … how do I add one page below the others?
this is my config file:
/*
This is an example configuration file.
COPY OR RENAME THIS FILE TO config.js.
Make sure you use real IDs from your HA entities.
*/
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
serverUrl: 'http://' + location.hostname + ':8123',
wsUrl: 'ws://' + location.hostname + ':8123/api/websocket',
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
//googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
//mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
debug: false, // Prints entities and state change info to the console.
pingConnection: true, //ping connection to prevent silent disconnections
// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
onReady: function () {},
header: { // https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
padding: '30px 130px 0',
fontSize: '28px'
},
right: [],
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: 'EEEE, LLLL dd', //https://docs.angularjs.org/api/ng/filter/date
}
]
},
/*screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
timeout: 300, // after 5 mins of inactive
slidesTimeout: 10, // 10s for one slide
styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [
{ bg: 'images/bg1.jpeg' },
{
bg: 'images/bg2.png',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},*/
pages: [
{
title: 'Casa',
bg: 'images/bg1.jpeg',
icon: 'mdi-home-outline', // home icon
groups: [
{
title: 'Home info',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1.5,
height: 1.5,
title: 'Consumo',
subtitle: '',
type: TYPES.GAUGE,
id: 'sensor.consumo_generale', // Assign the sensor you want to display on the gauge
value: function(item, entity){
return entity.state;
},
settings: {
size: 200, // Defaults to 50% of either height or width, whichever is smaller
type: 'full', // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 2000, // Defaults to 100
cap: 'round', // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: '', // Defaults to undefined
append: '@attributes.unit_of_measurement', // Defaults to undefined
prepend: '', // Defaults to undefined
duration: 1500, // Defaults to 1500ms
thresholds: { 0: { color: 'green'}, 850: { color: 'orange'}, 2000: { color: 'red' } }, // Defaults to undefined
labelOnly: false, // Defaults to false
foregroundColor: 'rgba(0, 150, 136, 1)', // Defaults to rgba(0, 150, 136, 1)
backgroundColor: 'rgba(0, 0, 0, 0.1)', // Defaults to rgba(0, 0, 0, 0.1)
fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
},
} ]
},
{
title: 'Second group',
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SLIDER,
//id: "input_number.volume",
id: {state: 50}, // replace it with real string id
state: false,
title: 'Custom slider',
subtitle: 'Example of subtitle',
slider: {
min: 0,
max: 100,
step: 2,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value"
}
}
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
//id: "switch.lights",
id: {state: 'off'}, // replace it with real string id (e.g. "switch.lights")
state: false,
title: 'Custom switch',
icons: {'off': 'mdi-volume-off', 'on': 'mdi-volume-high'}
},
{
position: [0, 1],
type: TYPES.ALARM,
//id: "alarm_control_panel.home_alarm",
id: { state: 'disarmed' }, // replace it with real string id
title: 'Allarme',
icons: {
disarmed: 'mdi-bell-off',
pending: 'mdi-bell',
armed_home: 'mdi-bell-plus',
armed_away: 'mdi-bell',
triggered: 'mdi-bell-ring'
},
states: {
disarmed: 'Disinserito',
pending: 'Pending',
armed_home: 'Armed home',
armed_away: 'Armed away',
triggered: 'Triggered'
}
}
]
},
{
title: '',
width: 1,
height: 3,
items: [
{
// please read README.md for more information
// this is just an example
position: [0, 0],
height: 2, // 1 for compact
//classes: ['-compact'],
type: TYPES.WEATHER,
id: {},
state: function () {return 'Sunny'}, // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
icon: 'clear-day',
icons: { 'clear-day': 'clear'},
fields: {
summary: 'Sunny',
temperature: '18',
temperatureUnit: 'C',
windSpeed: '5',
windSpeedUnit: 'kmh',
humidity: '50',
humidityUnit: '%',
list: [
'Feels like 16 C'
/*
'Feels like '
+ '&sensor.dark_sky_apparent_temperature.state'
+ '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
'Pressure '
+ '&sensor.dark_sky_pressure.state'
+ '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
'&sensor.dark_sky_precip_probability.state'
+ '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
+ ' chance of rain'
*/
]
}
}
]
}
]
},
// -------- inizio pagina luci --------
{
title: 'Luci',
bg: 'images/bg1.jpeg',
icon: 'mdi-lightbulb-on-outline',
groups: [
{
title: '',
width: 2,
height: 3,
items: [
{
position: [0, 0],
type: TYPES.SWITCH,
id: 'light.luce_ufficio',
title: '',
subtitle: 'Ufficio',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 1],
type: TYPES.SWITCH,
id: 'light.luce_cucina',
title: '',
subtitle: 'Cucina',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 2],
type: TYPES.SWITCH,
id: 'light.luce_sala',
title: '',
subtitle: 'Sala',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 3],
type: TYPES.SWITCH,
id: 'light.arcate_tv',
title: '',
subtitle: 'Arcate TV',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 0],
type: TYPES.SWITCH,
id: 'light.luce_mobile_ingresso',
title: '',
subtitle: 'Mobile ingresso',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 1],
type: TYPES.SWITCH,
id: 'light.luce_anti_bagno',
title: '',
subtitle: 'Antibagno',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 2],
type: TYPES.SWITCH,
id: 'light.luce_bagno_sala',
title: '',
subtitle: 'Bagno sala',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 3],
type: TYPES.SWITCH,
id: 'light.luce_camera_mare',
title: '',
subtitle: 'Camera mare',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 0],
type: TYPES.SWITCH,
id: 'light.luce_camera_matrimoniale',
title: '',
subtitle: 'Camera matrimoniale',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 1],
type: TYPES.SWITCH,
id: 'light.luce_cabina_armadio',
title: '',
subtitle: 'Cabina armadio',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 2],
type: TYPES.SWITCH,
id: 'light.luce_bagno_matrimoniale',
title: '',
subtitle: 'Bagno camera',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 3],
type: TYPES.SWITCH,
id: 'light.luce_specchio_matrimoniale',
title: '',
subtitle: 'Specchio bagno camera',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 0],
type: TYPES.SWITCH,
id: 'light.luce_doccia_matrimoniale',
title: '',
subtitle: 'Doccia bagno camera',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 1],
type: TYPES.SWITCH,
id: 'light.luce_bagno_grande',
title: '',
subtitle: 'Bagno grande',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 2],
type: TYPES.SWITCH,
id: 'light.luce_doccia_bagno_grande',
title: '',
subtitle: 'Doccia bagno grande',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 3],
type: TYPES.SWITCH,
id: 'light.luce_lavanderia',
title: '',
subtitle: 'Lavanderia',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 0],
type: TYPES.SWITCH,
id: 'light.luce_pensili_lavanderia',
title: '',
subtitle: 'Mobile ingresso',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 1],
type: TYPES.SWITCH,
id: 'light.luce_camera_monte',
title: '',
subtitle: 'Camera monte',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 2],
type: TYPES.SWITCH,
id: 'light.luce_segnapasso',
title: '',
subtitle: 'Segnapasso',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 3],
type: TYPES.SWITCH,
id: 'light.luce_esterno_terrazzo_ingresso',
title: '',
subtitle: 'Esterno terrazzo ingresso',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 0],
type: TYPES.SWITCH,
id: 'light.luce_vetro',
title: '',
subtitle: 'Luce vetro',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 1],
type: TYPES.SWITCH,
id: 'light.luce_esterno_piano_terra',
title: '',
subtitle: 'Esterno piano terra',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 2],
type: TYPES.SWITCH,
id: 'light.luce_esterno_terrazzi_secondo_piano',
title: '',
subtitle: 'Esterno terrazzi 2 piano',
states: {
on: "On",
off: "Off"
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
]
},
// -------- fine pagina luci --------
],
}
],
}
see photo:
thank you very much
Hi @Luca_Vasini,
you should just be able to add the following code to the bottom of the page:
{
title: "Second Page",
bg: "images/bg2.png",
bgOpacity: "0.1",
icon: "mdi-music",
groups: [
{
title: "",
width: 2,
height: 3,
items: [],
},
],
},
after the above code, and the last page - you should only have
],
};
Hopefully helps…
Hi @Luca_Vasini,
had a spare two mins, so copied your code and added another page into the bottom - so posting it back here - all works for me.
/*
This is an example configuration file.
COPY OR RENAME THIS FILE TO config.js.
Make sure you use real IDs from your HA entities.
*/
var CONFIG = {
customTheme: CUSTOM_THEMES.TRANSPARENT, // CUSTOM_THEMES.TRANSPARENT, CUSTOM_THEMES.MATERIAL, CUSTOM_THEMES.MOBILE, CUSTOM_THEMES.COMPACT, CUSTOM_THEMES.HOMEKIT, CUSTOM_THEMES.WINPHONE, CUSTOM_THEMES.WIN95
transition: TRANSITIONS.ANIMATED_GPU, //ANIMATED or SIMPLE (better perfomance)
entitySize: ENTITY_SIZES.NORMAL, //SMALL, BIG are available
tileSize: 150,
tileMargin: 6,
serverUrl: "http://" + location.hostname + ":8123",
wsUrl: "ws://" + location.hostname + ":8123/api/websocket",
authToken: null, // optional long-lived token (CAUTION: only if TileBoard is not exposed to the internet)
//googleApiKey: "XXXXXXXXXX", // Required if you are using Google Maps for device tracker
//mapboxToken: "XXXXXXXXXX", // Required if you are using Mapbox for device tracker
debug: false, // Prints entities and state change info to the console.
pingConnection: true, //ping connection to prevent silent disconnections
// next fields are optional
events: [],
timeFormat: 24,
menuPosition: MENU_POSITIONS.LEFT, // or BOTTOM
hideScrollbar: false, // horizontal scrollbar
groupsAlign: GROUP_ALIGNS.HORIZONTALLY, // or VERTICALLY
onReady: function () {},
header: {
// https://github.com/resoai/TileBoard/wiki/Header-configuration
styles: {
padding: "30px 130px 0",
fontSize: "28px",
},
right: [],
left: [
{
type: HEADER_ITEMS.DATETIME,
dateFormat: "EEEE, LLLL dd", //https://docs.angularjs.org/api/ng/filter/date
},
],
},
/*screensaver: {// optional. https://github.com/resoai/TileBoard/wiki/Screensaver-configuration
timeout: 300, // after 5 mins of inactive
slidesTimeout: 10, // 10s for one slide
styles: { fontSize: '40px' },
leftBottom: [{ type: SCREENSAVER_ITEMS.DATETIME }], // put datetime to the left-bottom of screensaver
slides: [
{ bg: 'images/bg1.jpeg' },
{
bg: 'images/bg2.png',
rightTop: [ // put text to the 2nd slide
{
type: SCREENSAVER_ITEMS.CUSTOM_HTML,
html: 'Welcome to the <b>TileBoard</b>',
styles: { fontSize: '40px' }
}
]
},
{ bg: 'images/bg3.jpg' }
]
},*/
pages: [
{
title: "Casa",
bg: "images/bg1.jpeg",
icon: "mdi-home-outline", // home icon
groups: [
{
title: "Home info",
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1.5,
height: 1.5,
title: "Consumo",
subtitle: "",
type: TYPES.GAUGE,
id: "sensor.consumo_generale", // Assign the sensor you want to display on the gauge
value: function (item, entity) {
return entity.state;
},
settings: {
size: 200, // Defaults to 50% of either height or width, whichever is smaller
type: "full", // Options are: 'full', 'semi', and 'arch'. Defaults to 'full'
min: 0, // Defaults to 0
max: 2000, // Defaults to 100
cap: "round", // Options are: 'round', 'butt'. Defaults to 'butt'
thick: 6, // Defaults to 6
label: "", // Defaults to undefined
append: "@attributes.unit_of_measurement", // Defaults to undefined
prepend: "", // Defaults to undefined
duration: 1500, // Defaults to 1500ms
thresholds: { 0: { color: "green" }, 850: { color: "orange" }, 2000: { color: "red" } }, // Defaults to undefined
labelOnly: false, // Defaults to false
foregroundColor: "rgba(0, 150, 136, 1)", // Defaults to rgba(0, 150, 136, 1)
backgroundColor: "rgba(0, 0, 0, 0.1)", // Defaults to rgba(0, 0, 0, 0.1)
fractionSize: 0, // Number of decimal places to round the number to. Defaults to current locale formatting
},
},
],
},
{
title: "Second group",
width: 2,
height: 3,
items: [
{
position: [0, 0],
width: 1,
type: TYPES.SLIDER,
//id: "input_number.volume",
id: { state: 50 }, // replace it with real string id
state: false,
title: "Custom slider",
subtitle: "Example of subtitle",
slider: {
min: 0,
max: 100,
step: 2,
request: {
type: "call_service",
domain: "input_number",
service: "set_value",
field: "value",
},
},
},
{
position: [1, 0],
width: 1,
type: TYPES.SWITCH,
//id: "switch.lights",
id: { state: "off" }, // replace it with real string id (e.g. "switch.lights")
state: false,
title: "Custom switch",
icons: { off: "mdi-volume-off", on: "mdi-volume-high" },
},
{
position: [0, 1],
type: TYPES.ALARM,
//id: "alarm_control_panel.home_alarm",
id: { state: "disarmed" }, // replace it with real string id
title: "Allarme",
icons: {
disarmed: "mdi-bell-off",
pending: "mdi-bell",
armed_home: "mdi-bell-plus",
armed_away: "mdi-bell",
triggered: "mdi-bell-ring",
},
states: {
disarmed: "Disinserito",
pending: "Pending",
armed_home: "Armed home",
armed_away: "Armed away",
triggered: "Triggered",
},
},
],
},
{
title: "",
width: 1,
height: 3,
items: [
{
// please read README.md for more information
// this is just an example
position: [0, 0],
height: 2, // 1 for compact
//classes: ['-compact'],
type: TYPES.WEATHER,
id: {},
state: function () {
return "Sunny";
}, // https://github.com/resoai/TileBoard/wiki/Anonymous-functions
icon: "clear-day",
icons: { "clear-day": "clear" },
fields: {
summary: "Sunny",
temperature: "18",
temperatureUnit: "C",
windSpeed: "5",
windSpeedUnit: "kmh",
humidity: "50",
humidityUnit: "%",
list: [
"Feels like 16 C",
/*
'Feels like '
+ '&sensor.dark_sky_apparent_temperature.state'
+ '&sensor.dark_sky_apparent_temperature.attributes.unit_of_measurement',
'Pressure '
+ '&sensor.dark_sky_pressure.state'
+ '&sensor.dark_sky_pressure.attributes.unit_of_measurement',
'&sensor.dark_sky_precip_probability.state'
+ '&sensor.dark_sky_precip_probability.attributes.unit_of_measurement'
+ ' chance of rain'
*/
],
},
},
],
},
],
},
// -------- inizio pagina luci --------
{
title: "Luci",
bg: "images/bg1.jpeg",
icon: "mdi-lightbulb-on-outline",
groups: [
{
title: "",
width: 2,
height: 3,
items: [
{
position: [0, 0],
type: TYPES.SWITCH,
id: "light.luce_ufficio",
title: "",
subtitle: "Ufficio",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 1],
type: TYPES.SWITCH,
id: "light.luce_cucina",
title: "",
subtitle: "Cucina",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 2],
type: TYPES.SWITCH,
id: "light.luce_sala",
title: "",
subtitle: "Sala",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [0, 3],
type: TYPES.SWITCH,
id: "light.arcate_tv",
title: "",
subtitle: "Arcate TV",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 0],
type: TYPES.SWITCH,
id: "light.luce_mobile_ingresso",
title: "",
subtitle: "Mobile ingresso",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 1],
type: TYPES.SWITCH,
id: "light.luce_anti_bagno",
title: "",
subtitle: "Antibagno",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 2],
type: TYPES.SWITCH,
id: "light.luce_bagno_sala",
title: "",
subtitle: "Bagno sala",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [1, 3],
type: TYPES.SWITCH,
id: "light.luce_camera_mare",
title: "",
subtitle: "Camera mare",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 0],
type: TYPES.SWITCH,
id: "light.luce_camera_matrimoniale",
title: "",
subtitle: "Camera matrimoniale",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 1],
type: TYPES.SWITCH,
id: "light.luce_cabina_armadio",
title: "",
subtitle: "Cabina armadio",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 2],
type: TYPES.SWITCH,
id: "light.luce_bagno_matrimoniale",
title: "",
subtitle: "Bagno camera",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [2, 3],
type: TYPES.SWITCH,
id: "light.luce_specchio_matrimoniale",
title: "",
subtitle: "Specchio bagno camera",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 0],
type: TYPES.SWITCH,
id: "light.luce_doccia_matrimoniale",
title: "",
subtitle: "Doccia bagno camera",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 1],
type: TYPES.SWITCH,
id: "light.luce_bagno_grande",
title: "",
subtitle: "Bagno grande",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 2],
type: TYPES.SWITCH,
id: "light.luce_doccia_bagno_grande",
title: "",
subtitle: "Doccia bagno grande",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [3, 3],
type: TYPES.SWITCH,
id: "light.luce_lavanderia",
title: "",
subtitle: "Lavanderia",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 0],
type: TYPES.SWITCH,
id: "light.luce_pensili_lavanderia",
title: "",
subtitle: "Mobile ingresso",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 1],
type: TYPES.SWITCH,
id: "light.luce_camera_monte",
title: "",
subtitle: "Camera monte",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 2],
type: TYPES.SWITCH,
id: "light.luce_segnapasso",
title: "",
subtitle: "Segnapasso",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [4, 3],
type: TYPES.SWITCH,
id: "light.luce_esterno_terrazzo_ingresso",
title: "",
subtitle: "Esterno terrazzo ingresso",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 0],
type: TYPES.SWITCH,
id: "light.luce_vetro",
title: "",
subtitle: "Luce vetro",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 1],
type: TYPES.SWITCH,
id: "light.luce_esterno_piano_terra",
title: "",
subtitle: "Esterno piano terra",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
{
position: [5, 2],
type: TYPES.SWITCH,
id: "light.luce_esterno_terrazzi_secondo_piano",
title: "",
subtitle: "Esterno terrazzi 2 piano",
states: {
on: "On",
off: "Off",
},
icons: {
on: "mdi-lightbulb-on",
off: "mdi-lightbulb",
},
},
],
},
],
},
// -------- fine pagina luci --------
{
title: "Second Page",
bg: "images/bg2.png",
bgOpacity: "0.1",
icon: "mdi-music",
groups: [
{
title: "",
width: 2,
height: 3,
items: [],
},
],
},
],
};
Thanks for the reply jasonwills, I solve the problem!
now I’m trying to have the total number of lights on, using the code I found on this thread (TileBoard - New dashboard for Homeassistant - #2011 by apop by @ SimplyGardner), however it doesn’t work:
{
position: [0, 3],
type: TYPES.CUSTOM,
id: {},
subtitle: ‘Lights’,
title: ‘Living Room’,
action: function() {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = [“&light.luce_ufficio”, “&light.luce_sala”, “&light.luce_cucina”];
//designate a counter variable
var count = 0;//loop through the array of lights for (i = 0; i < lights.length; i++) { if (this.parseFieldValue(lights[i]) === "on") { //increment the counter by 1 if the given light is on count++; } } //return the number of lights that are on switch (count) { case 1: return "mdi-numeric-one-circle-outline"; case 2: return "mdi-numeric-two-circle-outline"; case 3: return "mdi-numeric-three-circle-outline"; case 4: return "mdi-numeric-four-circle-outline"; default: return "default icon here"; }}
},
I replaced “var lights” with my lights, but it doesn’t calculate … I was wondering if there was also a way to calculate all the lights and not just the lights inserted.
sorry for my bad English!!
Luca
Hi @Luca_Vasini,
the var line will need adjusting to have the state at the end of each, so:
var lights = ["&light.luce_ufficio", “&light.luce_sala”, “&light.luce_cucina”];
becomes
var lights = ["&light.luce_ufficio.state", “&light.luce_sala.state”, “&light.luce_cucina.state”];
as the function checks for “on”.
The second thing would be the icons - id change from:
case 1:
return "mdi-numeric-one-circle-outline";
case 2:
return "mdi-numeric-two-circle-outline";
case 3:
return "mdi-numeric-three-circle-outline";
case 4:
return "mdi-numeric-four-circle-outline";
default:
return "default icon here";
to
case 1:
return "mdi-numeric-1-circle-outline";
case 2:
return "mdi-numeric-2-circle-outline";
case 3:
return "mdi-numeric-3-circle-outline";
case 4:
return "mdi-numeric-4-circle-outline";
default:
return "mdi-numeric-0-circle";
That worked for me, so hopefully good for you 
Jason
Thanks for the reply 
I tried to edit but it doesn’t work …
{
position: [0, 3],
type: TYPES.CUSTOM,
id: {},
subtitle: ‘’,
title: ‘Luci accese’,
action: function() {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = [“&light.luce_ufficio.state”, “&light.luce_sala.state”, “&light.cucina.state”];
//designate a counter variable
var count = 0;//loop through the array of lights for (i = 0; i < lights.length; i++) { if (this.parseFieldValue(lights[i]) === "on") { //increment the counter by 1 if the given light is on count++; } } //return the number of lights that are on switch (count) { case 1: return "mdi-numeric-1-circle-outline";case 2:
return “mdi-numeric-2-circle-outline”;
case 3:
return “mdi-numeric-3-circle-outline”;
case 4:
return “mdi-numeric-4-circle-outline”;
default:
return “mdi-numeric-0-circle”;
}
}
},
I attach screenshots
thanks!
Hi @Luca_Vasini,
here is my full item: (swapped out my lights id’s with yours for you)
{
position: [0, 3],
type: TYPES.CUSTOM,
id: {},
subtitle: "",
title: "Luci accese",
action: function (e) {
window.openPage(CONFIG.pages[1]);
},
icon: function () {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = ["&light.luce_ufficio.state", "&light.luce_sala.state", "&light.cucina.state”];
//designate a counter variable
var count = 0;
//loop through the array of lights
for (i = 0; i < lights.length; i++) {
if (this.parseFieldValue(lights[i]) === "on") {
//increment the counter by 1 if the given light is on
count++;
}
}
//return the number of lights that are on
switch (count) {
case 1:
return "mdi-numeric-1-circle-outline";
case 2:
return "mdi-numeric-2-circle-outline";
case 3:
return "mdi-numeric-3-circle-outline";
case 4:
return "mdi-numeric-4-circle-outline";
default:
return "mdi-numeric-0-circle";
}
},
},
as you seem to have the function for icon in the action section in your config.
So, copy this and that should do it
Jason
Actually I saw your post and it absolutely inspired me, I was using iframe to include my floorplan kiosk card from lovelace and it was really heavy, especially for tablets.
So I decided to try to do it natively in Tileboard and this what came on few minutes later:
Using floorplan without lights as background.
Based on TYPES.IMAGE I’ve created custom TYPES.ROOM and made it full screen (my rooms with lights are the same sizes)
That’s it.
Next I will put invisible buttons over the rooms and all done.
Thanks for the idea!)
Cool 
so it works
To be honest I was busy with other things and had no time to continue with this idea but now definitely I must do it
only one question … in which software have you made/painted such a nice 3D floorplan with such a good looking lights ?
It’s Sweet Home 3D, I was really surprised to find there pretty advanced lighting options, recommended)
thx … will give a try
now works!! thank you…
without inserting all the variable lights, is it possible to count them all by default?
Thanks!!!
That’s the final version of the page with transparent buttons:
BTW responds very quickly on old ipads…
super cool thx for sharing