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

Tags: #<Tag:0x00007f212e636ae0> #<Tag:0x00007f212e6366a8> #<Tag:0x00007f212e636310>

(Mike Dilger) #7


I am going through a steep learning curve at present as I work to perfect my first ‘template’ widget.
Is there an easy way define a string variable in the template code. At this stage I just thinking about the “item name” so that I don’t have to repeat it throughout the code, making it easier to create new widgets for the next similar item. In this case I have 12 window actuators to control, hence 12 individual widgets (before I address the need for “group widgets”, i.e. ‘4 rooms’ and ‘ALL’ ) .

I have tried various options but no success yet!, so some suggestions would be appreciated.

I have already made numerous code & layout improvements to my first effort above and will post the results a little later. Should I post it here or maybe start a “Template Widget Gallery thread”??


(Yannick Schaus) #8

You’ll want to use ng-init for that, since you can’t define a controller.

In your case, that’ll be <div ng-init="item='Your_Item'"> in the top-level element (or wrap everything in a div). Then you can use itemValue(item) below.
Go ahead and make a new thread to discuss your widget, there’s plenty of room in the HABPanel category!

(Mike Dilger) #9

Thanks for the reply.

I was close, but I had ng-init in the wrong place and also a syntax error. Will get back to this tonight after work.

(Pascal Mattes) #10

Whats with something like a Dropdown for Input Selection of a Smart TV? How could i do this?

(Mike Dilger) #11

Take a look at the bootstrap button options http://getbootstrap.com/components/

I haven’t tried yet but am planning to see what can be done over the week or so.

(Yannick Schaus) #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 uib-slide index="1">
      <img src="//unsplash.it/600/600?random&r=2" style="margin:auto;"/>
    <div uib-slide index="2">
      <img src="//unsplash.it/600/600?random&r=3" style="margin:auto;"/>
    <div uib-slide index="3">
      <img src="//unsplash.it/600/600?random&r=4" style="margin:auto;"/>

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:

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

A simple:

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

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>
  <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>

HabPanel Documentation
HABPanel Development & Advanced Features: Start Here!
(Daniel Walters) #13

My original gripe with HABPanel was that I couldn’t get it to look as good as my Rotini setup. My gripe with Rotini was that it’s an app and therefore not platform agnostic.

I think this template widget may be on to a winner. I can define it using config, access on any browser and it still looks good! :grinning:

A question for you @ysc, is it on the roadmap that we can ‘convert’ some of the more popular template widgets that people come up with to standard widgets?

(Mike Dilger) #14

Now that is really cool!! There goes my spare time this weekend :slight_smile:

(Yannick Schaus) #15

Of course, there has to be something to improve the reusability of those templates, both for technical (caching) and practical reasons. This implies having some sort of configurability i.e. setting some initial variables to define in the scope of each widget instance, like which item etc. Those templates could also be served from the filesystem instead of being stored along with the rest of the dashboard configuration.
It will all come in due time. Like I said, I released the template widget early while we’re still in the experimental phase, to see what the feedback of the community would be and would it would do with it.

In the long term, if the idea has some traction, there might even be a gallery of widgets to choose from, right from the settings dialog, a little bit like the “web store” for your Chrome or Firefox extensions.

(Tadey Stasevych) #16

Thank you so much for your work! This looks amazing!

Now it will be possible to do any dashboard you want!

(ingo_e_sigmund) #17

I was wondering if it would be possible to create an analog clock widget using the template widget. I was looking at http://deepu.js.org/angular-clock/ which provides a nice Angular based analog clock. Since it is only based on Angular I would think it should be possible.
What is not clear to me is, where and how I would need to install the needed files so can use the markup to create such a clock inside a template.
Any insight on this is very welcome.
Take care

(Ron Conti) #18

I’m excited to try the template widget, but my openhab still has “ui-habpanel - 2.0.0.SNAPSHOT” installed.

Is there an easy way to download and install the binary for the latest HABPanel?

(Tadey Stasevych) #19

I installed it using PaperUI. First you need to enable experimental extensions:

Then under Extension -> User Interfaces you can install HABpanel

Have fun. Don’t forget to share cool widgets. :wink:

(Dominic Bialas) #21

I was wondering if it would be possible to create an analog clock widget using the template widget. I was looking at http://deepu.js.org/angular-clock/17 which provides a nice Angular based analog clock. Since it is only based on Angular I would think it should be possible.
What is not clear to me is, where and how I would need to install the needed files so can use the markup to create such a clock inside a template.
Any insight on this is very welcome.
Take care

@ysc is this possible at all?

I´m just starting with angularjs and would like to do a similar thing:

I want to take the following code into a template:

Would be glad if you could help me / us…

(Yannick Schaus) #22

If you’re talking about the analog clock, @ingo_e_sigmund seems to be working on it.

To get modal dialogs, ui-bootstrap’s $uibModal service would have to be injected into the controller bound to the template (i.e. some Javascript code), and since you’re currently limited to editing the template and can’t modify the controller, you can’t do this.

(Mattwire) #23

Just wondering if there is currently a way to display a web page using the template widget? For example I have some emoncms energy dashboards which I would like to embed.

(Kuba Wolanin) #24

I believe that Frame widget is a way to go in that case. Simply pass URL in the settings modal.

(Future Cow) #25

Is it possible to change words to images? I’m trying to make a weather forecast, but a cloud is a lot nicer that the word: cloudy. I’m also strugeling with a good layout (the first part can be 1

instead of 2…)

The above image is the thing i have, the bottom is what i want:

My Code:

<div class="row">
  <div class="col-xs-3"><span style="color: cyan; font-size: 15pt">{{itemValue('Weather_Forecast_Day0_Condition')}}</span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 16pt">Max: {{itemValue('Weather_Forecast_Day0_Temperature_High')}}</span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 14pt">{{itemValue('Weather_Forecast_Day1_Condition')}}</span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 14pt">{{itemValue('Weather_Forecast_Day2_Condition')}}</span></div>
<div class="row">
  <div class="col-xs-3"><span style="color: cyan; font-size: 20pt"></span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 16pt">Min: {{itemValue('Weather_Forecast_Day0_Temperature_Low')}}</span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 12pt">{{itemValue('Weather_Forecast_Day1_Temperature_High')}} | {{itemValue('Weather_Forecast_Day1_Temperature_Low')}}</span></div>
  <div class="col-xs-3"><span style="color: cyan; font-size: 12pt">{{itemValue('Weather_Forecast_Day2_Temperature_High')}} | {{itemValue('Weather_Forecast_Day2_Temperature_Low')}}</span></div>

(Future Cow) #26

I already got the image replacement with:

<div ng-if="itemValue('Weather_Forecast_Day0_Condition')== 'few-showers'">
<img src="" style="margin:auto;"/>

How can i simply remove the 2 decimals from 9.00?
How can you make a div like the left side of the above image?

(Heiko Fanieng) #27

Maybe this works for you:

<div class="col-xs-3"><span style="color: cyan; font-size: 16pt">Max: {{itemValue('Weather_Forecast_Day0_Temperature_High')| number:0}}</span></div>