Retro-Slider mit Skala und rechteckigem Schiebeknopf

[dadoc]

Vielleicht kann es ja mal jemand gebrauchen. Ich wollte einen Lautstärkeregler, der wie die von alten Mischpulten aussehen sollte, und das ist dabei herausgekommen.
So klappte die Kombination aus slider- und scale-Widget bei mir:

Code Auswählen Erweitern


<div class="doublebox-h">
<div
class="right-narrow"
data-type="scale"
data-orientation="vertical"
data-device="SB_Denon"
data-get="volume"
data-set="volume"
data-height="155"
data-width="45"
data-value-interval="50"
data-tick="5"
data-extra-tick="25"
data-font-size="16"
data-colors='["green","#FFBF00","#EF0002"]'
data-limits='["1","50","75"]'
>
</div>
<div
class = "value left-narrow"
data-type="slider"
data-height="150"
data-device="SB_Denon"
data-get="volumeStraight"
data-set="volume"
data-color="grey">
</div>
</div>

Und den geriffelten, rechteckigen Knopf statt des runden z.B. so in der fhem-tablet-ui-user.css:

Code Auswählen Erweitern

.vertical .range-handle {
    left: -17px !important;
}

.range-handle {
  width: 35px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background-color: black;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
}
Grüße
Martin

[eki]

Sieht cool aus.

Eventuell sollte man solche speziellen "Anpassungen" des Slider Widgets im entsprechenden Wiki beschreiben (https://wiki.fhem.de/wiki/FTUI_Widget_Slider).

Ich habe vor einiger Zeit mal etwas ähnliches gemacht, um bei der Verwendung der Slider als Rolladensteuerelemente eine passende Darstellung zu bekommen (siehe https://forum.fhem.de/index.php/topic,71056.msg660561.html#msg660561). Das würde ich demnächst dann auch mal im Wiki dazufügen.

[dadoc]

Ich habe es mal zu den Beispielen gepackt: https://wiki.fhem.de/wiki/FTUI_Widget_Slider#Retro-Schieberegler_mit_Skala_und_rechteckigem_Riffelknopf

[eki]

Habe ich für meinen Ansatz zu den Rolladen nun auch gemacht (gleiche Stelle dahinter).

[dadoc]

Prima. Du hast aber vergessen dazuzuschreiben, dass man vorher noch in ein Haus am Meer umziehen muss, damit die Realität zu der Anzeige passt

[dadoc]

Hallo Eki,

Habe ich für meinen Ansatz zu den Rolladen nun auch gemacht (gleiche Stelle dahinter).

Funktioniert das bei Dir (noch)? Wollte es gerade erstmals einsetzen, aber da erscheinen keinerlei Bilder... Pfade sollten passen; Hintergrundbild habe ich im css deaktiviert, aber dennoch: Nur der nackte Slider zu sehen.
Grüße
Martin

[eki]

Bei mir funktioniert das noch, ich bin aber auch noch bei FTUI 2.6. Welche FTUI Version benutzt Du?

[dadoc]

Bei mir läuft Version: 2.7.1

[eki]

OK, damit muss ich das dann noch mal nachprüfen, melde mich dann.

[eki]

Ich habe es jetzt mit der FTUI Version 2.7.1 getestet, bei mir klappt das auch mit dieser Version.

Poste mal Beispiele für Deine HTML und css Dateien.

[dadoc]

HTML:

Code Auswählen Erweitern

<li data-row="2" data-col="9" data-sizex="2" data-sizey="3">
<header class="large semitransparent">BAD</header>
<div data-type="slider"
data-handle-diameter="15"
data-get="state"
data-set="pct"
data-device="rollaeden_bad_structure"
data-color="#969696"
data-height="125"
class="blind blindview">
</div>
</li>
(mir ist aufgefallen, dass Du im Wiki-Eintrag zweimal data-device  drin hast - sollte aber nicht der Grund sein)

fhem-tablet-ui-user.css:

Code Auswählen Erweitern

body {
background:#000000 url(../images/kussmund5.jpg) 0 0 no-repeat !important;
background-size: 1024;
}

/* Definition for styles to be used for extension of slider widget for display of blinds, awnings etc. */
/* normal lines */

.blind > .vertical .range-bar {
    width: 70%;
border-radius: 2px;
background-image: url(../images/Blinds.jpg);
background-position: center bottom;
background-blend-mode: multiply;
background-size: cover;
}

.blind > .vertical .range-quantity {
border-radius: 3px;
}

.blind > .vertical .range-handle {
margin-left: 52% !important;
}

.blindview > .vertical .range-quantity {
border-radius: 2px;
background-image: url(../images/WindowContentSimpleGrey.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-blend-mode: difference;
}

.awning > .vertical .range-bar {
    width: 70%;
border-radius: 2px;
background-image: url(../images/AwningContentSimpleGrey.png);
background-position: center bottom;
background-blend-mode: difference;
background-size: 100% 100%;
}

.awning > .vertical .range-quantity {
border-radius: 3px;
}

.awning > .vertical .range-handle {
margin-left: 52% !important;
}

Die Bilder sind - wie alle, die ich mit ftui nutze, in

Code Auswählen Erweitern

/opt/fhem/www/tablet/images
Daher: url(../images/...
Viele Grüße
Martin

[eki]

Ich erinnere mich dunkel, dass mit FTUI Version 2.7 eine Änderung enthalten war, die zu Problemen geführt hat. Probiere mal im css File überall bei den speziellen slider Settings die > wegzumehmen. Also beispielsweise statt:

Code Auswählen Erweitern

.blind > .vertical .range-bar


Code Auswählen Erweitern

.blind .vertical .range-bar

[dadoc]

Gerade probiert. Der einzige Unterschied zu vorher ist dass der vertikale Strich verschwindet, d.h. nur noch der runde Handle ist sichtbar.

[eki]

Mach mal folgendes. Geh im Browser Fenster mit der maus auf einen der Slider und öffne mit der rechten Maustaste aus dem Kontextmenu den Eintrag "Element Untersuchen" (oder die entsprechende englische Variante).
Dann sollte unten so etwas wie im angehängten Bild aufgehen. Auf der rechten Seite siehst Du die ganzen css Regeln. Checke mal ob das bei Dir anders aussieht bzw. geh mit der Maus auf den Pfad, der hinter background-image beim Selektor .blindview ".vertical .range-quantity" steht, dann sollte das Bild hochkommen (zumindest im FF).
Wie sieht das bei Dir aus?

[dadoc]

Das sieht bei mir insofern anders aus, als dass weder "blind" noch "blindview" usw. in den css-Regeln vorkommen und somit auch nicht der Pfad zu den Bildern.
Dabei wird die fhem-tablet-ui-user.css durchaus verwendet - wenn ich z.B. den Retro-Button aktiviere bzw. auskommentiere. Daran sollte es also nicht liegen.

[eki]

Kannst Du mal Deine Sicht hier als Bild posten (alles unterhalb des slider divs aufgeklappt).

[dadoc]

So?

[eki]

Das schaut für mich so aus, als ob das fhem-tablet-ui-user.css gar nicht genutzt wird (die Klassen sind richtig gesetzt etc). Kannst Du mal schauen ob und in welcher Reihenfolge Du die css files in Deinem Header einbindest? Es müsste auf jeden Fall das fhem-tablet-ui-user.css nach dem fhem-tablet-ui.css eingebunden werden.

[dadoc]

Hmm... ich nutze ja Pagetab, da sind die css in der index.html definiert:

Code Auswählen Erweitern

    <link rel="apple-touch-icon" href="/fhem/tablet/custom-icon.png" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

<!-- <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" /> -->


    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="/fhem/tablet/css/fhem-green-ui.css" / -->
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<!-- <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user-mixerxxx.css" />< -->
<!-- <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>
Müsste aber passen?
Und wie gesagt: Wenn ich irgendetwas anderes in /fhem/tablet/css/fhem-tablet-ui-user.css ändere - etwa den Code für den Retro-Button

Code Auswählen Erweitern

.vertical .range-handle {
    left: -17px !important;
}

.range-handle {
  width: 35px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background-color: black;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
}
einfüge, ändert sich das in der ftui-Anzeige sofort, d.h. der Handle wird vom runden zum rechteckig-geriffelten Modell.

[eki]

Was passiert denn, wenn Du folgendes simples HTML File öffnest?

[dadoc]

Das:

[eki]

Dann ist da irgenwas mit den Pfaden nicht richtig. Wie sieht es denn mit einem File mit relativen Pfaden aus (angehängt)?

[dadoc]

Genau so. Kommentiere ich dagegen

Code Auswählen Erweitern

.vertical .range-handle {
    left: -17px !important;
}

.range-handle {
  width: 35px !important;
  height: 15px !important;
  border-radius: 3px !important;
  background-color: black;
  background-image: linear-gradient(180deg, white,black);
  background-size: 2px 2px;
ein, sieht es so aus.

[dadoc]

So, ich habe jetzt mal ein frisches ftui installiert und nur:
- index.html
- menu.html
- unten.html (die Seite mit dem Slider)
- die Bilder
- die fhem-tablet-ui-user.css
reinkopiert.
Das Ergebnis ist unverändert. Kann eigentlich auch nichts mit dem pagetab-Aufbau zu tun haben, denn ich habe mal den ganzen Head direkt in die unten.html gepackt -> dasselbe, genauso wie mit deinen Test-HTMls.
Bin vorerst mal mit meinem Latein am Ende...

[eki]

Könntest Du diese "Minimalinstallation" mal hier als zip posten (mit allen Dateien). Dann kann ich das bei mir mal aufspielen und versuchen nachzuvollziehen.

[dadoc]

Da ist sie:

[eki]

Mir ist aufgefallen, dass Du die '>' in den Selektoren immer noch enthalten hast. Darüber hinaus gibt es eine zweites Problem, das wohl erst mit 2.7.2. hineingekommen ist.

Kannst Du bitte mal mit den angehängten Anpassungen ausprobieren.

[dadoc]

Mir ist aufgefallen, dass Du die '>' in den Selektoren immer noch enthalten hast.

Nicht immer noch, sondern wieder, nachdem ich feststellte, dass das Entfernen das Problem nicht gelöst hatte.

Kannst Du bitte mal mit den angehängten Anpassungen ausprobieren.

Super - damit scheints zu gehen! Ich kann momentan aber nur am Desktop-Bildschirm testen, nicht auf dem iPad - mach ich heute Abend. Am Desktop sind die ftui-Slider generell oft sehr holprig.
Vielen Dank & viele Grüße
Martin

[dadoc]

Moyn,
Das ,,Sliden" geht soweit prima. Einziges Problem: beim ersten Aufruf der betreffenden Pagetab-Seite nach längerer Nicht-Benutzung werden trotz geöffneter Läden geschlossene angezeigt, und zwar sowohl für die grafischen Slider als auch für einen normalen, der die drei Läden als Structure steuert.
Einmal zu einer andrren Seite gewechselt und wieder zurück, stimmt die Anzeige. Muss mir die Slider-Definition wohl noch mal anschauen.
Grüße
Martin

[dadoc]

Guten Morgen,
Nun bin ich dabei, die (foto)grafische Rolladenanzeige durchgängig mit Fotos des jeweils realen Ausblicks unzusetzen - phantastische Sache das!
Das einzige verbleibende Problemchen ist, dass auch geöffnete Rollläden beim Aufruf der Seite zunächst als geschlossen angezeigt werden. Dreht man das iPad einmal kurz vom Quer- ins Hochformat, korrigiert sich die Anzeige sofort.
Woran könnte es liegen, dass die Ansicht nicht gleich beim ersten Aufruf korrekt dargestellt wird - css-Problem, ftui-Slider-Problem oder mein Fehler?
Grüße
Martin

[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;
}