[FTUI3] Entwicklung Thermometer/Thermostat

[OdfFhem]

@curt

Meter und senkrecht:

Code Auswählen Erweitern


<ftui-meter [value]="ftuitest" min="-10" max="30" height="6em"
                    color="ok-warning-alert"
                    is-vertical has-scale has-color-scale></ftui-meter>


[curt]

Ja, ich hätte den Hauptthread zuerst lesen müssen ... da steht, dass das jetzt geht.
Okok, also müssen wir @mr_petz belatschern, dass er den Farbverlauf auch noch bei Meter einbaut ... 

[LuGu]

Ja, ich hätte den Hauptthread zuerst lesen müssen ... da steht, dass das jetzt geht.
Okok, also müssen wir @mr_petz belatschern, dass er den Farbverlauf auch noch bei Meter einbaut ... 

Auch den Farbverlauf gibt es bei meter schon.

Code Auswählen Erweitern


<ftui-meter [value]="ftuitest" min="-10" max="30" height="6em"
                    color="ok-warning-alert"
                    is-vertical has-scale has-color-scale>
</ftui-meter>


https://knowthelist.github.io/ftui/www/ftui/examples/meter.html

Gruß LuGu

[setstate]

Hi setstate. 
Habe es so gelöst und es geht mit verschiedenen Größen in der Demo:

Code Auswählen Erweitern


    <svg class="svg" height="${this.height}" width="${this.width}" focusable="false">
      <defs>
        <linearGradient id="Gradient1" gradientTransform="rotate(100)">
          <stop offset="0%" stop-color="#ff00dd"/>
          <stop offset="20%" stop-color="#0000ff"/>
        </linearGradient>
         <linearGradient id="Gradient2" gradientTransform="rotate(80)">
          <stop offset="10%" stop-color="#ff00dd"/>
          <stop offset="20%" stop-color="#ff0033"/>
        </linearGradient>
        <pattern id="Pattern" x="0" y="0" width="160" height="160" patternUnits="userSpaceOnUse">
          <g transform="rotate(0, 0, 0)">
            <rect shape-rendering="crispEdges" x="0" y="0" width="160" height="640" fill="url(#Gradient1)"/>
            <rect shape-rendering="crispEdges"  x="80" y="0" width="160" height="640" fill="url(#Gradient2)"/>
          </g>
        </pattern>
      </defs>
      <g class="scale" stroke="gray"></g>
      <path class="outline" d="" fill="none" stroke-width="${this.strokeWidth}" />
      <path class="fill" d="" fill="none" style="stroke:url(#Pattern)" stroke-width="${this.strokeWidth}" />
      <polygon class="needle" />
      <circle class="handle" r="9" fill="none" />
      <circle class="desired" r="5" fill="none" />
    </svg>


Edit: also nur die Standard path..
Größen des Gradient sind hier noch fix.
Ist ja alles nur ein Vorschlag. Man kann durch die stop-offsets und dazugehörigen rotate ganz gut die Farben verteilen...
Habe es im Thermostat auch schon drin zum testen...
Ich kann ja noch Bescheid geben ob es mit verschiedenen Größen gut anpassbar ist oder nicht...

LG mr_petz

ok, danke. Ich habe es erstmal (so ähnlich) übernommen. ich habe es nur Theme-fähig gemacht. Ich möchte vermeiden, dass RGB-Werte direkt bei den Komponenten angegeben werden.
Meiner Meinung nach hat das folgende Nachteile:
- Bei Tag/Nacht Umschaltung per Theme, schalten diese Elemente nicht mit.
- bei einer Farbanpassung, muss man mit Such und Find alt mit neu in allen Files ersetzen, anstatt nur an einer Stelle im Themefile den Wert anzupassen.
- Viele setzen aus Bequemlichkeit oder aus Unwissenheit über die Bedeutung der Farben bei der Usability einfach zu viel unterschiedliche, zu knallige und einfach unschöne Farben: #ff0000, #00ff00

[mr_petz]

@setstate

Schön dass du es doch übernimmst.
Habe es gerade auf deiner Online-demo/examples getestet und da werden jetzt gar keine Farben mehr angezeigt!?
Habe es auch nochmal mit meiner Version mit 360° und Standardgröße und stroke-width="65" im example getestet und sieht so aus wie im Anhang.
LG mr_petz

Edit: Die Hex-Farben von mir waren nur zum testen gedacht. Bin gespannt wie deine Version läuft.

[mr_petz]

@setstate

Deine Version sieht auch gut aus und man kann mit color paar Vorgaben setzen.
Mir ist nur aufgefallen, dass du in der knob.css bei min,mix und max immer --knob-fill-color stehen hast. Sollte da nicht z.Bsp.: --knob-min-color etc stehen? Da ja sonst immer fill für alles gesetzt wird.
Das fill hattest du unter .fill in der css zum setzen der Gesamtfarbe drin und jetzt nicht mehr. Kann man das nicht voneinander trennen um einzelne Farben zu setzen?
Ich werde es dann auch so umsetzen. Ich kann viel lernen durch dich . gerade beim css. Danke!

LG mr_petz

[setstate]

Stimmt, da fehlte was. Ist jetzt ergänzt. Danke für den Hinweis

[curt]

- Viele setzen aus Bequemlichkeit oder aus Unwissenheit über die Bedeutung der Farben bei der Usability einfach zu viel unterschiedliche,

Ich kann dem Gedanken insoweit folgen, als das Du das grundsätzlich vorgibst - und wer das ändern will, muss user.css bemühen. Soweit ok.

Mit usability kenne ich mich auch ein wenig aus, daher muss nun Widerspruch erfolgen:

zu knallige und

Was als knallig oder als matt wahrgenommen wird, hängt von sehr vielen Faktoren ab, ich nenne einige: Typ des Anzeigegeräts, Situation des Umgebungslichts, Sehbehinderungen wie Farbblindheiten. (Über Rot-Grün-Schwäche wird wohl jeder gehört haben. Aber ich zum Beispiel habe eine Blau-Grau-Schwäche.)

einfach unschöne Farben:

Also das liegt nun im Auge des Betrachters.

Auch den Farbverlauf gibt es bei meter schon.

Code Auswählen Erweitern


<ftui-meter [value]="ftuitest" min="-10" max="30" height="6em"
                    color="ok-warning-alert"
                    is-vertical has-scale has-color-scale>
</ftui-meter>


Ähmmm, nein.
Gemeint ist: Ich lege die untere Farbe, die mittlere Farbe sowie die obere Farbe fest. Und zwischen diesen Farben gibt es einen Farbverlauf, der automatisch errechnet wird.

[LuGu]

Ähmmm, nein.
Gemeint ist: Ich lege die untere Farbe, die mittlere Farbe sowie die obere Farbe fest. Und zwischen diesen Farben gibt es einen Farbverlauf, der automatisch errechnet wird.

Aber genau das wir doch hier gemacht, wenn du eine Gradient Color mir drei Farben benutzt (z.B. "ok-warning-alert"). Oder du baust dir deinen eigene Gradient Color.

Code Auswählen Erweitern


[color="ok-warning-alert"][is-vertical] {
  --color-base: linear-gradient(var(--danger-color) 20%, var(--warning-color) 40%, var(--success-color) 60%);
}

Vielleicht habe ich ja auch dein Ansinnen nicht/falsch verstanden.
Gruß LuGu

[curt]

Vielleicht habe ich ja auch dein Ansinnen nicht/falsch verstanden.

Im Zweifel habe ich es nicht verstanden. Tasten wir uns mal heran, schau Dir bitte mal das Bild an (ignoriere bitte die Artefakte).

Das entsteht aus

Code Auswählen Erweitern


      <ftui-thermostat
               [value]="my_dummy:state"
               min="-10" max="40" lowcolor="#00FF00" mediumcolor="#FFFF00" higcolor="#8B0000" fadegradient="80"
               size="45" no-min-max is-thermometer tofixed="1" tick="180" no-wide-ticks
               style="--text-color:my_yellow; --thermostat-tick-color:var(--gray); --thermostat-value-size:16px;" class="size-1 bold"
               >


Falls ich das (mit genau diesen drei Farben) bei meter machen kann - zeigst Du mir bitte, wie das geht?

[mr_petz]

@setstate

Ich hätte da mal eine Fachfrage/Bitte.
Ich versuche gerade die Farben von min,mix,max direkt auszulesen um sie auch für meinen Zeiger zu setzen und anderweitig zu setzen.
Hier muss ich aber den Umweg über mein rgbGradient() gehen, da ich den Zeiger und die Ticks nicht als svg setzen lasse. Ich wollte die gesetzten oder die benutzerdefinierten Farben auslesen mit:

Code Auswählen Erweitern


window.getComputedStyle(this.minColor).stopColor

es geht natürlich auch mit:

Code Auswählen Erweitern


window.getComputedStyle(this.minColor).getPropertyValue('stop-color')

this.minColor ist hier natürlich ein shadowRoot.querySelector auf die class="min" vom <stop> des <svg>.

Bei beiden Versionen des Auslesens, wird mir nach dem ersten Laden mit Cacheleerung der Seite nur rgb(0,0,0) ausgegeben.
Bei einem refresh ohne Cacheleerung wird mir der richtige rgb()-Wert angezeigt.
Zum nachvollziehen habe ich es auch mit dem Knob getestet. Dort ist das Verhalten genauso. Es wird immer erst (mit Cacheleerung) der rgb(0,0,0) übergeben.
Getestet unter Chrome und FF.
Ich staune nur dass im svg immer die richtige Farbe da ist.
Egal ob beim Knob oder bei mir im Thermostat.
Ist das einlesen der CSS hier der Übeltäter? Ich habe meine CSS wie die deine definiert.

Code Auswählen Erweitern


.min {
  stop-color: var(--color-min, var(--thermostat-min-color, rgb(0,0,255)));
}
.mix {
  stop-color: var(--color-mix, var(--thermostat-mix-color, rgb(255,0,255)));
}
.max {
  stop-color: var(--color-max, var(--thermostat-max-color, rgb(255,0,0)));
}

Wie kann/könnte ich die Farben auslesen, dass sie sofort verfügbar sind?
Da könnte ich dann auch die drei Farbattribute wegfallen lassen.
Ich hoffe du oder jemand anders kann mich da Unterstützen oder einen Tip geben. Danke.

LG mr_petz

[setstate]

getComputedStyle erwartet ein DOM-Element als Parameter, von dem eine Style-Eigenschaft ausgelesen werden soll.

Ist this.minColor eine Element? Ist das nicht nur eine Property eines Elementes?

Schau dir mal die Wrapperfunktion getStylePropertyValue, die im charts.component.js genutzt wird, an. Dort funktioniert das Auslesen, welche Styles auf das Element gelten, schon im constructor.

[LuGu]

Code Auswählen Erweitern


      <ftui-thermostat
               [value]="my_dummy:state"
               min="-10" max="40" lowcolor="#00FF00" mediumcolor="#FFFF00" higcolor="#8B0000" fadegradient="80"
               size="45" no-min-max is-thermometer tofixed="1" tick="180" no-wide-ticks
               style="--text-color:my_yellow; --thermostat-tick-color:var(--gray); --thermostat-value-size:16px;" class="size-1 bold"
               >


Falls ich das (mit genau diesen drei Farben) bei meter machen kann - zeigst Du mir bitte, wie das geht?

Das solltest du hinbekommen. Aber die Farben ...

In eine /themes/myftui-theme.css:

Code Auswählen Erweitern


  --lowcolor: #00FF00;
  --mediumcolor: #FFFF00;
  --highcolor: #8B0000;


In eine user.css:

Code Auswählen Erweitern


[color="low-medium-high"] {
  --color-base: linear-gradient(90deg, var(--highcolor) 30%, var(--mediumcolor) 70%, var(--lowcolor) 90%);
  --color-min: var(--white);
  --color-max: var(--white);
  --color-contrast: var(--black);
}

[color="low-medium-high"][is-vertical] {
  --color-base: linear-gradient(var(--highcolor) 20%, var(--mediumcolor) 50%, var(--lowcolor) 90%);
}


und dann noch der ftui-meter

Code Auswählen Erweitern


<ftui-meter [value]="ftuitest" min="0" max="100" width="2em" height="10em"
                    color="low-medium-high"
                    is-vertical has-scale has-color-scale>
</ftui-meter>

Das Ergebnis mit genau diesen drei Farben siehst du im Anhang.

Geht vielleicht auch einfacher, aber auf die Schnelle .. es funktioniert.

Gruß LuGu

[omnior]

erstmal vielen Dank für die viele Arbeit die in dem Widget schon drinsteckt.
Ich habe mehrere ZWave Eurotronics Spirit Thermostate und die haben ja ein paar Besonderheiten, zum Beispiel dass sie zwei Sollwerte haben (einen für den normalen Heizbetrieb und einen für den sog. Absenkmodus). Einige Readings gibt es leider gar nicht automatisch und einige sind etwas unpraktisch formatiert.
Aber ich habe heute mal angefangen zu testen, und werde noch weiter dokumentieren was mir auffällt.

Für den Anfang habe ich noch das Problem dass die IST Temperatur zwar über ein Reading kommt aber hinter dem Wert noch ein C mitführt, also 20.5 C statt 20.5 und somit wird der Wert als NaN angezeigt.

Wie bekomme ich das denn hinter

Code Auswählen Erweitern

[temp]="device:temperature" am einfachsten weg?

[OdfFhem]

@omnior

Durch die Verwendung der beliebten Pipes kann man die angelieferten Werte der Readings für die FTUI3-Verwendung beeinflussen ...

2 Möglichkeiten wären:

Code Auswählen Erweitern


  [temp]="device:temperature | part(1)"


Code Auswählen Erweitern


  [temp]="device:temperature | toNumber()"