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

habpanel
template
widget
Tags: #<Tag:0x00007f1827118d98> #<Tag:0x00007f1827118ac8> #<Tag:0x00007f1827118988>

(FredrikS) #166

Try using this

<style>
.box {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
</style>

(Dominic Bialas) #167

Hey there,

i´ve got a shadow problem too. I want to use the carousel-example for showing 4 different items. In a first attemp I uses the following code:

<style>
.box {
box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);
}
</style>

<div style="background-color: orange; height:100%; box-shadow: 0 0 0 0 rgba(0, 0, 0, .0);">
  <div uib-carousel active="0" interval="5000" no-wrap="false">
<div uib-slide index="0" >
 <h1>1</h1>1
</div>
<div uib-slide index="1">
  2
</div>
<div uib-slide index="2">
 3
</div>
<div uib-slide index="3">
4
  </div>
  </div>
</div>

But the reuslt looks like:

Could anybody help?

Cheers, Nic.


(FredrikS) #168

If you are trying to remove the shadowed fades at the top - Here is one solution.

<style>
.box {
    box-shadow: none;
}
.carousel-control.left, .carousel-control.right  {
    background-image: none;
}
</style>

Hope this helps.
Fred


(Andrew Pawelski) #169

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


(FredrikS) #170

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.


(Brian M. Pedersen) #171

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


(Michael Parment) #172

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

/Mike


(Alexander) #174

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


(Vasily Karasev) #175

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>

HABPanel Development & Advanced Features: Start Here!
(Alexander) #176

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?


(Vasily Karasev) #177

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.


(Alexander) #178

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?


(Yannick Schaus) #179

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


(Alexander) #180

So is there another way to work with the modal?


(Vasily Karasev) #181

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


(Yannick Schaus) #182

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


(Vasily Karasev) #183

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


(Vasily Karasev) #184

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


(Alexander) #185

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


(Alexander) #186

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