Retro-Slider mit Skala und rechteckigem Schiebeknopf

[eki]

Das liegt meines Erachtens eher am FTUI Framework (die Rolläden werden ja nicht mit falschem Hintergrund sondern mit falschem Status dargestellt).

FTUI nutzt den sogenannten local Storage des Browsers um den Status von FHEM zu cachen, damit der Bildaufbau beim Starten schneller geht. Da ist erst mal noch keine Kommunikation mit FHEM, die ersten Zustände der UI Elemente werden aus dem Cache gefüttert. Dann wird eine Anfrage an den FHEM Server losgeschickt, und wenn der antwortet werden die Informationen aus der Antwort genutzt um die FTUI Elemente zu aktualisieren. Hast Du schon mal ein bisschen gewartet, ob sich am Status noch was ändert, das Update dauert manchmal etwas.

[dadoc]

Hab nochmal herumprobiert: Warten bewirkt anscheinend keine Änderung. Wenn ich auf dem iPad den Cache lösche, tritt das Problem reproduzierbar sowohl in Safari als auch in Chrome auf. Was mich wundert ist dass alle anderen Stati (FS20-Dimmer, HM-Thermostaten uvm.) sofort korrekt angezeigt werden. Wie gesagt: nicht nur die Rollladen-Bilder, sondern auch der Structure-Slider der Rollläden werden nicht auf Anhieb aktualisiert, aber sofort bei der Tablet-Drehung, die m.W. keine erneute Anfrage an den Server auslöst?
Grüße
Martin

[dadoc]

So, endlich konnte ich noch ein bisschen forschen. Problem tritt auch im Desktop-Browser auf, aber wenn man das Browserfenster nur minimal skaliert (vulgo: mit der Maus an einer Fensterecke zieht), springen die Stati/Hintergrundbilder sofort in die korrekte Position.
Was das Problem verursacht ist die data-height-Angabe. Ich habe sie genutzt, um das Hintergrundfoto auf die Gridster-Box-Größe zu skalieren. Nehme ich das raus, klappt es mit den Stati, aber das Foto skaliert dann halt nicht mehr auf die Box-Höhe.
Kann ich mit leben, aber ist das Bug oder Feature?
Grüße
Martin

[eki]

Poste mal Dein HTML hier, dann schau Ochsen mir mal an.

[dadoc]

Poste mal Dein HTML hier, dann schau Ochsen mir mal an.

Hat das Zeug, zu meiner Lieblings-Autokorrektur zu werden

Der beschriebene Effekt lässt sich bei mir schon in der einfachsten Slider-Variante beobachten:

Code Auswählen Erweitern

<li data-row="7" data-col="8" data-sizex="1" data-sizey="3" class="semitransparent">
<header class="semitransparent">Rolllll</header>
<div data-type="slider"
data-device="Rolllaeden_WZ_structure"
data-get="STATE"
data-height="mini"
data-on="on"
data-off="off"
data-color="#969696"
>
</div>
</li>
Da bleibt der Slider auf Null, bis man einmal die Seite wechselt oder das Browserfenster skaliert (ebenso bei "60px" statt "mini").
Grüße
Martin

[dadoc]

So, ich hab es jetzt mal mit einem frisch runtergeladenen css- und js-Verzeichnis und dem ganz normalen Slider ausprobiert. Problem bleibt, daher were ich das mal in einem separaten Thread posten...
Grüße
Martin

[eki]

Ich habe es mir mal ganz grob angeschaut. Es scheint irgendwie ein timing Problem zu sein. Der Slider nutzt ein externes Modul mit Namen powerange (aus dem lib Ordner). Die Aufrufe dieses Moduls aus widget_slider.js scheinen OK zu sein, aber manchmal werden sie nicht richtig umgesetzt. Es könnte sein, dass der Slider die Inputs zum Einstellen der aktuellen Werte zu einem Zeitpunkt bekommt, wo er noch gar nicht richtig aufgebaut ist. Ich habe jetzt einfach mal eine Verzögerung an einer Stelle eingebaut, und bei mir klappt es dann (probier mal die angehängte Version von widget_slider.js). Das ist aber meines Erachtens keine wirkliche Lösung, das sollte sich Mario (setstate) noch mal anschauen, der steckt da tiefer drin.

[dadoc]

Ja, da scheinst Du dem Problem auf die Spur gekommen zu sein. Nun sieht man beim Laden der Seite, dass der Slider erst kurz auf Null steht und dann auf die Position springt. Aber irgendwie ist da ja auch sonst der Wurm drin, denn sobald data-height gesetzt wird, füllt der Slider immer die Gridsterbox in ihrer gesamten Höhe aus.
Ich hab das wie gesagt mal als eigenen Thread aufgemacht, da der Titel hier ja etwas in die Irre führt: https://forum.fhem.de/index.php/topic,93148.0.html
Grüße
Martin

[benedikt-wue]

Hi,
das sieht toll aus... allerdings hätte ich das gerne horizontal anstatt vertikal... Dafür bin ich aber zu doof...
data-orientation löschen (also Standard = horinzontal) bzw auf "horizontal" ändern hilft schonmal nicht?!

Wäre toll, da das Ganze hervorragend in meine Spotify - FTUI reinpassen würde!
Dankeschön!

[grossmaggul]

Im Prinzip musst Du zusätzlich zur "orientation" noch data-width und data-height vertauschen, bei mir sieht das so aus:

Code Auswählen Erweitern

<div class="vbox">   
            <div class="top-narrow"
                 data-type="scale"
                 data-orientation="horizontal"
                 data-device="var_device"
                 data-get="volume"
                 data-set="volume"
                 data-height="45"
                 data-width="280"
                 data-value-interval="50"
                 data-tick="5"     
                 data-extra-tick="25"
                 data-colors='["green","#FFBF00","#EF0002"]'
                 data-limits='["1","50","75"]'>
            </div>
            <div class="horizontal left-narrow tap retro top-narrow-4x"
                 data-type="slider"
                 data-device="var_device"
                 data-width="280"
                 data-get="volume"
                 data-set="volume"
                 data-color="black"
                 data-background-color="black">
            </div>       
            </div>

Und dann noch das dazugehörige CSS Element:

Code Auswählen Erweitern

/* Retroslider angepasst von gm auf horizontal*/
.retro .range-handle {
    top: -11px !important;
}

.retro .range-handle {
  width: 15px !important;
  height: 30px !important;
  border-radius: 3px !important;
  background-color: blue;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
}