[FTUI3] Volume3D Knob

Begonnen von mr_petz, 25 Juli 2021, 13:18:30

Vorheriges Thema - Nächstes Thema

mr_petz

Hi@all.

Ich hatte mal wieder lange weile... :D
Ich habe auf Grundlage von hier: https://codepen.io/laurikki/pen/oNbbdLE einen 3D Knob zurecht gebaut.
Optisch finde ich ihn nicht schlecht als Lautstärkeregler.
Wer hier interesse hat den weiter zu verbessern in punkto css und js kann sich gerne einbringen.

Settings:
[(value)]="Device:Reading"
max="100"
class="size-1" (für Schriftgröße)
size="125"
tick="50"
wide-tick="5"
step="2"
has-wide-ticks
min="0"
degrees="250"
rotation="0"
has-scale-text
has-gradient
has-silver (silbener Knopf), ansonsten bleibt er schwarz
Minuswerte sind auch möglich.

mehr habe ich nicht gemacht. Die Größe usw. kann man alles nicht angeben, das würde noch fehlen...

bsp:

<ftui-grid-tile row="9" col="1" height="6" width="9">
    <header>Volume</header>
<ftui-column width="75%">
           <ftui-volume3d
             [(value)]="Sonos:Volume"
             class="size-1"
             max="60"
           </ftui-volume3d>
        </ftui-column>
</ftui-grid-tile>


Ich habe hier das selbe set verfahren wie im volume-slider von mir angewand und somit kann man immer Werte setzten.
Im Ani-gif sieht man auch schön meine Verzögerte Antwort bis der Wert gesetzt und zurück gekommen ist.
Ich hoffe ihr findet gefallen daran um daraus mehr zu machen!?? (Brauche da bissl Unterstützung)
Der Volume3D kann gern getestet werden.
Ich habe den im Fully und FF Browser getestet...

LG mr_petz

Edit:
Ich habe noch wideTicks hinzugefügt und lasse jetzt die Ticks generieren...
WideTicks werden jetzt richtig gesetzt..
Bsp:

<ftui-cell height="100%">
<ftui-volume3d class="size-1"
[(value)]="Sonos:Volume"
max="60"
tick="30"
wide-tick="5"
has-wide-ticks>
</ftui-volume3d>
</ftui-cell>


Edit2:
Größe ist jetzt anpassbar. (Bitte testen!)
Empfehlung von 100 bis 150.
Standard ist 125.
Bsp:

<ftui-cell height="100%">
    <ftui-label class="size-3" style="padding-bottom:5px">Volume</ftui-label>
<ftui-volume3d
                class="size-1"
[(value)]="Sonos:Volume"
size="120"
max="100"
tick="50"
wide-tick="5"
has-wide-ticks>
</ftui-volume3d>
</ftui-cell>


Edit3:
Step hinzugefügt. (Bitte testen!)
Wenn kein step angegeben, dann ist alles wie gewohnt...
Bsp:

<ftui-cell height="100%">
    <ftui-label class="size-3" style="padding-bottom:5px">Volume</ftui-label>
<ftui-volume3d
                class="size-1"
[(value)]="Sonos:Volume"
size="120"
max="100"
tick="20"
wide-tick="5"
                step="5"
has-wide-ticks>
</ftui-volume3d>
</ftui-cell>


Edit4:
min,degrees,rotation und ScaleText hinzugefügt. (Bitte testen!)
Ich habe mal noch die Optik angepasst.
Bsp:

<ftui-cell height="100%">
    <ftui-label class="size-3" style="padding-bottom:5px">Volume</ftui-label>
<ftui-volume3d
                class="size-1"
[(value)]="Sonos:Volume"
size="130"
min="0"
max="50"
tick="50"
step="2"
wide-tick="5"
degrees="260"
                rotation="0"
has-wide-ticks
                has-scale-text>
</ftui-volume3d>
</ftui-cell>


Edit5:
Attribute has-rgb-gradient  und [trigger] hinzugefügt
und zum einstellen:
lowcolor="0,255,0" (Standard, 1.Wert)
mediumcolor="255,136,0" (Standard, 2.Wert)
highcolor="255,0,0" (Standard, 3.Wert)
movegradient="2" (Standard, zum verschieben der Farbscala von rgbgradient)

SettingsBsp.:
[trigger]="dummy | map('on:false, off:true')"
(wenn true werden die Farben ausgeschalten und der Knob auf readonly gestellt)

und dann der Button:
<ftui-button (value)="dummy" states="on,off">on,off</ftui-button>

Edit:
set geändert nach Update von masterGit

Edit:
CSS angepasst und Code gekürzt/verändert...

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

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

grossmaggul

Der Volume Knob gefällt mir wirklich super gut!!

Ich habe jetzt mal verschiedene Größen getestet, auch außerhalb der empfohlenen Größen funktioniert das bestens, vielen Dank dafür!
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

Hi, @grossmaggul.
Es wäre cool wenn du die neue Version testen würdest und deine Meinung dazu sagst.
Ich weiss nicht was ich noch ändern soll/muss und wo jetzt das Value beim drehen erscheinen soll? Oder lassen wir es ganz weg wenn ScaleText aktiv ist?
Ich würde auch einstellbare rgb Farben hinzufügen mit Verlauf wenn gewünscht.
LG mr_petz

grossmaggul

Ich habe es mal kurz angetestet, was mir aufgefallen ist, wenn man die Größe auf 100 einstellt rutschen die Zahlen in die Ticks.

Ansonsten sieht es gut aus, intensivere Tests werden folgen.

ZitatOder lassen wir es ganz weg wenn ScaleText aktiv ist?
Würde ich begrüßen, vielleicht aber auch einstellbar ob oder ob nicht.
Ich fände es auch gut, wenn der Skalentext auch "beleuchtet" wird, wenn man den Wert beim Drehen erreicht, dann braucht man den Value eigentlich nicht.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

Ok. Danke erstmal.
Ich pimpe mal noch ein bissl ;)
ScaleText kann ich leuchten lassen und Value mache ich per Attribute.
LG mr_petz

grossmaggul

FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

#6
Hi grossmaggul.
Meintest du so wie im Anigif?
Hier ist der step auf 5.
Oder wolltest du das nur die Values leuchten und nicht die Ticks mit?
Wenn ja hänge ich es oben an.

EDIT:
Ich hätte auch noch sowas wie im 2.Anigif zu bieten...

grossmaggul

Hallo,

ja so hatte ich mir das vorgestellt.

ZitatOder wolltest du das nur die Values leuchten und nicht die Ticks mit?
Nein, so wie Du das gemacht hast war genau meine Vorstellung.:-)

Der Knob im 2. Anigif gefällt mir persönlich besser, ist nicht so gedrungen.

gm
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

#8
Ok gm.
Ich habe oben mal die neue Version angehangen.
Hinzugekommen ist noch has-gradient bei Bedarf.

Bsp1. normal:

<ftui-cell height="100%">
    <ftui-label class="size-3" style="padding-bottom:5px">Volume</ftui-label>
<ftui-volume3d
                class="size-2"
[(value)]="Sonos:Volume"
size="120"
min="0"
max="100"
tick="50"
step="2"
wide-tick="10"
degrees="250"
                rotation="0"
has-wide-ticks
                has-scale-text>
</ftui-volume3d>
</ftui-cell>


Bsp2. gradient:

<ftui-cell height="100%">
    <ftui-label class="size-3" style="padding-bottom:5px">Volume</ftui-label>
<ftui-volume3d
                class="size-2"
[(value)]="Sonos:Volume"
size="120"
min="0"
max="100"
tick="50"
step="2"
wide-tick="10"
degrees="250"
                rotation="0"
has-wide-ticks
                has-gradient
                has-scale-text>
</ftui-volume3d>
</ftui-cell>

grossmaggul

Schick, besonders der Farbgradient gefällt mir super!

Eine Anmerkung noch, ich weiß nicht ob das möglich ist. Der Abstand der Zahlen zu den Ticks verändert sich nicht relativ zur Größe des Knobs. Extremes Beispiel, wenn man size auf 20 setzt sind die Zahlen sehr weit von den Ticks entfernt und sie kommen näher ran, je höher man size setzt, bei einem Extremwert von 240 rutschen die Zahlen in die Ticks.

Ich hänge mal Bilder an, Reihenfolge size: 20, 70, 140, 240



FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

Ok. Danke fürs testen und gefallen. ;)
Das mit dem Abstand muss ich noch optimieren.
(Muss noch einiges andere optimieren).
Wenn du zum Beispiel die class size änderst, dann hauen die Abstände auch noch nicht hin.
Also ich bin da noch dran.
Gruß mr_petz

grossmaggul

ZitatAlso ich bin da noch dran.
Sehr schön, ich bin gespannt. :)
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

#12
Hi gm.
Ich habe oben mal eine neue Version zum testen angehangen.
Die Text- und Tickgröße ändert sich proportional zur Knobgröße bei keiner Angabe von class="size-x".
Bei Angabe der ClassSize wird die Größe von Text und Tick demensprechend angepasst (Bild).
Ich hoffe, das ist erstmal zu deiner Zufriedenstellung :D.
Das ist die erste Lösung von mir. Die Berechnungen und das css sind nicht so einfach. Im css bin ich eh nicht so fit.
Ich habe auch zum testen das Attribute knob-style hinzugefügt. Da ist dann nur ein Strich/Zeiger zum einstellen der Values zu sehen (also der schwarze Knob ist weg).
Wers brauch ;).

mfg mr_petz

grossmaggul

ZitatIch hoffe, das ist erstmal zu deiner Zufriedenstellung :D.
Aber sowas von. :D

Wirklich super der Knopf, der macht schon was her!
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

#14
Hi gm.
Schön das der bei dir so gut ankommt :D.
Deswegen würde ich dir noch den silver Style vom angehangen Bild integrieren wenn du willst.
mfg mr_petz