Hi, here is my updated entrance panel. I upgraded from 7" SIBO to the new 10" SIBO. With 3d printed adapter I reused 7" mounting for flush design. The new is an energy flow widget that shows relations for Grid , Solar, Battery, and I made also a custom template for 3 knob based gauges with some added info (A switch for a electric heater for the Domestic Hot Water , Battery stats and i3 charging state)
The code is very messy with some hand optimized single pixel margins here and there for a perfect fit on this 1280x800 screen. If anyone has to reuse it will need some work for setting it up for your target device. I do not have time to make it universal and I guess it would take ages, but still maybe someone will have a use of it.
<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:494px; height: 472px;
">
<div class="row" style="margin-top: -10px; margin-left:-2px; margin-right: -2px">
<div class="col-xs-5" style="text-align: left; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<br>
<span style="font-size: 2.8em" >
<img src="assets/icons/smarthome-set/plug.svg" style="width: 40px; filter: invert(.7); margin-top: -10px; "></img>
{{'%.0f' | sprintf: itemValue('B_Power_AC_Load')}}</span>
<span style="font-size: 1.8em" >W</span>
</br>
</div>
<div class="col-xs-2" style="text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
</div>
<div class="col-xs-5" style="text-align: right; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<br><span style="font-size: 2.8em" >
<img src="assets/icons/smarthome-set/sun.svg" style="width: 40px; filter: invert(.7); margin-top: -5px; "></img>
{{'%.0f ' | sprintf: itemValue('B_Power_PV_Sum')}}</span><span style="font-size: 1.8em; margin-left: -6px" >W</span></br>
R: {{'%.0f W' | sprintf: itemValue('B_Power_PV_String2')}} G: {{'%.0f W' | sprintf: itemValue('B_Power_PV_String1')}}
<br>{{'%.2f kWh' | sprintf: itemValue('B_Power_energy_today_float')}}</br>
</div>
</div>
<div class="row" style="
font-size: 8.5em;
font-family: Roboto, Helvetica, sans-serif;
text-align: center;
border: 0px;
border-style: solid;
border-color: green;
margin-bottom: -10px;
margin-left: 0px;
margin-right: 0px
">
<div ng-if="itemValue('Power_source')=='Grid'">
<span style="color: red">{{'%.0f ' | sprintf: itemValue('B_Power_Netto')}}</span><span style="color: red; font-size: 0.6em;">W</span>
</div>
<div ng-if="itemValue('Power_source')=='Battery'">
<span style="color: #00FF00">{{'%.0f ' | sprintf: itemValue('B_Power_Netto')}}</span>
<span style="color: #00FF00; font-size: 0.6em;">W</span>
</div>
<div ng-if="itemValue('Power_source')=='Battery+Solar'">
<span style="color: #00FF00">{{'%.0f ' | sprintf: itemValue('B_Power_Netto')}}</span>
<span style="color: #00FF00; font-size: 0.6em;">W</span>
</div>
<div ng-if="itemValue('Power_source')=='Solar!'">
<span style="color: #00FF00">+{{'%.0f ' | sprintf: itemValue('B_Power_Netto')}}</span>
<span style="color: #00FF00; font-size: 0.6em; margin-left: -24px">W</span>
</div>
<div ng-if="itemValue('Power_source')=='Grid+Solar'">
<span style="color: orange">{{'%.0f ' | sprintf: itemValue('B_Power_Netto')}}</span>
<span style="color: orange; font-size: 0.6em;">W</span>
</div>
</div>
<div class="row" style="text-align: center;">
<div ng-if="itemValue('Power_source')=='Grid'">
<span style="color: red; font-size: 80px">Power Grid</span>
</div>
<div ng-if="itemValue('Power_source')=='Battery'">
<span style="color: #00FF00; font-size: 80px">Battery</span>
</div>
<div ng-if="itemValue('Power_source')=='Battery+Solar'">
<span style="color: #00FF00; font-size: 80px">Battery+Solar</span>
</div>
<div ng-if="itemValue('Power_source')=='Grid+Solar'">
<span style="color: orange; font-size: 80px">Grid+Solar</span>
</div>
<div ng-if="itemValue('Power_source')=='Solar!'">
<span style="color: #00FF00; font-size: 80px">Solar!</span>
</div>
</div>
<div class="row" style="margin-top: -10px; margin-left:-2px; margin-right: -2px">
<div class="col-xs-5" style="text-align: left; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<br>
<img src="http://172.16.10.4:8080/static/power_grid2.svg" style="width: 40px; height: 40px; filter: invert(.7); margin-top: -20px; "></img>
<span style="font-size: 2.8em" >0</span><span style="font-size: 1.8em" >W</span>
</br>
<span style="margin-left: 4px" >{{'%.0f V' | sprintf: itemValue('B_Power_Grid_P1_Voltage_raw')/10 }}</span>
</div>
<div class="col-xs-2" style="text-align: center; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
</div>
<div class="col-xs-5" style="text-align: right; border:0px; border-style: solid; border-color: rgb(100,100,100) ;" >
<span style="font-size: 1em">
<div ng-init='SELFC={"name": "SELFC",
"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": False,
"scaleEnabled": false,
"scaleType": "lines",
"skinType": "tron",
"trackColor": "#333333",
"skinWidth": null,
"trackWidth": 14,
"barWidth": 14,
"barCap": 4,
"trackCap":4,
"skinSpaceWidth": null,
"rangesEnabled": true,
"rangesTextColorMatching": true,
"ranges": [
{
"min": 0,
"max": 40,
"barColor": "#FFFFFF",
},
{
"min": 40,
"max": 100,
"barColor": "#FFFFFF",
}
],
}'>
<div style="width:100px; height:80px; margin-left:94px">
<div>
<div><widget-knob ng-model="SELFC" /></div>
</div>
</div>
</div>
Self Today
</span>
</div>
</div>
</div>