Visibility of Habpanel's template widget

Apps & Services HABPanel
1

Hi everyone , firstly I want to say that I love habpanel soooo much!
But I have several questions and I hope someone can help me answer:

  1. I want to make a button template which can make others button visible when clicked, otherwise; other buttons remain invisible. For example, I have many groups of devices such as: fans, lightbulbs,…When I click “All Fans” button, those buttons which is used to control fans show up, wheareas lightbulb controlling buttons don’t. The similar thing happens if I clicked “All Lights” button.Can anybody show me how to that?
  2. Anybody show me how to edit the font family of template widget, I’ve just created a digital clock template like this:
<div ng-init="clockmodel={
                'mode':'digital',
                'font_size':24,
                'digital_format':'HH:mm:ss a EEEE dd/MM/yyyy'
              }">
  <widget-clock ng-model="clockmodel" ng-style="{ color: 'cyan'}"/></div>

but I want to change its font family since the current one doesn’t satisfy me enough. More specifically, I want to change its font to so-called “digital font” like this so that it looks more like a real digital clock: http://www.dafont.com/ds-digital.font
I hope someone could show me how!

  1. I created this template:
    <div uib-slide index="3">
      <img src="https://s-media-cache-ak0.pinimg.com/originals/89/b9/2c/89b92c053e3ec58d84398266df30400d.jpg" style="margin:auto;"/><div ng-init='model={"name": "Garden", "item": "Garden_GF_Light", "hidelabel": true, "hideonoff": true, "iconset": "smarthome-set", "icon": "bulb" }'>
    <widget-switch
        style="position: absolute;
               background: rgba(0,0,0,0.5);
               border-radius: 20px;
               top: 100px; left: 200px;
               width: 60px; height: 60px"
        ng-model="model" />
  </div>

Thanks to someone’s post in this forum I couldn’t remember, now I want to develop it more. As you can see, the lightbulb shows up with its name hidden I know that I can make its name visible by changing from “hidelabel”: true to “hidelabel”: false. But I think it’d be much more cooler if whenever I drag my mouse into it, the border line of the switch could light up and show me the name of that switch beneath. Can anybody show me how?

1 Like