Add Battery % to Dashboard Tiles for All Battery Powered Devices

Currently only contact sensor Dashboard tiles display battery %?

Please add for temperature, locks, leak, humidity, motion, etc. sensors.

3 Likes

@Busthead You can make a tile for the device. When making the tile, on left pick device, on right pick attribute, then in the dropdown pick battery

1 Like

Another option is to choose the device and use the battery template.

1 Like

I don't want a separate tile. The ask is that battery % is included like it is for contact sensors:

image

4 Likes

They would need / want to be careful about how that was implemented so that existing dashboard tiles are not affected. I.e. I would not want to have to go through all my existing temperature tiles and hide the battery reading using custom CSS. It may have to be a separate template.

I'm sure there is some kind of multi-sensor template, but I'm not in front of my PC....Might be worth a look. EDIT - It does display both temp and battery at the top of the tile, but a big question mark in the middle.... Shame.

simple multi tile will do that... This is just temp and humidity, I can add battery

image

2 Likes

By that you mean a Tile Master tile using the attribute template?

No, Simple Multi Tile.... Basically a lite version

1 Like

I haven't used either 'Tile Master' or 'Simple Tile'.

Can either of them recreate the native temp tile and just add battery % to the top left corner?

image

It's been a while since I used Tile Master, and I'm not sure it would be the best one for this job. I haven't used the Simple Multi Tile one @rlithgow1 suggested, the best I can suggest is two tiles, one on top of the other, plus some Custom CSS:

image

This is from a Hue motion sensor which reports both temperature and battery. The temperature tile is the main tile, with a smaller one for the battery in the top left corner.

There'd be quicker ways to achieve this using CSS, but some of the manual steps were quicker to work with for me without spending time looking up the CSS needed. I won't be offended if you want to look for easier options, there are a few steps here, but not too bad once you get the hang of it....

You may need to adjust your grid size (number of rows and columns in the settings. I had 21 x 21 for this example, but the higher the better and it's not too dependent on any ratio, etc.

Add your two tiles, both using the same device, one with the temperature template, one with the battery template. Open the settings for the Battery Tile by clicking the three dots on the tile, noting the tile id in the top left of the dialog. Close the dialog.

Go back into the Settings, select Templates, find the Battery template, click the default state, click the background colour setting, drag the transparency to the far left (fully transparent). Click Save (not shown in the screenshot).

Still in Settings, click on the Advanced tab, then CSS, paste in the CSS below, adjusting the tile id number to match your Battery Tile Id:

/* Remove Battery Icon */
#tile-4 .tile-primary > i.material-icons {visibility: hidden; display: none;}
/* Remove Battery Tile Title */
#tile-4 .tile-title { visibility: hidden; display: none; }

Click on the three dots of the Battery Tile, resize it's Width and Height accordingly, as well as it's position to be in the top left of the temperature tile. Go into Settings and Options, hiding the three dots and you're done :slight_smile:

Simon

3 Likes

if you uncheck "Hide Tile Template Names", it should show the battery. i had this ask a while ago. for some sensors (like contact sensors) it shows on the secondary value. on other sensors, it shows on the tertiary value

1 Like