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

habpanel
template
widget
Tags: #<Tag:0x00007f1824f06a98> #<Tag:0x00007f1824f067c8> #<Tag:0x00007f1824f06598>

(Mac Fly) #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.


(Kuba Wolanin) #84

How about

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

? :slight_smile:


(Lorenzo Giordano) #85

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

Thanks again to everyone.


(Mac Fly) #86

Eyy didn’t know this one, works perfect !

Thanks you !


(Matthias Reinagl) #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>

(Vasily Karasev) #88

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


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

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')}}
</div>
<rzslider rz-slider-model="slider.value"
      rz-slider-options="slider.options"
      ng-click="sendCmd('EGBueroThermostat_4_SetTemperature', slider.value)"> 
</rzslider>

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.

Summary:

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

Pseudo:

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>
		<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
                    		}">
		</div>
		<widget-slider ng-model="slider"/>
	</div>