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.