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

kubawolanin · 2017-03-02 12:23:01 UTC

Just remove this line and you should be ready to go

Nathan_Wilcox · 2017-03-02 13:45:54 UTC

Thanks! All done!

chris_van_aalst · 2017-03-03 14:25:33 UTC

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

chris_van_aalst · 2017-03-03 14:28:07 UTC

hit enter to fast …
Is there an option have the image refresh every time ?

thx

ysc · 2017-03-04 10:56:50 UTC

@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…

chris_van_aalst · 2017-03-05 16:08:20 UTC

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>

greg161 · 2017-03-09 22:39:15 UTC

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 ?

greg161 · 2017-03-09 23:39:46 UTC

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>

Daniel_OH · 2017-03-11 21:12:53 UTC

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)

shorin · 2017-03-12 06:17:42 UTC

If I read your post correctly, I think that I’m seeing a similar issue. Working on building a widget for doors - shows the status of a contact switch as well as the lock all in one. When I initially run (or refresh the page, etc.), the icon for the door open/closed status isn’t showing. In fact, nothing is shown there - it’s blank. Once the device changes state, it shows and works properly. I’m guessing that the state isn’t coming in initially.

Here’s my code (the pertinent part for this icon that I stripped out to test this issue):

<table>
  <tr>
    <td>
      <div ng-if="itemValue('LRBackDoorTripped')=='OPEN'">
        <widget-icon iconset="'eclipse-smarthome-classic'" icon="'door-open'" />
      </div>
      <div ng-if="itemValue('LRBackDoorTripped')=='CLOSED'">
        <widget-icon iconset="'eclipse-smarthome-classic'" icon="'door-closed'" />
      </div>
    </td>
  </tr>
</table>

As an experiment, I changed the “closed” state to be != OPEN instead. Now it comes in as a closed door, so I’m atleast getting an icon. But it comes in as closed even if the door is open… This definitely makes me think it’s coming in as a Null or some other odd state (haven’t investigated further).

      <div ng-if="itemValue('LRBackDoorTripped')!='OPEN'">
        <widget-icon iconset="'eclipse-smarthome-classic'" icon="'door-closed'" />
      </div>

I’ve searched and didn’t find a work-around or fix. Coincidentally, it appears that I’m not the only one finding this issue today…

Any help is appreciated.

Thanks,

Danny

ysc · 2017-03-12 18:40:03 UTC

If you use map transformations in your items, you will get the mapped value initially (when switching from another dashboard or refreshing) then subsequent “live” updates will be without the transformation applied.

There is a discussion going on here about this inconsistency: https://github.com/eclipse/smarthome/issues/2788.

There are other threads with examples on how to use a Javascript object and ng-init to translate raw values locally in the HABPanel template: Template Example: Weather Binding

Andrew_Pawelski · 2017-03-14 03:06:19 UTC

using material dark skin and label widget - I still see dropshadows even when setting background transparent (which doesnt seem to work - it shows the default background colour of the skin. This is a screeny of the test label wth a color close to the skin background - you can still see the dropshadow

shorin · 2017-03-14 03:42:12 UTC

This value had a transformation, but it didn’t seem to be doing anything. I tried setting it to “OPEN=bob” and “CLOSED”=steve" and they never transformed. I did figure out a little more info that allows a workaround. The value is coming in initially with the correct text, just all lower case. So I added two more if statements to handle the lower case variants and it all works.

Now on to my next issue, which I think I’m going to post in it’s own thread…

Thanks for the help,

Danny

mikaelgu · 2017-04-02 05:32:53 UTC

I have a play/pause button, for which the relevant code looks like:

	<span style="font-size: 48px" class="glyphicon glyphicon-pause colorize colorize icon-tile ng-scope colorize colorize" data-toggle="modal" role="button" aria-hidden="true" ng-click="sendCmd(config.player, 'ON')"></span>

(if has a counterpart with “colorize off”)
Now the problem is, that this colored version is a bit off. It looks like it’s missing transparency, so it’s a darker blue compared to other icons. Is there an easy fix?

Help appreciated,

Mikael

FredSan · 2017-04-06 16:17:36 UTC

Thanks, this works perfectly! I wonder how you would call this ng-init after 5 minutes,for example: to go back to the main panel after a set length of time.

FredSan · 2017-04-06 16:21:49 UTC

Try using this

<style>
.box {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
</style>

Dominic_Bialas · 2017-04-07 04:01:00 UTC

Hey there,

i´ve got a shadow problem too. I want to use the carousel-example for showing 4 different items. In a first attemp I uses the following code:

<style>
.box {
box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
</style>

<div style="background-color: orange; height:100%; box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
<div uib-slide index="0" >
 <h1>1</h1>1
</div>
<div uib-slide index="1">
  2
</div>
<div uib-slide index="2">
 3
</div>
<div uib-slide index="3">
4
  </div>
  </div>
</div>

But the reuslt looks like:

Could anybody help?

Cheers, Nic.

FredSan · 2017-04-07 13:15:09 UTC

If you are trying to remove the shadowed fades at the top - Here is one solution.

<style>
.box {
    box-shadow: none;
}
.carousel-control.left, .carousel-control.right  {
    background-image: none;
}
</style>

Hope this helps.
Fred

Andrew_Pawelski · 2017-04-12 12:09:28 UTC

Thanks for the info but won’t that remove drop shadows from all widgets? I’d like to keep the shadow for other widgets

FredSan · 2017-04-12 15:03:33 UTC

Ahh, in that case you can adjust the code to:

li:nth-child(11) .box {
    box-shadow:none;
}

… where you can change the number inside the nth-child(X) to be the number of the widget you want to display with no drop shadow. you might have to play around to find out which exact number list item (li) is used for the widget you want to remove the box-shadow from.