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

Perfect! :joy::joy::joy:

Hi,

Here is a code which loads items created in Paper UI and similarly I want to load the rules created in rules editor in PaperUI can any1 please guide me through it.

<div class="form-group" ng-class="{error: _form.item.$error && _form.submitted}">
                <label class="control-label col-lg-3 col-md-3">openHAB Item</label>
                <div class="col-lg-9 col-md-9">
                  <item-picker ng-model="form.item" ></item-picker></div></div><br></br>

The below code which I tried making use of to load the rules created in rules editor which is currently not working. Can anyone suggest where I am going wrong.

<div class="clickable" ng-repeat="rule in data.rules | orderBy:'uid'" ng-click="configure(rule, $event)">
					<div class="rule fab-item text-left">
						<div class="circle">{{rule.name.substring(0,1)}}</div>
						<div class="item-content">
							<div flex="60">
								<h3>
									{{rule.name}} <small class="badge" ng-class="rule.status.status.toLowerCase()">{{rule.status.status}}</small>
								</h3>
								<p ng-bind-html="rule.description"></p>
								<p>{{rule.uid}}</p>
							</div>
							<div class="actions" flex="40">
								<i class="material-icons" aria-label="Run rule" ng-click="runRule(rule.uid,$event)">play_arrow</i> 
								<i class="material-icons" aria-label="Toggle Enable" ng-click="toggleEnabled(rule, $event)">{{rule.enabled ? "alarm_on" : "alarm_off"}}</i> 
								<i class="material-icons" aria-label="Remove" ng-click="remove(rule, $event)">delete</i>
							</div>
						</div>
						<hr class="border-line" ng-show="!$last" />
					</div>
				</div>

Have you added any function like function loadrules in https://github.com/openhab/org.openhab.ui.habpanel/blob/master/web/app/services/openhab.service.js ?

I think you need to link to that function from your Rules dropdown list to call the loadrules function to call rules restapi to fetch rules from openhab

Ex: loadItems function is used to get the list of items from openhab and load them to dropdown list

function loadItems() {
$http.get(’/rest/items’)
.then(function (data) {
if (angular.isArray(data.data)) {
console.log(“Loaded " + data.data.length + " openHAB items”);
$rootScope.reconnecting = false;
$rootScope.items = data.data;
if (!liveUpdatesEnabled) registerEventSource();
} else {
console.warn(“Items not found? Retrying in 5 seconds”);
$rootScope.reconnecting = true;
$rootScope.items = [];
$timeout(loadItems, 5000);
}
$rootScope.$emit(‘openhab-update’);
},
function (err) {
console.warn(“Error loading openHAB items
 retrying in 5 seconds”);
$rootScope.reconnecting = true;
$timeout(loadItems, 5000);
});
}

Thank you, True that the function loads the rules https://github.com/openhab/org.openhab.ui.habpanel/blob/master/web/app/services/openhab.service.js

As per my understanding its a js file and the code snippet is not compatible with the custom widget creation so the way to access the functions is through the class but how ? , Please let me know if my approach is wrong.

Please comment here RulesEditor for habpanel, since I have created new thread for your topic.

This custom template seems to break other functionality in HABpanel. It loads JSON stored in an item en loops over it:

 <div>
   <div class="col-xs-4" ng-repeat="i in $eval(itemValue('PresetSetKeukenLink'))">
     <button style="width: 8em; height: 5em; border: 0; color: black; background: rgb(255, 204, 0); text-align: center; padding: 0px; margin: 0px 0px 10px 0px;" 
             ng-click="sendCmd('Sonos_Ensuite_Preset', '{{i.command}}')">
       {{i.title}}
     </button>
   </div>
</div>        

This errors keeps repeating in the console:

vendor.js:119 Error: [$rootScope:infdig] http://errors.angularjs.org/1.5.11/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22m
turn%20b(f%2Cc%2Ce)%7D%22%2C%22newVal%22%3A11%2C%22oldVal%22%3A10%7D%5D%5D
at vendor.js:6
at m.$digest (vendor.js:145)
at m.$apply (vendor.js:147)
at l (vendor.js:99)
at K (vendor.js:103)
at XMLHttpRequest.N.onload (vendor.js:104)

Any idea?

Try replacing this with a simple: i.command (without the quotes and the curly braces)

Thanks, but unfortunately didn’t work (same problem).

Problem also occurs when the repeated part is static, like this:

 <div>
   <div class="col-xs-4" ng-repeat="i in $eval(itemValue('PresetSetKeukenLink'))">
     123
   </div>
</div>

If you go to the error URL it states:

One common mistake is binding to a function which generates a new array every time it is called.

I guess that’s what’s happening.

If your item value represents a slowiy changing reference list you can probably try this instead:

 <div ng-init="presets = $eval(itemState('PresetSetKeukenLink'))">
   <div class="col-xs-4" ng-repeat="i in presets">
     123
   </div>
</div>

My simple Template widget to show if a contact in group windows is opened and list the open contact.

<div ng-style="{background: (itemsInGroup('Windows')|filter:{state:'OPEN'}).length ? 'red' : 'green'}">
{{(itemsInGroup('Windows')|filter:{state:'OPEN'}).length}} windows opened
	<ul style="list-style-type: disc;">
    <li ng-repeat="item in (itemsInGroup('Windows')|filter:{state:'OPEN'})">
    	{{item.label}}
 		</li>
  </ul>
</div>

Edit: I use same function for lights (Switch and Dimmer items). How to make the whole widget as button to send a command (all off function when leaving home).

3 Likes

I assume you would use ng-click="sendCmd('Lights', 'OFF') on your outer div.

Somehow like this:

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
	ng-click="sendCmd('Lights', 'OFF')>
	<span>
		<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="32" state="itemValue('Lights')" />
       </span>
	<span style="color: {{itemValue('Lights')=='ON' ? 'white' : '#7B879C'}}">
		Lights
	</span>
</button>

And set checkbox “Don’t wrap in container” in the Template settings window.

3 Likes

Hello guys,

next question: how to get ON/OFF state from dimmer item? itemValue(item.name) and item.state returns numeric value.

I don’t get the backdrop icons to show up.
Could you please tell me where your icons are located (absolute path)?
I did try some locations and the icons are definitely there, but don’t show up.
It works with the <widget-icon iconset="‘eclipse-smarthome-classic’" 
 approach.
(my icons are in /etc/openhab2/html/habpanel/assets/icons/smarthome-set/)

Thanks!

AFAIK there is no real ON/OFF State on Dimmers it’s just that a Switch Item automatically maps its State to 0/100.
So you can either create a Switch Item for that channel or do the mapping yourself like this:

{{itemValue(item.name) == 0 ? 'OFF' : 'ON'}}

Thanks a lot!
I will try it soon!

Something I discovered and Like to share with you.

  • The display name of your widget is stored in {{ngModel.name}}
  • You can define your own variables by assigning them to ngModel.“VarName”

During the assignment the value is returned

A line like {{ngModel.myValue=10+100}} would display as 110

Later you can reference to it with {{ngModel.myValue}}

Example:

style="z-index: 10;
            position: absolute;
            top:  calc(50% - {{(ngModel.icon_size=(ngModel.sizeY>ngModel.sizeX?ngModel.sizeX:ngModel.sizeY)*(config.icon_size?config.icon_size:64))/2}}px);
            left: calc(50% - {{ngModel.icon_size/2}}px);
            ">

To suppress the output of your calculation you can hide it within an inline style comment:

Example:

<style type="text/css">
  /* 
 My Value:     {{ngModel.myValue=itemValue('config.item') *100}}
  */
</style>

My Widget name: {{ngModel.name}}
My Value: {{ngModel.myValue}}

I tried this with a Stringvalue (HarmonyActivity). Shouldn’t this work as well?
state=“itemValue(‘HarmonyActivity’)==‘xbox’ ? ‘xbox’ : ‘PowerOff’” />

As far as I understand, “state” determines the color of the displayed value (“OFF” = gray, “ON” and everything else = blue).