Hauptmenü

Raum-Klimamesser

Begonnen von dt2510, 10 Oktober 2019, 18:12:42

Vorheriges Thema - Nächstes Thema

dt2510

Hat jemand schonmal was in der Art (siehe Foto) umgesetzt ? Kreuzen sich die Zeiger über der schraffierten Fläche, ist das Raumklima ideal.




Gisbert

Hallo dt2510,

interessante Idee, ich hab's nicht umgesetzt. Die Vorausetzung ist die Messung der Temperatur und der rel. Feuchte.
Dann gilt es den funktionalen Zusammenhang zwischen rel. Feuchte und Temperatur entsprechend der schraffierten Fläche zu erfassen und in einem DOIF oder in einem Perlcode wiederzugeben.
Ohne die Lösung zu haben, schätze ich, dass sich der Aufwand in Grenzen halten dürfte.

Viele​ Grüße​ Gisbert​
Aktuelles FHEM | PROXMOX | Fujitsu Futro S740 | Debian 12 | UniFi | Homematic, VCCU, HMUART | ESP8266 | ATtiny85 | Wasser-, Stromzähler | Wlan-Kamera | SIGNALduino, Flamingo Rauchmelder FA21/22RF | RHASSPY

Waldmensch

#2
Ich glaube, er meint eher die grafische Umsetzung in FTUI

Neulich hat doch wer mit Analogen Zeigerinstrumenten hantiert. Das kommt dem am nächsten. Die skalen und Schraffierung kann man ja in einem Hintergrundbild abbilden.


Gesendet von iPhone mit Tapatalk

dkreutz

Das Widget für ein "Analogmessgerät" gibt es hier, vielleicht kann man das ja adaptieren: https://forum.fhem.de/index.php/topic,102315.0.html
Raspberry Pi3B+ (Bullseye) / JeeLink868v3c (LaCrosse), nanoCUL433 (a-culfw V1.24.02), HM-MOD-UART (1.4.1), TEK603, MapleCUL / diverse Sensoren/Sender/Aktoren von Technoline, Intertechno, Shelly, Homematic und MAX!, Froggit Wetterstation, Luftdaten.info / Autor des fhem-skill für Mycroft.ai

dt2510

#4
Erstmal danke für die vielen Antworten. Eine grafische Umsetzung wäre natürlich schön (muss nicht als Analoginstrument sein) aber kein Muss.

Zitat von: Gisbert am 10 Oktober 2019, 19:21:04
Hallo dt2510,

interessante Idee, ich hab's nicht umgesetzt. Die Vorausetzung ist die Messung der Temperatur und der rel. Feuchte.
Dann gilt es den funktionalen Zusammenhang zwischen rel. Feuchte und Temperatur entsprechend der schraffierten Fläche zu erfassen und in einem DOIF oder in einem Perlcode wiederzugeben.
Ohne die Lösung zu haben, schätze ich, dass sich der Aufwand in Grenzen halten dürfte.

Viele​ Grüße​ Gisbert​

Der Zusammenhang ist recht einfach:

optimale Temperatur 17-23°C
optimale Feuchtigkeit 40-60~70% (je nach Messgerät)

Ansonsten eben zu kalt/warm/feucht/trocken.

Vorstellbar wäre die Anzeige von Temperatur und Feuchtigkeit in unterschiedlichen Farben

- hellblau: zu kalt
- rot: zu warm
- orange: zu trocken (Assoziation: Wüste ;) )
- blau: zu nass
- grün: optimal

Hintergrund der Frage ist die Darstellung auf meiner neuen FTUI Oberfläche. Ich plane jeden Raum mit einem Temperatur/Feuchtigkeitsmesser auszustatten und möchte die Messwerte daher auf der FTUI-Seite jedes Raumes an der gleichen Stelle - leicht erkennbar - darstellen.

Ich hab' mehrere Bilder angehängt: Startseite (dashboard.png), ein Beispielraum (noch leer - office.png) und diverse Umsetzungen in den restlichen Bildern. Vorschläge dürfen gerne im Beispielraum skizziert werden.

p.s.: die weißen Ränder im Screenshot kommen vom unsachgemäßen Zuschnitt und sind nicht Bestandteil des Layouts ;)

Eisix

Hallo,

hier ein Beispiel:


<!DOCTYPE html>
<html>
<head>
        <title>FHEM</title>
        <meta charset="UTF-8">
</head>
<body>
<header>BAD_OG</header>
<table border="0px" height="80%" width="100%">
<tr>
        <td>
        <div data-type="symbol"
                data-device="zBad_OG"
                data-get="state"
                data-states='["present","likely","unlikely","absent"]'
                data-icons='["fa-male","fa-male","fa-male half-transparent","fa-male transparent"]'
                data-colors='["#21a000","#21a000","#21a000","#21a000"]'
                class="top tiny compressed left"
        ></div>
<!--
        <div data-type="symbol"
                data-device="Heizung_BAD_OG"
                data-get="state"
                data-get-on="open"
data-get-off="closed"
                data-on-color="red"
                data-off-color="#21a000"
                data-hide-on="!open"
                data-hide-off="open"
data-hide="state"
                data-icon="oa-fts_window_1w_tilt"
                class="top tiny compressed left"
        ></div>
-->

        <div data-type="popup" data-width="450px" data-height="310px" class="">
        <div data-type="label"
                data-device="Sensor_BAD_OG"
                data-get="humidity"
                data-limits='["10","50","70"]'
                data-colors='["#bb6242","#21a000","#6699FF"]'
                data-unit=" %"
                data-part="1"
data-hide="humidity"
                data-hide-on=""
                class="top right"
        ></div>
                <div class="dialog">
                        <header>Luftfeuchtigkeit</header>
                        <div data-type="simplechart"
                                data-device="Sensor_BAD_OG"
                                data-logdevice="logdb"
                                data-columnspec="Sensor_BAD_OG:humidity:::"
                                data-minvalue="10"
                                data-maxvalue="100"
                                data-yticks="10"
                                data-height="250">
                        </div>
              </div>
      </div>
        </td>
</tr>
<tr>
        <td>
<div data-type="label"
data-device="Sensor_BAD_OG"
data-get="temperature"
data-limits='["20","22","25"]'
data-colors='["#6699FF","#21a000","#bb6242"]'
data-unit=" °C"
data-part="1"
class="tall bold inline"
></div>
        </td>
</tr>
<tr>
        <td>
        <div data-type="popup" data-width="450px" data-height="380px" class="inline">
<div data-type="symbol" data-icon="oa-edit_settings" class="inline"></div>
                <div class="dialog" style="background-color:#112026">
                        <header class="large">Handbetrieb</header>
<center>
<br>
                        <div data-type="spinner"
                                data-device="Heizung.Status_BAD_OG"
                                data-get="TempMan"
                                data-set="TempMan"
                                data-icon-left-color="blue"
                                data-icon-right-color="red"
                                data-step="0.5"
                                data-min="10"
                                data-max="30"
                                data-unit="°"
                                class="valueonly"
                        ></div>
<br>
</center>
                        <header class="large">Heizungs-Automatik</header>
<br>
<div class="">
<div class="left">
                <div data-type="spinner"
                        data-device="Heizung.Status_BAD_OG"
                        data-get="TempTag"
                        data-set="TempTag"
                        data-icon-left-color="blue"
                        data-icon-right-color="red"
                        data-step="0.5"
                        data-min="10"
                        data-max="30"
                        data-unit="°"
                        class="valueonly"
                ></div>
<br>
    <div data-type="label" class="inline bigger" >Tag:</div>
    <div data-type="datetimepicker"
data-device="Heizung.Status_BAD_OG"
data-get="Tag"
data-set="Tag"
data-step="5"
          data-datepicker="false"
data-format="H:i"
          class="inline bigger orange"
></div>
</div>
                        <div class="right">
                                <div data-type="spinner"
data-device="Heizung.Status_BAD_OG"
data-get="TempNacht"
data-set="TempNacht"
                                        data-icon-left-color="blue"
                                        data-icon-right-color="red"
                                        data-step="0.5"
                                        data-min="10"
                                        data-max="30"
                                        data-unit="°"
                                        class="valueonly"
                                ></div>
                                <br>
                                        <div data-type="label" class="inline bigger" >Nacht:</div>
                                        <div data-type="datetimepicker"
data-device="Heizung.Status_BAD_OG"
data-get="Nacht"
data-set="Nacht"
                                                data-step="5"
                                                data-datepicker="false"
                                                data-format="H:i"
                                                class="inline bigger orange"
                                        ></div>
                                </div>
                      </div>
<div class="">
<div class="inline">
<br>
<br>
        <div data-type="checkbox"
                                              data-device="Heizung.Status_BAD_OG"
                                                data-get="Party"
                                                data-set="Party"
class=""
        ></div>
      <div data-type="label" class="" >Party</div>
                                </div>
                                <div class="inline">
                                        <div data-type="checkbox"
                                                data-device="Heizung.Status_BAD_OG"
                                                data-get="Sommer"
                                                data-set="Sommer"
                                                class=""
                                        ></div>
                                        <div data-type="label" class="" >Sommer</div>
                                </div>

<div class="inline">
        <div data-type="checkbox"
                                                data-device="Heizung.Status_BAD_OG"
                                                data-get="abwesend"
                                                data-set="abwesend"
class=""
        ></div>
      <div data-type="label" class="" >abwesend</div>
                                </div>
                                <div class="inline">
        <div data-type="checkbox"
                                                data-device="Heizung.Status_BAD_OG"
                                                data-get="Urlaub"
                                                data-set="Urlaub"
class=""
        ></div>
      <div data-type="label" class="" >Urlaub</div>
                                </div>
                                <div class="inline">
        <div data-type="checkbox"
                                                data-device="Heizung.Status_BAD_OG"
                                                data-get="Frost"
                                                data-set="Frost"
class=""
        ></div>
      <div data-type="label" class="" >Frost</div>
                        </div>
                                <div class="inline">
                                        <div data-type="checkbox"
                                                data-device="Heizung.Status_BAD_OG"
                                                data-get="Boost"
                                                data-set="Boost"
                                                class=""
                                        ></div>
                                        <div data-type="label" class="" >Boost</div>
                                </div>

                        </div>
</div>
</div>
        <div data-type="popup" data-width="750px" data-height="350px" class="inline">
<div data-type="symbol" data-icon="fa-area-chart" class="inline"></div>
                <div class="dialog">
                        <header>TEMPERATURE - BAD_OG</header>
                        <div data-type="chart"
                                data-logdevice='["logdb","logdb","logdb","logdb"]'
                                data-logfile="HISTORY"
                                data-columnspec='["Sensor_aussen:CleanTemp:::","EinschaltTemp_BAD_OG:state","Sensor_BAD_OG:CleanTemp:::","Heizung_BAD_OG:state:0::$val=($val=~\\x22off\\x22?0:1)"]'
                                data-style='["ftui l3","ftui l4","ftui l0fill","ftui l1fill"]'
                                data-ptype='["lines","steps","lines","steps"]'
                                data-uaxis='["primary","primary","primary","secondary"]'
                                data-legend='["Aussen","Soll-Temp","Ist-Temp","Heizung"]'
                                data-yunit="°C"
                                data-ytext="Temperature"
                                data-minvalue="auto"
                                data-maxvalue="auto"
                                data-minvalue_sec="0"
                                data-maxvalue_sec="1.1"
                                data-height="300"
                                data-width="700"
                                data-daysago_start="3"
                                data-daysago_end="-1"
                                data-crosshair="true"
                                data-cursorgroup="1"
                                data-scrollgroup="1"
                                data-showlegend="false"
                                data-yticks="auto"
                                data-yticks_sec='[[0,"aus"],[1,"an"]]'
                                data-xticks="auto">
                        </div>
</div>
</div>
<div data-type="switch"
data-device="Heizung.Status_BAD_OG"
data-cmd="set"
data-get="Heizung"
data-set="Heizung"
data-states='["manuell","automatic","boost","off"]'
data-set-states='["automatic","boost","off","manuell"]'
data-icons='["oa-sani_heating_manual","oa-sani_heating_automatic","fs-sani_heating_boost","fs-general_aus"]'
data-colors='["#5EDAFF","#21a000","#FF5E5E","grey"]'
data-background-color="Heizung_BAD_OG:stateColor"
class="inline nocache"
></div>
        </td>
</tr>
</table>
</body>
</html>



Ist auch mit Anwesenheit, Fenster auf/zu (ist auskommentiert) und Heizungssteuerung.

Gruß
Eisix

dt2510

#6
Ich beschränke mich wohl auf eine Textanzeige mit Icons. Aktuell habe ich es so umgesetzt:

Aufruf auf der Seite
<div data-type="include" data-url="modules/moduleRoomClimate.inc" data-parameter='{"dataTemperatureDevice":"FGSD002_ID31","dataHumidityDevice":"PHPAT02_ID32"}'></div>

Raumklima Modul
<div class="module">
  <table width="100%" height="50vh" border="0">
    <colgroup><col width="20%"><col width="80%"></colgroup>
    <tr class="dim20">
      <td class="module_icon"><div data-type="include" data-url="symbols/symbol.inc" data-parameter='{"dataIcon":"fs-temperature_humidity","dataColor":"symbol_ok"}'></div></td>
      <td class="paragraph text_right">Raumklima</td>
    </tr>
    <tr>
      <td class="text_center"></div></td>
      <td>
        <table width="100%" height="50vh" border="0">
          <colgroup><col width="75%"><col width="25%"></colgroup>
          <tr style="height:4vh;">
            <td class="text_3 text_center"><div data-type="include" data-url="labels/labelTemperature.inc" data-parameter='{"dataDevice":"dataTemperatureDevice"}'></div></td>
            <td class="module_icon"><div data-type="include" data-url="symbols/symbolTemperature.inc" data-parameter='{"dataDevice":"dataTemperatureDevice"}'></div></td>
          </tr>
          <tr style="height:4vh;">
            <td class="text_3 text_center"><div data-type="include" data-url="labels/labelHumidity.inc" data-parameter='{"dataDevice":"dataHumidityDevice"}'></div></td>
            <td class="module_icon"><div data-type="include" data-url="symbols/symbolHumidity.inc" data-parameter='{"dataDevice":"dataHumidityDevice"}'></div></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>


Temperatur Label
<div data-type="label"
     data-device="dataDevice"
     data-get="temperature"
     data-part="1"
     data-unit="%B0C%0A"
     data-limits="[-999,20,26]"
     data-colors='["temperature_cold","temperature_ok","temperature_hot"]'>
</div>


Temperatur Symbol
<div class="autohide"
     data-type="symbol"
     data-device="dataDevice"
     data-get="temperature"
     data-part="1"
     data-limits="[-999,20,26]"
     data-icons='["fa-arrow-down","","fa-arrow-up"]'
     data-colors='["symbol_ok","symbol_ok","symbol_ok"]'>
</div>


Luftfeuchtigkeit Label
<div data-type="label"
     data-device="dataDevice"
     data-get="humidity"
     data-part="1"
     data-unit="% rH"
     data-limits="[0,40,60]"
     data-colors='["humidity_dry","humidity_ok","humidity_wet"]'>
</div>


Luftfeuchtigkeit Symbol
<div class="autohide"
     data-type="symbol"
     data-device="dataDevice"
     data-get="humidity"
     data-part="1"
     data-limits="[0,40,60]"
     data-icons='["fa-arrow-down","","fa-arrow-up"]'
     data-colors='["symbol_ok","symbol_ok","symbol_ok"]'>
</div>


Farbangaben und Klassen sind in einer eigenen css-Datei definiert.

Sind beide Geräte angegeben wird Temperatur und Luftfeuchtigkeit angezeigt sowie ein Pfeil nach oben/unten, falls der jeweilige Wert vom Optimalwert abweicht.
Fehlt ein Gerät (ich habe nicht überall Temperatur und Luftfeuchtigkeits Sensoren) ist das zugehörige Label leer und das Symbol wird per autohide ausgeblendet.

Folgendes möchte ich gerne noch umsetzen - hab' aber leider noch keine Lösung gefunden:


  • Anzeige von "--°C" bzw. "--%rH" wenn ein Gerät nicht angegeben ist
  • Anzeige eines Smileys (links im Modul)

  • :) wenn beide Werte optimal sind
  • :-\ wenn nur 1 Wert optimal ist
  • :( wenn kein Wert optimal ist

Fehlt ein Gerät soll auch nur :) oder :( angezeigt werden - fehlen beide soll gar kein Smiley angezeigt werden.

Was noch nicht umgesetzt wurde ist die Heizungssteuerung (kommt noch).

dt2510

Problem 1 ist schon gelöst.

Ich habe ein dummy "NoDevice" angelegt und die Readings "temperature" und "humidity" auf "--" gesetzt.

Im Label wird jetzt korrekt "--°C" bzw. "--%rH" in der Standardfarbe angezeigt und die Symbole werden per classchanger versteckt (hier im Beispiel für die Luftfeuchtigkeit)

<div class="container"
     data-type="classchanger"
     data-device="dataDevice"
     data-get="humidity"
     data-get-off="--"
     data-off-class="hide">
  <div data-type="symbol"
       data-device="dataDevice"
       data-get="humidity"
       data-part="1"
       data-limits="[0,40,60]"
       data-icons='["fa-arrow-down","","fa-arrow-up"]'
       data-colors='["symbol_ok","symbol_ok","symbol_ok"]'>
  </div>
</div>


Der Aufruf erfolg dann z.B. so
<div data-type="include" data-url="modules/moduleRoomClimate.inc" data-parameter='{"dataTemperatureDevice":"FGSD002_ID31","dataHumidityDevice":"NoDevice"}'></div>

Fehlen nur noch die Smileys ... ich könnte per 99_myUtils.pm Funktion den Wert 0,1 oder 2 ermitteln - aber wie zeige ich das als Symbol an ?

Ulm32b

Zitat von: dt2510 am 15 Oktober 2019, 16:52:39
Fehlen nur noch die Smileys ... ich könnte per 99_myUtils.pm Funktion den Wert 0,1 oder 2 ermitteln - aber wie zeige ich das als Symbol an ?

Mit dem Symbol-Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Symbol) via data-states und data-icons (wobei ich jetzt nicht genau weiß, ob es die gewünschten Icons über einen der verfügbaren Icon-Sets schon gibt).


dt2510

Zitat von: Ulm32b am 15 Oktober 2019, 17:25:23
Mit dem Symbol-Widget (https://wiki.fhem.de/wiki/FTUI_Widget_Symbol) via data-states und data-icons (wobei ich jetzt nicht genau weiß, ob es die gewünschten Icons über einen der verfügbaren Icon-Sets schon gibt).

Die Icons gibt es, aber wie zeige ich einen Funktions-Rückgabewert an ? Ich hab' hier ja kein Device oder Reading.
Als Workaround müsste ich einen Dummy je Raum für Temperatur und Feuchtigkeit anlegen - oder auch eine Struktur mit allen beteiligten Geräten (Temperatur, Luftfeuchtigkeit, Heizkörperthermostate, Fenster, ...), die könnte ich relativ einfach erweitern ...

Waldmensch

Warum klaust Du Dir nicht einfach ein bisschen HTML von hier? http://esp8266.fancon.cz/esp8266-web-hygrometer-dht11-arduino/esp8266-web-hygrometer-dht11-arduino.html


Gesendet von iPhone mit Tapatalk

dt2510

Zitat von: Waldmensch am 15 Oktober 2019, 18:49:36
Warum klaust Du Dir nicht einfach ein bisschen HTML von hier? http://esp8266.fancon.cz/esp8266-web-hygrometer-dht11-arduino/esp8266-web-hygrometer-dht11-arduino.html


Gesendet von iPhone mit Tapatalk

Mir ging es hauptsächlich darum, auf einen Blick zu sehen, ob das Klima im Idealbereich liegt (schraffierte Fläche über der sich die Zeiger kreuzen). Mit der Smiley-Variante komme ich allerdings genau so gut klar wie mit einem Analoginstrument (zumal sich die Zeiger in deinem Beispiel auch nicht kreuzen).
Trotzdem danke für den Link, wer weiß ob man ihn vielleicht mal gebrauchen kann...

Waldmensch

Na es ging ja eher um ,,gucken" wie es gemacht wird. Da eine zweite Skala, zweiten Zeiger und ein passendes Hintergrundbild sollte ja machbar sein.


Gesendet von iPhone mit Tapatalk

Waldmensch

Ich habe mal das oben verlinkte Beispiel modifiziert, das zumindes schon mal 2 funktionale Zeiger drin sind. Die Zeigerwinkel werdem ganz unten im ersten Wert des jeweiligen rotate gesetzt. Den Code unten komplett in eine Textdatei packen, als SVG abspeichern und im Browser laden

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">

<circle cx="500" cy="500" r="265" fill="WhiteSmoke" stroke="#bfc1c2" stroke-width="16"/>
<circle cx="500" cy="500" r="265" fill-opacity="0" stroke="#d8d8d8" stroke-width="4"/>
<g stroke="black" stroke-width="2" fill="none"></g>

<!--<path fill="none" stroke="#2e8b57" stroke-width="20" d="M413,331 A190,190 35 0 1 657,393" />-->

<defs>
<g id="PO1">
<line stroke-width="2" x1="650" y1="600" x2="650" y2="1000" fill="orangered"/>
<rect x="642" y="555" rx="2" ry="2" width="16" height="64" fill="orangered"/>
<circle cx="650" cy="600" r="2" stroke="brown" stroke-width="4" />
<circle cx="650" cy="600" r="3" fill="grey"/>
</g>

<g id="PO2">
<line stroke-width="2" x1="350" y1="600" x2="350" y2="1000" fill="orangered"/>
<rect x="342" y="555" rx="2" ry="2" width="16" height="64" fill="orangered"/>
<circle cx="350" cy="600" r="2" stroke="brown" stroke-width="4" />
<circle cx="350" cy="600" r="3" fill="grey"/>
</g>

<g>
<line stroke-width="4" id="M1" x1="650" y1="950" x2="650" y2="970"/>
</g>

<g id="Z1">
<use xlink:href="#M1" transform="rotate(0,650,600)"/>
</g>

<g>
<line stroke-width="4" id="M2" x1="350" y1="950" x2="350" y2="970"/>
</g>

<g id="Z2">
<use xlink:href="#M2" transform="rotate(0,350,600)"/>
</g>

</defs>

<g id="T1" stroke="black">
<use xlink:href="#Z1" transform="rotate(92,650,600)"/>
<use xlink:href="#Z1" transform="rotate(96,650,600)"/>
<use xlink:href="#Z1" transform="rotate(100,650,600)"/>
<use xlink:href="#Z1" transform="rotate(104,650,600)"/>
<use xlink:href="#Z1" transform="rotate(108,650,600)"/>
<use xlink:href="#Z1" transform="rotate(112,650,600)"/>
<use xlink:href="#Z1" transform="rotate(116,650,600)"/>
<use xlink:href="#Z1" transform="rotate(120,650,600)"/>
<use xlink:href="#Z1" transform="rotate(124,650,600)"/>
<use xlink:href="#Z1" transform="rotate(128,650,600)"/>
<use xlink:href="#Z1" transform="rotate(132,650,600)"/>
<use xlink:href="#Z1" transform="rotate(136,650,600)"/>
<use xlink:href="#Z1" transform="rotate(140,650,600)"/>
<use xlink:href="#Z1" transform="rotate(144,650,600)"/>
<use xlink:href="#Z1" transform="rotate(148,650,600)"/>
<use xlink:href="#Z1" transform="rotate(152,650,600)"/>
</g>

<g id="T2" stroke="black">
<use xlink:href="#Z2" transform="rotate(208,350,600)"/>
<use xlink:href="#Z2" transform="rotate(212,350,600)"/>
<use xlink:href="#Z2" transform="rotate(216,350,600)"/>
<use xlink:href="#Z2" transform="rotate(220,350,600)"/>
<use xlink:href="#Z2" transform="rotate(224,350,600)"/>
<use xlink:href="#Z2" transform="rotate(228,350,600)"/>
<use xlink:href="#Z2" transform="rotate(232,350,600)"/>
<use xlink:href="#Z2" transform="rotate(236,350,600)"/>
<use xlink:href="#Z2" transform="rotate(240,350,600)"/>
<use xlink:href="#Z2" transform="rotate(244,350,600)"/>
<use xlink:href="#Z2" transform="rotate(248,350,600)"/>
<use xlink:href="#Z2" transform="rotate(252,350,600)"/>
<use xlink:href="#Z2" transform="rotate(256,350,600)"/>
<use xlink:href="#Z2" transform="rotate(260,350,600)"/>
<use xlink:href="#Z2" transform="rotate(264,350,600)"/>
<use xlink:href="#Z2" transform="rotate(268,350,600)"/>
</g>

<g stroke="red" stroke-width="1" fill="none">
<use xlink:href="#PO1" transform="rotate(110,650,600)"/>
</g>
<g stroke="red" stroke-width="1" fill="none">
<use xlink:href="#PO2" transform="rotate(230,350,600)"/>
</g>

</svg>

Waldmensch

Mangels SVG Skills komme ich nicht weiter und höre hier erstmal auf. Vielleicht kann jemand da die gebogenen und rotierten Texte reinbasteln. Der Code unten ist eine komplette HTML Datei. Mit den 2 Feldern oben kann man temperatur und Feuchtigkeit setzen. Vielleicht kann ja jemand ein Widget draus machen.

<html>
<head>
<style>
#hygro {
height:100%;
width:100%;
}
</style>
<script>
function setptr1() {
var inputval = parseInt(document.getElementById("valuepo1").value) *1.5;
console.log(inputval + 92);
var PO1 = document.getElementById("PO1a");
PO1.setAttribute("transform", "rotate(" + (inputval + 92) + ",650,600)");
}
function setptr2() {
var inputval = parseInt(document.getElementById("valuepo2").value) /2;
console.log(268 - inputval);
var PO2 = document.getElementById("PO2a");
PO2.setAttribute("transform", "rotate(" + (268 - inputval) + ",350,600)");
}
</script>
</head>
<body>
<input type="text" id="valuepo1"></input><button onclick = "setptr1();" >set Temp</button><br>
<input type="text" id="valuepo2"></input><button onclick = "setptr2();" >set Hum</button><br>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000" id="hygro" >

<circle cx="500" cy="500" r="265" fill="WhiteSmoke" stroke="#bfc1c2" stroke-width="16"/>
<circle cx="500" cy="500" r="265" fill-opacity="0" stroke="#d8d8d8" stroke-width="4"/>
<g stroke="black" stroke-width="2" fill="none"></g>

<!--<path fill="none" stroke="#2e8b57" stroke-width="20" d="M413,331 A190,190 35 0 1 657,393" />-->

<defs>
<g id="PO1">
<line stroke-width="2" x1="650" y1="600" x2="650" y2="990" fill="orangered"/>
<rect x="642" y="555" rx="2" ry="2" width="16" height="64" fill="orangered"/>
<circle cx="650" cy="600" r="2" stroke="brown" stroke-width="4" />
<circle cx="650" cy="600" r="3" fill="grey"/>
</g>

<g id="PO2">
<line stroke-width="2" x1="350" y1="600" x2="350" y2="990" fill="orangered"/>
<rect x="342" y="555" rx="2" ry="2" width="16" height="64" fill="orangered"/>
<circle cx="350" cy="600" r="2" stroke="brown" stroke-width="4" />
<circle cx="350" cy="600" r="3" fill="grey"/>
</g>

<line stroke-width="1" id="M1" x1="650" y1="950" x2="650" y2="970"/>
<line stroke-width="2" id="L1" x1="650" y1="950" x2="650" y2="980"/>
<line stroke-width="1" id="MM1" x1="650" y1="950" x2="650" y2="975"/>

<g id="Z1">
<use xlink:href="#M1" transform="rotate(0,650,600)"/>
<use xlink:href="#M1" transform="rotate(1.5,650,600)"/>
</g>

<line stroke-width="1" id="M2" x1="350" y1="950" x2="350" y2="970"/>
<line stroke-width="2" id="L2" x1="350" y1="950" x2="350" y2="980"/>

<g id="Z2">
<use xlink:href="#M2" transform="rotate(0,350,600)"/>
<use xlink:href="#M2" transform="rotate(2,350,600)"/>
</g>

<line stroke-width="1" id="line1" x1="650" y1="730" x2="650" y2="920"/>
<line stroke-width="1" id="line2" x1="650" y1="720" x2="650" y2="920"/>
<line stroke-width="1" id="line3" x1="350" y1="720" x2="350" y2="920"/>
<line stroke-width="1" id="line4" x1="350" y1="760" x2="350" y2="920"/>

</defs>

<g id="T1" stroke="black">
<use xlink:href="#Z1" transform="rotate(92,650,600)"/>
<use xlink:href="#L1" transform="rotate(92,650,600)"/>
<use xlink:href="#Z1" transform="rotate(95,650,600)"/>
<use xlink:href="#Z1" transform="rotate(98,650,600)"/>
<use xlink:href="#MM1" transform="rotate(99.5,650,600)"/>
<use xlink:href="#Z1" transform="rotate(101,650,600)"/>
<use xlink:href="#Z1" transform="rotate(104,650,600)"/>
<use xlink:href="#Z1" transform="rotate(107,650,600)"/>
<use xlink:href="#L1" transform="rotate(107,650,600)"/>
<use xlink:href="#Z1" transform="rotate(110,650,600)"/>
<use xlink:href="#Z1" transform="rotate(113,650,600)"/>
<use xlink:href="#MM1" transform="rotate(114.5,650,600)"/>
<use xlink:href="#Z1" transform="rotate(116,650,600)"/>
<use xlink:href="#Z1" transform="rotate(119,650,600)"/>
<use xlink:href="#Z1" transform="rotate(122,650,600)"/>
<use xlink:href="#L1" transform="rotate(122,650,600)"/>
<use xlink:href="#Z1" transform="rotate(125,650,600)"/>
<use xlink:href="#Z1" transform="rotate(128,650,600)"/>
<use xlink:href="#MM1" transform="rotate(129.5,650,600)"/>
<use xlink:href="#Z1" transform="rotate(131,650,600)"/>
<use xlink:href="#Z1" transform="rotate(134,650,600)"/>
<use xlink:href="#Z1" transform="rotate(137,650,600)"/>
<use xlink:href="#L1" transform="rotate(137,650,600)"/>
<use xlink:href="#Z1" transform="rotate(140,650,600)"/>
<use xlink:href="#Z1" transform="rotate(143,650,600)"/>
<use xlink:href="#MM1" transform="rotate(144.5,650,600)"/>
<use xlink:href="#Z1" transform="rotate(146,650,600)"/>
<use xlink:href="#Z1" transform="rotate(149,650,600)"/>
<use xlink:href="#L1" transform="rotate(152,650,600)"/>
</g>

<g id="T2" stroke="black">
<use xlink:href="#Z2" transform="rotate(208,350,600)"/>
<use xlink:href="#Z2" transform="rotate(212,350,600)"/>
<use xlink:href="#Z2" transform="rotate(216,350,600)"/>
<use xlink:href="#L2" transform="rotate(218,350,600)"/>
<use xlink:href="#Z2" transform="rotate(220,350,600)"/>
<use xlink:href="#Z2" transform="rotate(224,350,600)"/>
<use xlink:href="#Z2" transform="rotate(228,350,600)"/>
<use xlink:href="#L2" transform="rotate(228,350,600)"/>
<use xlink:href="#Z2" transform="rotate(232,350,600)"/>
<use xlink:href="#Z2" transform="rotate(236,350,600)"/>
<use xlink:href="#L2" transform="rotate(238,350,600)"/>
<use xlink:href="#Z2" transform="rotate(240,350,600)"/>
<use xlink:href="#Z2" transform="rotate(244,350,600)"/>
<use xlink:href="#Z2" transform="rotate(248,350,600)"/>
<use xlink:href="#L2" transform="rotate(248,350,600)"/>
<use xlink:href="#Z2" transform="rotate(252,350,600)"/>
<use xlink:href="#Z2" transform="rotate(256,350,600)"/>
<use xlink:href="#L2" transform="rotate(258,350,600)"/>
<use xlink:href="#Z2" transform="rotate(260,350,600)"/>
<use xlink:href="#Z2" transform="rotate(264,350,600)"/>
<use xlink:href="#L2" transform="rotate(268,350,600)"/>
</g>

<g font-family="arial" font-size="20" font-weight="normal" font-style="normal" stroke="black" fill="black" >
<text x="582" y="295">100</text>
<text x="637" y="342">80</text>
<text x="676" y="394">60</text>
<text x="704" y="454">40</text>
<text x="725" y="522">20</text>
<text x="726" y="590">0</text>
<text x="355" y="322">30</text>
<text x="292" y="399">20</text>
<text x="253" y="492">10</text>
<text x="260" y="590">0</text>
</g>

<g id="T2" stroke="grey">
<use xlink:href="#line1" transform="rotate(117.5,650,600)"/>
<use xlink:href="#line2" transform="rotate(126.5,650,600)"/>
<use xlink:href="#line3" transform="rotate(233,350,600)"/>
<use xlink:href="#line4" transform="rotate(248,350,600)"/>
</g>

<g stroke="red" stroke-width="1" fill="none">
<use xlink:href="#PO1" transform="rotate(92,650,600)" id="PO1a"/>
</g>

<g stroke="red" stroke-width="1" fill="none">
<use xlink:href="#PO2" transform="rotate(268,350,600)" id="PO2a"/>
</g>

</svg>

</body>
</html>