The top line is accually a separate custom template widget. I use experimental feature of habpanel dividing the screen into 60 parts not 12 to make it slimmer.
Pool widget is already on that forum.
and the 3 knobs i attach here:
A domestic hot water gauge is having small swith for manual heater that using the same base css definition of the switch.
<link rel="stylesheet" type="text/css" href="http://172.16.10.4:8080/static/css/myslider.css" />
<div style="background: rgba(0,0,0,0.5);
margin-top: 0px;
margin-left: 0px;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: rgb(100,100,100) ;
width:744px; height: 214px;
">
<div class="row" style="margin-top: -4px; margin-left:-8px; margin-right: 0px">
<div class="col-xs-4" style="text-align: left; margin-right: -8px ;border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<div ng-init='DHW={"name": "DHW",
"sizeX": 3,
"sizeY": 3,
"item": "B_Temperature_wmY",
"type": "knob",
"row": 0,
"col": 10,
"floor": 25,
"ceil": 60,
"step": 1,
"unit": "°C",
"startAngle": -130,
"endAngle": 130,
"readOnly": true,
"subTextEnabled": true,
"scaleEnabled": false,
"scaleType": "lines",
"skinType": "tron",
"trackColor": "#333333",
"skinWidth": null,
"trackWidth": 40,
"barWidth": 40,
"barCap": 20,
"trackCap": 20,
"skinSpaceWidth": null,
"rangesEnabled": true,
"rangesTextColorMatching": true,
"ranges": [
{
"min": 35,
"max": 39,
"barColor": "#FF9900",
},
{
"min": 0,
"max": 35,
"barColor": "#FF0000",
},
{
"min": 40,
"max": 60,
"barColor": "#33CC33",
}
],
}'>
<div style="width:244px">
<div>
<div><widget-knob ng-model="DHW" /></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4" style="text-align: left ;margin-right: -8px ; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<div ng-init='HSOC={"name": "House SOC",
"sizeX": 3,
"sizeY": 3,
"item": "B_Power_Battery_SOC",
"type": "knob",
"row": 0,
"col": 10,
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "%",
"startAngle": -130,
"endAngle": 130,
"readOnly": true,
"subTextEnabled": true,
"scaleEnabled": false,
"scaleType": "lines",
"skinType": "tron",
"skinWidth": null,
"trackWidth": 40,
"trackColor": "#333333",
"barWidth": 40,
"barCap": 20,
"trackCap": 20,
"skinSpaceWidth": null,
"rangesEnabled": true,
"rangesTextColorMatching": true,
"ranges": [
{
"min": 21,
"max": 50,
"barColor": "#FF9900",
},
{
"min": 0,
"max": 20,
"barColor": "#FF0000",
},
{
"min": 50,
"max": 100,
"barColor": "#33CC33",
}
],
}'>
<div style="width:244px">
<div>
<div><widget-knob ng-model="HSOC" /></div>
</div>
</div>
</div>
</div>
<div class="col-xs-4" style="text-align: left; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<div ng-init='BSOC={"name": "BMW SOC",
"sizeX": 3,
"sizeY": 3,
"item": "Bmw_chargingLevelHv",
"type": "knob",
"row": 0,
"col": 10,
"floor": 0,
"ceil": 100,
"step": 1,
"unit": "%",
"startAngle": -130,
"endAngle": 130,
"readOnly": true,
"subTextEnabled": true,
"scaleEnabled": false,
"scaleType": "lines",
"skinType": "tron",
"skinWidth": null,
"trackWidth": 40,
"trackColor": "#333333",
"barWidth": 40,
"barCap": 20,
"trackCap": 20,
"skinSpaceWidth": null,
"rangesEnabled": true,
"rangesTextColorMatching": true,
"ranges": [
{
"min": 20,
"max": 50,
"barColor": "#FF9900",
},
{
"min": 0,
"max": 19,
"barColor": "#FF0000",
},
{
"min": 50,
"max": 100,
"barColor": "#33CC33",
}
],
}'>
<div style="width:244px">
<div>
<div><widget-knob ng-model="BSOC" /></div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: -80px; margin-left:8px; margin-right: 8px; border:0px; border-style: solid; border-color: rgb(0,100,100) ;">
<div class="col-xs-4" style="margin-top: -80px; text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<label class="myswitch">
<input type="checkbox" ng-checked="(itemValue('boiler_outb6_heater_top')=='ON')" ng-click="sendCmd('boiler_outb6_heater_top', (itemValue('boiler_outb6_heater_top')=='OFF') ? 'ON':'OFF')">
<div class="myslider round"></div>
</label>
</div>
<div class="col-xs-4" style="margin-top: -72px;margin-left: 242px; text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
{{'%.1f A' | sprintf: itemValue('B_Power_Battery_Current_Sum')}}
{{'%.1f V' | sprintf: itemValue('B_Power_Battery_Voltage_fixed')}}
</div>
<div class="col-xs-4" style="margin-top: -72px;margin-left: 483px; text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
{{'%s' | sprintf: itemValue('Bmw_chargingSystemStatus')}}
</div>
</div>