[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!