Background

Apps & Services HABPanel
5

In fact if you’re willing to get your hands dirty with HTML and CSS you could sort of have it with a template.

This is very dirty code-wise but it works:

<div style="position: absolute;
            top: 0;
            bottom: 0;
            left: -10px; right: -10px;
            background: url('https://s-media-cache-ak0.pinimg.com/564x/fa/b1/17/fab117bcb2a6b2860ee64188ec3e66cc.jpg');
            background-size: cover;
            background-repeat: no-repeat;">
  
  <div ng-init='model={"name": "Bedroom 1", "item": "Light_Bedroom1", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
    <widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 100px; left: 100px;
               width: 60px; height: 60px"
        ng-model="model" />
  </div>
  
  <div ng-init='model2={"name": "Living room", "item": "Light_LivingRoom", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
    <widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 200px; left: 200px;
               width: 60px; height: 60px"
        ng-model="model2" />
  </div>

  <div ng-init='model3={"name": "Bedroom 2", "item": "Light_Bedroom2", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
    <widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 100px; left: 300px;
               width: 60px; height: 60px"
        ng-model="model3" />
  </div>

  <div ng-init='model4={"name": "Bedroom 3", "item": "Light_Bedroom2", "hidelabel": true, "hideonoff": true, "iconset": "eclipse-smarthome-classic", "icon": "light" }'>
    <widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 250px; left: 400px;
               width: 60px; height: 60px"
        ng-model="model4" />
  </div>
  
</div>

The undocumented trick here is that nothing prevents you from using HABPanel directives like widget-switch if you feed it the right ng-model :slight_smile:
Replace the item value in the ng-inits, repeat the whole div as needed and reposition the switch using top and left. Of course it assumes a fixed size for the final dashboard (or maybe using percentages instead of pixels could work).
Anyways, it’s all a little hackish and I shouldn’t have shown you how to do it, because I won’t support it :wink:

10 Likes