Add battery indicator to dials

[lokonli]

3.9.7.1 beta See: https://www.domoticz.com/forum/viewtopic.php?p=296092#p296092

[pquinqu]

Good evening, I worked a few on the basis on that domoticz thread post. My goal was to have a colored icon and percentage, depending on battery level. Here is my solution:

**CONFIG.js:**
blocks['heatingzone_1_thermostat'] = {
    idx: 123, type: 'dial',
    values: [
        {
            idx: 125, decimals: 1, unit: '°C', icon: 'fas fa-temperature-half'
        },{
            idx: 125, value: 'BatteryLevel', unit: '%', icon: 'fas', addClass: 'battery-level'
        }
    ]
} 

Note : the addClass adds the battery-level class to the second value div for idx 125. The icon: 'fas' directive also selects the font style awesome for the span.

**custom.css:**
/**
 * Battery levels
 */
.battery-level.full, .battery-level.full .unit { color: green !important; }
.battery-level.full i:before { content: "\f240"; }

.battery-level.three-quarters, .battery-level.three-quarters .unit { color: green !important; }
.battery-level.three-quarters i:before { content: "\f241"; }

.battery-level.half, .battery-level.half .unit { color: green !important; }
.battery-level.half i:before { content: "\f242"; }

.battery-level.quarter, .battery-level.quarter .unit { color: orange !important; }
.battery-level.quarter i:before { content: "\f243"; }

.battery-level.empty, .battery-level.empty .unit {
  color: red !important; 
  animation: blink 1.5s linear infinite;
}
.battery-level.empty i:before { content: "\f244"; }
@keyframes blink { 0%,49% { opacity: 0; } 51%,100% { opacity: 1 } }

.battery-level, .battery-level .unit {
  position: relative;
  color: darkgrey !important;
}

The content: "\f24*;" selects the proper icon depending of the battery level. The last part consists of setting the proper battery level class for the idx device block. This is achieved by adding a deviceHook function in the custom.js file:

**custom.js:**
function deviceHook(device)
{
  var sensors = // battery powered
  {
    1: 125,
  };

  var batteryLevels = // CSS classes list
  {
    'empty': 0, // critical
    'quarter': 10,
    'half':35,
    'three-quarters': 60,
    'full': 90, // battery almost full
  };

    Object.keys(sensors).forEach( // ...
        function (idx)
        {
            if (device.idx == sensors[idx])
            {
                Object.keys(batteryLevels).forEach( // ...
                    function (cssClass)
                    {
                        if (device.BatteryLevel >= batteryLevels[cssClass])
                        {
                            device.deviceStatus = cssClass;
                        }
                    }
                );
                console.log('deviceHook(device:{idx: %d, BatteryLevel: %d}) -> "%s"',
                    device.idx, device.BatteryLevel, device.deviceStatus);
            }
        }
    );
}

Setting deviceStatus to the css class fount result in a class: "battery-level cssClass" for the second value div. tadaa! It works.

[michelscholte]

I have implemented it and it works fantastic. @pquinqu Thank you for the clear explanation.