FTUI version 3

[rob]

Ok. Ich hatte part() als eine Art Substring-Operation verstanden. Aber anscheinend arbeitet es eher wie bei einem Array-Zugriff.
Dank Dir. Das erklärt auch, warum es keinen Unterschied macht, ob part() drin oder draußen ist

VG
rob

[OdfFhem]

@rob

Mit replace kann man gezielt mit regulären Ausdrücken festlegen, was übernommen werden soll.

Beispiel aus dem Gedächtnis - also ungetestet: Folgendes übernimmt alles

Code Auswählen Erweitern

replace(/(.*)/,'$1')

[rob]

Sehr nice. Hab das gleich mal an einem unschuldigen Label getestet:

Code Auswählen Erweitern


<ftui-label [text]="MQTT2_RGBW02:Color | replace(/(\d{2})$/,'')"></ftui-label>

ergibt z.B. F8FF21; im Reading Color steht F8FF2100 --> schaut also gut aus 

dann mal flink eingebaut zum Colorwheel:

Code Auswählen Erweitern


<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/(\d{2})$/,'')" (hex)="replace(/(\d{2})$/,'') | MQTT2_RGBW02:Color"></ftui-colorpicker>

Das mag er noch nicht. Gleiche Fehlermeldung, aber wird korrekt an Fhem übergeben:

Code Auswählen Erweitern

set MQTT2_RGBW02 Color 00eaff
Kommt als Toast und in Fhem schaut es gut aus.

Nach mehrmaligem Rumklickern wird zuviel abgeschnitten, da kommt dann set ... fbff". Also habe ich in regeex101 dies ausgelotet:

Code Auswählen Erweitern

replace(/[0-9a-fA-F]{6}([0-9]{2})/,'')
Funktioniert in replace() leider generell nicht.

Also habe ich ihm das anders hingebogen:

Code Auswählen Erweitern


<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/([0-9a-fA-F]{6})([0-9]{2})/,'$1')" (hex)="replace('#','') | replace(/([0-9a-fA-F]{6})([0-9]{2})/,'$1') | MQTT2_RGBW02:Color"></ftui-colorpicker>

Wird auch korrekt übergeben, aber leider mag er das hex noch immer nicht.

Die Fehlermeldung scheint nur beim Zuweisen des Readings ans Colorwheel zu kommen. Ändere ich das Binding auf einen Dummy, ist alles fein:

Code Auswählen Erweitern


<ftui-colorpicker [hex]="testdummy:rgb" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>

Das selbe mit einem Fixwert, klappt auch - nur halt lila

Code Auswählen Erweitern

<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/(.*)/,'FF00FF')" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>


Das klappt leider nicht mehr, obwohl im Test-Label ein korrekter Wert steht:

Code Auswählen Erweitern

<ftui-colorpicker [hex]="MQTT2_RGBW02:Color | replace(/([0-9a-fA-F]{6})/,'$1')" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>


Schwieriger als ich dachte so ein RGBW 

VG
rob

[Sailor]

Moin zusammen

Ich habe mir jetzt Charts eingerichtet und dafür sowohl

https://github.com/knowthelist/ftui
als auch
https://knowthelist.github.io/ftui/www/ftui/examples/chart.html
sowie
https://www.chartjs.org/docs/latest/ Kapitel "Dataset Properties"

durchgelesen, aber ich finde einfach nicht heraus wie ich HerschafftszeitenKreizKruzifixSackZementUndKuebelmischerNochmal! diese runden Datenpunkte wegbekomme...
Ich hoffe das hat schon Jemand von Euch herausgefunden...

Danke

Gruß
    Sailor

[mr_petz]

Versuche mal

Code Auswählen Erweitern

pointRadius="0" mitzugeben.
Ich nutze das ChartModul nicht...

[grossmaggul]

Mach es mit Grafana, sieht eh besser aus.

[Sailor]

Versuche mal

Code Auswählen Erweitern

pointRadius="0" mitzugeben.
Ich nutze das ChartModul nicht...

Das war das Erste was ich versucht habe. Funzt aber nicht.

Trotzdem Danke!

Gruß
    Sailor

[LuGu]

Das war das Erste was ich versucht habe. Funzt aber nicht.

Trotzdem Danke!

Gruß
    Sailor

Code Auswählen Erweitern


point-radius="0"


Funktioniert bei mir ohne Probleme.

Gruß
LuGu

[mr_petz]

Code Auswählen Erweitern


point-radius="0"


Funktioniert bei mir ohne Probleme.

Gruß
LuGu

Hi, kannst du bitte deine gesamte Codezeile für Sailor posten, damit er mit seiner vergleichen kann...

[LuGu]

Gerne!

Code Auswählen Erweitern


<ftui-chart title="Luftfeuchte" height="130px" width="300px">
  <ftui-chart-data point-radius="0" tension="0.3" fill log="FileLog_eg_wz_Klima_2_ZB" spec="4:eg_wz_Klima_2_ZB.humidity" [update]="eg_wz_Klima_2_ZB:state:time"></ftui-chart-data>
  <ftui-chart-controls units="day, week"></ftui-chart-controls>
</ftui-chart>


[LuGu]

Um es nochmal genauer zu schreiben.

Code Auswählen Erweitern


pointRadius="0"

Ist falsch.

Code Auswählen Erweitern


point-radius="0"

Ist richtig.

[Sailor]

Um es nochmal genauer zu schreiben.

Code Auswählen Erweitern


point-radius="0"

Ist richtig.

DANKE!!!!! Funzt.
Aber wo steht denn so was, wenn nicht in der Beschreibung von https://www.chartjs.org/docs/latest/ Kapitel "Dataset Properties"

Gruß
   Sailor

[rob]

Leute, ich verstehe es nicht. Habe nun ein UserReading "myRGB" angelegt und schneide somit schon im Device die Stellen 7-8 ab. Es steht immer der korrekte RGB-Wert drin. Trotzdem mag FTUI das nicht.

Code Auswählen Erweitern


myRGB {
my $tmp = ReadingsVal("MQTT2_RGBW02","Color","") ;
$tmp =~ s/^([0-9a-fA-F]{6}).*/$1/ ;
$tmp
}

Readings:

Code Auswählen Erweitern


Color   FFFF4A00
myRGB   FFFF4A


Eingebunden so:

Code Auswählen Erweitern


<ftui-colorpicker [hex]="MQTT2_RGBW02:myRGB" (hex)="replace('#','') | MQTT2_RGBW02:Color"></ftui-colorpicker>

Immer kommt die Fehlermeldung. Alles Upcase, alles Lowcase oder # vorne dran - nix hilft. Wo ist der Unterschied zu einem Dummy oder Fixwert?

Was könnte ich noch probieren? Toasts generell abschalten sind doch auch keine Lösung (hab ich jetzt aber erstmal).

Vielen Dank für Eure Unterstützung und beste Grüße
rob

[OdfFhem]

@rob

Ich habe zum Testen 2 Colorpicker verwendet und beide funktionieren ohne irgendeine Fehlermeldung.
Wheel- bzw. Slider-Darstellung ist korrekt - Toasts mit Information zu setreading werden aufgeblendet.
iro.js kann hex-Werte verarbeiten, die dem Muster RGB RGBA RRGGBB oder RRGGBBAA entsprechen - mit oder ohne führendem # bzw. 0x.

Code Auswählen Erweitern


  <ftui-colorpicker [hex]="ftuitest:hexcolor" (hex)="setreading ftuitest:hexcolor"></ftui-colorpicker>


Code Auswählen Erweitern


  <ftui-colorpicker [hex]="ftuitest:hexcolor" (hex)="replace('#','') | setreading ftuitest:hexcolor"></ftui-colorpicker>


Anmerken kann man noch, dass bei "heftigem" Nutzen irgendwann die Kontrolle verloren geht; das Wheel stellt Wertänderungen durch Mausklick, o.ä. korrekt dar, aber es werden keine Werte mehr an FHEM geschickt - evtl. mit debounce lösbar.

[OdfFhem]

@Sailor

Unter https://www.chartjs.org/docs/latest/configuration/elements.html findet man die Eigenschaften, die Points unterstützen. pointStyle als Name ist aber scheinbar ein Fehler, denn hier stehen eigentlich nur die reduzierten Namen der Eigenschaft; dass sie für point gelten, erübrigt sich ja eigentlich.

chart.js verrät dann ein wenig mehr:

Code Auswählen Erweitern


  pointStyle: 'pointStyle',
  radius: 'pointRadius',
  rotation: 'pointRotation'


Die meisten Eigenschaften sind aber aktuell nicht nutzbar, da man sie nur nutzen kann, wenn sie in der entsprechenden Komponente integriert sind.

Erweitert man die Komponente "minimal", kann man z.B. style sowie rotation nutzen, was ein wenig mehr Flexibilität verleiht.


Das Attribut pointRadius folgt in der für Javascript verbreiteten Schreibweise dem "camel case"-Prinzip.
Eigentlich alles Kleinbuchstaben; nur ab dem 2.Wort ist der erste Buchstabe eines Wortes ein Großbuchstabe.

Bei HTML kennt man eher das "kebab case"-Prinzip.
Alles Kleinbuchstaben; Worte werden durch "-" getrennt.

pointRadius wird also zu point-radius
pointRotation würde zu point-rotation
pointStyle würde zu point-style

Angehängter Screenshot zeigt statt Kreis ein um 45 Grad gedrehtes Kreuz.