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

habpanel
template
widget
Tags: #<Tag:0x00007f182ff3c0e8> #<Tag:0x00007f182ff4bde0> #<Tag:0x00007f182ff4b9f8>

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

(Future Cow) #26

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?


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

(Future Cow) #28

Thats working, thank you!


(Kuba Wolanin) #29

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


(Ben) #30

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>

(Yannick Schaus) #31

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.


(Ben) #32

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.


(Yannick Schaus) #33

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>

Parse JSON
How to get Values vom PHP generated JSON data
(Tadey Stasevych) #34

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


(Lars Bretschneider) #35

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

Thanks in advance!


(Yannick Schaus) #36

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


(Lars Bretschneider) #37

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…


(Meshx86) #38

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 …


(Lars Bretschneider) #39

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


(E. Gerland) #40

Hi @FutureCow,

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


(Future Cow) #41

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