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

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>

Thats working, thank you!

Just FYI: I’m working on weather widget in my spare time :slight_smile: Weather forecast is also on my roadmap. Let me know in the issue’s comments section what features you’d like to see there.

Cheers

This is probably a silly question, but angular is totally new to me. Is there a way of using ng-repeat with the results of an itemValue? ie I have a string item that I want to populate with a JSON object that I can then use to build a table of data in the template widget.

I have tried the following but it didn’t work, I also tried with itemValue directly in the ng-repeat line but that didn’t work either.

<div ng-init="json=itemValue('house_temp_dashboard')"> 
<div class="row" ng-repeat="i in json">
  <div class="col-xs-8 text-right">{{i.temperature}}</div>
</div>

You should use separate items, put them in an openHAB group, then go:

<div class="row" ng-repeat="item in itemsInGroup('Group')">
    <div class="col-xs-8 text-right">{{itemValue(item.name)}}</div>
</div>

Or use a comma-separated value and use split() but the above is cleaner.

Thanks ysc, I generally would use separate items. But in this particular case I really just want to display some additional information on my Dashboards around the house (recently downloaded items) and I don’t know how long the list is on any given day, it could be 1 item or 10 so my thinking was to just push it to a string item as JSON and then use the template widget to format it.

Looks like $eval could work.
Try:

<div class="row" ng-repeat="i in $eval(json)">
  <div class="col-xs-8 text-right">{{i}}</div>
</div>
1 Like

Oh that’s great! I can use it with my BloomSky JSON API. Got to give it a try!

1 Like

Great Stuff !!! do you have a snipset for a chart ?

Thanks in advance!

Why would you want it in a template and not in its own widget?

i would like to have the possibility to style it my way … fixed y-axis my be you may provide a function to retrieve the data series and an user may have the possibility to show different series with different layouts, temeratures, power etc…

i know you can set an item value (that isn’t bound to external data feed) with a slider because i tried it, can someone please write us a template with text field that edit items (numbers and strings)and solve the dilemma of Basic & Classic UI ?

i just suck at web stuff, i don’t know what kind of code i can write in a template / widget to start with …

1 Like

iḿ still thinking about top have my own chart widget, or at least to play around with.
can you give me a hint as startpoint ? what can be used in habpanel from angular framework ? is it possible to include addional functions in an widget ?

i tried:

it does not work, where do i have to place the files ?

thanks in advcance

Hi @FutureCow,

could you please share your complete code for your weather widget?
Thanks

Sorry, i’m not using this code anymore. Changed to the weather template from this forum!