Autor Thema: Raum-Klimamesser  (Gelesen 4684 mal)

Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Raum-Klimamesser
« am: 10 Oktober 2019, 18:12:42 »
Hat jemand schonmal was in der Art (siehe Foto) umgesetzt ? Kreuzen sich die Zeiger über der schraffierten Fläche, ist das Raumklima ideal.




Offline Gisbert

  • Hero Member
  • *****
  • Beiträge: 1307
  • Das Ziel ist das Ziel !
Antw:Raum-Klimamesser
« Antwort #1 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​
Aktuelles Fhem auf HP ThinClient T610 | UniFi-Controller | Homematic, VCCU, HMUART | ESP8266, Sonoff, Rollladenaktoren, KANNIX von Papa Romeo | 1-Wire-Temperatursensoren | Wlan-Kamera | SIGNALduino, WH3080-Wettereinheit, Flamingo Rauchmelder FA21RF

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 902
    • Github Repos
Raum-Klimamesser
« Antwort #2 am: 10 Oktober 2019, 20:18:13 »
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
« Letzte Änderung: 10 Oktober 2019, 20:20:40 von Waldmensch »

Online dkreutz

  • Full Member
  • ***
  • Beiträge: 349
  • Home, Smart Home!
    • fhem-skill für Mycroft.ai
Antw:Raum-Klimamesser
« Antwort #3 am: 10 Oktober 2019, 20:21:24 »
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+ (Stretch) / 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

Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Antw:Raum-Klimamesser
« Antwort #4 am: 10 Oktober 2019, 22:08:19 »
Erstmal danke für die vielen Antworten. Eine grafische Umsetzung wäre natürlich schön (muss nicht als Analoginstrument sein) aber kein Muss.

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 ;)
« Letzte Änderung: 10 Oktober 2019, 22:32:16 von dt2510 »

Offline Eisix

  • Sr. Member
  • ****
  • Beiträge: 742
Antw:Raum-Klimamesser
« Antwort #5 am: 11 Oktober 2019, 15:58:43 »
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

Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Antw:Raum-Klimamesser
« Antwort #6 am: 15 Oktober 2019, 16:25:10 »
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).
« Letzte Änderung: 15 Oktober 2019, 17:14:04 von dt2510 »

Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Antw:Raum-Klimamesser
« Antwort #7 am: 15 Oktober 2019, 16:52:39 »
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 ?

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 341
Antw:Raum-Klimamesser
« Antwort #8 am: 15 Oktober 2019, 17:25:23 »
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).


Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Antw:Raum-Klimamesser
« Antwort #9 am: 15 Oktober 2019, 18:13:46 »
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 ...

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 902
    • Github Repos
Antw:Raum-Klimamesser
« Antwort #10 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

Offline dt2510

  • Sr. Member
  • ****
  • Beiträge: 593
Antw:Raum-Klimamesser
« Antwort #11 am: 16 Oktober 2019, 09:36:00 »
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...

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 902
    • Github Repos
Antw:Raum-Klimamesser
« Antwort #12 am: 16 Oktober 2019, 12:00:30 »
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

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 902
    • Github Repos
Antw:Raum-Klimamesser
« Antwort #13 am: 19 Oktober 2019, 19:00:01 »
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>
Gefällt mir Gefällt mir x 1 Liste anzeigen

Offline Waldmensch

  • Sr. Member
  • ****
  • Beiträge: 902
    • Github Repos
Antw:Raum-Klimamesser
« Antwort #14 am: 20 Oktober 2019, 10:55:03 »
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>
Gefällt mir Gefällt mir x 1 Liste anzeigen

 

decade-submarginal