[FTUI3] Volume Slider mit Up/Down Icon-Buttons

[StephanFHEM]

Vielen dank auch von meiner Seite! Ich portiere auch gerade von FTUI2 in 3 und komme mit dem original Slider nicht klar (hängt am Tablet immer)

Da ich eher Minimalist bin hab ich die ganzen Ticks rausgenommen und den Farbverlauf einer dimmbaren Lampe angepasst. Leider passt der eckige Regler nicht so richtig ins Bild. Hier hätte ich gerne einen kleinen runden Knopf von dem man die Farbe nach seinen Bedürfnissen festlegen kann (oder einfach grau). Es wäre super wenn du das noch einbauen könntest.

hier mein aktueller Code eines Templates mit einem kleinen Bild. Ich hab allerdings in der JS rausgenommen, dass mir Min- und Max-Wert angezeigt werden. Wäre super, wenn das auch im Widget einstellbar wäre. Das die Slider etwas verschoben sind kann man sicher auch im Widget beheben, kann ich zur Not aber noch mit Margin anpassen...

Code Auswählen Erweitern

 
<ftui-cell>
    <ftui-column>
      <ftui-label margin="0.75 0.25" size="0" color="white" text="{{name}}"></ftui-label>
    </ftui-column>
    <ftui-column>
      <ftui-button margin="0.75" class="size-2" shape="circle" fill="solid" [(value)]="{{device}}" [color]="{{device}}:onoff | map('1:lampon, 0:midnightblue')" debounce="1000">
        <ftui-icon color="white" size="0" name="{{icon}}"></ftui-icon>
      </ftui-button>
    </ftui-column>
    <ftui-column height="200px">
            <ftui-volume
[(value)]="{{device}}:pct"
min="0"
max="100"
                ticks="100"
is-vertical
has-rgb-gradient
                has-tooltips
lowcolor="0,0,0"
mediumcolor="125,80,0"
highcolor="255,165,0">
</ftui-volume>
    </ftui-column>
  </ftui-cell>


[mr_petz]

Ok.
Schaue ich mir gerne an ob ich das umsetzen kann.
Soll der Knopf auch die selben Farben wie die einzelnen Progressbalken automatisch bekommen?
Welche Größe soll er genau haben? Wie der beim Slider von setstate?
lg mr_petz

EDIT
ps. man kann den Knopf auch transparent machen.(für Minimalisten )

Manuell kannst du es in der CSS ändern unter:
verticalmodus

Code Auswählen Erweitern


  :host([is-vertical]) .thumb-chrome {
-moz-appearance: none;
appearance: none;
width: 35px;
height: 15px;
border-radius: 3px;
background-color: black;
background-image: linear-gradient(45deg, white, black);
background-size: 5px 5px;
right: 5px;
position: absolute;
transform: translate3d(50%,-50%,0);
  }


und im horizontalmodus hier:

Code Auswählen Erweitern


  :host(:not([is-vertical])) .thumb-chrome {
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 35px;
    border-radius: 3px;
    background-color: black;
    background-image: linear-gradient(45deg, white, black);
    background-size: 5px 5px;
    top: 50%;
    right:0;
    position: absolute;
    transform: translate3d(50%,-50%,0);
  }


bei beiden als Beispiel:
- background-image und background-size entfernen
- background-color: deine Farbe
- border-radius: 50%
- width: 20px
- height: 20px

[StephanFHEM]

Farbe wie der Balken ist eine top Idee. Den von setstate finde ich etwas groß. Also nur minimal größer als der Balken. Klasse, dass du es aufnimmst. Das mit der CSS schau ich mir an

Edit: hab den von dir oben genannten Code jetzt umgebaut und mir selbst einen leichten 3D Kreis (Knopf) gebastelt der in der Lampenfarbe schimmert. Danke für die Hilfestellung

[SirMarco]

Edit: hab den von dir oben genannten Code jetzt umgebaut und mir selbst einen leichten 3D Kreis (Knopf) gebastelt der in der Lampenfarbe schimmert. Danke für die Hilfestellung

Das ist eine schöne Idee. Magst du das teilen? 

Liebe Grüsse

[mr_petz]

Das ist eine schöne Idee. Magst du das teilen? 

Liebe Grüsse

Gebt mir noch ein bisschen Zeit. Ich kann die Größe,Form und Farbe auch benutzerdefiniert machen...

LG

[mr_petz]

So...
neue Attribute zum Testen:

-thumb-color="white"  --> setzt eine feste Farbe (geht nicht mit thumb-is-progress-color zusammen)
-thumb-width="15"  --> selbsterklärend (in px)
-thumb-height="15"  --> selbsterklärend (in px)
-thumb-is-round  --> border-radius wird auf 50% gesetzt (also rund bei gleicher width/height definition)
-thumb-is-progress-color  --> wenn hsl oder rgb gesetzt, nimmt der die Farben an

Ich hänge hier mal an.
LG mr_petz

Edit:
Feedback wäre nicht schlecht ob es so ok ist

Edit:
Set-Verfahren geändert nach masterGit Update

[StephanFHEM]

Das ist eine schöne Idee. Magst du das teilen? 

musste meines wieder auf einen grauen Knopf ändern. Das andere hat den WAF nicht überstanden;-) Die zusätzlichen Attribute wurden ja jetzt eingebaut. Damit muss man nicht in der CSS rumspielen. Falls du meine Def noch benötigst sag einfach Bescheid

[StephanFHEM]

irgendwann mit den letzten Updates von Setstate muss sich etwas geändert haben. Der Slider liefert den pct-wert nicht mehr an die Lampen. Im Debug von Chrome bekomme ich folgende Fehlermeldung:

Code Auswählen Erweitern

Uncaught TypeError: Cannot read properties of null (reading 'replace')
    at HTMLElement.onClickSlider (volume.component.js:238)
    at HTMLInputElement.<anonymous> (volume.component.js:30)

glaube sowas schon beim 3Dknob gelesen zu haben. Kannst du da noch mal reinschauen bitte?

[mr_petz]

Hi. Du musst die neue Version nehmen und cache leeren.
Für den 3DKnob zählt das selbe...
Hatte ich vorn schon editiert...
Du kannst auch bitte hier 3 posts weiter oben die mit thumb-color testen.
https://forum.fhem.de/index.php/topic,121901.msg1178944.html#msg1178944
LG

ps. Update war ja schon am 10.10.21...

[StephanFHEM]

okay... hatte bisher kein update gemacht weil ich es mir selber in css hingebastelt habe. Jetzt mit dem Update geht alles wieder und ich hab auch deine Attribute getestet->funktioniert auch.

Nur die Farbe finde ich etwas platt (hatte mir vorher in CSS einen Knopf im 3D-Lock gebastelt). Den hab ich erst mal wieder reingebaut:-)

[mr_petz]

...ich hab auch deine Attribute getestet->funktioniert auch.
Nur die Farbe finde ich etwas platt (hatte mir vorher in CSS einen Knopf im 3D-Lock gebastelt). Den hab ich erst mal wieder reingebaut:-)

Danke fürs testen:)
Würdest du ein Bild posten von deinem Knopf und den css Code dazu?
Vielleicht mag der eine oder andere den Lock auch.
Ich könnte das mit einbauen wenn du möchtest...
LG

[StephanFHEM]

Dann mal los:

Screenshot hängt an. CSS hab ich wie folgt geändert:

Code Auswählen Erweitern

:host([is-vertical]) .thumb-chrome {
    -moz-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: grey;
    background-image: linear-gradient(180deg, grey, white);
    right: 5px;
    position: absolute;
    transform: translate3d(50%,-50%,0);
}

und meine Definition ist mit deiner neusten Datei ist wie folgt:

Code Auswählen Erweitern

    <ftui-volume
      [(value)]="{{device}}:{{level}}"
      min="0"
      max="100"
      ticks="100"
      is-vertical
      has-rgb-gradient
      has-tooltips
      thumb-is-round
      thumb-width="22"
      thumb-height="22"
      lowcolor="0,0,0"
      mediumcolor="125,80,0"
      highcolor="255,165,0">
    </ftui-volume>

Was super wäre, wenn man noch die Möglichkeit hat die Anfangs- und Endzahl auszublenden. Du siehst es auf meinem Screen (0 und 100). Er zeigt den Wert ja bei Benutzung mit Tooltip an. Hatte das vor dem Update direkt in der js rausgenommen aber jetzt ist es wieder drin.
Wenn du diese Farbgestaltung mit dem Knopf über Attribute hinbekommst wäre es natürlich besser in Hinblick auf zukünftige Updates. Sonst sucht man alle Jahre wieder wo man die Änderungen gemacht hatte...

[mr_petz]

@StephanFHEM
Hi.
Ich hatte jetzt bissl Zeit für dein Anliegen .
Teste bitte mal die neue Version hier im Anhang.
Ich habe mir den Schubser von setstate angenommen und man kann jetzt den thumb per user.css stylen...
Hier Dein Beispiel für die user.css:

Code Auswählen Erweitern


ftui-volume{
  /*horizontal*/
  --volume-thumb-width: 22px;
  --volume-thumb-height: 22px;
  --volume-thumb-radius: 50%;
  --volume-thumb-bgcolor: grey;
  --volume-thumb-bgimage: linear-gradient(270deg, grey, white);
  --volume-thumb-bgsize: 1;
}

ftui-volume{
  /*vertical*/
  --volume-thumb-width: 22px;
  --volume-thumb-height: 22px;
  --volume-thumb-radius: 50%;
  --volume-thumb-bgcolor: grey;
  --volume-thumb-bgimage: linear-gradient(180deg, grey, white);
  --volume-thumb-bgsize: 1;
}


Dafür ist das rausgeflogen:
thumb-color="white"
thumb-width="15"
thumb-height="15"
thumb-is-round

Dringeblieben ist aber noch:
thumb-is-progress-color  --> wenn hsl oder rgb gesetzt, nimmt der die Farben an
das funktioniert nur so als Attribute.

Dazugekommen ist noch:
no-min-max --> keine Anzeige mehr von min und max

Teste es einfach und sag ob alles funktioniert. Da kann ich es im ersten Beitrag mit rein nehmen...
LG mr_petz

Edit: Es können natürlich auch alle anderen testen

Edit2: Nochmal überarbeitet...

[StephanFHEM]

ah super.... nur als Vorwarnung: bin gerade ein bisschen busy und mit dem Testen wird es die nächsten Tage nichts. Also nicht wundern