Hello!
I’m total beginner in OpenHAB and HABpanel and I’m trying step by step to check if they suit my requirements.
I’m trying to create my first template widget - it is really very very simple: it should show just a number value taken from variable. Unfortunetelly it always shows N/A value. Where is an error? Here is my configuration:
Can anybody help me?
The variable in the custom widget editor are called “config.id” where id is the id name
Therefore you should replace ItemValue(‘field1’) with config.field1
Can anyone tell me how to increase and send back a decimal properly? I don’t get how casting should be handled:
ng-click=“sendCmd(‘EGWZHZThermostat_4_SetTemperature’, 1.0*itemValue(‘EGWZHZThermostat_4_ActualTemperature’) + 0.5)”
doesn’t seem to work…
For the temperature setpoint I use {{+itemValue(‘myItem’) + 0,5}} and it works.
with comma? are you sure that works?
Sorry typing mistake. This is my code :ng-click=“sendCmd(‘SetTemp_Taverna’, +itemValue(‘SetTemp_Taverna’)-0.5)”
it’s working now meanwhile - I had a different problem. Thanks for the reply!
I just want to create a button to increase (or decrease) a DateTime by 30 min.
something like ng-click=“sendCmd(‘Sveglia’, +itemValue(‘Sveglia’)+ ?? )”
Any Idea?
Hi all,
I am using kubawolanin widget below with some alterations to suit my own needs, and I was wondering how I would go about calling a url string to provide an icon instead of the ones kubawolanin uses.
I know how to configure the settings I just don’t know the code to call the url. This is an example of the url I am provided:
And I know that the line of code I need to change is the bottom line, I’m just unsure of what to change it to…:
<div class="weather-content"> <div class="weather-row"> <div class="weather-icon" ng-class="(ngModel.sizeX === ngModel.sizeY) ? 'col-md-12' : 'col-md-10'"> <img style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);" src="/icon/climacon?iconset=climacons&format=svg&state={{itemValue(config.weather_condition)}}" />
https://community.openhab.org/t/custom-widget-current-weather/18216
I appreciate anyones help on this.
Try something like
<img style="filter: invert(60%) sepia(100%) hue-rotate(185deg) saturate(1000%);"
src="{{itemValue('Your_Weather_Icon_Url_Item')}}" />
That’s great! Worked a treat! I now have:
I just need to play about with it a bit now to get original colours.
Thanks a lot!
Just remove this line and you should be ready to go 
Thanks! All done!
Yannick,
recently moved from OH1.7 to OH2 and discovered the HABPANEL and started playing around with the widgets. Thanks to your input on this forum, I was able to start to build some custom widgets.
I have a number of Webcams where I use the std widget to display an image which I refresh once a second.
Now, when I saw your example of the Angular based Carrousel, I planned to use this to rotate the Webcam images to preserve dashboard space … This works, but the images are not refreshed …only when I manually refresh my browser, it will display a fresh image …
Is there
hit enter to fast …
Is there an option have the image refresh every time ?
thx
@chris_van_aalst nothing prevents you from putting a HABPanel image widget as the content of the slides, initializing it with a model with the “refresh” property set to an amount in seconds (from https://github.com/openhab/org.openhab.ui.habpanel/blob/master/web/app/widgets/image/image.widget.js#L87 - a proper documentation of these is underway):
<div uib-carousel active="0" interval="5000" no-wrap="false">
<div uib-slide index="0" ng-init="model1 = { 'url':'<your_first_image_url>', 'refresh': 5 }">
<widget-image ng-model="model1" style="margin:auto;"/>
</div>
<div uib-slide index="1" ng-init="model2 = { 'url':'<your_second_image_url>', 'refresh': 5 }">
<widget-image ng-model="model2" style="margin:auto;"/>
</div>
and so on...
I didn’t test it too much though, there might be issues to sort out…
Yannick,
this works: a snapshot of my Webcam - refreshes every 1 second and changes Webcam every 5 seconds !
Thanks very much !
Chris
<div style="height: 610px">
<div uib-carousel active="0" interval="5000" no-wrap="false">
<div uib-slide index="0" ng-init="model1 = { 'url':'http://192.168.0.118/snap.jpeg', 'refresh': 1 }">
<widget-image ng-model="model1" style="margin:auto;"/>
</div>
<div uib-slide index="1" ng-init="model2 = { 'url':'http://192.168.0.121/snap.jpeg', 'refresh': 1 }">
<widget-image ng-model="model2" style="margin:auto;"/>
</div>
<div uib-slide index="2" ng-init="model3 = { 'url':'http://192.168.0.122/snap.jpeg', 'refresh': 1 }">
<widget-image ng-model="model3" style="margin:auto;"/>
</div>
<div uib-slide index="3" ng-init="model4 = { 'url':'http://192.168.0.123/snap.jpeg', 'refresh': 1 }">
<widget-image ng-model="model4" style="margin:auto;"/>
</div>
</div>
</div>
I am trying use above example to increase value of item :
<button style="width: 100%; height: 3em;
border: 0; color: white; background: red;
font-size: 30px" ng-click="sendCmd('Heating_GF_Living_Setpoint', '{{+itemValue('Heating_GF_Living_Setpoint')+1}}')">
{{itemValue('Heating_GF_Living_Setpoint')}}
{{+itemValue('Heating_GF_Living_Setpoint') + 1}}
</button>
it shows the correct value in the last lines but it does not send value to the item , what could be wrong ?
I found solution , I had to remove ‘{{ and }}’ and now it works. When I click it sends correct data to the item.
<button style="width: 100%; height: 3em;
border: 0; color: white; background: red;
font-size: 30px" ng-click="sendCmd('Heating_GF_Living_Setpoint', +itemValue('Heating_GF_Living_Setpoint')+1)">
{{itemValue('Heating_GF_Living_Setpoint')}}
{{+itemValue('Heating_GF_Living_Setpoint') + 1}}
</button>
Hi
I try to make a status page with HabPanel. On this page I want to see, ehich windows and doors are open. The problem ist, that happanel “loses” the status. If i open and close the window, the status is richt and it stays right until i change to another page or if i refresh.
In the template I just want to count the open windows but the value ist def. wrong.
Thanks
Daniel
OH_Screenshots.pdf (159.1 KB)