Anzeige eines Labels bei "on" verstecken bei "off"

Begonnen von moonsorrox, 11 März 2018, 02:30:49

Vorheriges Thema - Nächstes Thema

moonsorrox

Ich habe mir eine Tabelle erstellt bei der mehrere Werte hinter einander angezeigt werden sollen, aber nur wenn die Geräte eingeschaltet sind.
Das klappt bei manchen Geräten und bei anderen eben nicht. Und ich muss immer die Seite aktualisieren mit F5.

Was ist falsch an meinem Label..?
Kann man das einfacher darstellen als beide male das Reading zu nutzen, denn beim ersten Text brauche ich das Reading eigentlich nicht nur den Text aber er soll bei "Aus" mit versteckt werden.

Dazu soll der erste Wert/Text linksbündig und die Farbe "weiß" haben und der zweite Wert/Text bei "Ein/on" des Gerätes dann in Rot und rechtsbündig ausgerichtet sein.
Ich formatiere mir hier den Wolf und bekomme es einfach nicht gebacken, vllt kann mir jemand den entscheidenden Tipp geben ob es einfacher geht

Hier mal eine Zeile Code
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="big left-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","Beleuchtung Weg vorn & Schuppen","off","Beleuchtung Weg vorn & Schuppen"]'
data-classes='["white","white"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>


Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

setstate

Das erste Label kann statisch sein. Die DIV-Gruppe dann mit einem Classchanger ein/aus blenden.

moonsorrox

OK, Danke das Widget kannte ich noch gar nicht... :-\
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

Ich habe jetzt nochmal eine Frage zu den Abständen... habe das eigentlich für jedes Gerät gleich gemacht, aber es entstehen zwischen manchen Abstände.
Siehe Screenshot, wie bekomme ich das weg das alle Geräte die Aktiv oder Ein sind untereinander stehen.?

und dazu der Code:

<li data-row="5" data-col="6" data-sizex="4" data-sizey="16">
<!-- Status der Geräte -->
<div class="sheet" style="margin-top:10px; margin-left:10px; width:98%; height:75%; line-height:1.75em; align:center; background-color:#transparent"">
<!-- ==== Türkontakt - Terrasse ==== -->
<div class="hbox ">
<div class="vbox">
<div style="text-align:left; margin-top:0px; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Terrassen Tür","closed","Terrassen Tür"]'
data-classes='["white","white"]'
data-limits='[open,closed]'>
</div>
</div>
<div class="hbox">
<div style="margin-top:0px; text-align:right; font-size:150%"
data-type="label"
data-hide-on="closed"
data-device="WZ_TK_Terrasse"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["crimson","lightgreen"]'
data-limits='[open,closed]'>
</div>
</div>
</div>

<!-- ========== Garagentor ========== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Garagentorsensor" data-get="state" data-get-on="open" data-off-class="hide">
<div style="font-size:150%" data-type="label">Garagen Tor</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="closed"
data-device="Garagentorsensor"
data-get="state"
data-substitution='["open","Offen","closed","Geschlossen"]'
data-classes='["lightgreen","crimson"]'
data-limits='[open,closed]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Wohnzimmer links ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Links</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="WZ_Rollladen_O"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Wohnzimmer rechts ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Wohnzimmer Rechts</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZ"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - WZ - Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Terrasse</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-device="RollladenWZT"
data-get="level"
data-map-get='{"0":"Geschlossen","60":"Beschattung 60%","70":"Beschattung 70%","80":"Beschattung 80%","100":"Oben - Offen"}'
data-limits='[0,60,70,80,100]'
data-colors='["royalblue","darkorange","darkorange","darkorange","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Rollladen - Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" style="font-size:150%">Rollladen Schlafzimmer</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-device="RollladenSZ"
data-get="level"
data-map-get='{"0":"Geschlossen","25":"Beschattung 25%","50":"Beschattung 50%","75":"Home 75%","100":"Oben - Offen"}'
data-limits='[0,25,50,75,100]'
data-colors='["crimson","#00bfff","darkorange","royalblue","lightgreen"]'>
</div>
</div>
</div>

<!-- ==== Schlafzimmer - Fensterkontakt ==== -->
<!--div class="hbox">
<div class="card grow-2">
<div class="big left-align"
data-type="label"
data-hide-on="closed"
data-device="SZ_Fenstersensor"
data-get="state"
data-substitution='["open","Schlafzimmerfenster","tilted","Schlafzimmerfenster","closed","Schlafzimmerfenster"]'
data-classes='["white","white","white"]'
data-limits='[open,tilted,closed]'>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="closed"
data-device="SZ_Fenstersensor"
data-get="state"
data-substitution='["open","Offen","tilted","Gekippt"]'
data-classes='["yellow","crimson"]'
data-limits='[open,tilted]'>
</div>
</div>
</div-->

<!-- ==== LED TV - Lampe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Lampe_TV" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED TV - Lampe</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WZ_Lampe_TV"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["white","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== LED Schrank und Vitrine ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WZ_Schrank" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">LED Schrank & Vitrine</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="WZ_Schrank"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["white","crimson"]'
data-limits='[ON,OFF]'>
</div>
</div>
</div>

<!-- ==== 3x LED Eingang ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AussenLampe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">3x LED Eingang</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="AussenLampe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_01" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg vorn & Schuppen</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_01"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Beleuchtung Weg hinten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="WegLampe_Sw_02" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Weg hinten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="WegLampe_Sw_02"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Beleuchtung Garten ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="AU_Garten" data-get="state" data-get-on="ON" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garten</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="OFF"
data-device="AU_Garten"
data-get="state"
data-substitution='["ON","EIN","OFF","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[ON,OFF]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Licht Terrasse ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtTerrasse" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Terrasse</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtTerrasse"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Licht - OG ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="OG_Licht_Buero" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung OG Büro</div>
</div>
</div>
<div class="card grow-1">
<div class="big right-align"
data-type="label"
data-hide-on="off"
data-device="OG_Licht_Buero"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'
data-refresh="1">
</div>
</div>
</div>

<!-- ==== Tablet Flur Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_FlurOben" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Flur Oben</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_FlurOben"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Tablet Küche Ladestation ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="di_Ladestation_Kueche" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Tablet Küche</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="di_Ladestation_Kueche"
data-get="state"
data-substitution='["on","Wird geladen","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
 
<!-- ==== Schlafzimmer Uhr ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Uhrzeit" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Schlafzimmer Uhr</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Uhrzeit"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ====== Türklingel ====== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="Klingel" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Türklingel</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="Klingel"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ==== Gardena Pumpe ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="GardenaPumpe" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Gardena Pumpe</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="GardenaPumpe"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Licht Garage ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtGarage" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Garage</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtGarage"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
   
<!-- ==== Licht Schlafzimmer ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtSZ" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Beleuchtung Schlafzimmer</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtSZ"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>

<!-- ==== Licht Weihnachten Busch ==== -->
<div class="hbox">
<div class="card grow-2">
<div class="left-align" data-type="classchanger" data-device="LichtEG" data-get="state" data-get-on="on" data-off-class="hide">
<div style="font-size:150%" data-type="label">Licht Weihnachten Busch</div>
</div>
</div>
<div class="card grow-1">
<div class="right-align" style="font-size:150%"
data-type="label"
data-hide-on="off"
data-device="LichtEG"
data-get="state"
data-substitution='["on","EIN","off","AUS"]'
data-classes='["lightgreen","crimson"]'
data-limits='[on,off]'>
</div>
</div>
</div>
</div>
</li>
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM

moonsorrox

Mhh, keiner eine Lösung für mich..?
Ich weiß da grad nicht was schief läuft
Intel-NUC i5: FHEM-Server 6.1 :: Perl v5.18.2

Homematic: HM-USB-CFG2,HM-CFG-LAN Adapter, HM-LC-BL1-FM, HM-LC-Sw1PBU-FM, HM-LC-Sw1-PI-2, HM-WDS10-TH-O, HM-CC-TC, HM-LC-SW2-FM