How to change an icon (battery) based on value

Moderators: leecollings, htilburgs, robgeerts

Post Reply
marmachine
Posts: 133
Joined: Saturday 26 March 2016 10:19
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.4834
Location: Netherlands
Contact:

How to change an icon (battery) based on value

Post by marmachine »

Hi,

I am looking for the solution to set a different icon for a device, depending on it's value;
I have a device presenting the battery percentage of a battery powered sensor.
What i want to do is update the icon according to the percentage (power left) of the battery;

I can only set one of these in config.js
// value <= 20%
icon: 'fas fa-battery-empty',
// value <= 50%
icon: 'fas fa-battery-quarter',
// value <= 75%
icon: 'fas fa-battery-half',
// value <= 85%
icon: 'fas fa-battery-three-quarters',
// value > 85%
icon: 'fas fa-battery-full',

Should i create something like the below, according to this example in custom.js? Any thoughts? Is there an easier approach?

Code: Select all

function getStatus_281(block) {
     var percentage = parseInt(block.device.data)
     if (parseFloat(percentage) <= 35) {
         block.icon = 'fas fa-battery-empty';
     } else if (parseFloat(percentage) <= 50) {
         block.icon = 'fas fa-battery-quarter';
     } else if (parseFloat(percentage) <= 75) {
         block.icon = 'fas fa-battery-half';
     } else if (parseFloat(percentage) <= 85) {
         block.icon = 'fas fa-battery-three-quarters';
     } else {
         block.icon = 'fas fa-battery-full';
     }
 }
 
I want to use the value from the Percentage device, the presented value is a string "84%" which i think should be converted to a nummeric value somehow i guess!? The previous doesn't do what i want.
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: How to change an icon (battery) based on value

Post by Lokonli »

Yes, that's the right approach.

Probably you have to use block.device.Data instead of block.device.data (case sensitive)

You convert block.device.Data to an integer already into the variable percentage. That means you can remove the parseFloat functions.

Code: Select all

function getStatus_281(block) {
     var percentage = parseInt(block.device.Data)
     if (percentage <= 35) {
         block.icon = 'fas fa-battery-empty';
     } else if (percentage <= 50) {
         block.icon = 'fas fa-battery-quarter';
     } else if (percentage <= 75) {
         block.icon = 'fas fa-battery-half';
     } else if (percentage <= 85) {
         block.icon = 'fas fa-battery-three-quarters';
     } else {
         block.icon = 'fas fa-battery-full';
     }
 }
 
You could make it a bit shorter:

Code: Select all

function getStatus_281(block) {
     var percentage = parseInt(block.device.Data)
     block.icon = 'fas fa-battery-full';
     if (percentage <= 85) block.icon = 'fas fa-battery-three-quarters';
     if (percentage <= 75) block.icon = 'fas fa-battery-half';
     if (percentage <= 50) block.icon = 'fas fa-battery-quarter';
     if (percentage <= 35) block.icon = 'fas fa-battery-empty';
 }

marmachine
Posts: 133
Joined: Saturday 26 March 2016 10:19
Target OS: Raspberry Pi / ODroid
Domoticz version: 3.4834
Location: Netherlands
Contact:

Re: How to change an icon (battery) based on value

Post by marmachine »

Lokonli wrote: Saturday 24 April 2021 17:48 ...

Code: Select all

function getStatus_281(block) {
     var percentage = parseInt(block.device.Data)
     block.icon = 'fas fa-battery-full';
     if (percentage <= 85) block.icon = 'fas fa-battery-three-quarters';
     if (percentage <= 75) block.icon = 'fas fa-battery-half';
     if (percentage <= 50) block.icon = 'fas fa-battery-quarter';
     if (percentage <= 35) block.icon = 'fas fa-battery-empty';
 }

Thanks for your reply!
Doesn't seem to work this way... do i place this inside "function afterGetDevices()"?
Do i need to call the function as well, like "getStatus_281();"?

Below is my HTML source, should i change the above 281 to "my-sensor-name" name perhaps?
I have changed the order of lines by the way, starting with <= 35 and <= 85 as last.

Code: Select all

<div id="block_45"><div class="mh transbg block_my-sensor-name col-xs-6 hover off"><div class="col-xs-4 col-icon"><em class="fas fa-battery-empty icon"></em></div><div class="col-xs-8 col-data"><strong class="title">my-sensor-name</strong><br><span class="value">83%</span><br><span class="lastupdate">29-04-21 15:44</span></div></div></div>
Lokonli
Posts: 2271
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: How to change an icon (battery) based on value

Post by Lokonli »

yes, you have to use
function getStatus_my-sensor-name(block) {

For debug, add 'console.log(block)' as first line in the function. Then in Chrome DevTools you can check that this function gets called.

For normal Domoticz blocks (not for Dials!), Dashticz calls the getStatus functions in custom.js, after receiving a device update from Domoticz. The position in the custom.js file doesn't matter, as long as it's not inside any other function.

Which Dashticz version do you use?
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests