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

For example:

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

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

3 Likes

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?

Here you can replace

<button></button>

with

<widget-button/>

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:

http://…/habpanel/index.html#/view/DashboardID

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

2 Likes

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

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

1 Like

Great !! Works like a charme !!

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)
Thanks

@Foxejoe

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

Adjust the format to suit

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

Many thanks
BR
ThomasS

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
  </button>
</div>

<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
  </button>
</div>

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')">
  </button>
</div>

<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')">
  </button>
</div>
1 Like

Hey Tim,

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

Thanks!

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.

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.

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.

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?

Thanks. I am going to to try that!

@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

3 Likes

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

SOLVED

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

1 Like

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:

{{itemValue('myItem')-1+2}}

instead of just doing

{{itemValue('myItem')+1}}

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.

2 Likes