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

Tags: #<Tag:0x00007f212f1f2c08> #<Tag:0x00007f212f1f2a00> #<Tag:0x00007f212f1f27d0>

(Matthias Reinagl) #89

It is that simple…
Thank you! :slight_smile:

(Jeroen) #90

Is it possible to show an image from an URL that’s in an item? Something like this doesn’t seem to work:

<img src="itemValue('AlbumCover')" />

(Vasily Karasev) #91

Try this:

<img ng-src="{{itemValue('AlbumCover')}}" alt="Description" />

(Jeroen) #92

Thanks, that works great!

(John Cocula) #93

I would love to see a widget that uses this Angular directive/filter/service

For all the dates in the past, that update not only when the item updates, but also with the passage of time. It would make past and even future DateTime items much easier to read.

How would I go about adding that or could it be a standard widget?

Color Picker and MiLight Binding
(Yannick Schaus) #94

@watou it’s a small library so I guess it’s a candidate for inclusion as built-in (like sprintf and others). :slight_smile:

However, I guess it’s time to “reveal” a potential ticking time bomb: loading scripts in templates & custom widgets is actually possible with the ocLazyLoad directive which is available.

So if you download https://github.com/yaru22/angular-timeago/blob/master/dist/angular-timeago.min.js to conf/html and try this:

<div oc-lazy-load="['/static/angular-timeago.min.js']">
  <p>The sun set <time-ago from-time="{{itemValue('Sunset_Time')}}"></time-ago></p>

It will give you, as expected:

For full disclosure, this makes the HABPanel version that shipped with openHAB 2.0 vulnerable to trivial XSS attacks so once again:

To all, make sure never to run HABPanel (or openHAB, for that matter) outside trusted local networks with no protection! Never publish it on the Internet without at least access control with a reverse proxy! Check http://docs.openhab.org/installation/security.html for details.

The loading of non-local scripts was disabled this week through the introduction of a Content Security Policy but the vulnerability remains, it’s just significantly less easy to exploit.

HABPanel Development & Advanced Features: Start Here!
Angular Timeago Customization
(John Cocula) #95

Thanks very much for that! And the warning about potential vulnerabilities. This will be very helpful.

(Tomibeck) #96

Hi guys i just realised that a couple of the Elements in your examples have rounded edges? The Same code always shows the standard edges for me. On what does this depend?

(Michael) #97

Set the radius to what you want. You can make circles as well.

<div style="border-radius: 10px">

(Christoph B) #99

Did anyone get the slider examples posted here actually get to work?
My set temperature slider always jumps back to the current value and also sends this, not the one I selected.

I figured it needs the sendCmd to be in the callbacks of the slider, however, if I try this:

<div style="display: none;" ng-init="slider = {
value: 0, 
options: {
  id: 'slider1',
  onChange: function(id) {
    console.log('on change ' + id);
  floor: 15,
  ceil: 26,
  step: 0.5,
  precision: 1,
  showSelectionBar: true,
    selectionBarGradient: {
      from: 'white',
      to: '#FC0'
  {{slider.value = itemValue('EGBueroThermostat_4_SetTemperature')}}
<rzslider rz-slider-model="slider.value"
      ng-click="sendCmd('EGBueroThermostat_4_SetTemperature', slider.value)"> 

I get a syntax error…

(Ton van Loon) #100

How do I execute an http-get URL that returns me a JSON result from within a my custom widget?

I’m looking for a way to execute an http-get URL to a script on my digitalSTROM-server in order to receive a sessiontoken via JSON, parse the JSON and execute a second http-get URL to trigger a certain action ( an User Defined Action - UDA) on the digitalSTROMserver. The digitalSTROM-binding doesn’t support triggering UDA (yet) or providing a sessiontoken.


  1. Execute first http-get (with secrettoken)
    2 Retreive JSON
  2. Parse sessiontoken from JSON
  3. Execute second http-get with session token


1.  https://dss.local:8080/json/system/loginApplication?loginToken=<my_secrettoken>
2.  {"result":{"token":"bf07b16adab81de13e8a7ee0df45ed35d"},"ok":true}
3.  <my_sessiontoken>={{result.token}}
4.  https://dss.local:8080/json/event/raise?token=<my_sessiontoken>&name=highlevelevent&parameter=id%3D1485448412

So far I’ve found the Angular JS $http service ( http://www.w3schools.com/angular/angular_http.asp) to be run in a < script > but as far as I know it is not possible to run scripts in the custom widgets (for security reasons).

(Vasily Karasev) #101

About syntax error:
This is most likely because of the function definition inside ng-init.
Here it does not work.

(Christoph B) #102

Any idea how I could solve that?

(Vasily Karasev) #103

With function I myself have suffered for a long time, but so far have not found the solution.

As for the slider, try this:

		<div ng-init="slider = {
                       	'item': 'EGBueroThermostat_4_SetTemperature',
                        'vertical': false,
                        'floor': 15,
                        'ceil': 26,
                        'step': 0.5,
                        'precision': 1,
                        'unit': '°C',
                        'hidelabel': false,
			'hidelimits': false,
                        'hidepointer': false,
                        'showticks': false,
                        'bigslider': false
		<widget-slider ng-model="slider"/>

(Christoph B) #104

@wasco nice that works! But it uses a different slider, right? Or how does this work?
I assume it’s a component of habpanel?

(Vasily Karasev) #105

Yep, this is standard habpanel slider widget :slight_smile:

(Christoph B) #106

Thanks! :slight_smile:

(Michael Parment) #108

How do i find the code for the original Switch widget?
I want the same look but want it to work with 1 and 0 instead of ON and OFF.


(Vasily Karasev) #109

It is true for all habpanel widgets:

  1. Add desired widget to the dashboard.
  2. Go to Paper UI => Configuration => Services => HABPanel => CONFIGURE => SHOW MORE => Panel registry JSON.
  3. Find added widget by it name.
  4. Inside the curly braces will be the body/model of the widget, which may be changed as you want and must be placed in the ng-init statement and then used in ng-model.

But I think this is not what you need.
The most simple, consider the Proxy Switch.
Actually, it all depends on the specific problem.

(Michael Parment) #110

Where can i find the Proxy Switch?