udo1toni hat geschrieben: ↑2. Nov 2020 09:38
......Das vorhandene Auswahl-Widget könnte man vielleicht entsprechend ergänzen......
Danke Udo
Ja, das wäre auch interessant, ob und wie man ein vorhandenes widget als Vorlage für eigene Kreationen / Programmierungen verwenden könnte.
Werde dazu einen eigenen Faden eröffnen.
Aber hier mein Versuch,der soweit gut funktioniert. Ist natürlich nicht von mir, nur etwas erweitert bzw. umgebaut. Dieursprüngliche Variante ist von
https://community.openhab.org/t/custom-popups/24889, Weiter Ideen von
viewtopic.php?t=1080
Danke einstweilen, solong.
Code: Alles auswählen
<style>
.custom-modal-container {
background: rgba(0, 0, 0, 0.75);
opacity: 0;
color: white;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s linear 0.5s;
transition: opacity 0.5s, visibility 0s linear 0.5s;
z-index: 99999;
}
.custom-modal {
position: absolute;
top: 50%;
left: 50%;
padding: 2em;
border-radius: 0.5em;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.custom-modal.close-modal-area {
width: 100%;
height: 100%;
}
.custom-modal-content .custom-modal {
width: 100%;
max-width: 40em;
}
.toggle-modal-button {
background-color: transparent;
color: white;
display: inline-block;
padding: 1em;
cursor: pointer;
border-radius: 0.5em;
box-shadow: inset 0 0 1px white;
}
.toggle-modal-button:hover, .toggle-modal-button:focus,
.toggle-modal-button:active {
//background-color: rgba(0, 0, 0, 0.25);
box-shadow: none;
color: peru;
}
.custom-modal-content {
color: peru;
width: 90%;
max-width: 600px;
padding-top: 0em;
margin: 0 auto;
}
.custom-modal.custom-modal-box {
background: indianred;
text-align: center;
}
.custom-modal-container.active {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.black { background-color: black; }
.green { background-color: green; }
.red { background-color: red; }
.blue { background-color: blue;}
.yellow { background-color: yellow; color:black;}
.custom-modal-content .toggle-modal-button {
//color: rgba(255, 255, 255, 0.75);
//margin-bottom: 1em;
}
</style>
<section class="custom-modal-container" ng-class="{ active: show_modal}">
<div for="toggler" class="custom-modal close-modal-area" ng-click="show_modal=false"></div>
<div class="custom-modal custom-modal-box">
<div>Are you sure?</div>
<br />
<div class="toggle-modal-button" style="background-color:yellow; color:black" ng-click="show_modal=false; sendCmd('Heizung', 'HAND')">HAND</div>
<div class="toggle-modal-button" style="background-color:green;" ng-click="show_modal=false; sendCmd('Heizung', 'AUTO')">AUTO</div>
<div class="toggle-modal-button" style="background-color:blue;" ng-click="show_modal=false; sendCmd('Heizung', 'AUS')">AUS</div>
</div>
</section>
<section class="custom-modal-content">
<div class="toggle-modal-button" ng-click="show_modal=true" ng-class="{ active: show_modal,
yellow: itemValue('Heizung')=='HAND',
green: itemValue('Heizung')=='AUTO',
blue: itemValue('Heizung')=='AUS'}">
Heizung<BR>{{itemValue('Heizung')}}</BR></div>
</section>
Und noch die funktionieren rule, vielleicht kann ja jemand was damit selber anfangen.
Code: Alles auswählen
rule "Heiz"
when
Item Heizung changed
then
if(Heiz_VL_setpoint.state == NULL || Heiz_VL_setpoint.state == UNDEF){
//if( !(Sonde_SDE_Hum.state instanceof UnDefType
postUpdate(Heiz_VL_setpoint, 30)
}
logInfo("heiz.rules","Heizung= " + Heizung.state )
val actions = getActions("mqtt","mqtt:broker:mosquitto")
switch (Heizung.state){
case "HAND":{ //rule for scene 1
logInfo("heiz.rules","Heizung= case1" )
actions.publishMQTT("Heiz/cmd/Heizung","HAND")
}
case "AUTO":{ //rule for scene 2
logInfo("heiz.rules","Heizung= case2" )
actions.publishMQTT("Heiz/cmd/Heizung","AUTO")
}
case "AUS":{ //rule for scene 2
logInfo("heiz.rules","Heizung= case3" )
actions.publishMQTT("Heiz/cmd/Heizung","AUS")
}
}
end