Template widget - tutorial & examples - make your own widget!

Apps & Services HABPanel
, ,
12

Incidentally you also have Angular UI Bootstrap directives at your disposal because HABPanel includes it. You can’t code a proper Javascript controller but still can do a lot with them just with markup (your template).

For example :

<div style="height: 610px">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
    <div uib-slide index="0">
      <img src="//unsplash.it/600/600?random&r=1" style="margin:auto;"/>
    </div>
    <div uib-slide index="1">
      <img src="//unsplash.it/600/600?random&r=2" style="margin:auto;"/>
    </div>
    <div uib-slide index="2">
      <img src="//unsplash.it/600/600?random&r=3" style="margin:auto;"/>
    </div>
    <div uib-slide index="3">
      <img src="//unsplash.it/600/600?random&r=4" style="margin:auto;"/>
    </div>
  </div>
</div>

Gives you a nice carousel (adapted from their example) with fancy arrows and auto cycle, I suppose that could be useful for security cameras and the like :slight_smile:

blob.jpg516×515 112 KB

(note to self : I should include ng-animate and ng-touch for the transition and swiping support).

A simple:

Humidity:
<uib-progressbar class="progress-striped active"
max="100" value="itemValue('Outside_Humidity')" type="primary">
  {{itemValue('Outside_Humidity')}} %
</uib-progressbar>

Will make you a progressbar:

For a dropdown, you could use their dropdown directive as well (just tested successfully with one my own items), it’s could be styled better but it’s a good start:

<h4>Yamaha receiver input</h4>
<div class="btn-group" uib-dropdown>
  <button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
    {{itemValue('Yamaha_Input')}} <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a ng-click="sendCmd('Yamaha_Input', 'HDMI1')">HDMI1 (Kodi)</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Yamaha_Input', 'HDMI2')">HDMI2 (Xbox)</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a ng-click="sendCmd('Yamaha_Input', 'Spotify')">Spotify</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Yamaha_Input', 'NET RADIO')">Net Radio</a></li>
  </ul>
</div>

8 Likes