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

Apps & Services HABPanel
, ,
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)
Thanks

70

@Foxejoe

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

Adjust the format to suit

71

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

Many thanks
BR
ThomasS

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
  </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
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.

Thanks!

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.

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.

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.

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?

78

Thanks. I am going to to try that!

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

3 Likes
80

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

SOLVED

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

1 Like
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:

{{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
83

I saw somewhere that it will need parseInt function but it doesn’t seem to be possible at this time.

Multiplier also do the parseInt trick, so you can do :

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

… to avoid the need to increment your desired value.

84

How about

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

? :slight_smile:

85

Thanks! All solution seems works but I will deeply test tonight at home .
The last seems the simpler :wink:

Thanks again to everyone.

86

Eyy didn’t know this one, works perfect !

Thanks you !

87

How can I place the content of the widget at the top of the widget?
I want to show any open windows, which basically works fine. But if none is open only the header should appear at the top of the box, not in the middle.
Here my code (I used only DIV before but am now experimenting with TABLE):

<table style="width: 100%; border-collapse: separate; margin:0px; text-align:left; vertical-align: top;">
  <tr>
    <td colspan=2 style ="vertical-align: top;"><h4 style="color: #CCCC9A; line-height: .1em; font-size:16px"><b>Offene Türen/Fenster:</b></h4>
    </td>
  </tr>
  <div ng-repeat="item in itemsInGroup('gCont')" >
    <tr ng-style="{ visibility: itemValue(item.name)=='zu' ? 'hidden' : 'visible'}">
       <td>{{item.label}}</td>
       <td ng-style="{ color: itemValue(item.name)=='offen' ? 'red':'green' }">
          {{itemValue(item.name)}}
       </td>
    </tr>
  </div>
</table>
88

if I have correctly understood the problem, you need to check “Don’t wrap in container” in the Template Settings.