FTUI version 3

grossmaggul · 06 Februar 2021, 18:10:25

ZitatOder vielleicht etwas senden

Habsch schon.

roman1528 · 06 Februar 2021, 22:07:21

Hi setstate und Community.

Ich habe mir natürlich auch gleich die V3 gekrallt und stelle mal wieder fest, dass das Grid gar nicht so hässlich ist

Auf folgendes Problem bin ich jetzt nach vielen Stunden gestoßen... Ich komme da einfach nicht weiter...

Code Auswählen

<ftui-button [(value)]="bu_WT_Climate:controlMode" states="auto,manual" [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle">
	<ftui-icon [name]="bu_WT_Climate:controlMode | map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')" [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')" [class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon>
</ftui-button>

Das Icon macht ärger und ich komme nicht dahinter wo, wieso, weshalb, warum und schon gar nicht an welcher Stelle XD

Konsole sagt:

Code Auswählen

parseHoconException: Already met seperator 2 ftui.helper.js:115:17
    error https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:115
    filter https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:282
    onReadingEvent https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:87
    onReadingEvent https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:84
    FtuiBinding https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.binding.js:49
    publish https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:410
    publish https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.helper.js:410
    updateReadingItem https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:82
    parseRefreshResultSection https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:223
    parseRefreshResult https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:155
    parseRefreshResult https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:151
    request https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:140
    (Async: promise callback)
    refresh https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:140
    timer https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:116
    (Async: setTimeout handler)
    startRefreshInterval https://192.168.1.5:8083/fhem/ftui/modules/ftui/fhem.service.js:114
    startBinding https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:161
    initComponents https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:96
    initPage https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:78
    init https://192.168.1.5:8083/fhem/ftui/modules/ftui/ftui.app.js:65
    main https://192.168.1.5:8083/fhem/ftui/ftui.js:7
    <anonym> https://192.168.1.5:8083/fhem/ftui/ftui.js:19
    (Async: EventListener.handleEvent)
    <anonym> https://192.168.1.5:8083/fhem/ftui/ftui.js:16

Wäre toll wenn da mal jemand drüber schauen könnte

Dann hab ich noch Probleme mit den Dropdowns. Vielleicht kann setstate da noch ein - zwei Beispiele liefern?
zu: list
und vorallem die "verlinkung" zwischen "schön geschriebenem" Listeneintrag und dem "set-kommando"

Zudem ist mir aufgefallen, dass der "segment-button" noch ärger macht. auf der "active"-page lädt er die werte korrekt (darstellung). auf anderen seiten ist die darstellung fehlerhaft..

Danke schonmal und schönes Wochenende.

Grüße^^

grossmaggul · 06 Februar 2021, 22:51:52

Ich weiß es jetzt nicht genau, könnte aber sein, daß Du sowas

Code Auswählen

map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')

mit Backticks quoten musst, also so

Code Auswählen

map('`auto|set_auto`:oa-auto, `manual|set_manual`:oa-manual')

octek0815 · 07 Februar 2021, 05:31:42

Zitat von: setstate am 06 Februar 2021, 16:32:40
Code Auswählen Erweitern
<ftui-clock is-fhem-time></ftui-clock>

Damit wird die Zeit einmal beim Start von FHEM ermittelt und als serverDiff gespeichert.
Der JS Timer muss auf deinem Tablet dann aber trotzdem richtig "ticken"

Einen Offset kann man noch zusätzlich angeben.

offset="3"

Alles klar danke, aber warum nun is-fhem-time und nicht wie in clock.component.js isFhemTime ?

OdfFhem · 07 Februar 2021, 05:45:11

@octek0815

Zitat
camelCase Properties kann man im FTUI per kebab-case Attribute setzen.

Im js-File nutzt man die übliche camelCase-Schreibweise - Worte werden durch Großbuchstaben getrennt.
Im html-File nutzt man die (nur aus Kleinbuchstaben bestehende) kebab-case-Schreibweise - Worttrenner ist ein Bindestrich.

octek0815 · 07 Februar 2021, 05:56:43

@OdfFhem

Alles klar, besten Dank für die Erklärung.
Grad nochmal nachgelesen: https://medium.com/@bendcosta/famous-camelcase-vs-kebab-case-javascript-6415cac2052b

OdfFhem · 07 Februar 2021, 07:22:17

@roman1528

Code Auswählen


  <ftui-grid-tile row="5" col="1" height="16" width="5" shape="round">
    <ftui-button [(value)]="bu_WT_Climate:controlMode"
                 [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
                 [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
                 shape="circle" states="auto,manual" class="size-5">
      <ftui-icon path="../images/openautomation/"
                 [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
                 [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')"
                 [class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon>
    </ftui-button>

    <ftui-label [text]="bu_WT_Climate:controlMode"></ftui-label>

    <ftui-button [(value)]="bu_WT_Climate:controlMode"
                 [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
                 [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
                 shape="circle" states="auto,manual" class="size-5">
      <ftui-icon path="../images/openautomation/"
                 [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
                 [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:``, set_auto|set_manual:danger')"
                 [class-name]="bu_WT_Climate:controlMode | map('auto|manual:``, set_auto|set_manual:blink')"></ftui-icon>
    </ftui-button>

    <ftui-button [(value)]="bu_WT_Climate:controlMode"
                 [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')"
                 [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')"
                 shape="circle" states="auto,manual" class="size-5">
      <ftui-icon path="../images/openautomation/"
                 [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')"
                 [color]="bu_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')"
                 [class-name]="bu_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon>
    </ftui-button>
  </ftui-grid-tile>

Test enthält drei Button mit jeweils einem Icon:

Das erste/Dein Icon scheitert an der Zeichenfolge ":," - also praktisch kein Ergebnis bzw. setzt Error-Attribut.

Das zweite Icon löst das Problem durch ":``," - es ergibt sich ein leeres Ergebnis

Das dritte Icon stellt ":," ans Ende - hilft, falls man genau ein leeres Ergebnis hat

octek0815 · 07 Februar 2021, 07:31:18

@setstet

Wäre es möglich für ftui-label noch unit-size und unit-position einzuführen?
Wie ich gesehen habe gibt es unit-size für ftui-knob.

roman1528 · 07 Februar 2021, 09:46:02

Zitat von: OdfFhem am 07 Februar 2021, 07:22:17
@roman1528

Code Auswählen Erweitern
<ftui-grid-tile row="5" col="1" height="16" width="5" shape="round"> <ftui-button [(value)]="bu_WT_Climate:controlMode" [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle" states="auto,manual" class="size-5"> <ftui-icon path="../images/openautomation/" [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')" [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:, set_auto|set_manual:danger')" [class-name]="bu_WT_Climate:controlMode | map('auto|manual:, set_auto|set_manual:blink')"></ftui-icon> </ftui-button> <ftui-label [text]="bu_WT_Climate:controlMode"></ftui-label> <ftui-button [(value)]="bu_WT_Climate:controlMode" [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle" states="auto,manual" class="size-5"> <ftui-icon path="../images/openautomation/" [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')" [color]="bu_WT_Climate:controlMode | map('auto:medium, manual:``, set_auto|set_manual:danger')" [class-name]="bu_WT_Climate:controlMode | map('auto|manual:``, set_auto|set_manual:blink')"></ftui-icon> </ftui-button> <ftui-button [(value)]="bu_WT_Climate:controlMode" [fill]="bu_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bu_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle" states="auto,manual" class="size-5"> <ftui-icon path="../images/openautomation/" [name]="bu_WT_Climate:controlMode | map('auto|set_auto:sani_heating_automatic, manual|set_manual:sani_heating_manual')" [color]="bu_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')" [class-name]="bu_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon> </ftui-button> </ftui-grid-tile>

Test enthält drei Button mit jeweils einem Icon:

Das erste/Dein Icon scheitert an der Zeichenfolge ":," - also praktisch kein Ergebnis bzw. setzt Error-Attribut.

Das zweite Icon löst das Problem durch ":``," - es ergibt sich ein leeres Ergebnis

Das dritte Icon stellt ":," ans Ende - hilft, falls man genau ein leeres Ergebnis hat

Perfekt. Vielen vielen Dank.

Grüße^^

OdfFhem · 07 Februar 2021, 10:53:14

@setstate

Ich habe einen PR als Vorschlag für das desired-Feature der knob-Komponente angelegt.

setstate · 07 Februar 2021, 11:18:16

Zitat von: octek0815 am 07 Februar 2021, 07:31:18
@setstet

Wäre es möglich für ftui-label noch unit-size und unit-position einzuführen?
Wie ich gesehen habe gibt es unit-size für ftui-knob.

ein

Code Auswählen

unit="°C" unit-size="4" unit-position="upper"

ist nicht nicht wirklich kürzer oder einfacher als

Code Auswählen

<sup slot="end" class="size-4">°C</sup>

Was gibt es denn für Ausprägungen? Maximal "half-size" und "half-size-upper". Dann könnte man auch size und position zusammenfassen?

setstate · 07 Februar 2021, 11:18:51

Zitat von: OdfFhem am 07 Februar 2021, 10:53:14
@setstate

Ich habe einen PR als Vorschlag für das desired-Feature der knob-Komponente angelegt.

danke, werde ich mir ansehen.

setstate · 07 Februar 2021, 11:23:07

Zitat von: roman1528 am 06 Februar 2021, 22:07:21
Hi setstate und Community.
....
Zudem ist mir aufgefallen, dass der "segment-button" noch ärger macht. auf der "active"-page lädt er die werte korrekt (darstellung). auf anderen seiten ist die darstellung fehlerhaft..

Grüße^^

Was passt da nicht, ich sehe auf dem Bild keine Fehler?

roman1528 · 07 Februar 2021, 11:28:32

Zitat von: setstate am 07 Februar 2021, 11:23:07
Was passt da nicht, ich sehe auf dem Bild keine Fehler?

das blau hinterlegte passt nicht... steht auf der ersten option obwohl die 2. (15°C) aktiv ist (text ist heller).

Grüße^^

HaWe · 07 Februar 2021, 11:43:51

Hallo,
mit FTUI2 konnte ich die Temperatur meines HM-Thermostates auf folgendem Wege anzeigen (data-get) und schalten(data-set):

Code Auswählen

<div data-type="thermostat" data-device="HM_WohnzimmerGruppe" data-valve="valve_position" 
                    data-get="1.SET_POINT_TEMPERATURE" 
                    data-set="datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE" 
                    data-temp="1.ACTUAL_TEMPERATURE" 
                    data-unit="°"
                    data-min="10"
                    class="large">

In FTUI3 sieht mein Versuch wie folgt aus:

Code Auswählen


         <ftui-knob [value]="HM_WohnzimmerGruppe:1.SET_POINT_TEMPERATURE" 
                    [color]="HM_WohnzimmerGruppe:1.SET_POINT_TEMPERATURE | map('10: blue, 18: warning, 23: danger')" 
                    (value)="HM_WohnzimmerGruppe:datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE"
                    max="30" min="10" unit="°C" has-scale has-arc has-scale-text has-needle size="2">

Leider wird beim Setzen der Temperatur der Value aus dem Widget nicht übertragen. In der JS-Konsole wird folgender Befehl Richtung FHEM gesendet

Code Auswählen

send to FHEM: set HM_WohnzimmerGruppe datapoint 1.CONTROL_MODE 0 1.SET_POINT_TEMPERATURE

Die am Widget eingestellte Temperatur wird nicht mit übertragen. Ich habe bereits versucht, den set-Befehl mit Backticks zu escapen. Leider ohne Erfolg.
Habt ihr eine Idee, wie ich zum Ziel komme?

Danke für die gute Arbeit!