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
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
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.
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
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:
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.
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
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.
thanks a lot, i replaced the lines mentioned by ysc and now it works! really great!
oh, ok. i think this was the “problem” - lights of the group i used havent been turned on…
Perfect!
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>