Do you have any code I could kindly try 
Here’s what i am trying to do
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";
}
}
},
I think you still need to define it as icons and not icon if you want to use a function. Give that a shot.
Ah ha! Works perfectly - thanks so much! I think there was an issue with the naming of the MDI icons.
Phew! Feels like I’m getting there with the home dashboard, finally! For this, I’ve managed to squeeze one full-sized tile (to act as a status for each group) and 3 smaller (height wise) tiles underneath for each room.
Anyone know… is possible to inject CSS into each to adjust the position of the icons (not through the custom.css file) maybe using customStyles: { ?
I am wanting to adjust everything in the RED box slightly so it appears more middle (between the top of the tile and the start of the subtitle). And, maybe centre text.
Is a click action for the header area (time/date) possible?
For example to execute a fully js command to turn off the screen.
If this isn’t possible it would be a nice addition!
I have the menu buttons on the left but they are hard to see with the background I have.
How can I add the dark shaded area behind the whole menu bar, or which items should I change in the css files? On the active screen, the menu button is fine because it has the grey circle, but the inactive menu buttons are just white and hard to see.
Thanks.
I think this should work, insert this into custom.css:
.pages-menu {
background-color: insert color here;
}
1 Like
You’ll probably have to play around with this a bit, but here’s a starting point to put into custom.css. The first part will handle the vertical position, the second will handle the horizontal centering. You will need to define a custom class for these specific tiles to reference. So, for each tile, include:
classes: ["-custom-class-name-here"]
You can replace custom-class-name-here with whatever works for you in both the tile definition and custom.css
.custom-class-name-here .item-entity {
top: calc(50% - 45px); /* this is the current setting which starts everything from the tile image
down at the vertical midpoint of the tile. Try reducing that 50% value
until it looks the way you want. */
}
.custom-class-name-here .item-title,
.custom-class-name-here .item-subtitle {
text-align: center;
}You’re super awesome @apop - thanks so much!! Works great!
Here is what it looks like so far. For the big tiles - i hope to add an energy monitor and use grafana to add a background on the energy levels over the last three days. I am loving tileboard!!
2 Likes
Looks great!
Hey! Random… I don’t have an ‘alarm system’ as such but wondering with the alarm panel tile… Could i setup my own system using Xiaomi sensors and a pin code etc?
Yes. You can use Manual Alarm and program your own logic using it. https://www.home-assistant.io/components/alarm_control_panel.manual/
is there a way to have only one tile completely transparent?
Yes, add this to the tile definition:
customStyles: {'background-color':'transparent'}