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. 
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>
Thats working, thank you!
Just FYI: I’m working on weather widget in my spare time 
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…