Widget Slider defekt

[dirk.k]

Hallo,
seit dem letzten Update gestern sind meine Slider defekt.
Es gab ja irgend welche Änderungen ...
FHEM Tablet UI last changes:
2019-12-12
- widget_slider: changed style classes
Die haben jetzt Monatelang gut funktioniert. Ausser dem FTUI-Update wurde nichts geändert.
2 Beispiele habe ich angehangen. Die mit OK im Dateinamen sind aus der prod-Umgebung, die -fail dateien aus der Aktualisierten.
Hat jemand einen Tip oder das gleiche Problem?
Hier noch der Code:

Code Auswählen Erweitern

   <li  data-row="8" data-col="11" data-sizex="2" data-sizey="2" class="bgi">
        <header><div data-type="label" class="medium orange">TV Backlight</div></header>   
                       <div class="">
<div class="col-1-2 top-space"><br/>
<div data-type="circlemenu" data-device="WeMos_S3" data-get="RGB" data-off-background-color="#A6BF17" data-background-color="RGB"  data-on-background-color="RGB" class="">
    <ul>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="RGB" data-background-color="RGB"  data-on-background-color="RGB" data-get="RGB"  data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FF0000" data-off-color="#FF0000" data-set="RGB" data-set-on="FF0000" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FFFF00" data-off-color="#FFFF00" data-set="RGB" data-set-on="FFFF00" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#00FF00" data-off-color="#00FF00" data-set="RGB" data-set-on="00FF00" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#00FFFF" data-off-color="#00FFFF" data-set="RGB" data-set-on="00FFFF" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#088CFF" data-off-color="#088CFF" data-set="RGB" data-set-on="088CFF" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#0000FF"  data-set="RGB" data-set-on="0000FF" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FF00FF"  data-set="RGB" data-set-on="FF00FF" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FFFFFF"  data-set="RGB" data-set-on="FFFFFF" data-icon="fa-paint-brush"></div></li>
<li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#000000"  data-set="RGB" data-set-on="000000" data-icon="fa-paint-brush"></div></li>
    </ul>
</div>
<div class="">Sensor-licht</div>
</div>
                        </div>

<div data-type="slider" data-device="WeMos_S3" data-min="0" data-max="100" data-get="RGBv" data-set="RGBv" data-cmd="setreading" data-background-color="#000000" class=" inline top-space"></div>

</li>


[setstate]

ja, da war noch eine Verbesserung am Slider CSS nötig. Hatte nicht daran gedacht, dass man den vertikalen Slider auch ohne class="vertical" angeben kann.

Aber etwas Aufräumen an deinen benutzen Klassen ist auch nötig.

Code Auswählen Erweitern


            <li  data-row="8" data-col="11" data-sizex="2" data-sizey="2" class="bgi">
                <header class="orange">TV Backlight</header>   
                    <div class="hbox">
                      <div class="vbox">
                        <div data-type="circlemenu" data-device="WeMos_S3" data-get="RGB" data-off-background-color="#A6BF17" data-background-color="RGB"  data-on-background-color="RGB">
                            <ul>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="RGB" data-background-color="RGB"  data-on-background-color="RGB" data-get="RGB"  data-icon="fa-wrench"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FF0000" data-off-color="#FF0000" data-set="RGB" data-set-on="FF0000" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FFFF00" data-off-color="#FFFF00" data-set="RGB" data-set-on="FFFF00" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#00FF00" data-off-color="#00FF00" data-set="RGB" data-set-on="00FF00" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#00FFFF" data-off-color="#00FFFF" data-set="RGB" data-set-on="00FFFF" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#088CFF" data-off-color="#088CFF" data-set="RGB" data-set-on="088CFF" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#0000FF"  data-set="RGB" data-set-on="0000FF" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FF00FF"  data-set="RGB" data-set-on="FF00FF" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#FFFFFF"  data-set="RGB" data-set-on="FFFFFF" data-icon="fa-paint-brush"></div></li>
                          <li><div data-type="push" data-device="WeMos_S3" data-off-background-color="#000000"  data-set="RGB" data-set-on="000000" data-icon="fa-paint-brush"></div></li>
                            </ul>
                        </div>
                        <label>Sensor-licht</label>
                      </div>
                    <div data-type="slider" data-device="WeMos_S3" data-min="0" data-max="100" data-get="RGBv" data-set="RGBv" data-cmd="setreading" data-background-color="#000000"></div>
                  </div>
            </li>


[der_oBi]

Hi,

bei mir ist es ein ähnliches Problem. Meine Slider lassen sich einfach garnicht mehr per class im Style ändern.
Ich habe die Lösung oben aber auch nicht verstanden. Du hast das class einfach komplett rausgelöscht?
Das habe ich auch versucht, ändert bei mir aber auch nichts. Ganz zu schweigen davon, dass ich gerne weiterhin class="big top-space" nutzen würde

[der_oBi]

Hat niemand eine Idee? 

[OdfFhem]

@der_oBi

Hast Du denn mal ein konkreteres Beispiel mit Definition und Screenshot? Ansonsten wird es schwierig ...

[der_oBi]

Gerne doch.
Hier mal drei unterschiedliche Styles für je einen Slider, aussehen tun aber alle drei gleich

Code Auswählen Erweitern


                            <div class="cell">
                       <div data-type="label" class="darker">Wand</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wzwand" data-set="dim" class="vertical big"></div>
                       <div data-type="switch" data-icon="oa-light_wall_2" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wzwand" data-set-on="on" class="big top-space"></div>
                            </div>
                    <div class="cell">
                       <div data-type="label" class="darker">Tisch</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wztisch" data-set="dim" class="vertical"></div>
                       <div data-type="switch" data-icon="oa-light_pendant_light" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wztisch" data-set-on="on" class="big top-space"></div>
                    </div>
                            <div class="cell">
                       <div data-type="label" class="darker">Decke</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wzdecke" data-set="dim" class="vertical mini"></div>
                       <div data-type="switch" data-icon="oa-light_ceiling_light" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wzdecke" data-set-on="on" class="big top-space"></div>
                    </div>


[OdfFhem]

@der_oBi

Am slider-Widget hat es in letzter Zeit einige Änderungen gegeben. Neu ist wohl hauptsächlich

... Es muss ein Container benutzt werden, der sich automatisch auf max. Höhe ausdehnt. ...

Da ich jetzt nicht weiß, was Du mit den class-Angaben im slider-Widget genau erwartet hättest, hänge ich mal nur einen Schreenshot an. Wäre das die Erwartung gewesen, oder doch irgendwie anders?

[der_oBi]

ich hätte erwartet, dass es wieder so aussieht wie vorher also in etwa so wie das Beispiel in der Mitte würde ich tippen.
Die 3 Slider sollen auch gleich aussehen. Mein Code-Beispiel sollte nur zeigen, dass meine Slider auf die class-Angabe pfeifen, egal was ich dort angebe.

Was bedeutet "Container, der sich automatisch auf max. Höhe ausdehnt"? Das Ganze steckt in folgendem li

Code Auswählen Erweitern

<li data-row="4" data-col="1" data-sizex="3" data-sizey="6">
                <header>Wohnzimmer</header>
                <div class="sheet">
                <div class="row-20">
                <div class="cell">
                <div data-type="label" class="darker">Ecke</div>
                        <div data-type="switch" data-icon="oa-light_floor_lamp" data-device="Leuchte_EG_Wz_Ecke"></div>
                </div>
                <div class="cell">
                </div>
                <div class="cell">
                </div>
                </div>
                    <div class="row">
                    <div class="cell">
                       <div data-type="label" class="darker">Wand</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wzwand" data-set="dim" class="vertical big"></div>
                       <div data-type="switch" data-icon="oa-light_wall_2" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wzwand" data-set-on="on" class="big top-space"></div>
                        </div>
                    <div class="cell">
                       <div data-type="label" class="darker">Tisch</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wztisch" data-set="dim" class="vertical"></div>
                       <div data-type="switch" data-icon="oa-light_pendant_light" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wztisch" data-set-on="on" class="big top-space"></div>
                    </div>
                        <div class="cell">
                       <div data-type="label" class="darker">Decke</div>
                       <div data-type="slider" data-part="2" data-device="Dimmer_EG_Wzdecke" data-set="dim" class="vertical mini"></div>
                       <div data-type="switch" data-icon="oa-light_ceiling_light" data-get-on="on|dim ([0-9].*)" data-device="Dimmer_EG_Wzdecke" data-set-on="on" class="big top-space"></div>
                    </div>
                    </div>
                </div>
            </li>

[OdfFhem]

Ein Container, der sich maximal ausbreitet, ist z.B. vbox; dieser nimmt sich für seine Darstellung allen Platz, den er kriegen kann.

Angewendet auf Dein Beispiel, sollte einfach die Ergänzung von vbox und einem geeigneten data-height-Wert zum gewünschten Ergebnis führen:

Code Auswählen Erweitern


  <div class="cell">
    <div class="vbox">
      <div data-type="label" ...
      <div data-type="slider" data-device="ftuitest" data-get="watt" data-part="1" class="vertical" data-height="90%"></div>
      <div data-type="switch" ...
    </div>
  </div>

Bei Verwendung von data-height kann man in den meisten Fällen mini, big, usw. auch weglassen; es sei denn, man verwendet z.B. zusätzlich die value-Klasse.

[der_oBi]

Hey OdfFhem,

sieht zwar nicht genauso aus wie vor der Umstellung des Slider-Widgets, aber es funktioniert grundsätzlich und alles bleibt in meiner Box
Danke dafür!

Nun nutze ich ja bisher das sheet-row-cell Layout. Spricht irgendwas dagegen, das Ganze mit dem vbox-Layout zu mischen?
Oder auch: hat vbox vielleicht sowieso mehr Vorteile? Ich bin ehrlich, ich habe mich bei der Erstellung meiner FTUI-Seiten damit garnicht beschäftigt, sondern habe von Anfang an alles nach sheet-row-cell aufgebaut.