[FTUI3] Entwicklung Thermometer/Thermostat

Begonnen von mr_petz, 23 September 2021, 18:17:49

Vorheriges Thema - Nächstes Thema

mr_petz

Ja, da gebe ich dir prinzipiell Recht.
Ich vermute aber, dass viele alle Farben der Texte unterschiedlich haben wollen..
z.B.: min,max grau; soll Weiß; aTemp rot oderso...
Ich kann aber noch var(--text-color) einfügen...

mr_petz

#46
Hi.
Ich füge hier mal eine überarbeitete Version an.
Code überarbeitet (jetzt beim setzen nur noch eine for-schleife).
has-old-style als Attribute hinzugefügt. Hier werden bei Value>Temp die Ticks auch RGB-farbig (siehe Anhang).
In der CSS wurden den Textfarben var(--text-color) und den Icons var(--color-base) zugewiesen und damit die Farben vom Theme genommen.
Ausgenommen sind hier die Ticks und min-max.
Ändern der Textfarben könnte man zur Zeit z.Bsp. mit:

style="--text-color: black"

erreichen.
Ansonsten alles wie bisher...
LG mr_petz

ps. so sollte es auch bei dir @wieral passen mit den Textfarben.

Edit: zur Info für setstate ;): Ich baue auch noch in der nächsten Version var(--thermostat-text-color, var(--text-color)) ein, um es in einer user.css zu deklarieren!
Da muss ich mir noch einzelne Namen dafür ausdenken... w.z.Bsp.: var(--thermostat-value-color, var(--text-color)) oderso.
Für Vorschläge bin ich offen...

mr_petz

#47
Hi@all.
Ich füge hier mal wieder eine überarbeitete Version an.
Code nochmal überarbeitet/gekürzt.
has-old-style hat jetzt kein Soll: mehr vor der Solltemperatur stehen.
Für die CSS können jetzt Iconfarben,Textfarben und die Größe der aktuellen Temperatur in einer user.css angepasst werden:

ftui-thermostat{
  --thermostat-battery-color: standard=> --text-color;
  --thermostat-battery-icon: standard=> --color-base;
  --thermostat-valve-color: standard=> --text-color;
  --thermostat-valve-icon: standard=> --color-base;
  --thermostat-humidity-color: standard=> --text-color;
  --thermostat-humidity-icon: standard=> --color-base;
  --thermostat-value-color: standard=> --text-color;
  --thermostat-text-color: standard=> rgba(255, 255, 255, 0.2);
  --thermostat-temp-color: standard=> --text-color;
  --thermostat-temp-size: standard=> 0.7em;
  --thermostat-tick-color: standard=> rgba(255, 255, 255, 0.2);
}

Einfach hinter dem : eigene Werte einsetzen. Bsp:

ftui-thermostat{
  --thermostat-value-color: var(--primary-color);
  --thermostat-temp-color: white;
  --thermostat-temp-size: 0.9em;
}

Testet es einfach und sagt bitte was noch fehlt oder nicht geht.
Ansonsten alles wie bisher...
LG mr_petz

wieral

Guten Morgen,
konnte die Änderung der Farbeinstellungen erst jetzt testen. Funktioniert prima.
Vielen Dank.

MDietrich

Hallo mr_petz,
erst einmal herzlichen Dank für das Thermostat. Ich habe es gleich einmal ausprobiert, in meinem Produktivsystem habe ich das FTUI-2 Widget verwendet.

Für den ersten Versuch habe ich ein HM-CC-RT-DN benutzt und es funktioniert wie es soll (wenn man den Channel _Clima benutzt).
Den Batteriestatus rechne ich linear von der Ausgangsspannung der Batterien:
[battery]="HM_Hzg_Poel_Kueche:batteryLevel | divide(3.1) | multiply(100) | round(0)"

Meine Wunschliste:
-Anzeige des 'neuen' Sollwerts wenn man den Zeiger bewegt
-Skalierbarkeit der Beschriftung, ggfs. Ist-Temperatur innen für den Fall das wenig Platz da ist.

Besinnliche Feiertage,
MDietrich
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

mr_petz

#50
Hi MDietrich.
Zitat von: MDietrich am 23 Dezember 2021, 04:36:25
...
Für den ersten Versuch habe ich ein HM-CC-RT-DN benutzt und es funktioniert wie es soll (wenn man den Channel _Clima benutzt).
Was heisst das jetzt für mich "wenn man den Channel _Clima benutzt"?
Ich hatte ja schon erwähnt, dass ich selber keine Thermostate besitze...

Zitat
Den Batteriestatus rechne ich linear von der Ausgangsspannung der Batterien:
[battery]="HM_Hzg_Poel_Kueche:batteryLevel | divide(3.1) | multiply(100) | round(0)"
Ist das von Relevanz für die Entwicklung?

Zitat
Meine Wunschliste:
-Anzeige des 'neuen' Sollwerts wenn man den Zeiger bewegt
-Skalierbarkeit der Beschriftung, ggfs. Ist-Temperatur innen für den Fall das wenig Platz da ist.
zu 1.
Das ist ein Fehler vom letzten Update von mir. im zoom-modus geht es. Mache ich bei der nächsten Version wieder richtig.

zu 2.
Halte ich nicht für optimal, weil die Ist-Temperatur dann durchaus vom grib/zeiger verdeckt werden könnte...
Mal schauen was andere dazu sagen.

Ok bis dahin
LG mr_petz

Edit: Ich habe mal schnell den Soll Wert bei nicht has-zoom gefixt und oben am letzten Beitrag angehangen...

MDietrich

Hi mr_petz,
der Fix funtioniert!

Danke für die schnelle Reaktion,

MDietrich
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

MDietrich

Hallo mr_petz,

zur Info: ich habe mir für mein Projekt ein Template gebaut, anbei ein Bild.
- links: Verknüpft mit einem Wandthermostat HM-TC-IT-WM-W-EU. Das Icon für die Ventilstellung wird leider angezeigt, obwohl hier ein Leerstring "" übergeben wird.
- mitte: Verknüpft mit einem Heizkörperthermostat HM-CC-RT-DN. Hier ist das selbe Thema mit dem Icon für die Luftfeuchtigkeit
- rechts: wie mitte, während Kommandos anstehen oder abgearbeitet werden, wird dies durch den gelben Punkt signalisiert.

Funktioniert generell wie es soll, und ich habe eine Übersicht mit acht Anzeigen realisiert.

Bei der Anzeige auf dem Tablett ist Fully passt es auch, nur der Text bei Batterie, Ventilposition und Feuchte ist gegenüber dem Icon ein wenig nach oben versetzt.

Kann man das Setzen der Solltemperatur so anpassen, dass nur dann etwas passiert, wenn man direkt den Zeiger bewegt oder auf die Skala klickt?  Wenn ich nicht aufpasse, ist mir schon passiert, dass ich die Solltemperatur auf den Min- bzw. Max-Wert setze, wenn ich im zweiten oder dritten Quadranten klicke.

Viele Grüße,
MDietrich
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

mr_petz

#53
Zitat von: MDietrich am 29 Dezember 2021, 02:05:36
..
zur Info: ich habe mir für mein Projekt ein Template gebaut, anbei ein Bild.
- links: Verknüpft mit einem Wandthermostat HM-TC-IT-WM-W-EU. Das Icon für die Ventilstellung wird leider angezeigt, obwohl hier ein Leerstring "" übergeben wird.
- mitte: Verknüpft mit einem Heizkörperthermostat HM-CC-RT-DN. Hier ist das selbe Thema mit dem Icon für die Luftfeuchtigkeit
- rechts: wie mitte, während Kommandos anstehen oder abgearbeitet werden, wird dies durch den gelben Punkt signalisiert.
..
sieht doch schon gut aus :)
Wenn du so [valve]="" definiert hast, dann wird auch das Icon angezeigt. Wenn du es nicht sehen willst, musst du [valve]="" komplett rausnehmen/löschen.


Zitat
Bei der Anzeige auf dem Tablett ist Fully passt es auch, nur der Text bei Batterie, Ventilposition und Feuchte ist gegenüber dem Icon ein wenig nach oben versetzt.
Ja. Das kommt bestimmt von der eigenen Größenangabe. Ich kann es noch zum korrigieren Benutzerdefiniert machen.
Ist ein wenig schwierig für mich mit dem css... :o

Zitat
Kann man das Setzen der Solltemperatur so anpassen, dass nur dann etwas passiert, wenn man direkt den Zeiger bewegt oder auf die Skala klickt?  Wenn ich nicht aufpasse, ist mir schon passiert, dass ich die Solltemperatur auf den Min- bzw. Max-Wert setze, wenn ich im zweiten oder dritten Quadranten klicke.
Hier hatte ich bewusst den cursor-pointer extra so "groß" gemacht. Mal sehen ob ich das optional nur auf den Zeiger anpassen kann.

LG mr_petz

Edit: Ich habe jetzt auch den step fürs Icon Battery zum definieren rausgeholt. Ist aber esrtmal nur auf github von mir. zum definieren so angeben:
battery-icon-color="step('-99:danger, 25:warning, 50:success, 75:primary')"
Das gleiche gilt fürs Icon ansich:
battery-icon="step('-99:battery-0, 25:battery-1, 50:battery-2, 75:battery-3, 100: battery')"
Man kann natürlich auch "nur" ein map machen wenn man will...

LuGu

Zitat von: MDietrich am 29 Dezember 2021, 02:05:36
zur Info: ich habe mir für mein Projekt ein Template gebaut, anbei ein Bild.
- links: Verknüpft mit einem Wandthermostat HM-TC-IT-WM-W-EU. Das Icon für die Ventilstellung wird leider angezeigt, obwohl hier ein Leerstring "" übergeben wird.
- mitte: Verknüpft mit einem Heizkörperthermostat HM-CC-RT-DN. Hier ist das selbe Thema mit dem Icon für die Luftfeuchtigkeit
- rechts: wie mitte, während Kommandos anstehen oder abgearbeitet werden, wird dies durch den gelben Punkt signalisiert.

Funktioniert generell wie es soll, und ich habe eine Übersicht mit acht Anzeigen realisiert.
Viele Grüße,
MDietrich
Hallo MDietrich,

magst Du Dein Template als Gedanken-Anregung für die Allgemeinheit teilen?

Gruß LuGu
FHEM mit RPi3 (Visu über FTUI)
HMCCU mit piVCCU3 / MQTT2 mit zigbee2mqtt

MDietrich

Zitat von: mr_petz am 29 Dezember 2021, 09:01:41
sieht doch schon gut aus :)
Wenn du so [valve]="" definiert hast, dann wird auch das Icon angezeigt. Wenn du es nicht sehen willst, musst du [valve]="" komplett rausnehmen/löschen.

Da liegt mein Problem.
Das Wandthermostat liefert keine Ventilstellung und das Heizungsthermostat keinen Wert für die Feuchte. Wäre es möglich, dass das Icon nur dann angezeigt wird, wenn der String leer, sprich wenn Länge <1 ist?

Gruß,
MDietrich
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

grossmaggul

#56
ZitatDa liegt mein Problem.
Das verstehe ich ehrlich gesagt nicht, wenn Du z.B. ein Ventil hast, gibst Du da Attribut "valve" mit, hast Du keins, lässt Du es weg, wo ist denn da jetzt ein Problem, bzw. was soll der Sinn dabei sein, das Attribut valve="" anzugeben, wenn das Gerät gar kein Ventil hat?
Oder geht es dabei um ein content file? Das fände ich eher suboptimal, dann müsste man das nämlich bei allen Elemente so machen um eine Konsistenz zu erhalten, ob setstate da mitspielt?
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

MDietrich

Zitat von: LuGu am 29 Dezember 2021, 23:54:36
Hallo MDietrich,

magst Du Dein Template als Gedanken-Anregung für die Allgemeinheit teilen?

Gruß LuGu
Kein Problem, here it is:

  <!--
      Content-File for HOMEMATIC thermostat
      MDietrich
      Date: 2021-12-30
     
      shows the thermostate using the component provided by mr_petz
     
      with additional state information
      prepared for a tile size of 5x4 (heightxwidth)
      example:
            <ftui-grid-tile row="1" col="3" height="5" width="4" shape="round"></ftui-grid-tile>
              <ftui-content file="content_Thermostat.html"
                      Thermostat="HM_Hzg_Poel_WzT"
                      Raum="Wohnzimmer"
                      Kanal="Climate"
                      Sensor="HM_SEC_WZ">
              </ftui-content>
            </ftui-grid-tile>
           
      todo: icons for humidity / valve position are shown even this reading is not provided
  -->


  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <!--
    Indexdatei für POEL Version 2022 mit FTUI 3
    Version 0.0 - 2021-12-02 Beginn der Erstellung
  -->
  <!--
    /*
    * Ftui3 Thermostat component for FTUI version 3
    *
    * by mr_petz
    *
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    *
    * https://github.com/knowthelist/ftui
    */
  -->

        <ftui-title>
              {{Raum}}
        </ftui-title>
        <ftui-row>         
          <ftui-column align-items="left" padding="1">
            <ftui-cell>
              <ftui-icon
                type= "svg"
                path="../images/openautomation"
                size= "2"
                [name]="{{Thermostat}}_{{Kanal}}:controlMode |
                  map('auto: sani_heating_automatic, manual: sani_heating_manual,
                       set_auto: sani_heating_automatic, set_manual: sani_heating_manual')"
                color= "gray">
              </ftui-icon>
            </ftui-cell>
            <ftui-cell>
              <ftui-icon
                name="circle"
                color="warning"
                [hidden]="{{Thermostat}} | map('CMDs_done : true, .* : false')"
                [color]="{{thermostat}} | map('CMDs_done: success, CMDs_processing: warning, CMDs_pending: warning')"
                size="0.5">
              </ftui-icon>
            </ftui-cell>
            <ftui-cell>
              <ftui-icon
                  type= "svg",
                  path="../images/myicons"
                  size= "2",
                  [name]="{{Thermostat}}:motorErr | map('ok: cog, error: cog')"
                  [color]="{{Thermostat}}:motorErr | map('ok : gray, error: error')">
                </ftui-icon>           
            </ftui-cell>           
          </ftui-column>
          <ftui-column align-items="top" margin="0">
            <ftui-cell>
              <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="135"
                min="10"
                max="30"
                step="0.5"
                has-zoom="true"
                >
              </ftui-thermostat>
            </ftui-cell>
            <ftui-cell padding="0">
              <ftui-label
                [hidden]="{{Thermostat}} | map('CMDs_done : true, .* : false')"
                [text]="{{Thermostat}}">
              </ftui-label>
            </ftui-cell>
          </ftui-column>
          <ftui-column align-items="right" padding="1">
            <ftui-cell>
              <ftui-icon
                type= "svg"
                path="../images/openautomation"
                size= "2"
                [name]="{{Sensor}}:state | map('closed: fts_window_1w, open: fts_window_1w_open')"
                [color]="{{Sensor}}:state | map('open: yellow, closed: gray')">
              </ftui-icon>
            </ftui-cell>
            <ftui-cell>
            </ftui-cell>
            <ftui-cell>
              <ftui-icon
                type= "svg",
                path="../images/fhemSVG",
                color="gray"
                size= "2",
                name="hm-cc-rt-dn">
              </ftui-icon>
              <ftui-badge text="&nbsp;" color="transparent">
                  <ftui-icon
                    type= "svg"
                    path="../images/openautomation"
                    size= "0.5"
                    [name]="{{Thermostat}}:R-modusBtnLock | map('on: secur_locked, off: unlock, set_on: secur_locked, set_off: unlock')"
                    color="gray">
                  </ftui-icon>
              </ftui-badge>
            </ftui-cell>
          </ftui-column>
        </ftui-row>


Viel Spaß damit, über Rückmeldung/Verbesserungsvorschläge würde ich mich freuen.

MDietrich
FB 6591 Cable / Raspberry 3b+ (Bookworm) / 4xECHO DOT 4/ Homematic Thermostate, Fenster- und Fenster-Sensoren / Philips HUE / CUL-HM /  Zigbee Schalter und Lampen / Shelly 1

mr_petz

#58
Ich habe jetzt den Pointer Bereich reduziert. Kleiner würde ich es nicht machen. Beim knob ist der eigentlich auch so groß.
Ich habe mal ein Bild angehangen zur Veranschaulichung. Ein Umbau der PointerEvents auf nur den Zeiger ist leider sehr komplex und würde einen großen Umbau bedeuten.
Des Weiteren habe ich für die user.css noch die Top-Positionen von Batterie,Valve und Luftfeuchte aufgenommen.
Ist erstmal im git von mir...

ftui-thermostat{
  --thermostat-battery-top: standard=> 60%;
  --thermostat-battery-icon-top: standard=> 63%;
  --thermostat-valve-top: standard=> 77%;
  --thermostat-valve-icon-top: standard=> 81%;
  --thermostat-humidity-top: standard=> 95%;
  --thermostat-humidity-icon-top: standard=> 98%;
}


LG mr_petz

Edit: Wenn man jetzt beide Bilder so betrachtet sind die eine optische Täuschung. Witzig ;D

Edit2: Ich habe auch das setzen vom icon geändert. wenn def '' (Leer) und null, wird kein icon angezeigt!

mr_petz

#59
@MDietrich

Hi, hast du die neue Version schon gestestet?
Habe da für dich paar Anpassungen drin.
Noch ein Hinweis zum Template:
In deiner Definition vom thermostat kannst du step="0.5" weglassen weil es Standard ist.
Auchbei  has-zoom="true" brauchst du nur has-zoom zu definieren.
Das sollen aber nur Hinweise sein :)
LG mr_petz

Edit: Hinweis für alle die auch jedes ftui-thermostat einzeln stylen wollen und nicht wissen wie, dann gibt er einfach eine eigene id für jedes mit. Bsp.:

<ftui-thermostat wz-id="1" usw...


und in der user.css dann so:

[wz-id="1"]{
  --thermostat-value-color:var(--danger-color);/*oder Farbe*/
  --thermostat-temp-color:var(--danger-color);/*oder Farbe*/
}

Das ist nur ein Beispiel!