[FTUI3] Entwicklung Thermometer/Thermostat

[mr_petz]

@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 ...

Genau.
Nur @mr-petz stimmt hier nicht. 
Und wie gesagt den step="0.5" musst du nicht angeben, da er Standard ist.

LG mr_petz

[OdfFhem]

Nur @mr-petz stimmt hier nicht. 

... bzgl. FHEM falsch ... bzgl. GitHub richtig ... ... dank FTUI3 bin ich eher ein Freund von "Kebab Case"

https://github.com/mr-petz/ftui/blob/thermostat/www/ftui/examples/thermostat.html

LG mr_petz

[mr_petz]

Ja GitHub wollte mein Underscore nicht 

[MDietrich]

Moin,
"_" oder "-" - the problem was in front of my computer!

Funktioniert jetzt alles, vielen Danke für die Unterstützung!

LG
MDietrich

[MDietrich]

Anbei noch ein Bild, wie es jetzt bei mir aussieht.
"Lock" schalte ich für alle Thermostate auf einmal. Status unlock setze ich nach 90 Sekunden wieder automatisch auf lock.

LG MDietrich

[curt]

tofixed="2"

Das funktioniert perfekt, danke.

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


Das kriege ich leider nicht hin, da mache ich was falsch, das folgende funktioniert nicht:

Code Auswählen Erweitern


       <ftui-thermostat
               [value]="Temperatur_Bad_unten:temperature"
               size="45" readonly no-min-max has-zoom is-thermometer tofixed="1"
               style="--text-color:my_yellow; --thermostat-temp-size:36px; --thermostat-value-size:36px;" class="size-2"
               >


Du willst einen kompletten Farbbalken. Richtig?

Exakt.
(Ggf außen wahlweise mit ganz kleinen Ticks.)

Mal sehen ob ich da was hinbekomme. Bin ja nicht so fit im css....

Das hatte ja (aber in fhem selbst) jemand schon hinbekommen, Damian oder so. Siehe mein Beitrag #2043 mit Screenshot in https://forum.fhem.de/index.php/topic,115259.2040.html
Ich hatte noch keine Zeit zu suchen, der Code muss ja irgendwo sein - und der Thread ja auch. Im Idealfall kann man da mopsen oder den Autoren zur Mitarbeit überreden.

P.S. @mr_petz
Es ist Moderator @Damian , das Ganze ist ein DOIF-Projekt, siehe https://forum.fhem.de/index.php/topic,106059.0.html
Ein wunderschönes Beispiel eines Farbverlaufbalkens ist in diesem Thread unter #78 zu sehen.
Vielleicht bin ich zu naiv: Ggf. kann man dort sehen, wie er das mit bzw. ohne CSS macht - und das hier adaptieren.

Es geht NICHT darum, das komplette Projekt zu übernehmen, es geht darum, das Konzept des solid-Farbverlaufs für Balken und Kreissegmente zu übernehmen bzw. sich von @Damian erklären zu lassen. (Leider kann ich sowas nicht selbst.)

[mr_petz]

..
Das kriege ich leider nicht hin, da mache ich was falsch, das folgende funktioniert nicht:

Code Auswählen Erweitern


       <ftui-thermostat
               [value]="Temperatur_Bad_unten:temperature"
               size="45" readonly no-min-max has-zoom is-thermometer tofixed="1"
               style="--text-color:my_yellow; --thermostat-temp-size:36px; --thermostat-value-size:36px;" class="size-2"
               >


Exakt.
(Ggf außen wahlweise mit ganz kleinen Ticks.)
...

Hi curt. Ich habe da was für dich. 
Ich habe grundlegend am css und js geändert um optisch besser die verschiedene Größen darzustellen.
Also ziehe die neue Version vom GitHub (css und js)!
Zu deinem Anliegen. So wie ich es jetzt dir zeige, geht es bei mir:

Code Auswählen Erweitern


<ftui-thermostat style="--thermostat-value-size:16px; --thermostat-tick-color:var(--gray);" class="size-1"
  [value]="Temperatur_Bad_unten:temperature"
  tick="180"
  no-wide-ticks
  size="45"
  no-min-max
  is-thermometer
  tofixed="2">
</ftui-thermostat>

Sieht dann aus wie im Anhang. Bei gesetzten is-thermometer brauchst du kein readonly, ist automatisch.
Außerdem funktioniert kein has-zoom bei is-thermometer, da es ja readonly ist.
Zum vergrößern könntest du hier ein popup öffnen lassen mit einem größeren Thermostat.
Da fügst du einfach Bsp.: popup-target="Popup1" hinzu.
Die vielen ticks bringen deine optisch gewünschte Ansicht. 
Hinzugekommen ist noch no-wide-ticks (es werden keine dicken Ticks gesetzt) damit das einheitlicher aussieht.
Teste es bitte und sag ob du so zufrieden bist.

LG mr_petz

[curt]

Das wird ja richtig toll! Danke!
(Und danke für die Erläuterungen.)

Ich habe noch Fragen:
Diese drei angebbaren Werte (lowcolor usw.), da kann ich offenbar andere Farben angeben. Aber es geht nur mit drei alphanumerischen Angaben? Sprich: Sowas wie "my_signalred" oder "#A00000" geht nicht?

Gleiches Thema (nur lowcolor gesetzt) - ich arbeite mit min="0" max="40": Normierst Du da korrekt auf min/max oder versehentlich auf die Defaultwerte davon? (Oder habe ich das alles völlig falsch verstanden?)

Und reine Neugierde, ich brauche es momentan nicht: Bei style geht --textcolor:my_yellow nicht?

[mr_petz]

...
Ich habe noch Fragen:
Diese drei angebbaren Werte (lowcolor usw.), da kann ich offenbar andere Farben angeben. Aber es geht nur mit drei alphanumerischen Angaben? Sprich: Sowas wie "my_signalred" oder "#A00000" geht nicht?

Ja geht zur Zeit nur mit RGB Code.
Hier
https://www.w3schools.com/colors/colors_picker.asp?color=00bfff
kannst du die RGB Codes und die dazugehörigen Hex und HSL Codes bestimmen/ablesen.

Gleiches Thema (nur lowcolor gesetzt) - ich arbeite mit min="0" max="40": Normierst Du da korrekt auf min/max oder versehentlich auf die Defaultwerte davon? (Oder habe ich das alles völlig falsch verstanden?)

min max geht standardmäßig von 15 bis 35. Daraus wird dann das Gradient gesetzt. zum verschieben der Farben gibt es noch movegradient="Eine Zahl" (Standard = 7).
Wenn du andere Start/Endwerte haben willst gibst du es einfach mit min="0" max="40" an.

Und reine Neugierde, ich brauche es momentan nicht: Bei style geht --textcolor:my_yellow nicht?

Hier geht entweder

Code Auswählen Erweitern

--text-color:my_yellow
oder für Ist

Code Auswählen Erweitern

--thermostat-value-color:my_yellow
oder für text

Code Auswählen Erweitern

--thermostat-text-color:my_yellow

Ich habe gerade bemerkt, dass das Thermostat nicht mehr mittig in der Höhe sitzt. Das behebe ich noch.

LG mr_petz

[curt]

Ja geht zur Zeit nur mit RGB Code.

Kein Problem.

min max geht standardmäßig von 15 bis 35. Daraus wird dann das Gradient gesetzt.

Ich nahm 10-40 und (nur lowcolor gesetzt!) den ungültigen Farbwert #A00000 - mach das bitte testweise auch mal:
Da hatte ich ohne genauer testen zu können den Eindruck, dass Du versehentlich nicht die von mir gesetzten Begrenzer, sondern die Defaultbegrenzer nimmst - reine Vermutung meinerseits. Schau es Dir mal selbst an.

zum verschieben der Farben gibt es noch movegradient="Eine Zahl" (Standard = 7).

Hatte ich gelesen, aber noch nicht bespielt.

Ich habe gerade bemerkt, dass das Thermostat nicht mehr mittig in der Höhe sitzt. Das behebe ich noch.

Immer mit der Ruhe.

[mr_petz]

So. Ich habe die Position gefixt (denke ich).
Des Weiteren habe ich jetzt Hex Farben hinzugefügt und es gibt ein neues Attribute namens fadegradient um die einzelnen Farben zu strechen oder enger zu machen.
Bsp.:

Code Auswählen Erweitern


lowcolor="#4477ff"
mediumcolor="#7744ff"
highcolor="#ff4477"
fadegradient="10"

Testet es einfach mal

LG mr_petz

[mr_petz]

Hi@all.
Ich experimentiere gerade ein wenig mit gradient am arc des knob herum.
Das ist ja alles in svg erstellt. Den Arc würde ich gern ins thermostat übernehmen.
Ich habe es auch schon hinbekommen Gradient darzustellen im svg und sogar auch mit canvas. Bei canvas sieht alles aber nicht so glatt aus.
Jetzt kommt meine Bitte/Frage. Wer kann gut mit svg umgehen und einen guten gradient für den arc erstellen?
Ich hänge mal ein Bild an, wie ich es derzeit habe (Habe hier den Knob genommen!).
Gradient war ja auch ein Wunsch von mir im Knob.
Mir geht es hier aber nicht um den Knob, sondern um den arc vom knob!

LG mr_petz

Edit: Habe es jetzt gut hinbekommen. Bild angehangen...
Weiss nicht ob setstate interresse hat das einzubauen?

[setstate]

Und wie siehts beim 10% aus? Wenn man einen linearGradient auf Stroke legt, sieht es bei 100% gut aus, aber klein sind auch alle Farben vorhanden.

Bei SVG müsste man den ARC in viele kleine Segmente zerlegen und jedem einzelnen eine berechnete Farbe geben. Aber ob dann noch die Performance gut ist, wenn man massenweise <path Elemente hat ...

[mr_petz]

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

[curt]

Weiss nicht ob setstate interresse hat das einzubauen?

Vielleicht noch ein wenig früh ... aber erstmal sehr herzlichen Dank! Natürlich würde ich es begrüßen, wenn es dann von setstate eingebaut werden könnte.

Ich habe damit rumgespielt und da es mir gefiel in meine im Werden befindliche Ablösung von FTUI2 eingebaut. Der erste Screenshot zeigt den taktischen Bildschirm, natürlich noch unfertig, siehe Markierung. Und es werden noch weitere Kacheln gefüllt werden, da wird es nochmals eine Farbanpassung geben müssen: Ein Tuschkasten soll es nicht werden.

Der zweite Screenshot ist tatsächlich fast fertig, da wird mir der Zustand der Türen/Fenster sowie die Temperaturen gezeigt. Dabei sind die Temperaturen nicht die des Thermostats; ich habe in jedem Raum zusätzlich ein Thermometer. (Künftig wird ein Klick auf ein Element jeweils eine weitere Unterseite zeigen, dort dann mit Diagramm sowie tatsächlich Thermostat. Und dort wird dann ein Popup sein - zur Steuerung des Thermostats.)

Folgendes fällt auf: Mit Vivaldi (erste beiden Screenshots) sieht das alles ziemlich gut aus. Bei Firefox (dritter Screenshot) ist das erkennbar anders: Da werden deutliche Artefakte erzeugt.

Was man auch wissen muss: Bei der Methode wirken nicht alle Farbübergänge, beispielsweise wirkt blau->gelb überhaupt nicht gut. Man kann nicht alles haben - und ich bin zufrieden: Das reicht mir. 

@mr_petz
Wo Du grad so schön dabei bist:
Bei der Putzfrau im ersten Sceenshot habe ich den Slider, Meter geht ja leider (noch?) nicht senkrecht. Wie kann ich Dich denn dazu überreden, diese schönen Farbverläufe auch bei Slider als Option einzubauen?