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

@ysc

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

Cheers,
Mike

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!

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.

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

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.

1 Like

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:

(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

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?

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

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.

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

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

2 Likes

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
Ingo

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?

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:

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
Ingo

@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:
http://plnkr.co/edit/ukqmThpvi4aRGLZEiSSe?p=preview

Would be glad if you could help me / us…

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.

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.

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

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>
<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>
</div>
1 Like

I already got the image replacement with:

<div ng-if="itemValue('Weather_Forecast_Day0_Condition')== 'few-showers'">
<img src="http://192.168.1.1/rain.png" 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?

1 Like

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>