[FTUI3] Entwicklung Thermometer/Thermostat

[MDietrich]

Hallo mr_petz,
ich bin erst gestern Abend zum Probieren gekommen. Mit dem kleineren Pointer-Bereich komme ich jetzt besser zurecht. Danke!!
Die Darstellung mit Fully Kiosk sieht jetzt auch gut aus.

Die beiden Parameter im content-file sind vom "Herumspielen" übrig geblieben.

LG und alles Gute für 2022

MDietrich

[MDietrich]

Hallo mr_petz,
ich habe aktuell immer eine Fehlermeldung auf der Browser-Console:

Code Auswählen Erweitern

GET http://xxx.xxx.xxx.xxx.50:8083/fhem/themes/color-attributes.css net::ERR_ABORTED 404 (Not Found)

Der Auslöser ist in der Datei thermostat.component.js:

Code Auswählen Erweitern

        <style>@import "components/thermostat/thermostat.component.css";
               @import "../themes/color-attributes.css";
        </style>
Da ist ein "." zuviel, so geht es  :

Code Auswählen Erweitern

        <style>@import "components/thermostat/thermostat.component.css";
               @import "./themes/color-attributes.css";
        </style>

LG und ein schönes Wochenende
MDietrich

[OdfFhem]

Gemäß der ersten Zeile wären jetzt immer noch  zwei Zeichen "zuviel" ... "./" ... nicht unbedingt bezogen auf die Ladbarkeit der css, sondern bezogen auf kürzere Ladezeiten der js ...

[mr_petz]

Danke für die Hinweise.
Habe es geändert.
LG mr_petz

[MDietrich]

Hallo mr_petz,
ich habe noch eine Frage.

Um ein unbeabsichtigtes Ändern der Solltemperatur zu verhindern habe ich:

a) ein Dummy definiert:

Code Auswählen Erweitern

Internals:
   CFGFN     
   FUUID      61e39af5-f33f-73da-f1cd-ce3ad0b2032e7986
   NAME       d_thermostatReadOnly
   NR         8298
   STATE      true
   TYPE       dummy
   OLDREADINGS:
   READINGS:
     2022-01-16 07:18:22   state           true
Attributes:
   room       Dummy
   setList    true false

b) mit diesem Dummy setze ich das readonly-Flag:

Code Auswählen Erweitern


<ftui-thermostat
                [(value)]="{{Thermostat}}_{{Kanal}}:desired-temp"
                [temp]="{{Thermostat}}_{{Kanal}}:measured-temp"
                [battery]="{{Thermostat}}:batteryLevel | add(-2.1) | divide(1.1) | multiply(100) | round(0)"
                [valve]="{{Thermostat}}_{{Kanal}}:ValvePosition"
                [humidity]="{{Thermostat}}_{{Kanal}}:humidity"
                size="130"
                min="10"
                max="30"
                step="0.5"
[readonly]="d_thermostatReadOnly">
</ftui-thermostat>

c) mit einem Button ändere ich den Dummy:

Code Auswählen Erweitern


<ftui-button
fill="solid"
states="true,false"
[value]="d_thermostatReadOnly"
(value)="d_thermostatReadOnly">
<ftui-label [text]="d_thermostatReadOnly:state | map('true:Locked, false:Unlocked')"></ftui-label>
</ftui-button>

Das "Umstellen" funktioniert einmal, danach bedarf es eines reloads, bevor etwas passiert. 

Gibt es hierzu eine andere Lösung?

Schönen Sonntag,
MDietrich

[mr_petz]

Hi, kannst du so mappen (funktioniert ohne map leider nicht):

Code Auswählen Erweitern


<ftui-thermostat
    [(value)]="{{Thermostat}}_{{Kanal}}:desired-temp"
    [temp]="{{Thermostat}}_{{Kanal}}:measured-temp"
    [battery]="{{Thermostat}}:batteryLevel | add(-2.1) | divide(1.1) | multiply(100) | round(0)"
    [valve]="{{Thermostat}}_{{Kanal}}:ValvePosition"
    [humidity]="{{Thermostat}}_{{Kanal}}:humidity"
    size="130"
    min="10"
    max="30"
    [readonly]="d_thermostatReadOnly | map('true: true, false: false')">
</ftui-thermostat>


Button für´n dummy:

Code Auswählen Erweitern


<ftui-button
    fill="solid"
    states="true,false"
    [(value)]="d_thermostatReadOnly">
    <ftui-label [text]="d_thermostatReadOnly | map('true:Locked, false:Unlocked')"></ftui-label>
</ftui-button>


In meiner Testumgebung geht es so...
LG

Edit: Code angepasst. Ach du hast ja true und false im dummy...
ps :state brauchst du hier nicht....

[MDietrich]

Hallo mr_petz,
danke, jetzt mit dem Mapping funktioniert es.

Gruß,
MDietrich

[setstate]

Statt

Code Auswählen Erweitern

[readonly]="d_thermostatReadOnly | map('true: true, false: false')"

könnte man das

Code Auswählen Erweitern

[readonly]="d_thermostatReadOnly | toBool()" setzen

[mr_petz]

Ja danke. geht auch
toBool() hatte ich nicht auf dem Schirm...
LG

[MDietrich]

Hallo setstate.
danke für den Hinweis, wäre ich von alleine nicht drauf gekommen.
Sollte man ggfs. für "FTUI3 Tips und Tricks" aufheben.

Statt

Code Auswählen Erweitern

[readonly]="d_thermostatReadOnly | map('true: true, false: false')"

könnte man das

Code Auswählen Erweitern

[readonly]="d_thermostatReadOnly | toBool()" setzen

Gruß,
MDietrich

[mr_petz]

@all
Habe noch bissl was hinzugefügt.
Könnt ihr euch hier anschauen (Demo).
https://mr-petz.github.io/ftui/www/ftui/examples/thermostat.html

und hier stehen die Beispiele im exampleFile:
https://github.com/mr-petz/ftui/blob/thermostat/www/ftui/examples/thermostat.html

LG mr_petz

[curt]

Ok. Ich hätte ja auch schon eine Test-Version, aber leider keine Thermostate...

Falls Du Homematic hast (und natürlich einen Heizkörper, sonst ist ja schlecht), kann ich Dir gern (Fehlkauf) einen Homematic-Thermostaten schenken - einfach ansagen. Ansonsten bin ich jetzt auch hier ... 

Wenn ich sofort beschreiben würde, was ich in FTUI hatte und in FTUI3 wieder darstellen möchte, wird das für den ersten Schritt zu umfangreich, da verzetteln wir uns sicher - zumal ich ja erstmal alles verstehen muss. Ok, mein aktueller erster Schritt: Ich hatte/habe das (aus dem Militär ausgeliehene) Konzept der taktischen Bildschirme. Man kann sich das so vorstellen wie ein Jetpilot, der zunächst auf dem Default-Bildschirm die allerwichtigsten Daten so angezeigt bekommt, dass er sie in einer Sekunde überblickt - dann kann er auf einzelne Elemente drücken und bekommt den jeweiligen konkreten taktischen Bildschirm - das Verfahren hat dann mehrere Unterebenen.

Auf dem Haupt-Schirm klicke ich also auf "Fenster, Türen, Temperaturen" - dann kommt der taktische Schirm mit den Stati der Fenster und Türen und Raumtemperaturen - also noch gar nicht wirklich Thermostat bzw. Thermostatsteuerung: Hier nur die Raumtemperaturen.

Ich habe möchte nun die IST-Temperaturen im genannten Konzept anzeigen und spielte mit volume3d und thermostat rum, siehe Grafik. Bitte beachten: Der selbstgewählte mir zur Verfügung stehende Raum ist klein, die Kachelelemente müssen also (gewollt) in die Richtung von Icons gehen:

Code Auswählen Erweitern


  <ftui-grid base-width="96" base-height="86" margin="4">


Die numerische Anzeige der Temperatur sehe ich als unerlässlich an, das habe ich zwei Fragen bzw. Bitten:
1) Ist es möglich, dass ich die Schriftgröße für die Temperatur unabhängig von der Widgetgröße ändern kann?
2) Derzeit ist da eine Nachkommastelle. Ist es möglich, dass ich darauf Einfluss nehmen kann, ob eine Nachkommastelle angezeigt wird?

Sowohl bei volume3d als auch bei thermostat arbeitest Du mit (scheinbar) gleitenden Farbübergängen. Darf ich da einen Wunsch, eine große Bitte äußern? Kann man das denn auch in "solid" haben? Also das Kreissegment wird bis zum angezeigten Wert solid mit Farbübergang gefüllt, danach bis zum rechten Skalenende grau. Ob man außen ganz kleine "ticks" dran macht wäre dann noch zu überlegen.

Bildschirmauszug "Fenster, Türen, Temperaturen":

[MDietrich]

Hallo mr-petz,
ich habe die aktuelle Version ausprobiert, stehe mit den Flags haszoom und hasoldstyle aber auf dem Schlauch.

egal ob ich wie im Beispiel:

Code Auswählen Erweitern

      <ftui-thermostat
                [(value)]="{{Thermostat}}_{{Kanal}}:desired-temp"
                [temp]="{{Thermostat}}_{{Kanal}}:measured-temp"
                [battery]="{{Thermostat}}:batteryLevel | add(-2.1) | divide(1.1) | multiply(100) | round(0)"
                [valve]="{{Thermostat}}_{{Kanal}}:ValvePosition"
                [humidity]="{{Thermostat}}_{{Kanal}}:humidity"
                size="130"
                min="10"
                max="30"
                step="0.5"
has_old_style
has_zoom
[readonly]="d_thermostatReadOnly | toBool()">
</ftui-thermostat>

oder

Code Auswählen Erweitern

ftui-thermostat
                [(value)]="{{Thermostat}}_{{Kanal}}:desired-temp"
                [temp]="{{Thermostat}}_{{Kanal}}:measured-temp"
                [battery]="{{Thermostat}}:batteryLevel | add(-2.1) | divide(1.1) | multiply(100) | round(0)"
                [valve]="{{Thermostat}}_{{Kanal}}:ValvePosition"
                [humidity]="{{Thermostat}}_{{Kanal}}:humidity"
                size="130"
                min="10"
                max="30"
                step="0.5"
has_old_style=true"
has_zoom="true"
[readonly]="d_thermostatReadOnly | toBool()">
      </ftui-thermostat>

benutze, ich habe weder den Zoom, noch den oldstyle...

Eine Idee was ich falsch mache?

LG und ein schönes Wochenende
MDietrich

[OdfFhem]

@MDietrich

Die verwendeten Attribute

Code Auswählen Erweitern


has_old_style
has_zoom

heissen

Code Auswählen Erweitern


has-old-style
has-zoom


Es reicht die Angabe vom Attribut selbst, es muss kein Wert zugewiesen werden.

s.a. die von @mr-petz verlinkte Beispieldatei ...

[mr_petz]

@curt

Falls Du Homematic hast (und natürlich einen Heizkörper, sonst ist ja schlecht), kann ich Dir gern (Fehlkauf) einen Homematic-Thermostaten schenken - einfach ansagen. Ansonsten bin ich jetzt auch hier ... 

Danke für´s Angebot, aber ich habe ja meine Heizung über e-bus ein/angebunden und da gibt es ja auch alle Daten... (ausser Battery)

Die numerische Anzeige der Temperatur sehe ich als unerlässlich an, das habe ich zwei Fragen bzw. Bitten:
1) Ist es möglich, dass ich die Schriftgröße für die Temperatur unabhängig von der Widgetgröße ändern kann?

Ist Temperatur geht mit:

Code Auswählen Erweitern


--thermostat-temp-size

und Soll Temperatur jetzt mit (ganz vergessen):

Code Auswählen Erweitern


--thermostat-value-size


2) Derzeit ist da eine Nachkommastelle. Ist es möglich, dass ich darauf Einfluss nehmen kann, ob eine Nachkommastelle angezeigt wird?

Da gibst du einfach wie in der Demo oben bei Humidity:

Code Auswählen Erweitern


tofixed="2"

für 2 Nachkommastellen an.

Sowohl bei volume3d als auch bei thermostat arbeitest Du mit (scheinbar) gleitenden Farbübergängen. Darf ich da einen Wunsch, eine große Bitte äußern? Kann man das denn auch in "solid" haben? Also das Kreissegment wird bis zum angezeigten Wert solid mit Farbübergang gefüllt, danach bis zum rechten Skalenende grau. Ob man außen ganz kleine "ticks" dran macht wäre dann noch zu überlegen.

Du willst einen kompletten Farbbalken. Richtig?
Das kannst du hierzur Zeit nur mit vielen ticks erreichen. Die Bedienung wird aber dann träge.
Mal sehen ob ich da was hinbekomme. Bin ja nicht so fit im css....
Ansonsten müsstest du dafür den knob von setstate nehmen.

LG mr_petz