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

Tags: #<Tag:0x00007f182a792310> #<Tag:0x00007f182a792130> #<Tag:0x00007f182a791fa0>

(Vasily Karasev) #63

For example:

<div ng-init='nav = {
                        "name": "Review",
                        "type": "button",
                        "action_type": "navigate",
                        "navigate_dashboard": "rev"
<widget-button ng-model="nav"/>

Where “rev” in “navigate_dashboard” is desired dashboard ID

(DaHome Solutions) #64

I’m sorry, but I don’t understand. As I’m new to this stuff, can you explain it a bit deeper:

  • can you integrate it into your earlier example …with the <button class “btn”…?
  • is dashboard ID the dashboard name?

(Vasily Karasev) #65

Here you can replace




In general button name = button ID. But you can make an ID other than the name.
Usually you can find dashboard ID at browser address bar:


Or you can find/change dashboard ID at:
Paper UI -> Configuration -> Services -> HABPanel -> CONFIGURE -> SHOW MORE -> Panel registry JSON

(Lorenzo Giordano) #66

I would like to have a template with the number of lamps switched on.
I already have the Group:Contact item:
Group:Switch:OR(ON,OFF) Lamps “Lamps [(%d)]”
How Can include in a template?
If I use the ItemValue(‘Lamps’) just show ON or OFF.

Thanks for your help

(Yannick Schaus) #67

{{(itemsInGroup('Lamps') | filter:{state:'ON'}).length}} will do the trick :wink:

(Lorenzo Giordano) #68

Great !! Works like a charme !!

Problems with setting up dashboard habpanel! Please help?
(Lorenzo Giordano) #69

and to format a date/time?
I get : > 2017-01-02T02:55:14.584+0100 but I just want 2:55:14 (hh:mm:ss)

(Mattwire) #70


{{itemValue(config.datetime) | date:"H:mm"}}

Adjust the format to suit

(ThomasS) #71

is there any way to access the label and original icon name of an item ?

Many thanks

(Nguyễn Phúc Anh Đồng) #72

I copied and pasted this code into my template widget and change the name of the items, but it seems this code doesn’t work ! My template is totally black!
Any help?

<p>Value of Hue_Bureau: {{itemValue('Hue_Bureau')}}</p>

<div ng-if="itemValue('Hue_Bureau').split(',')[2]!='0'">
  <button class="btn btn-lg" style="background: red; color: white"
  ng-click="sendCmd('Hue_Bureau_Toggle', 'OFF')">
  It's on! Switch off

<div ng-if="itemValue('Hue_Bureau').split(',')[2]=='0'">
  <button class="btn btn-lg" style="background: green; color: black"
  ng-click="sendCmd('Hue_Bureau_Toggle', 'ON')">
  It's off! Switch on

My new template code:

<div ng-if="itemValue('Light_GF_Living_Ceiling')=='OFF'">
  <button class="btn btn-lg" style="background: red; color: white" ng-click="sendCmd('Light_GF_Living_Ceiling', 'ON')">

<div ng-if="itemValue('Light_GF_Living_Ceiling')=='ON'">
  <button class="btn btn-lg" style="background: red; color: black" ng-click="sendCmd('Light_GF_Living_Ceiling', 'OFF')">

(Tom Araya) #73

Hey Tim,

it would be really great if you would share the template. It looks great and has all the information that I need.


(Tim Rogers) #74

I have shared the widget I made; It is available here. I actually have done some updates since then, making the slider work better, etc. I am still working on some formatting stuff, but I should have a ‘final’ widget done soon. When I get everything working I will update that thread again with a more final version.

(E. Gerland) #75

Hi @ysc

I love your carousel widget!

Is there any option to use a autoscale?
Means: I have multiple cameras with different resolutions and I would like to scale them down to stay in the frame (e.g. autoscale height) ??
Any suggestion is greatly appreciated.

(SiLeX) #76

I would assume this is possible with setting a relative height and width to your style tag of the img element:

height: 100%; width: 100%

like this:

<img src="//unsplash.it/600/600?random&r=1" style="margin:auto; height: 100%; width: 100%;"/>

It might even be possible to apply this for a parent element, so you don’t have to repeat it for every image.

(Vasily Karasev) #77

There is a small problem for the dropdown (in this case) or any other elements like div if they extend outside the parent template widget.
These elements will cover (lay above) early defined widgets, but under widgets defined later.

So called “stacking contexts”.

Is it possible to get around this problem?

(E. Gerland) #78

Thanks. I am going to to try that!

(Yannick Schaus) #79

@wasco I believe dropdown-append-to-body="true" on the node with uib-dropdown will solve your problem.
See: https://angular-ui.github.io/bootstrap/#/dropdown

(Vasily Karasev) #80

In case of dropdown it works!
It remains to solve the problem with the other elements.


(Lorenzo Giordano) #81

I would like to create a button that increase a number item each push.

Since all item.state are string if I write send(item,item.state +1) I send a 2 digit string i.e if item.state is 3 I send “31”.

How can I realize a real sum (i.e. 3+1=4)

Thanks for your help

(Tim Rogers) #82

I had this same problem @Foxejoe. Hopefully someone will add a more correct way of doing this, but I found the following worked.

If you do a subtraction operation, it treats the value as a number. If you just do an addition, it treats it like a string. So what I did was:


instead of just doing


When I subtracted 1, then added 2, the value was incremented by 1; If I just added 1, I got what you did, a string with a 1 appended. I know this is a complete hack, but it did work for me.