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

Apps & Services HABPanel
, ,
183

No, nothing is lost, it’s real working code.
If you give me your code, I’ll try to see.

184

Probably yes.
Here is itemValues in order to display modal only if light is really ON.

1 Like
185

thanks a lot, i replaced the lines mentioned by ysc and now it works! really great!

2 Likes
186

oh, ok. i think this was the “problem” - lights of the group i used havent been turned on…

187

Perfect! :joy::joy::joy:

190

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>

image.png1280×800 57.2 KB

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>
191

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);
});
}

192

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.

193

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

194

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?

195

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

196

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>
197

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>
198

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
199

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

200

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
201

Hello guys,

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

202

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!

203

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'}}
204