[FTUI3] Volume3D Knob

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

Vorheriges Thema - Nächstes Thema

grossmaggul

Na, der ist aber auch schick, kann ich aber erst nächste Woche testen, bin gerade unterwegs.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

mr_petz

Ok. Ich habe es angehangen.
Attribute has-silver für silbernen Knob ist dazugekommen.

grossmaggul

#17
ZitatDeswegen würde ich dir noch den silver Style vom angehangen Bild integrieren wenn du willst.
Sieht auch nicht schlecht aus, mir persönlich gefällt die dunkle Variante aber besser.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

rob

Wirklich klasse gemacht. Gefällt mir sehr gut  8) 8)

Eine Frage hätte ich: Hältst Du es für sinnvoll/ machbar den Knob auch deaktiviert darstellen zu lassen?
Ich meine damit, dass ich ein Device mit einem anderen Button on/off schalte. Bei off suggeriert der Volume3D Knob mir, das Device sei noch aktiv, weil ja die schicke "Beleuchtung" drin steckt. Wäre alles dunkel, wenn das Device aus ist, wäre m.E. die ohnehin sehr schöne Optik noch runder.
Geht wahrscheinlich nicht so einfach, weil es dann in Abhängigkeit vom anderen Button bzw. Device:state laufen müsste, oder?

Viele Grüße
rob

mr_petz

Hi rob.
Lass doch deinen Button das Volume auf 0 setzen. Oder verstehe ich jetzt was nicht, warum du es "deaktivieren" möchtest?
Deaktivieren heisst für mich -> nicht mehr benutzbar. Also readonly!
Kannst du bitte genauer schreiben was du vor hast?
Danke und Gruß mr_petz

rob

#20
Hi.
Nur die Beleuchtung aus. Nicht deaktivieren. Das helle Leuchten von Skala und Knopf quasi ausschalten. Wenn ich Volume auf Null setze, ist zwar die Skala aus, aber der Knopf leuchtet noch.

Wenn der Knopf echt wäre und ich schalte das Gerät aus, sind auch die LED im Knopf aus. Der Lautstärkestand bleibt gleich. Schalte ich wieder ein, leuchtet alles. Klingt sicher verwirrend, was ich da meine :)

On: alles wie gehabt
Off: alles was hellblau ist (bzw. gradient) wird schwarz oder dunkelgrau.

Ist auch nur eine Frage, nix tragisches :D

mr_petz

#21
Ok, verstanden.
Ich versuche es mal mit der [trigger] Funktion, ansonsten mit einem extra Device/Reading.
Gruß mr_petz

Edit:
Ok geht mit [trigger].
Ich hänge es schnellstmöglich an (Ich sehe gerade im git ist noch ne alte Version :-\, muss ich auch noch updaten...). Einstellbare RGB werden auch dazu kommen.
Bis dahin ;)

Edit2:
Ich hänge mal hier ne Preview an.

Attribute has-rgb-gradient 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)
movegradients="2" (Standard, zum verschieben der Farbscala von hsl- und rgbgradient)

extraSettingsBsp. für dich:
[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>

rob

Wirklich klasse! Gefällt mir sehr.  Ich bedanke mich für Deine ultraflinke Umsetzung 8)  8)

Das mit dem Github hatte ich gesehen und halt den aktuellsten Anhang von hier genommen. Fand ich jetzt nicht schlimm.
Beim Erstladen oder Reload der Seite bekomme ich noch eine Toast-Message:

volume3d.component.js:372
TypeError tickActive[i] is undefined

Beobachtung: State im Dummy ist off. Knob wird als aktiv geladen (für mich OK). Nach erstem schalten und walten ist alles rund und OK. Keine Toasts mehr. Tritt auch auf, wenn ich [trigger] raus nehme. Habe ich da noch etwas übersehen oder muss es anders einbinden?

Aktuell schaut mein Knob so aus:

    <ftui-grid-tile row="6" col="9" height="2" width="2">
      <header>Volume</header>
      <ftui-volume3d
                class="size-2"
                [(value)]="Radio_volume"
                [trigger]="Radiosender | map('on:false, off:true')"
                size="50"
                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-grid-tile>


Für mich eilt es nicht :) und auch die Message stört mich eigentl. nicht - wollte es nur rückmelden, falls interessant.

Vielen Dank und beste Grüße
rob


mr_petz

#23
Ok.
tickActive schaue ich mir an.
Den [trigger] beim ersten laden auch.
lg mr_petz

Edit:
mit welchem Browser arbeitest du?
ich konnte mit Chrome,Edge und FF den tickActive-Error mit deinen Settings nicht nachstellen.
mal schauen was da los ist....
(ich progge hier teilweise offline ohne fhem, da könnte es sein dass dein radiosender off sendet und die ticks nicht geladen sind. Welche werte haben deine Devices beim laden des Moduls?)

rob

Ich arbeite mit FF (User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0).

Meinst Du das Dummy-Device in Fhem (Radiosender)? Habe ich sowohl mit On als auch mit Off getestet. Der einzige Unterschied:
bei on und Reload der Seite sagt er

volume3d.component.js:261

bei off und Reload der Seite sagt er

volume3d.component.js:372


Den [Trigger] habe ich testweise deaktiviert. Verhalten mit den Toasts ändert sich dadurch nicht.
Ich habe noch ein iframe mittendrin ("gekapselt" innerhalb <ftui-grid-tile>) und auch das testweise auskommentiert. Sollte nicht der Störer sein.
Sicherheitshalber Docker neu gestartet.

Laut Console vom FF:

Uncaught TypeError: tickActive[i] is undefined
    setState http://myserver/components/volume3d/volume3d.component.js:372
    onAttributeChanged http://myserver/components/volume3d/volume3d.component.js:99
    attributeChangedCallback http://myserver/components/element.component.js:75
    set http://myserver/components/element.component.js:154
    onReadingEvent http://myserver/modules/ftui/ftui.binding.js:99
    onReadingEvent http://myserver/modules/ftui/ftui.binding.js:86
    FtuiBinding http://myserver/modules/ftui/ftui.binding.js:51
    publish http://myserver/modules/ftui/ftui.helper.js:416
    publish http://myserver/modules/ftui/ftui.helper.js:416
    updateReadingItem http://myserver/modules/ftui/fhem.service.js:84
    parseRefreshResultSection http://myserver/modules/ftui/fhem.service.js:226
    parseRefreshResult http://myserver/modules/ftui/fhem.service.js:156
    parseRefreshResult http://myserver/modules/ftui/fhem.service.js:154
    request http://myserver/modules/ftui/fhem.service.js:143

Ich lade noch den Inhalt aus FTUI2 hinzu. Habe ich testweise ebenfalls entfernt, Docker neu gestartet -> gleiches Ergebnis.

Irgendwo muss bei mir doch der Unterschied herkommen. OK, habe eine Minimalseite aufgebaut mit nur dem Knob --> kein Toast! Scheint OK.
Dann zunächst den On-Off-Button rein --> Aha! jetzt kommt das Toast. Nehme ich den Button raus, aber alle anderen Elemente wieder rein, ist alles OK. Also der Button macht den Unterschied. Habe ich einen Bock in meinem Button?!

Schaut bei mir so aus:

<ftui-grid-tile row="6" col="2" height="4" width="4">
      <header>Play/ Stop</header>
<ftui-button
            [(value)]="Radiosender" size="large" shape="circle">
          <ftui-icon [name]="Radiosender:state | map('off:play-circle-o, on:stop-circle-o')"></ftui-icon>
        </ftui-button>
    </ftui-grid-tile>


Hilft Dir das zum Reproduzieren? Hinter dem Button steckt FHEM-seitig ein simples Dummy-Device.
Ich kann auch die ganze Test-Minimal-Seite zur Verfügung stellen, falls das eher nützt.

Vielen Dank und beste Grüße
rob

mr_petz

Danke. Ich kann das dann erst Abends nachstellen.
Ich schau mal woran es hängt und melde mich dann.
Meine Programmierung ist eh Laienhaft...
Bin aber immer drann es zu verbessern...

rob

Laienhaft? Das glaube ich nicht so wirklich  ;D

Ja, bitte mach Dir wegen mir keinen Stress. Schaut auch eh so aus, als wäre mir was faul. Hoffentlich habe ich Dich nicht unnütz verrückt gemacht, sonst muss ich mich wieder schämen gehen  ;)

VG
rob

Shadow3561

Ich habe da auch ein Problem.
Die geänderten Stati werden schön angezeigt im Knob wenn ich in FHEM WebIf ändere. Wenn ich aber versuche den Knob zu bedienen dann kommen unendlich viele Tops-Meldungen und FHEM hängt erst mal ein paar Sekunden.

Toast wie folgt
Volume3d.component.js:265
TypeError: undefined is not an object (evaluating 'tickActive[i].classList')


Mit freundlichen Grüßen

mr_petz

#28
Hi. Ich weiss.
Nimm Mal bitte die Version von der ersten Seite.
Ich muss die Ticks noch anpassen.
Hatte ja oben geschrieben, dass es eine Preview ist... ;)
Kommt von der Änderung mit Trigger.
Kann es durch eure Settings optimieren..
Ach und poste Mal bitte dein setting.

Edit:
Bin auf dein Setting gespannt.

Ich habe jetzt auch einen Fehler behoben.
Wenn max<Aktuelles value ist, dann kommt auch ein tick Fehler.
Kommt in der nächsten Version mit rein...

mr_petz

Hi @rob.
kannst du bitte mal hier oben die neue Version testen.
https://forum.fhem.de/index.php/topic,122208.msg1176285.html#msg1176285
da sollte beim ersten laden jetzt kein tickfehler mehr kommen...
danke

lg mr_petz