On many of my devices when I make a dashboard tile for them, it does show the battery level in the top corner. For some reasons the Shades tile doesn’t do this. My current work around is to create a different tile that shows the battery level. I would love to have the level shown in the top left corner like other tiles though.
Is there a way to do this? Everything I’ve gathered, it is not possible, but wanted to ask the question.
I feel like this could/should be a feature request, I would like to see that battery attribute added to shade tiles too.
Honestly, I think this would be a good feature for ALL tiles. The ability to display additional attributes…not just battery.
Maybe on my multi sensor tile, the main portion is displaying motion/no motion, but top left I have a humidity number and top right I have a lumen number.
I can think of quite a few of my devices that have more than one attribute that would be nice to display secondary attributes in the corner. (although battery level would be the most common)
If you use a small grid and your tiles span multiple rows and columns, you can make a transparent attribute tile, reduce the font size, make it transparent, and remove the title with CSS. Then make the tile small and overlay it on the tile. It is a pain, and you have to be using a small grid size with spanning tiles.
I added extra attribute data to my thermostat tiles this way:
My tiles are smaller 1x1, but I think I can still make this work doing it this way.
CSS code to get the battery value and “%” symbol in top left corner and then also shade the tile based on the percentage is:
/* 1. Make the background of tiles 19-28 completely transparent */
#tile-19,
#tile-20,
#tile-21,
#tile-22,
#tile-23,
#tile-24,
#tile-25,
#tile-26,
#tile-27,
#tile-28 {
background-color: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
}
/* 2. Hide the main device title entirely */
#tile-19 .tile-title,
#tile-20 .tile-title,
#tile-21 .tile-title,
#tile-22 .tile-title,
#tile-23 .tile-title,
#tile-24 .tile-title,
#tile-25 .tile-title,
#tile-26 .tile-title,
#tile-27 .tile-title,
#tile-28 .tile-title {
display: none !important;
}
/* 3. Hide the battery icon graphic */
#tile-19 .tile-primary > i.material-icons,
#tile-20 .tile-primary > i.material-icons,
#tile-21 .tile-primary > i.material-icons,
#tile-22 .tile-primary > i.material-icons,
#tile-23 .tile-primary > i.material-icons,
#tile-24 .tile-primary > i.material-icons,
#tile-25 .tile-primary > i.material-icons,
#tile-26 .tile-primary > i.material-icons,
#tile-27 .tile-primary > i.material-icons,
#tile-28 .tile-primary > i.material-icons {
display: none !important;
}
/* 4. Reposition and force single-line text layout for the values */
#tile-19 .tile-primary,
#tile-20 .tile-primary,
#tile-21 .tile-primary,
#tile-22 .tile-primary,
#tile-23 .tile-primary,
#tile-24 .tile-primary,
#tile-25 .tile-primary,
#tile-26 .tile-primary,
#tile-27 .tile-primary,
#tile-28 .tile-primary {
position: absolute !important;
top: 4px !important;
left: 4px !important;
font-size: 11px !important;
color: #000000 !important;
padding: 0 !important;
margin: 0 !important;
text-align: left !important;
display: inline-flex !important;
white-space: nowrap !important;
}
/* 5. Append % text behind the battery percentage */
#tile-19 .tile-primary::after,
#tile-20 .tile-primary::after,
#tile-21 .tile-primary::after,
#tile-22 .tile-primary::after,
#tile-23 .tile-primary::after,
#tile-24 .tile-primary::after,
#tile-25 .tile-primary::after,
#tile-26 .tile-primary::after,
#tile-27 .tile-primary::after,
#tile-28 .tile-primary::after {
content: "%" !important;
display: inline !important;
font-size: 11px !important;
margin-left: 1px !important;
}
/* Full Battery (100%) - Green */
#tile-19:has(.he-battery_full),
#tile-20:has(.he-battery_full),
#tile-21:has(.he-battery_full),
#tile-22:has(.he-battery_full),
#tile-23:has(.he-battery_full),
#tile-24:has(.he-battery_full),
#tile-25:has(.he-battery_full),
#tile-26:has(.he-battery_full),
#tile-27:has(.he-battery_full),
#tile-28:has(.he-battery_full) {
background-color: rgba(87, 131, 87, .5) !important;
}
/* 75% Battery - Green */
#tile-19:has(.he-battery_75_color),
#tile-20:has(.he-battery_75_color),
#tile-21:has(.he-battery_75_color),
#tile-22:has(.he-battery_75_color),
#tile-23:has(.he-battery_75_color),
#tile-24:has(.he-battery_75_color),
#tile-25:has(.he-battery_75_color),
#tile-26:has(.he-battery_75_color),
#tile-27:has(.he-battery_75_color),
#tile-28:has(.he-battery_75_color) {
background-color: rgba(87, 131, 87, 0.5) !important;
}
/* 50% Battery - Yellow */
#tile-19:has(.he-battery_50_color),
#tile-20:has(.he-battery_50_color),
#tile-21:has(.he-battery_50_color),
#tile-22:has(.he-battery_50_color),
#tile-23:has(.he-battery_50_color),
#tile-24:has(.he-battery_50_color),
#tile-25:has(.he-battery_50_color),
#tile-26:has(.he-battery_50_color),
#tile-27:has(.he-battery_50_color),
#tile-28:has(.he-battery_50_color) {
background-color: rgba(255, 255, 0, 0.5) !important;
}
/* 25% Battery - Red */
#tile-19:has(.he-battery_20_color),
#tile-20:has(.he-battery_20_color),
#tile-21:has(.he-battery_20_color),
#tile-22:has(.he-battery_20_color),
#tile-23:has(.he-battery_20_color),
#tile-24:has(.he-battery_20_color),
#tile-25:has(.he-battery_20_color),
#tile-26:has(.he-battery_20_color),
#tile-27:has(.he-battery_20_color),
#tile-28:has(.he-battery_20_color) {
background-color: rgba(255, 0, 0, 0.8) !important;
}
/* Empty Battery - Red */
#tile-19:has(.he-battery_0_color),
#tile-20:has(.he-battery_0_color),
#tile-21:has(.he-battery_0_color),
#tile-22:has(.he-battery_0_color),
#tile-23:has(.he-battery_0_color),
#tile-24:has(.he-battery_0_color),
#tile-25:has(.he-battery_0_color),
#tile-26:has(.he-battery_0_color),
#tile-27:has(.he-battery_0_color),
#tile-28:has(.he-battery_0_color) {
background-color: rgba(255, 0, 0, 0.5) !important;
}