Anordnung Widges, Text als Symbol in Button, Buttons und Switches deaktivieren

[Ulm32b]

Hallo miteinander,

als Rookie habe ich eine sehr steile Lernkurve. Nach einigem Probieren und Suchen traue ich mich jetzt, einige offene Fragen hier zu posten. Hintergrund: Ich erstelle eine Überwachung für zwei vom Haus aus nicht einsehbare Garagentore. Mit einer Hörmann-Steuerung (Zusatzmodul) können dabei die Befehle AUF, AB und STOP explizit abgesetzt werden; das spart Ärger mit Toggles. Außerdem gibt es bei Hörmann Statusmeldungen für OBEN und UNTEN, das ist ebenfalls eine robuste Basis.

Leider kann ich hier keinen Screenshot des Entwurfes für das Frontend posten; das macht die Sache unübersichtlicher. Nachfolgend ein Codeschnipsel (Entwurfsstadium, daher GPIO):

Code Auswählen Erweitern


<li data-row="1" data-col="1" data-sizex="3" data-sizey="3">
<header><H1>Garage Nord</H1></header>

<div class="top-space-2x">

<div class="container">

<div data-type="symbol" data-device="Garage_Nord_Status" data-icons='["oa-fts_garage_door_10 bigger","oa-fts_garage_door_100 bigger","fa-cog fa-3x fa-spin","oa-fts_garage_door_40 bigger","fa-bug fa-3x"]'
     data-on-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'
     data-get-on='["oben","unten","lauf","angehalten","Fehler"]'></div>


<div data-type="switch" class="cell big"
            data-device="GPIO_17"
            data-icon="oa-it_camera"
            data-color="hsl(50,100%,50%)"
            data-get-on="on"
            data-get-off="off"></div>

</div>

<div data-type="switch" class="cell big wider"
     data-device="Garage_Nord_Fahrbefehl_auf"
     data-icon="fa-chevron-up"
     data-cmd="set GPIO_17 on"
     data-color="hsl(50,100%,50%)"
     data-get-on="on"
     data-get-off="off"></div>

<div data-type="button"
     data-device="Garage_Nord_Fahrbefehl_Stop"
     data-cmd="set Garage_Nord_Fahrbefehl_Stop_Timer on-for-timer 2;set Garage_Nord_Status angehalten"
     data-get-off="off"
     data-icon="fa-check-circle" class="cell big wider">
</div>


<div data-type="switch" class="cell big wider"
     data-device="Garage_Nord_Fahrbefehl_ab"
     data-icon="fa-chevron-down"
     data-color="hsl(50,100%,50%)"
     data-get-on="on"
     data-get-off="off"></div>


</div>

</li>



Meine Fragen:

1. Anordnung Widgets: Der Switch für die Kamera überdeckt das große Symbol für das Garagentor. Ich habe es noch nicht geschafft, beides augenfreundlich nebeneinander zu positionieren.

2. Text als Symbol in Button: Ich hätte gerne den Text "STOP" im Button "Garage_Nord_Fahrbefehl_Stop". Mit SVG habe ich es noch nicht hinbekommen. Geht es auch einfacher?

3. Buttons und Switches deaktivieren: In Abhängigkeit des Status von Aktoren und Sensoren wäre es nützlich, einzelne Elemente dynamisch zu aktivieren bzw. deaktivieren. Beispiel: Wenn das Tor steht, sollte der STOP-Button nicht aktiv sein. Mir schwebt etwas vor wie ".inactive" in VBA. Wie kann ich das (hinsichtlich Funktion und Farbsteuerung) umsetzen?

Gerne bin ich bereit, meine fertige Lösung zu teilen. Bis dahin werde ich noch manches lernen müssen. Vielen Dank schon jetzt an die erkennbar emsige Community.

Ulm32b

[setstate]

1.) mit class="inline" heften Widgets nebeneinander

2.) Bei Link-Widgets kann man mit Text arbeiten

Code Auswählen Erweitern


   <div data-type="link"
        data-device="Garage_Nord_Fahrbefehl_Stop"
        data-fhem-cmd="set Garage_Nord_Fahrbefehl_Stop_Timer on-for-timer 2;set Garage_Nord_Status angehalten"
        class="inline big wider">STOP</div>


3.) gute Idee, schaue ich mir an ...