Hauptmenü

Raum-Klimamesser

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

Vorheriges Thema - Nächstes Thema

ch.eick

Das sollte sicher unterschwellig ein Anagramm für pah sein ;-)

Gesendet von meinem SM-G930F mit Tapatalk

RPI4; Docker; CUNX; Eltako FSB61NP; SamsungTV H-Serie; Sonos; Vallox; Luxtronik; 3x FB7490; Stromzähler mit DvLIR; wunderground; Plenticore 10 mit BYD; EM410; SMAEM; Modbus TCP
Contrib: https://svn.fhem.de/trac/browser/trunk/fhem/contrib/ch.eick

Waldmensch


Ein Anemometer ist dazugekommen. Konfiguration s.u.

Beispielconfig vom Screenshot:
<li data-row="1" data-col="7" data-sizex="6" data-sizey="4">
  <header>BAROMETER</header>
  <div
data-type = "gauge"
data-view = "barometer"
data-baro-show-value = "1"
data-baro-history = "2"
data-get-pressure = "Wetterstation:pressureRel"
data-pointer-speed = "10"
data-pointer-widths = '["6"]'
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="6" data-col="1" data-sizex="6" data-sizey="4">
<header>CLOCK</header>
  <div
data-type = "gauge"
data-view = "clock"
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="6" data-col="7" data-sizex="6" data-sizey="4">
<header>ANEMOMETER</header>
  <div
data-type = "gauge"
data-view = "anemometer"
data-get-wind-speed = "Wetterstation:windkmh"
data-get-wind-direction = "Wetterstation:windDirection"
data-wind-unit = "km/h"
data-pointer-speed = "10"
data-pointer-widths = '["6"]'
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>

Octopus180

Moin

Erstmal muss ich ein Lob auszusprechen, sehr schöne Arbeit die ihr hier leistet.

Meine Frage wäre, brauch ich nur die JS- Datei in das entsprechende Verzeichnis kopieren und dann meine Tablet UI Seite erstellen?

Ich bin leider aus den ganzen Beiträgen nicht so richtig schlau geworden.

Danke für die Hilfe.

Gruß Peter

Waldmensch

Genau. Nur die JS Datei ins JS Verzeichnis des FTUI kopieren. Config Beispiel für die index Seite habe ich in jedem Beitrag. Im Prinzip musst Du nur Deine Readings einsetzen, dann sieht es aus wie auf den Screenshots. Die data-get-wind-direction erwartet einen Winkelwert von 0-360 wobei 0 Nord ist.


Gesendet von iPhone mit Tapatalk

Octopus180

Ok, Danke

Dann werde ich mal versuchen es umzusetzen.

Gruß

Waldmensch

Ich wollte schon immer eine Visualisierung meiner PV Anlage haben, mit der man den Gesamtzustand auf einen Blick erfassen kann. Einen Prototypen habe ich fertig. Meinungen? Fällt noch jemandem was ein?
Im Screenshot:
- 1 = Erzeugung
- 2 = Verbrauch
- 3 = Batterie

Die Punktkette scrollt. Die soll abhängig von einem Reading "charge|discharge|standby" im Uhrzeigersinn, gegen den Uhrzeigersinn drehen oder ausgeblendet werden

Waldmensch

- view "photovoltaic" eingebaut
- Animationen vom Javacode ins SVG verlagert. (reduziert CPU Load erheblich)

Beispielconfig vom Screenshot
<li data-row="1" data-col="1" data-sizex="6" data-sizey="4">
  <header>HYGROMETER</header>
<div
data-type = "gauge"
data-view = "hygrometer"
data-get-temperature = "Wetterstation:temperatureInside"
data-get-humidity = "Wetterstation:humidityInside"
data-show-devpoint= "1"
data-pointer-speed = "20"
data-pointer-widths = '["0.0","0"]'
data-pointer-lengths = '["370.0","370.0"]'
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="1" data-col="7" data-sizex="6" data-sizey="4">
  <header>BAROMETER</header>
  <div
data-type = "gauge"
data-view = "barometer"
data-baro-show-value = "1"
data-baro-history = "2"
data-get-pressure = "Wetterstation:pressureRel"
data-pointer-speed = "10"
data-pointer-widths = '["0"]'
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="6" data-col="1" data-sizex="6" data-sizey="4">
<header>CLOCK</header>
  <div
data-type = "gauge"
data-view = "clock"
data-clock-timezone = "0"
data-color-scale = "red"
data-color-background = "black"
data-pointer-colors = '["red","red","red"]'

data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="6" data-col="7" data-sizex="6" data-sizey="4">
<header>ANEMOMETER</header>
  <div
data-type = "gauge"
data-view = "anemometer"
data-get-wind-speed = "Wetterstation:windkmh"
data-get-wind-direction = "Wetterstation:windDirection"
data-wind-unit = "km/h"
data-pointer-speed = "10"
data-pointer-widths = '["3"]'
data-color-scale = "red"
data-color-background = "black"
data-color-pointer = "red"
data-size = "300"
style=""
class="top-space">
</div>
</li>
<li data-row="1" data-col="13" data-sizex="6" data-sizey="4">
<header>PHOTOVOLTAIC</header>
  <div
data-type = "gauge"
data-view = "photovoltaic"
data-color-scale = "red"
data-color-background = "black"
data-pointer-colors = '["red","red","red"]'
data-get-pv-soc = "Solarwatt:Bat_SoC"
data-get-pv-generation = "Wechselrichter1:ProdTotal"
data-get-pv-consumption = "ESPEasy_sonoff_7_Watt:StromverbrauchAktuell"
data-get-pv-batstate = "Solarwatt:Bat_State"
data-pointer-speed = "10"
data-size = "300"
style=""
class="top-space">
</div>
</li>

Izmir Schlecht

Schaut euch auch mal die Umsetzung unter: https://github.com/HanSolo/SteelSeries-Canvas an.

Ein Beispiel dafür findet ihr unter: http://bbs.wing-willich.de/gauge/gauges_meteo.htm

Wäre toll, wenn sich das als Widget einbinden lassen würde.

Prof. Dr. Peter Henning

Sehr Retro. Es soll ja auch Leute geben, die Internetradios in Holzgehäuse einbauen...

ZitatWäre toll, wenn sich das als Widget einbinden lassen würde.
Klar. Tipp: JavaScript lernen und machen.

LG

pah