Wetterdaten Proplanta in TabletUI anzeigen? Her mit euren Beispielen!

Begonnen von Tobias, 24 Dezember 2016, 07:08:37

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

Tobias

24 Dezember 2016, 07:08:37
HI,
hat schonmal jemand aus den ProPlanta Modul die 14 Tage Vorschaudaten in TabletUI integriert? Aufgrund der Masse an Daten fehlt mir die zündende Idee...
Schön wäre es zb. über Charts bzw Meteogramme, aber wie macht man das? Am besten ohne DBLog /Logfilenutzung da ja alles als Reading vorliegt

Hat das schmal jemand gemacht? Immer her mit Euren Screeenshots und definitionen...
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter

Reinhart

#1
24 Dezember 2016, 10:16:34
Hallo Tobias!

Ich habe mir nur die ersten 6 Tage anzeigen lassen, denn alles was darüber hinaus geht ist ja Daumen mal Pi!
Kannst aber eventuell 2-reihig anzeigen lassen, damit es halbwegs übersichtlich bleibt.

Code Auswählen
<!DOCTYPE html>
<html>
<head></head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html"></li>
    <li data-row="2" data-col="2" data-sizex="4" data-sizey="2">
    <div class="container weather">
    <header><font size="+1">Wetter in <div class="large" data-type="label"
data-device="WetterLinz"
data-get="city"
style="display:inline"></font></div></header>
  <table width="100%">
    <td>&nbsp;</td>
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="condition"
style="font-size:350%"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="condition"></div>
</td>
<td>Lufttemperatur:</td>
<td>
<div class="large" data-type="label"
data-device="WetterLinz"
data-get="temperature"
          data-colors='["#003399","#0033FF","#CCCCFF","#FF3366","#FF0000"]'
          data-limits='[-3,0,10,20,25]'
data-unit=" °C"></div>
</td>
</tr>
<tr>
<td>Luftfeuchte:</td>
<td>
<div class="large" data-type="label"
data-device="WetterLinz"
data-get="humidity"
          data-colors='["#FF0000","#FF0033","#FF3366","#CCCCFF","#0033FF","#003399"]'
          data-limits='[20,30,45,60,70,90]'
data-unit=" %"></div>
</td>
</tr>
<tr>
<td>Windgeschwindigkeit:</td>
<td>
<div class="large" data-type="label"
data-device="WetterLinz"
data-get="wind"
data-unit="km/h"
          data-colors='["#003399","#0033FF","#CCCCFF","#FF3366","#FF0000"]'
          data-limits='[0,10,20,30,50]' style="display:inline"></div>
</td>
</tr>
<tr>
<td>Luftdruck:</td>
<td>
<div class="large" data-type="label"
data-device="WetterLinz"
data-get="pressure"
data-unit=" hPa"
          data-colors='["#003399","#0033FF","#CCCCFF","#FF3366","#FF0000"]'
          data-limits='[800,900,950,1000,1100]'
</td>
</tr>

<tr>
<td>Fernsicht:</td>
<td>
<div class="large" data-type="label"
data-device="WetterLinz"
data-get="visibility"
data-unit=" km"></div>
</td>
</tr>
    </table>
 
<table>
<tr>
</tr>
</table>
</div>
</li>

<li data-row="2" data-col="5" data-sizex="2" data-sizey="2">
  <header><font size="+1">Windrichtung</font></header>
<div class="cell center">
<table>
            <tr>
<tr><td colspan="2"></td></tr>
<td><div class="large" data-type="wind_direction"
              data-device="WetterLinz"
          data-direction="wind_direction"
          data-speed="wind_speed"
          data-calm="-"
          data-size="80"
          data-tickstep="45"
          data-angleoffset="0"></div>
</td></tr>               
            <tr><td>  
<div class="normal"
                data-type="label"
            data-device="WetterLinz"
            data-get="wind_direction"
            data-limits="[-50,-30,40]"
            data-colors='["#9999ff","#aa6900","#ff0000"]'
            data-unit=" Winkelgrad" ></div>
</td></tr>               
            <tr><td>
<div class="normal"
                data-type="label"
            data-device="WetterLinz"
            data-get="wind_condition"
            ></div>
</td></tr>
          </table>
        </div>

<li data-row="4" data-col="2" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><font size="+1">HEUTE</font></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc1_condition"
data-imageset="kleinklima"
            class="inline large">
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc1_condition"></div>
<br>
Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc1_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc1_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li>

<li data-row="4" data-col="3" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div class="large" data-type="label"
data-device="WetterLinz"
data-get="fc2_day_of_week"
style="display:inline"></div></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc2_condition"
data-imageset="kleinklima"
            class="inline large">           
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc2_condition"></div>
<br>
Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc2_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc2_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li>

<li data-row="4" data-col="4" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div class="large"  data-type="label"
data-device="WetterLinz"
data-get="fc3_day_of_week"
style="display:inline"></div></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc3_condition"
data-imageset="kleinklima"
            class="inline large">           
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc3_condition"></div>
<br>
Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc3_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc3_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li>

<li data-row="4" data-col="5" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div class="large" data-type="label"
data-device="WetterLinz"
data-get="fc4_day_of_week"
style="display:inline"></div></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc4_condition"
data-imageset="kleinklima"
            class="inline large">           
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc4_condition"></div>
<br>
Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc4_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc4_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li>


<li data-row="4" data-col="6" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div class="large" data-type="label"
data-device="WetterLinz"
data-get="fc5_day_of_week"
style="display:inline"></div></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc5_condition"
data-imageset="kleinklima"
            class="inline large">           
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc5_condition"></div>
<br>
Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc5_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc5_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li>   

<li data-row="4" data-col="7" data-sizex="1" data-sizey="2">
<div class="container weather">
<header><div class="large" data-type="label"
data-device="WetterLinz"
data-get="fc6_day_of_week"
style="display:inline"></div></header>
<table width="100%">
<tr>
<td rowspan="5" style="text-align:center;vertical-align:top">
<div data-type="weather"
data-device="WetterLinz"
data-get="fc6_condition"
data-imageset="kleinklima"
                                                class="inline large">           
style="width:100px"></div>
<br>
<div data-type="label"
data-device="WetterLinz"
data-get="fc6_condition"></div>
<br>
                Temp: <div data-type="label"
data-device="WetterLinz"
data-get="fc6_low_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
/ <div data-type="label"
data-device="WetterLinz"
data-get="fc6_high_c"
data-limits="[-50,-30,40]"
data-colors='["#9999ff","#aa6900","#ff0000"]'
data-unit=" °C"
class="inline large"></div>
</td>
</tr>
</table>
</div>
</li> 

<li data-row="5" data-col="2" data-sizex="6" data-sizey="1">
<div class="normal fullsize"
  data-type="highchart"
data-device="myDbLog"
  data-logdevice="myDbLog"
  data-columnspec="WetterLinz:temperature"
data-linetypes="area"
  data-linenames="Temperatur"
data-linesteps="true"
  data-legend='[""]'
data-yaxis="0,0"
data-xunit=""
data-yunit="Aussen"
data-yopposites="false"
data-daysago="3"
data-scroll="true"
data-range="false"
data-minvalue="-10"
  data-maxvalue="20"
  data-height="200"
  data-tooltip="{series.name}: <b>{point.y:,.1f}</b><br>"
class="noticks">
</div>         
</li>

</ul>
</div>
</body>
</html>
hier der Code, damit du schnell was testen kannst, vielleicht kannst was brauchen davon. Ich habe mir die Symbole extra groß anzeigen lassen.

LG
Reinhart
FHEM auf Raspy4 mit Bullseye + SSD, Homematic, ESP8266, ESP32, Sonoff, eBus, NanoCUL, MapleCUL, , MQTT2, Alexa

jnewton957

#3
24 Dezember 2016, 18:55:16
Zitat von: Tobias am 24 Dezember 2016, 07:08:37
HI,
hat schonmal jemand aus den ProPlanta Modul die 14 Tage Vorschaudaten in TabletUI integriert? Aufgrund der Masse an Daten fehlt mir die zündende Idee...
Schön wäre es zb. über Charts bzw Meteogramme, aber wie macht man das? Am besten ohne DBLog /Logfilenutzung da ja alles als Reading vorliegt

Hat das schmal jemand gemacht? Immer her mit Euren Screeenshots und definitionen...

Hallo Tobias,

neben den bekannten Beispielen für die 6 Tagesvorschau mit den schönen Bildchen für das Wetter habe ich die 14 Tagesvorschau gebaut.
Dazu dann sogar noch Regenvorschau und Sonnenvorsch.
Ich sende auch die codings, wenn ich wieder @home bin.
Hier schon mal die screenshots.
FHEM6.2 auf Pi5
V 1.66 nanoCUL 433 (IT)
V 1.66 nanoCUL868 (HM)
sqlite3 LogDb
ELRO AB440, DECT200,  TFA30.3125, esp8266, HM, TabletUI, IR-Schreiblesekopf (Udo),tibber Pulse, Kostal Pico, cfos Wallbox, Modbus TCP

Helmi55

#4
25 Dezember 2016, 11:51:45
cool. ja bitte den Code posten
Schöne Feiertage noch
LG
Helmut
System1 fhem 6.1 auf RPi 4B mit 4GB, HMUSBConfig, DS9490R-1Wire, Busware USB 868, Pool-Solarsteuerung mit FHEM. System2 fhem 6.1 auf RPi 4B mit 4GB (Bullseye) mit Busware USB 868 und 433 und HMUARTLGW für Haussteuerung

https://www.flickr.com/photos/canonhelmi/

Tobias

#5
03 Januar 2017, 15:24:28
@Reinhart, das hatte ich vorher, möchte auber auf Proplanta wechseln, die liefern noch mehr

@jnewton957, postest du noch den Code?
Maintainer: Text2Speech, TrashCal, MediaList

Meine Projekte: https://github.com/tobiasfaust
* PumpControl v2: allround Bewässerungssteuerung mit ESP und FHEM
* Ein Modbus RS485 zu MQTT Gateway für SolarWechselrichter
Drucken
Nach oben Seiten1
Benutzer-Aktionen