FHEM Forum

Hallo zusammen,

bastel gerade an einer Tablet-UI fürs Handy. Würde gerne bei meiner Rolladensteuerung gewisse div's einblenden bzw. ausblenden abhängig davon, ob mein Switch on oder off ist.

Also wenn Switch "on" dann soll ein Slider angezeigt werden, wenn Switch "off" ein Textfeld.

Kann mir dabei jemand helfen wie ich das mit Javascript realisieren kann? Mir würde schon reichen wie man den Zustand des Switch abfragt.

MfG Darkon

Hi,

dazu braucht man kein zusätzliches JS.
Schau dir mal das Widget Classchanger an: https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger (https://wiki.fhem.de/wiki/FTUI_Widget_Classchanger)

Damit kannst du zwei verschiedene CSS Klassen in der -user.css je nach Zustand laden lassen.


.da {
    visibility: visible;
}

.nichtda {
    visibility: hidden;
}



Super genial... Ich danke dir

Ich bin leider nicht in der Lage das realisieren  ???

<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="dasun"
                                                                data-off-class="datime"
                                                                class="big">

                                                                <div data-type="select"
                                                                       id="sunwzrollotuerhoch"
                                                                       data-device="SUN_WZ_Rollo_Tuer_Hoch"
                                                                       data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]'
                                                                </div>

                                                                <div data-type="datetimepicker"
                                                                       id="timewzrollotuerhoch"
                                                                       data-device="TIME_WZ_Rollo_Tuer_Hoch"
                                                                       data-set-value="$v"
                                                                       data-format="H:i"
                                                                       data-step="15"
                                                                       data-datepicker="false">
                                                                </div>
                                                       </div>


.sunda {
        #sunwzrollotuerhoch {visibility: visible;}
        #timewzrollotuerhoch {visivility: hidden;}
}

.timeda {
        #sunwzrollotuerhoch {visibility: hidden;}
        #timewzrollotuerhoch {visivility: visible;}
}


Müsste das nicht funktionieren?

Ich würde erstmal versuchen es relativ einfach zu beginnen .... d. h. nicht gleich klassen und id's zu mixen...ungetestet:

<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="da"
                                                                data-off-class="nichtda"
                                                                class="big">

                                                                <div data-type="select"
                                                                       id="sunwzrollotuerhoch"
                                                                       data-device="SUN_WZ_Rollo_Tuer_Hoch"
                                                                       data-items='["0","5","10","15","20","25","30","35","40","45","50","55","60","65","70","75","80","85","90","95","100"]'
                                                                </div>
</div>
<div data-type="classchanger"
                                                                data-device="SUN_WZ_Rollo_Tuer_Hoch_Status"
                                                                data-get-on="an"
                                                                data-get-off="aus"
                                                                data-on-class="nichtda"
                                                                data-off-class="da"
                                                                class="big">

                                                                <div data-type="datetimepicker"
                                                                       id="timewzrollotuerhoch"
                                                                       data-device="TIME_WZ_Rollo_Tuer_Hoch"
                                                                       data-set-value="$v"
                                                                       data-format="H:i"
                                                                       data-step="15"
                                                                       data-datepicker="false">
                                                                </div>
</div>


.css:

.da {
        visibility: visible;
}

.nichtda {
        visibility: hidden;
}


ggf. noch in den classchanger Widgets die on- und off-classes anpassen.

Gruß
Mathias

/btw:
Deine Klassenangaben in der classchanger und css Definition sind ebenfalls unterschiedlich:

Zitat

Code Auswählen Erweitern


...
                                                               data-on-class="dasun"
                                                                data-off-class="datime"
...

Code Auswählen Erweitern


...
.sunda {
...
.timeda {
...