FHEM > RSS

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

<< < (2/7) > >>

betateilchen:
2. Schritt - Wir erstellen das erste Layout

Mit einem schwarzen Rechteck kann natürlich niemand was anfangen, deshalb werden wir das jetzt mit Inhalt füllen.
Alles was in dem Image dargestellt werden soll, muss in einer Layout-Datei definiert werden. Diese Layout-Datei habt Ihr (hoffentlich) in der Vorbereitungsphase bereits angelegt.

Die Layout-Datei kann direkt aus dem FHEM Frontend bearbeitet werden. Ihr findet die Datei unter "Edit Files" links in der Navigation

(http://up.picr.de/17975497el.png)

Dort könnt Ihr die Datei nun zum Editieren auswählen und bekommt sowas hier angezeigt:

(http://up.picr.de/17975543fh.png)

In das angezeigte Editorfenster tragt Ihr nun bitte folgendes ein und speichert die Datei dann mit dem "Save rss.layout" Button ab:

(http://up.picr.de/17975562yg.png)

Jetzt kommt etwas ganz wichtiges!

Nach jeder Änderung der Layout-Datei muss der RSS intern neu generiert werden. Das passiert mit folgendem Befehl im Frontend


--- Code: ---set myrss rereadcfg
--- Ende Code ---

Danach könnt Ihr das Ergebnis Eurer Arbeit anhand des schon beschriebenen Lesezeichens (die URL zur Imagedatei) anschauen:

(http://up.picr.de/17975608yz.jpg)

Das ist jetzt optisch noch nicht der Knaller, aber keine Sorge, das ändern wir alles noch.

Erklärung zu dem, was grade passiert ist - nach der nächsten Maus :)

betateilchen:
Erklärungen - was ist in Schritt 2 passiert?

Wir haben in der Layout-Datei den ersten Eintrag angelegt, der dem RSS Generator sagt, was gemacht werden soll:


--- Code: ---text 100 100 "Hallo, ich bin Dein RSS!"
--- Ende Code ---

Dröseln wir das mal auf:

text = gibt an, dass wir einen Text ausgeben wollen

100 100 = das sind die x und y Koordinaten, WO wir den Text ausgeben wollen, gezählt wird dabei von oben links (0,0) nach unten rechts (800,600)

"Hallo, ich bin Dein RSS!" = das ist der Text, der ausgegeben werden soll

Technisch gesehen, wird der Text quasi als Bild in die schwarze Fläche "gemalt" (gerendert)

Dieses Verfahren ist für alle darzustellenden Objekte, die ich noch beschreiben werde, gleich.

Die Syntax besteht immer aus den Komponenten

- Objekttyp
- Position
- Inhalt

Der Text im vorliegenden Beispiel wurde statisch vorgegeben. Das macht natürlich für sich ändernde Statusanzeigen nicht viel Sinn. Und deshalb kommt jetzt die gute Nachricht: "Man kann den Text selbstverständlich auch dynamisch erzeugen!"

Ändert doch einfach mal die Zeile in der Layout-Datei in folgendes:


--- Code: ---text 100 100 { fhem("version fhem.pl") }
--- Ende Code ---

Und schaut Euch dann das Ergebnis an. (das rereadcfg nicht vergessen!)


Das soll es für heute gewesen sein. Irgendwann hab ich auch mal Feierabend :)

Morgen machen wir als Erstes den Text optisch "schöner".

betateilchen:
mir ist grade noch was wichtiges eingefallen  8)

Im "Vorbereitungs"-Beitrag hier im Thread habe ich noch die zusätzlichen perl-Module aufgelistet, die von 02_RSS.pm genutzt werden.

http://forum.fhem.de/index.php/topic,22520.msg159292.html#msg159292

betateilchen:
Schritt 3: Wir machen den Text schön.

Die optische Darstellung eines Textes im RSS wird durch 5 Faktoren maßgeblich beeinflußt:


* Schriftart (font)
* Schriftgröße (Höhe in pixel)
* Schriftfarbe
* Rechtschreibung
* Grammatik
Die Punkte 4 und 5 lassen wir hier aussen vor, dafür ist das allgemeine Schulwesen mit seinem Lehrauftrag zuständig  8)

Für die Punkte 1-3 haben wir Möglichkeiten in der Layoutdatei.

Die Schriftart wird durch das Schlüsselwort "font" bestimmt. Damit wird der komplette Pfad inklusive Dateinamen zu einer TTF Datei angegeben, die wir verwenden wollen.

Beispiel:


--- Code: ---font /usr/share/fonts/truetype/msttcorefonts/arial.ttf
--- Ende Code ---

Die Schriftgröße wird durch das Schlüsselwort "pt" bestimmt. Damit wird die Höhe der Schriftart angegeben, ähnlich wie man das aus Textverarbeitungsprogrammen kennt.

Beispiel:


--- Code: ---pt 12
--- Ende Code ---

Die Schriftfarbe wird durch das Schlüsselwort "rgb" bestimmt. Damit wird die Farbe im Hexcode (wie z.B. in HTML üblich) angegeben.

Beispiel (für die Farbe weiss):


--- Code: ---rgb "FFFFFF"
--- Ende Code ---


Nun kommen wir zur generellen Verarbeitung der Layoutdatei. Diese Datei wird IMMER von oben nach unten abgearbeitet. Es kann also in einer Datei durchaus mehrere Definitionen der Farben und Schriftgrößen geben (auch der Schriftart, damit sollte man aber sparsam umgehen, viele Schriftarten auf einer Seite erschweren die Lesbarkeit erheblich)

Hierbei gilt eine einfache Regel:

Jede Definition eines Parameters gilt so lange, bis in der Layoutdatei eine neue Definition erfolgt.

Was bedeutet das?

Legt Euch bitte die Layout-Datei mit folgendem Inhalt an:

(http://up.picr.de/17979166sl.png)

und kontrolliert dann das Ergebnis, das so aussehen sollte:

(http://up.picr.de/17979170iq.jpg)

Ich denke, das Beispiel erklärt die oben angegebene Regel von selbst.

Achja - Zeilen in der Layout-Datei, die mit # beginnen, sind Kommentare und werden bei der Verarbeitung ignoriert.

betateilchen:
Schritt 4: Sonderformen von "text"

Zusätzlich zur Ausgabe eines freigewählten (oder eines irgendwie variabel ermittelten) Textes bietet das RSS Modul einfache Möglichkeiten zur Ausgabe von Datum und Uhrzeit.

Fügt bitte am Ende der Layout-Datei aus Schritt 3 folgende Zeilen ein:


--- Code: ---# nun geben wir das Datum aus
date 400 100

# und jetzt noch die aktuelle Uhrzeit
time 400 200

--- Ende Code ---

Und schaut Euch das Ergebnis an.

(http://up.picr.de/17979725xh.jpg)

Das war einfach, oder?  :P

Navigation

[0] Themen-Index

[#] Nächste Seite

[*] Vorherige Sete

Zur normalen Ansicht wechseln