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

Thanks for the info but won’t that remove drop shadows from all widgets? I’d like to keep the shadow for other widgets

Ahh, in that case you can adjust the code to:

li:nth-child(11) .box {
    box-shadow:none;
}

… where you can change the number inside the nth-child(X) to be the number of the widget you want to display with no drop shadow. you might have to play around to find out which exact number list item (li) is used for the widget you want to remove the box-shadow from.

1 Like

Hi
I get an error when I try the first example, that looks like this:

I’m competly new to openhab so I might have overlooked something very basic.
Can anyone help me out?

I have the astro binding installed and I’m running openhab version 2.0

You probably do not have the same item names as in the example.

/Mike

1 Like

Hello,

is it in some way possible to use the angular modal?
https://angular-ui.github.io/bootstrap/

I think it would be great in combination with group items… For excample i would like to use it for the these two widgets:

  • by clicking on the heating-data, a modal with some options to change the settings should appear
  • by clicking on the bulp i would like to get all bulps of the group item with switches etc.

thanks for your help,
Alexander

Without any explanation forexample like here:

<button class="btn" style="width: 100%; height: 100%; padding: 0; background: inherit; outline: none"
	onclick="if (document.getElementsByClassName('light-show').length == 0) {var element = document.getElementById('light'); document.getElementsByClassName('gridster-loaded')[0].appendChild(element); element.className = 'light-show ng-hide'}"
	ng-click="itemValue('All_Lights')=='ON' ? showlight = true : showlight = false;">
	<span>
		<widget-icon iconset="'smarthome-set'" icon="'bulb'" size="32" state="itemValue('All_Lights')" />
  </span>
	<span style="color: {{itemValue('All_Lights')=='ON' ? 'white' : '#7B879C'}}">
		Light
	</span>
</button>

<!-- Dark background of the modal window -->
<div id="light"
  ng-show="showlight == true && itemValue('All_Lights') == 'ON'"
  ng-click="showlight=false"
  style="display: block;
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0%;
  background: rgba(0,0,0,0.5);">
	<div style="display: table;
  	margin: auto;
    padding: 20px 20px 20px 20px;
    background: #fff;
    width: 95%;
  	border: 0;
    position: relative;
  	top: 50%;
  	transform: translateY(-50%);"
    ng-click="$event.stopPropagation()">
    
    <div class="row">
			<div class="col-xs-12">
				<h2 style="text-align: center; color: #363636">light</h2>
			</div>
		</div>
    
    <div ng-if="itemValue('Cab_All_Lights') == 'ON'" class="row" style="margin-bottom: 1em">
			<div class="col-xs-2 text-right">
      </div>
      <div ng-click="showlight=false" class="col-xs-4 text-left">
				<a ng-href="/habpanel/index.html#/view/cab"
				style="color: #363636">
					cabinet
				</a>
			</div>
      <div class="col-xs-4 text-right"
      ng-click="sendCmd('Cab_All_Lights', 'OFF')">
				OFF
			</div>
      <div class="col-xs-2 text-right">
      </div>
		</div>
    
    <div ng-if="itemValue('Bed_All_Lights') == 'ON'" class="row" style="margin-bottom: 1em">
			<div class="col-xs-2 text-right">
      </div>
      <div ng-click="showlight=false" class="col-xs-4 text-left">
				<a ng-href="/habpanel/index.html#/view/bed"
				style="color: #363636">
					bedroom
				</a>
			</div>
      <div class="col-xs-4 text-right"
      ng-click="sendCmd('Bed_All_Lights', 'OFF')">
				OFF
			</div>
      <div class="col-xs-2 text-right">
      </div>
		</div>
    
    <div ng-if="itemValue('Liv_All_Lights') == 'ON'" class="row" style="margin-bottom: 1em">
			<div class="col-xs-2 text-right">
      </div>
      <div ng-click="showlight=false" class="col-xs-4 text-left">
				<a ng-href="/habpanel/index.html#/view/liv"
				style="color: #363636">
					livingroom
				</a>
			</div>
      <div class="col-xs-4 text-right"
      ng-click="sendCmd('Liv_All_Lights', 'OFF')">
				OFF
			</div>
      <div class="col-xs-2 text-right">
      </div>
		</div>
    
    <div ng-if="itemValue('Ent_All_Lights') == 'ON'" class="row" style="margin-bottom: 1em">
			<div class="col-xs-2 text-right">
      </div>
      <div ng-click="showlight=false" class="col-xs-4 text-left">
				<a ng-href="/habpanel/index.html#/view/ent"
				style="color: #363636">
					entrance
				</a>
			</div>
      <div class="col-xs-4 text-right"
      ng-click="sendCmd('Ent_All_Lights', 'OFF')">
				OFF
			</div>
      <div class="col-xs-2 text-right">
      </div>
		</div>
    
    <div ng-if="itemValue('San_All_Lights') == 'ON'" class="row" style="margin-bottom: 1em">
			<div class="col-xs-2 text-right">
      </div>
      <div ng-click="showlight=false" class="col-xs-4 text-left">
				<a ng-href="/habpanel/index.html#/view/san"
				style="color: #363636">
					bathroom
				</a>
			</div>
      <div class="col-xs-4 text-right"
      ng-click="sendCmd('San_All_Lights', 'OFF')">
				OFF
			</div>
      <div class="col-xs-2 text-right">
      </div>
		</div>
    
    <div class="row">
			<div class="col-xs-12 text-center"
      ng-click="sendCmd('All_Lights', 'OFF'); showlight = false">
        <h4 style="text-align: center; color: #363636">All light OFF</h4>
			</div>
		</div>
    
  </div>
</div>

Thank you very much! I tried it out an it really looks great!

Only thing is, that the modal window doesnt open - or does is depend on not changing the items to my personal settings?

On my side it loks like this (Rus):

Of course you need to change/add/delete all items names and views names (if you need) with your own.

1 Like

Hi,

i changed the item names right now, but the modal windows still doesnt pop up. could it be that there ist something missing in the code i have to add?

Note that event handlers with code like the above are not allowed to prevent arbitrary code execution (violates the Content Security Policy).

So is there another way to work with the modal?

Yes, it is, but I have not found how to achieve this in another way.
Will you prompt?

It seems to work if you replace
ng-click="itemValue('All_Lights')=='ON' ? showlight = true : showlight = false;">
with
ng-click="showlight=true"

and

ng-show="showlight == true && itemValue('All_Lights') == 'ON'"
with
ng-show="showlight"
a few lines below

1 Like

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

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

1 Like

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

2 Likes

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

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