Yes I know templates is the way to go but to craft a dummy or a switch from scratch is a large task and will take me ages. I would prefer to modify the orginal dummy/switch, since I will never use the orginal versions. Where are those tempates on the server?
IMHO the orginal size of the elements is too small for my application. I do test the Smart Home UI on my wife and mother in law and in order for to be usable by anyone. The 4x2 grid with large descriptive text is max what a 70years old can handle.
As you can see with habpanel it does not look great yet. Font is to small and notification that the light is on is not pronouced enought.
Here for comparision is my old interface based on the “home automation for geeks” tutorial that looked better, but was only limited to switches and sensors. I will try to recreate that in HABpanel
@dim I use sibo Q896
https://sibo.en.alibaba.com/product/60303735171-801600510/Q896_7inch_Home_Automation_Android_Tablet.html
At 160 USD they are expensive for the specs but have a decent front glass capacitive IPS screen and the POE. POE and Wired Ethernet is a MUST if you want to deploy 10 of them in the house. I only have one UPS that is holding up 48 port POE switch and in case of power failure it keeps all the panels on.
---------------Edit-----------------
Ok so after 3 days I’m almost there using templates instead of buttons and switches.
Those are very rough hacks to get the buttons readable from a distance. And they are now consistent with labels below for both buttons and switches.
I still have some things to resolve, may be somene knowleagable in html css can give me a hint.
I wish I could use a custom icon for the switch.
switch code is:
<div style="background: rgba(0,0,0,0.5);
margin-top: 3px;
margin-left: 3px;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: rgb(100,100,100) ;
width:236px; height: 236px;
">
<div class="row" style="height: 30px" ></div>
<div class="row">
<div ng-init='model={"name": "Living Low", "item": "kitchen_outa2_entry", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set","icon": "bulb","icon_size": "100" }'>
<widget-switch ng-model="model" />
</div>
</div>
<div class="row" style="
font-size: 2em;
font-family: Roboto, Helvetica, sans-serif;
text-align: center;
margin-top: 30px;
margin-left: 0px;
margin-right: 0px
">Entry Light
</div>
</div>
I have a custom svg icon in the html directory so it is available at localhost:8080/static/icon.svg but how to use it in HABpanel switch?
And my second problem is the other way round
the master buttton replacement code is:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<div style="background: rgba(0,0,0,0.5);
margin-top: 3px;
margin-left: 3px;
border-radius: 10px;
border: 1px;
border-style: solid;
border-color: rgb(100,100,100) ;
width:236px; height: 236px;
">
<div class="row" style="height: 30px;border: 0px;border-style: solid" ></div>
<div class="row" style= " text-align: center;" >
<button
style= "border: 0px; background: rgba(0,0,0,0) "
ng-click="sendCmd('gLights', 'OFF')">
<i class="fa fa-power-off" style="font-size:100px;color:#8899AA"></i>
</button>
</div>
<div class="row" style="
font-size: 2em;
font-family: Roboto, Helvetica, sans-serif;
text-align: center;
margin-top: 30px;
margin-left: 0px;
margin-right: 0px
">Master OFF
</div>
</div>
And I wish I could use the orginal HABpanel icon instead of calling for a FontAwsome. I found them at localhost:8080/habpanel/assets/icons/smarthome-set/name.svg but dont know how do I exactly load them into my icon tag <i>
