ahhh… thanks. now I works, I was confused by the documentation
* Include a page field in the event_data from Home Assistant
* that matches the id: of a page in the TileBoard CONFIG
*/
i was fooling around with an id: tag on the page…
I was confused on this as well, is there a way the docs can be updated to reference the index position in the array instead of an index id (wouldn’t mind doing it myself)? I mean unless you don’t mind answering every time it pops up 
We are always open for PRs. English is not my native language 
Documentation is really something which needs to be updated as it is missing on a lot which has been added recently, including several new tiles…
If I want to setup all my tiles on my board without assigning the device to them do I use id: {}, ? I am waiting for a delivery of devices / setup home assistant but want to add everything not he page.
Yes. {} should do the trick
I don’t see why not.
Would it just be a case of adding the css link and call out the icon in the same icon field in the config file?
I noticed that as well, initially I didn’t see the Vacuum tile type but I saw it in the source code and entered my entity_id and magically it worked! Your documentation is actually pretty good, especially for not being a native speaker. Maybe we can come up with a way to make suggested edits? Or to keep things on GitHub we could branch off your code, update the docs and you could easily merge it back in. LMK if this is something that you are interested in. You do an amazing level of customer support on this thread too, so maybe we update the docs to address some of the top questions. This could hopefully alleviate how much time you need to spend responding here. BTW are you involved with this project at all? It looks like a branch from your code: http://reformedreality.com/home-assistant-control-panel
2 Likes
This in how I did it.
In config.yaml define the input_booleans
input_boolean:
storstuescene0:
initial: off
storstuescene1:
initial: off
storstuescene2:
initial: off
storstuescene3:
initial: off
storstuescene4:
initial: off
Define the sceenes in config.yaml
scene:
- name: SlukLysStue
entities:
light.sofabord_1:
state: off
light.sofabord_2:
state: off
light.panton:
state: off
light.le_klint:
state: off
light.spisebord:
state: off
light.stue_standerlampe:
state: off
switch.sonoff_08:
state: off
switch.sonoff_03:
state: off
input_boolean.storstuescene0:
state: on
input_boolean.storstuescene1:
state: off
input_boolean.storstuescene2:
state: off
input_boolean.storstuescene3:
state: off
input_boolean.storstuescene4:
state: off
The tiles are defined like this
{ position: [0, 0], width: 1, type: TYPES.SCENE, theme: ITEM_TRANSPARENT, id: 'scene.sluklysstue', state: false, title: '', customStyles: function(item, entity){ return { 'opacity': this.states['input_boolean.storstuescene0'].state === 'off' ? '0.4' : '1' } }, bg: 'images/niveau0.png', },
I don’t know a lot about ccs and javascript, so if you have a better idea than using the opacity to show active/passive scenes, let me know.
Great idea. I think if the documents get up to date then I think the questions on this forum will get less and less. Also maybe introduce a FAQ page answering the basic questions and maybe a solid getting started guide maybe a video 
Hey! QQ. Just finalising the main page of my dashboard, like an overview of the house. I was thinking of having a master group of lights for each room, living room etc. When pressed, it will turn off all the lights in that group (room) - that’s easy.
Instead, here’s my idea… Each tile to represent a group of lights for each room, but…
- shows the number of lights that are on for that room and;
- when pressed goes to the specific page for that room.
Is that possible?
That should totally be possible. Basically, you’d want a function for the tile title. In terms of pseudocode, the function would define an array of the lights in that room and then loop through it. For each light, check the status, and if it is on, increment a counter. Once the loop finishes, return the counter as your tile title.
For the when clicked part, I’ve seen examples of that elsewhere in this thread.
For getting the number of lights on, this is very quick and dirty and untested, and you’ll have to play around with how exactly you want to use the returned value to make it look how you want. But this function should get you the number of lights that are on out of a given group of lights. I included lots of comments as well to help you see what it is doing:
function() {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = ["&light.kitchen1.state", "&light.kitchen2.state", "&light.kitchen3.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
return count;
}
1 Like
Thanks - that works. Do you know how i can get it to show the icon and not the state? Heres how it looks
Heres the code
{
position: [0, 0],
type: TYPES.CUSTOM,
id: { },
subtitle: 'Lights',
title: 'Living Room',
action: function(e) {
window.openPage(CONFIG.pages[1]);
},
icons: {
1: 'mdi-numeric-one-circle',
2: 'mdi-numeric-two-circle',
3: 'mdi-numeric-three-circle',
4: 'mdi-numeric-four-circle',
},
state: function() {
//replace kitchen1, kitchen2, kitchen3 with the names of your lights in the particular room
var lights = ["&light.ceiling.state", "&light.left_bedside.state", "&light.right_bedside.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
return count;
}
},
Try putting single quotes around the ‘1’, ‘2’, ‘3’, ‘4’ in your icons section.
Putting quotes around does not work, unfortunately.
icons: {
'1': 'mdi-numeric-one-circle-outline',
'2': 'mdi-numeric-two-circle-outline',
'3': 'mdi-numeric-three-circle-outline',
'4': 'mdi-numeric-four-circle-outline',
},
I think it needs to pass the function to icon: instead of to state: and have it return an icon instead…?
That should work (putting the function on the icon instead). Do that, and replace the return count with the following, swapping out the default icon here for whatever you want to show if no lights 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";
}Thanks @apop - it does not seem to work. Does this look right to you? (need to add the default icon still)/
{
position: [0, 0],
type: TYPES.CUSTOM,
id: {},
subtitle: 'Lights',
title: 'Living Room',
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.ceiling.state", "&light.left_bedside.state", "&light.right_bedside.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-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";
}
}
},