Domoticz

Posted: **Friday 23 April 2021 11:25**

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.

Posted: **Saturday 24 April 2021 17:48**

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';
 }

Posted: **Thursday 29 April 2021 16:25**

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>

Posted: **Thursday 29 April 2021 16:51**

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?

Domoticz

How to change an icon (battery) based on value

How to change an icon (battery) based on value

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

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

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