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

[mr_petz]

Hi@all.
Ich hatte mal wieder bissl Zeit zum spielen
Mein Ziel war es, den Grund zu finden warum der ftui-slider so rumzickt beim sliden und setzen der Werte.
MMn verrennt er sich beim setzen und gleichzeitigen lesen des value und man kann ihn dann nur durch einen Refresh wieder animieren neue Werte zu setzen. Ich muss mindestens einen debounce von 2500 nehmen damit es halberwege funktioniert. Da hat man aber immer die Verzögerung beim setzen.
Wahrscheinlich liegt es an der WLAN Latenz und am RPI3 (der vielleicht bissl langsam ist).
Ein paar User hier haben von änlichen Verhalten berichtet, dass sie nur einmal Werte setzen können.

Jetzt zum Volume Slider:
Er basiert optisch auf den ftui-slider im RetroStyle.
Hinzugekommen sind durch setzen von has-icons zwei up und down Volume-Button (muss man nicht).
Die Icons kann man auch selber wählen mit icon="volume-down,volume-up" (standard).
Gradient-mapping mit hsl Farben beim sliden, normales [color]-mapping und standard-farbe ist möglich.
Tooltip, ticks und wideticks ebenso.
man könnte den Volume Slider sogar für Höhen und Tiefen usw nehmen, da er auch mit minus-Werten umgehen kann.
Die up und down Volume-Button haben noch den einstellbaren debounce mit dem orginalen setzen der Werte. Hier ist aber kein Fehlverhalten zu bemerken.
Beim Volume-Slider habe ich das rumzicken durch fhemService.sendCommand this.submitChange gelöst. Außerdem werden die Werte erst gesendet wenn man mit sliden fertig ist. Als optisches Feedback erscheint dach Änderung in Fhem der ToolTip im WebView noch einmal für eine sec.
Vielleicht könnte setstate im ftui-slider (rangeable) das irgendwie optimieren damit es besser funktioniert.
Was nicht geht ist die normale slider- und vertical-Ansicht. Ich nutze es eh nur horizontal und retro.

Es können gern User testen die auch probleme mit dem Original Ftui3 Slider haben.
Es können natürlich auch user die keine Probleme haben hier ihre Hardwarekonstelation sagen um die genaue Ursache für das "Fehlverhalten" bei mir und anderen zu finden...

Settingsbeispiel:

Code Auswählen Erweitern


<ftui-volume
      [(value)]="Sonos:Volume"
      class="size-2"
      tick="5"
      wide-tick="20"
      iconcolor="white"
      min="0"
      max="60"
      step="5"
      has-icons
      has-tooltips
      has-wide-ticks
      has-gradient>     
</ftui-volume>

Bei iconcolor="" werden die Icons eingefärbt.

Viel Spass beim Testen...
Gruß mr_petz

Edit:
Mal schnell rgb gradient hinzugefügt.
Settingsbeispiel:

Code Auswählen Erweitern


<ftui-volume
      [(value)]="Sonos:Volume"
      class="size-2"
      tick="5"
      wide-tick="20"
      iconcolor="white"
      min="0"
      max="60"
      step="5"
      has-icons
      has-tooltips
      has-wide-ticks
      has-rgb-gradient
      lowcolor="0,255,0"
      mediumcolor="255,140,0"
      highcolor="255,0,0">     
</ftui-volume>

Standardfarbe von grün nach orange nach rot.
wer nur eine Farbe möchte, muss bei low-, medium- und highcolor das gleiche eintragen.
Kann gern getestet werden.
Gruß

ps. nicht wundern, ich habe die css aus dem Code geholt und somit sind es jetzt 2 Dateien im Ordner.

Edit:
is-vertical hinzugefügt siehe Bild und Config-Bsp.:
icons sind automatisch raus in der Vertikalen Version...
ich habe auch das gradient ein wenig sichtbarer gemacht...
Wenn es irgendwo probleme gibt bitte melden!

Code Auswählen Erweitern


<ftui-column height="30%">
<ftui-row width="50%" margin="0px" color="" shape="round" fweight="fett" class="">
<ftui-column>
<ftui-cell height="100%">
<ftui-label class="size-3" style="padding-bottom:10px">Bass</ftui-label>
<ftui-volume class="size-2"
[(value)]="Sonos:Bass"
step="1"
min="-10" max="10"
has-tooltips
tick="1"
wide-tick="5"
has-wide-ticks
has-gradient
is-vertical
>
</ftui-volume>
</ftui-cell>
</ftui-column>
<ftui-column>
        <ftui-cell height="100%">
<ftui-label class="size-3" style="padding-bottom:10px">Treble</ftui-label>
<ftui-volume class="size-2"
[(value)]="Sonos:Treble"
step="1"
min="-10" max="10"
has-tooltips
tick="1"
wide-tick="5"
has-wide-ticks
has-rgb-gradient
is-vertical
>
</ftui-volume>
          </ftui-cell>
</ftui-column>
</ftui-row>
</ftui-column>


Edit.
set geändert nach Update vom masterGit

Ist jetzt hier zu finden https://github.com/mr-petz/ftui/tree/addons

Code Auswählen Erweitern


update volume.component.js https://raw.githubusercontent.com/mr-petz/ftui/addons/controls_ftui_addons.txt
update volume.component.css https://raw.githubusercontent.com/mr-petz/ftui/addons/controls_ftui_addons.txt


[presskopf]

Klasse!
Direkt eingebaut und geklickt, geklickt, geslidet, geslidet und nochmal geklickt: geht immer noch!
Danke!

[Klafhem]

Vielen Dank mr_petz!
Das ftui-volume funktioniert genial. Kein Ausfall mehr, egal wie oft der Slider neu eingestellt wird.
Ich verwende ftui-volume für eine Hue-Lampe, und das funktioniert perfekt.
Erkläre mir bitte noch wie ich die Hintergrundfarbe des sliders einstellen kann, dann könnte ich ihn noch besser an die Hue Lampe anpassen.
Danke!

Beim ftui-slider hatte ich auch nach einigen slides und klicks immer wieder Probleme.
Mein Computer ist per Lan angebunden, und FHEM läuft auf einem Zotac MiniPC unter Proxmox, also einiges schneller als ein RPI3.

[mr_petz]

Hi Klafhem.
Erstmal danke fürs testen.
Ich hoffe ja das setstate das Fehlverhalten beim sliden irgendwie im normalen slider beheben kann.
Die Farben vom Progress kannst du wie im normalen slider mappen.

Code Auswählen Erweitern


[color]="device:reading | map('0: success, 50: warning, 80: danger')"

Da musst du aber has-gradient weglassen. Das sind nicht einstellbare hsl Farben von grün über gelb nach rot.
Der erstellte Volume-Slider soll erstmal nur eine Übergangslösung sein, bis FTUI3 "richtig" läuft. (Im Prinzip  läuft es ja schon sehr gut, ist ja aber noch im Entwicklungsstadium) .
Gruß mr_petz

[Klafhem]

Hi mr_petz!
Danke für die Info bezüglich der Farben.
Ich habe leider sehr wenig Ahnung von Programmierung, aber mit try and error, habe ich es jetzt doch geschafft den Progress an die Hue Lampe anzupassen.
Ich habe Volume1 und Volume2 daraus gemacht, um einerseits die Farbtemperatur und andererseits die Helligkeit zu steuern.
Da die Änderungen sicher nicht so sind, wie sie ordentlich programmiert sein sollten, will ich sie hier nicht veröffentlichen.
Falls Du Interesse daran hast, kann ich sie dir aber gerne zusenden.

gruß Klaus

[mr_petz]

Hi Klaus, Schaue ich mir gerne an.
ps.: du hast Post
Gruß Thomas

Edit: Ich füge noch einstellbare rgb für gradient hinzu wenn gewünscht. sind dann 3 Stück.
lowColor,mediumColor,highColor (Anfang,Mitte,Ende)... Die fließen dann wieder ineinander...

[mr_petz]

Neue Version im ersten Beitrag!
LG

[Klafhem]

Hi mr_petz,

Vielen Dank für die neue Version.
Sie funktioniert super, und ich kann damit meine Hue Lampen mit den passenden Farbeinstellungen steuern.

Gruß Klaus

[mr_petz]

Hi@all.
Ich habe mich doch entschlossen eine Vertikale Version zu machen siehe 1.Beitrag....
Durch das setzen von Minuswerten kann man den jetzt gut als Equalizer nutzen...
LG Thomas

[freddykr]

Ich muss hier auch mal Danke für diesen Workaround sagen.
Das selbe Problems gibts übrigens auch bei "ftui-knob", aber da nehme ich jetzt halt auch dieses hier.

[grossmaggul]

Hallo,

der Volumeregler ist wirklich toll, super Arbeit, danke dafür!

Allerdings habe ich beim vertikalen Regler das Problem, daß er nicht zentriert ist.

Meine Definition:

Code Auswählen Erweitern

<ftui-column width="25%">
        <!-- Volume -->
        <ftui-volume [(value)]="{{player}}:volume"
                     min="0" max="100"
                     tick="5"
                     wide-tick="10"
                     is-vertical
                     has-wide-ticks
                     has-tooltpis
                     has-icons
                     has-gradient>
        </ftui-volume>
    </ftui-column>

Das sieht dann so aus, wie im Anhang.

Was mir nicht so gefällt ist das Design des "Rulers", da fand ich das gestreifte Design des Retrosliders stimmiger.

[mr_petz]

Hallo,

der Volumeregler ist wirklich toll, super Arbeit, danke dafür!

Allerdings habe ich beim vertikalen Regler das Problem, daß er nicht zentriert ist.

Meine Definition:

Code Auswählen Erweitern

<ftui-column width="25%">
        <!-- Volume -->
        <ftui-volume [(value)]="{{player}}:volume"
                     min="0" max="100"
                     tick="5"
                     wide-tick="10"
                     is-vertical
                     has-wide-ticks
                     has-tooltpis
                     has-icons
                     has-gradient>
        </ftui-volume>
    </ftui-column>

Das sieht dann so aus, wie im Anhang.

Ok ich weiss warum. Ich habe nur mit 2stelligen Zahlen getestet. Du kannst aber in der css folgenden Eintrag ändern:

Code Auswählen Erweitern


  :host([is-vertical]) .progress-chrome {
    position: absolute;
    width: 10px;
    background-color: var(--color-base);
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    bottom: 0;
    z-index: 1;
    left: 62%;
  }


Hier der Lefteintrag. Bei dir steht 53%.
In CSS bin ich nicht so fit...
Und bitte, es soll hier nur eine Übergangslösung von mir sein!

Was mir nicht so gefällt ist das Design des "Rulers", da fand ich das gestreifte Design des Retrosliders stimmiger.

Ich habe den Style bewusst geändert, weil ich die Streifen bei mir garnicht gesehen habe auf dem Tablet. Bei mir war alles nur grau.
Ich schaue mal das ich die vertical-Version im css noch tune damit es für 2 und 3stellig geht.
Gruß mr_petz

[grossmaggul]

Danke, geht jetzt.

Und bitte, es soll hier nur eine Übergangslösung von mir sein!

Weiß ich doch, aber schön, wenn es trotzdem funktioniert.

[mr_petz]

Ich habe mal oben eine neue Version angehangen wo die css noch getunt wurde..
Jetzt sollte sich der slider nicht mehr im vertical-modus verschieben...
LG Thomas

[grossmaggul]

Sehr schön, vielen Dank!

[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