FHEM > RSS

[Workshop] 02_RSS.pm für Anfänger - Schritt für Schritt erklärt

<< < (4/7) > >>

betateilchen:
Schritt 7 - Anwendung des bisher gelernten

Wir haben uns jetzt die wichtigsten Grundlagen erarbeitet, um daraus schon etwas sinnvolles zu bauen.
Nun bauen wir uns daraus uns erstes "echtes" Layout, mit dem wir im Laufe dieses Workshops weiterarbeiten werden.

Bitte folgendes Layout anlegen:


--- Code: ---# Schriftart festlegen
font /usr/share/fonts/truetype/msttcorefonts/arial.ttf

# Farbe weiss
rgb "FFFFFF"

# drei waagerechte Linien
line 0  40 800  40
# 0.4 * 600 = 240
line 0 0.4 800 0.4
line 0 440 800 440

# wir bauen uns eine Kopfzeile
# Schriftgroesse festlegen
pt 20
date  10 30
time  650 30
rgb "00FF00"
text 300  30 "myrss Workshop"

# ein skaliertes Bild einbinden
img 764 1 .29 png url "http://fhem.de/www/images/default/fhemicon.png"

# einige vorlaeufige Beschriftungen
pt 12
rgb "FFFFFF"
text  10  80 "Darstellungsbereich 1"
text  10 280 "Darstellungsbereich 2"
text  10 480 "Hier bauen wir uns einen SVG Plot ein"

--- Ende Code ---

In diesem Layout sind alle bisher besprochenen Elemente enthalten - ich hoffe, ich habe keines vergessen :)

Das Ergebnis sollte so aussehen:

(http://up.picr.de/17988154om.jpg)

Das macht doch schonmal was her, oder?

betateilchen:
Für den weiteren Fortgang des Workshops brauchen wir ein paar Datenquellen und einen SVG Plot. Ich schlage vor, wir nutzen dafür openweathermap als Quelle für Wetterdaten, damit kann man am einfachsten arbeiten und alle haben die gleichen Bedingungen.

1. Definition eines owo device


--- Code: ---define owo openweathermap
attr owo owoInterval 600
set owo stationByName Hamburg

--- Ende Code ---

(wer möchte, kann natürlich auch seinen Heimatort oder die nächstgelegene größere Stadt eintragen)

2. Definition eines zugehörigen Logfiles


--- Code: ---define owolog FileLog ./log/owo.log owo.*(c_temperature|c_humidity|c_pressure).*
--- Ende Code ---

3. Anlegen eines gplot-Files mit Namen SVG_owolog_1.gplot im Verzeichnis www/gplot


--- Code: ---set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<L1>'
set ytics
set y2tics
set grid ytics
set ylabel "Temperatur"
set y2label "Luftfeuchte"
set yrange [10:30]
set y2range [0:100]

#FileLog 4:owo.c_temperature\x3a::
#FileLog 4:owo.c_humidity\x3a::
#FileLog 4:owo.c_pressure\x3a:950:$fld[3]-950

plot "<IN>" using 1:2 axes x1y1 title 'Temperatur' ls l0 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'Feuchte' ls l2 lw 1 with lines,\
     "<IN>" using 1:2 axes x1y2 title 'Luftdruck' ls l1 lw 1 with lines

--- Ende Code ---

4. Definition des SVG plots


--- Code: ---define SVG_owo SVG owolog:SVG_owolog_1:CURRENT
attr SVG_owo label "min:$data{min1}°C   max:$data{max1}°C   akt:$data{currval1}°C"

--- Ende Code ---

Wenn alles richtig gemacht wurde und die ersten Daten im Logfile stehen (Achtung: es wird nur alle 10 Minuten geloggt!) sollte so etwas erscheinen:

(http://up.picr.de/17988574un.jpg)


* Diesen Plot werden wir in den RSS einbinden.
* Die Readings aus dem owo Device werden wir für die Weiterentwicklung des RSS verwenden.

betateilchen:
Schritt 8 - wir binden den SVG Plot in unseren RSS ein

Zuerst erinnern wir uns an diese Aussage:


--- Zitat ---url = gibt an, dass die Grafikdatei von einer URL gelesen wird. Alternativ gibt es noch "file" und "data"
--- Ende Zitat ---

"file" sollte sich eigentlich selbst erklären, da wird einfach eine Grafikdatei aus dem Dateisystem gelesen und verwendet, darauf werde ich nicht weiter eingehen.

Aber nun kommen wir zu "data". Wir können auch einfach die DATEN verwenden, die eine Grafik beschreiben, vereinfacht gesagt, wäre das der Inhalt, der in eine Grafikdatei geschrieben würde, wenn man sie abspeichern wollte. Den Umweg über die Grafikdatei sparen wir uns aber.

Das Modul 98_SVG stellt uns dafür eine schöne Funktion namens "plotAsPng()" bereit, die einen SVG plot als Datenstrom im png-Format bereitstellt, und genau diese Funktion nutzen wir im RSS. Die Standardplots aus SVG sind im Format 800x160 und passen damit vom Format exakt zu unserem RSS.

Wir ändern am Ende der Layoutdatei folgendes:

1. Auskommentieren (oder Löschen) der Zeile für den Ausgabebereich
2. Einbinden des SVG plots anhand seines in fhem definierten Namen


--- Code: ---#text  10 480 "Hier bauen wir uns einen SVG Plot ein"
img  0 441 1 png data { plotAsPng("SVG_owo") }

--- Ende Code ---

Das war schon alles, was wir tun müssen, um das hier zu erhalten:

(http://up.picr.de/17988799mq.jpg)

Einfacher gehts wohl kaum noch, glaube ich.

betateilchen:
Schritt 9 - wir zeichnen Rechtecke

Seit heute (danke Boris!) gibt es in RSS neu die Möglichkeit, Rechtecke mit und ohne Füllung zu zeichnen.

Wir fügen am Ende der Layoutdatei folgende drei Zeilen ein:


--- Code: ---rgb "FF0000"
rect 400 120 480 160
rect 400 320 480 360 1

--- Ende Code ---

und betrachten das Ergebnis:

(http://up.picr.de/17989138uo.jpg)

Erklärung: nach der nächsten Maus  :)

betateilchen:
Erklärung - was ist im letzten Schritt passiert?

Die Syntax für das Zeichnen von Rechtecken


--- Code: ---rect 400 120 480 160
rect 400 320 480 360 1

--- Ende Code ---

ist ähnlich wie die Syntax für das Zeichnen von Linien.


--- Code: ---rect <x1> <y1> <x2> <y2> [<filled>]
--- Ende Code ---

x1/y1 = bezeichnet dabei die linke obere Ecke
x2/y2 = bezeichnet die untere rechte Ecke
filled  = (optional) gibt an, ob das Rechteck nur gezeichnet oder auch mit Farbe gefüllt werden soll

Damit sollten sich die beiden Befehlszeilen eigentlich selbst erklären.

Wozu man die Rechtecke nutzen kann, erkläre ich Euch nach der nächsten Maus  8)

Navigation

[0] Themen-Index

[#] Nächste Seite

[*] Vorherige Sete

Zur normalen Ansicht wechseln