FTUI version 3

[Sailor]

Vielleicht kann es ja jemand gebrauchen, mein Machwerk einer Windrose:

Das konnte ich gebrauchen.
Jetzt muss ich nur noch herausfinden, wie ich verhindere, dass ich per Mausklick die Windrichtung verändere...
Das gibt sonst Ärger mit dem DWD 

Gruß
    Sailor

[grossmaggul]

Versuch es mal mit  "readonly"

Code Auswählen Erweitern

<ftui-knob [value]="proplanta:windDir" min="0" max="360" width="110" height="80"  start-angle="-90" end-angle="270" stroke-width="4" offset-y="0" has-needle has-scale readonly>

[Risiko]

Hallöchen.

Hat schon mal jemand ein circlemenu in Verbindung mit tabs verwendet?
Etwa so?

Code Auswählen Erweitern


<ftui-circlemenu direction="vertical">
        <ftui-tab view="View1" active>
          <ftui-icon name="home1" class="size-3"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View2">
          <ftui-icon name="lightbulb" class="size-3"></ftui-icon>
        </ftui-tab>
      </ftui-circlemenu>

Wäre echt cool, wenn das gehen würde. Die Umschaltung der tab-view geht sogar, aber es müsste noch der Tab\Button der Selektion im Circlemenu (Zentrum) sich wechseln.

Noch eine allgemeine Frage zum Layout. Was ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen. Habe auf den aktuell 78 Seiten nichts passendes gefunden.
base-width und base-height in % anzugeben ist es wohl nicht.

Danke.

[grossmaggul]

Was ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen.

Vielleicht mit <ftui-grid responsive>

[Risiko]

Hallo.

Stehe bei der map etwas auf dem Schlauch.

Code Auswählen Erweitern


[text]="test:state | map('0:Heute, 1:Morgen')"

Möchte nur, dass 0 und 1 ersetzt wird. Sonst soll text den Inhalt des Readings annehmen.
Funktioniert so leider nur nicht und ich verstehe nicht warum. Ist sicher nur eine Kleinigkeit.

Danke.

[OdfFhem]

@Risiko

Dein Mapping entspricht einer numerischen Interpetation (als Vergleichsgröße):
- ab 0 den Wert Heute einsetzen
- ab 1 den Wert Morgen einsetzen

`0` bzw. `1` sorgt für eine rein textuelle Interpretation:
- aus 0 wird Heute
- aus 1 wird Morgen

[Risiko]

Danke.
Funktioniert aber auch nicht wie erwartet. Die Ersetzungen funktionieren, aber wenn im Reading was anderes steht, bleibt es bei "Morgen" und nicht der Wert aus dem Reading wird genommen

[Shadow3561]

Code Auswählen Erweitern


map('0:Heute, 1:Morgen,  .*:')



So in etwa.
Mfg

[Eisix]

Hallöchen.

Hat schon mal jemand ein circlemenu in Verbindung mit tabs verwendet?
Etwa so?

Code Auswählen Erweitern


<ftui-circlemenu direction="vertical">
        <ftui-tab view="View1" active>
          <ftui-icon name="home1" class="size-3"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View2">
          <ftui-icon name="lightbulb" class="size-3"></ftui-icon>
        </ftui-tab>
      </ftui-circlemenu>

Wäre echt cool, wenn das gehen würde. Die Umschaltung der tab-view geht sogar, aber es müsste noch der Tab\Button der Selektion im Circlemenu (Zentrum) sich wechseln.

Noch eine allgemeine Frage zum Layout. Was ist die empfohlene Methode (geht es überhaupt) mit unterschiedlichen Auflösungen umzugehen. Habe auf den aktuell 78 Seiten nichts passendes gefunden.
base-width und base-height in % anzugeben ist es wohl nicht.

Danke.

Hallo,

bei diesem circlemenue ändert sich das zentrale Icon. Du brauchst dann aber ein Device/Dummy.

Code Auswählen Erweitern


      <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation"
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
                        [color]="Luefter:state  | map('auto:mygreen, man:mygreen, off:mygreen')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="mygreen"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="mygreen">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="mygreen">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="mygreen">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="mygreen">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation"
                                        name="vent_ventilation_level_automatic"
                                        color="mygreen"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>

Zu deiner responsive design Frage hatte ich schon mal eine nicht wirklich elegante aber funktionierende Lösung
https://forum.fhem.de/index.php/topic,115259.msg1142782.html#msg1142782

Gruß
Eisix

[Sailor]

Hallo grossmaggul

Versuch es mal mit  "readonly"

Funzt, Danke!

Gruß
    Sailor

[Risiko]

Hallo,
bei diesem circlemenue ändert sich das zentrale Icon. Du brauchst dann aber ein Device/Dummy.

Danke. Prinzip verstanden.
Das wegblenden des doppelten Icons kann man ja auch noch einbauen 

[Risiko]

Code Auswählen Erweitern


map('0:Heute, 1:Morgen,  .*:')


Hatte ich auch schon versucht. Geht nicht. .*: ersetzt alles zu nichts.
Hab es jetzt auf FHEM-Seite in perl gelöst 

[eurofinder]

@Risiko:

Hab es jetzt auf FHEM-Seite in perl gelöst

Würdest du uns an deiner Lösung teilhaben lassen?

Gruß
eurofinder

[rob]

Hallo zusammen.

Bisher hatte ich mit der früheren FTUI-Version versucht, ein Colorwheel mit einem LED RGBW-Modul mit Tasmota zu verheiraten. Wollte mir nicht gelingen.
Nun bin ich probeweise mit FTUI3 gestartet, was sofort geklappt. Es funktioniert in beide Richtungen. Die Einfachheit gefällt mir sehr 

Kleiner Wermutstropfen: ich erhalte bei Farbauswahl im Colorwheel immer frische Toasts serviert, dass er meine Auswahl nicht schön findet.

Code Auswählen Erweitern


iro.min.js:1
Error: Invalid hex string


Testweise eingebaut habe ich das so:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="4" height="5" width="3">
  <header>Farbauswahl</header>
  <ftui-colorpicker [hex]="MQTT2_RGBW02:Color | part(6)" (hex)="replace('#','') | part(6) | MQTT2_RGBW02:Color"></ftui-colorpicker>
</ftui-grid-tile>


Im Device steht im Reading Color alles hintereinander drin: RRGGBBWW, weshalb ich WW mit part(6) abschneide.

Code Auswählen Erweitern


READINGS:
     2021-03-30 07:56:58   Color           81F51400
     2021-03-30 07:56:58   Fade            off
     2021-03-30 07:56:53   FallbackTopic   cmnd/RGBW02_fb/
     2021-02-25 15:39:10   Free            112
     2021-03-30 07:56:53   GroupTopic      cmnd/tasmotas/
     2021-03-30 07:56:58   Heap            29
     2021-03-30 07:56:53   Hostname        RGBW_02
     ...
     2021-03-30 07:56:53   LWT             Online
     2021-03-30 07:56:58   LedTable        on
     2021-02-25 15:39:10   Length          399
     2021-03-30 07:56:58   LoadAvg         99
     2021-03-30 07:56:53   Module          Generic
     2021-03-30 07:56:58   MqttCount       1
     2021-02-25 15:39:10   Once            off
     2021-03-30 07:56:53   RestartReason   Hardware Watchdog
     2021-02-25 15:39:09   Rule1           on
     2021-02-25 15:39:10   Rule2           on
     2021-02-25 15:39:10   Rule3           on
     2021-02-25 15:39:10   Rules           On IrReceived#Data=0x00FFB04F Do Power 1 EndOn On IrReceived#Data=0x00FFA857 Do Color2 12 EndOn On IrReceived#Data=0x00FFB24D Do Backlog Power 0; WakeupDuration 1; Dimmer 100; Wakeup EndOn On IrReceived#Data=0x00FF00FF Do Backlog Power 0; WakeupDuration 5; Wakeup EndOn On IrReceived#Data=0x00FF58A7 Do Backlog Scheme 2; Speed 1 EndOn On IrReceived#Data=0x00FF30CF Do Backlog Scheme 3; Speed 5 EndOn
     2021-02-25 15:37:39   SaveData        on
     2021-03-30 07:56:58   Scheme          0
     2021-02-25 15:37:39   SetOption26     on
     2021-03-30 07:56:58   Sleep           10
     2021-03-30 07:56:58   SleepMode       Dynamic
     2021-03-30 07:56:58   Speed           5
     2021-02-25 15:37:38   StateText1      off
     2021-02-25 15:37:38   StateText2      on
     2021-02-25 15:37:38   StateText3      toggle
     2021-02-25 15:37:39   StateText4      hold
     ...
     2021-03-30 07:56:53   Version         9.3.1(tasmota)
     2021-03-30 07:56:53   WebServerMode   Admin
     2021-03-30 07:56:58   White           0
     ...
     2021-02-25 15:37:38   attrTemplateVersion 20200522 or prior
     2021-03-30 07:56:58   pct             96
     2021-03-30 07:50:16   saturation      92
     2021-03-30 07:56:53   state           on
     2021-03-25 07:46:48   subscriptions   cmnd/RGBW02_fb/# cmnd/tasmota_RGBW02/# cmnd/tasmotas/#
     2021-03-30 07:56:58   white           0

Ob ich replace oder part rein/raus lasse macht am Toast keinen Unterschied. Ist die Meldung dem frühen Stadium geschuldet oder muss ich das anders machen?

Vorschlag:
Falls als sinnvoll erachtet, könnten vielleicht im HTML zwei Attribute für ftui-colorpicker eingeführt werden: "has-warmwhite" und "has-coldwhite". Ist eines gesetzt, könnte ein Reading wie z.B. "Color" um hinten zwei Stellen gekürzt werden und wären beide gesetzt, um hinten vier. Dann bliebe es im HTML á la KISS und man müsste nicht mit part() was machen.
Denkbar wäre dann auch die Ergänzung von "has-red-slider has-green-slider has-blue-slider" um "has-ww-slider has-cw-slider", was das Steuern mit einem Widget sehr simpel machen würde.

Vielen Dank und beste Grüße
rob

[grossmaggul]

Ich denke, die Fehlermeldung ist richtig, Dein Hex String hat einen Fehler.
Wenn ich mich recht erinnere funktioniert part() nicht so, mit part() kannst Du Teile ansprechen, die in einer Liste stehen.

Z.B.

stat_cpu_text  user: 2.75 %, nice: 0.02 %, sys: 1.34 %, idle: 94.77 %, io: 1.08 %, irq: 0.00 %, sirq: 0.03 %

Da würde part(2) z.B. 2,75 ausgeben, part(4) 0,02 usw.

In Deinem Fall gehe ich davon aus, daß part(6) gar nicht ausgewertet wird und der komplette RGBW Wert übergeben wird, daher die Fehlermeldung, weil er 2 Stellen zuviel hat.
Ob es da eine Möglichkeit gibt die zwei letzten Stellen des RBGW Wertes abzuschneiden, weiß ich gerade nicht.

Man möge mich korrigieren, wenn ich falsch liege.