FHEM > RSS

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

<< < (3/7) > >>

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

Ich denke, das erklärt sich weitgehend selbst. Die Syntax von date und time ist ähnlich der Syntax von Text, es werden einfach die x und y Koordinaten angegeben, der auszugebende Text ergibt sich automatisch durch das Schlüsselwort date bzw. time, das wird vom RSS Modul automatisch verarbeitet.

ABER...

Wenn man sich den Screenshot aus dem vorherigen Beispiel anschaut, kommt man irgendwann auf folgende Frage:

"Worauf beziehen sich eigentlich die Positionsangaben in Bezug auf die Ausrichtung des auszugebenden Objektes?"

Bei Text ist das relativ einfach: Die x-Position bezeichnet die Stelle, von der aus der Text nach rechts ausgegeben wird.
Die y-Position bestimmt eine Schriftlinie, "auf der der Text steht". Das heißt, Unterlängen wie bei g j p q y erscheinen unterhalb dieser Linie
Sowohl der Text "Ich bin ein weisser, 12px hoher Text" als auch das Datum wurden an der y-Position 100 ausgegeben.
Denkt Euch eine Linie, die ebenfalls an der y-Position 100 gezogen ist, dann würde das so aussehen:

(http://up.picr.de/17979799hq.jpg)

Ich denke, anhand des Bildes wird klar, was ich mit Schriftlinie meine. (im Bild ist der Vollständigkeit halber auch noch die Linie für die x-Position eingezeichnet)

Dieses Verständnis ist wichtig, um später mehrere Objekte korrekt aneinander ausrichten zu können.

Selbstverständlich ;) kann man auch das Verhalten der Ausrichtung von Objekten an einer angebenen Position noch definieren, aber das kommt erst viel später. Im Moment bleiben wir erstmal beim Standardverhalten.

betateilchen:
Übrigens: Ihr braucht Euch die einzelnen Beispiele nicht alle speichern, am Ende des Workshops werdet Ihr eine Layout-Datei haben, in der alle besprochenen Teile enthalten sind.

Schritt 5 - wir zeichnen Linien

Legt Euch bitte eine die Layout-Datei wie folgt an:


--- Code: ---rgb "FFFFFF"
line 0 300 800 300

rgb "FF0000"
line 400 0 400 600

rgb "00FF00"
line 0.1 0.1 0.9 0.9

rgb "FFFF00"
line 0.9 0.1 0.1 0.9

--- Ende Code ---

und betrachtet Euch das Ergebnis:

(http://up.picr.de/17980114vv.jpg)

Erklärungen

Die Syntax des line Befehls ist folgende:


--- Code: ---line <x1> <y1> <x2> <y2> [<thick>]
--- Ende Code ---

<x1><y1> bezeichnet den Startpunkt, <x2><y2> bezeichnet den Endpunkt der Linie, die NICHT nur horizontal oder vertikal sein muss!

Die Angabe der Linienstärke <thick> ist optional. Die Standardlinienstärke ist 1px.


--- Code: ---rgb "FFFFFF"
line 0 300 800 300
--- Ende Code ---

bedeutet also:

"Nimm weisse Farbe und ziehe eine Linie von 0,300 nach 800,300. Das entspricht einer durchgehenden Linie vom linken zum rechten Rand."

Würde man diese erste Linie mit einer Dicke von 5 zeichnen wollen, müsste es so aussehen:


--- Code: ---rgb "FFFFFF"
line 0 300 800 300 5
--- Ende Code ---

Das Ergebnis könnt Ihr euch ja mal selbst basteln.

Der zweite Teil


--- Code: ---rgb "FF0000"
line 400 0 400 600
--- Ende Code ---

dürfte sich damit auch selbst erklären.

Aber kommen wir nun zu den zwei weiteren Linien:


--- Code: ---rgb "00FF00"
line 0.1 0.1 0.9 0.9

rgb "FFFF00"
line 0.9 0.1 0.1 0.9

--- Ende Code ---

Was sind denn das für komische Positionsangaben mit 0.1 und 0.9?

Relativ einfach erklärt:

Alle Positionsangaben >= 1 werden als absolute (Pixel-)Positionen interpretiert, also z.B. 300/500

Alle Positionsangaben < 1 werden als relative Positionen, bezogen auf die Gesamtbreite und Gesamthöhe des Bildes  interpretiert.

Das heißt:


--- Code: ---line 0.1 0.1 0.9 0.9
--- Ende Code ---

wird in unserem Beispiel intern umgerechnet in "line 80 60 720 540" und dann gezeichnet.

Um ein Fadenkreuz in die Mitte des RSS zu zeichnen, könnte man also auch schreiben:


--- Code: ---line 0.5 0 0.5 600
line 0 0.5 800 0.5
--- Ende Code ---

Achtung: Die Angabe von "1" zur Kennzeichnung der vollen Breite bzw. Höhe funktioniert leider nicht mehr, das hat Boris irgendwann aus mir bisher unerfindlichen Gründen wieder ausgebaut (es gab die Möglichkeit früher schonmal)


Es gibt auch noch eine dritte Möglichkeit zur Angabe von Positionsdaten, dazu kommen wir später noch.

betateilchen:
Schritt 6 - Grafiken in den RSS einbinden

Wir können jetzt schon Text (inkl. Datum und Uhrzeit) schreiben und Linien zeichnen. Was noch fehlt, ist das Einbinden von Grafiken in den RSS.

Auch das ist recht einfach möglich, und es folgt dem bereits bekannten, wenn auch im "Inhalt" erweiterten Syntaxprinzip:


--- Code: ---img <x> <y> <scale> <type> <srcType> <source>
--- Ende Code ---

Legt Euch bitte folgendes Layout an:


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

line 0 0.5 800 0.5
line 0.5 0 0.5 600

img 0.5 0.5 1 png url "http://fhem.de/www/images/default/fhemicon.png"

--- Ende Code ---

und bewundert das Ergebnis  :P

(http://up.picr.de/17983753hm.jpg)

Erklärung - nach der nächsten Maus.

betateilchen:
Erklärung


--- Code: ---img 0.5 0.5 1 png url "http://fhem.de/www/images/default/fhemicon.png"
--- Ende Code ---

aufgedröselt:

img = Schlüsselwort für den auszuführenden Befehl

0.5 0.5 = x/y Position, im Beispiel also genau die Mitte

1 = Skalierungsfaktor, das heißt, die Grafik wird 1:1 wiedergegeben.

png = Grafikformat der einzufügenden Datei/Daten

url = gibt an, dass die Grafikdatei von einer URL gelesen wird. Alternativ gibt es noch "file" und "data" (das erkläre ich auch noch)

"http://..." = die URL mit der Grafikadresse

Achtung: Die Angabe des Formates (z.B. "png") ist unabhängig von der Angabe des Dateinamens notwendig!

Das weiße Fadenkreuz im Beispiel dient nur zur Verdeutlichung, worauf sich die Positionsangaben bei img standardmäßig beziehen: es geht dabei immer um die linke obere Ecke des Bildes.

betateilchen:
Noch ein wichtiger Hinweis zum Einbinden von img über url:

Niemals eine url verwenden, die vom gleichen fhem bereitgestellt wird!

Wer das versucht, landet in einer Endlosschleife.

Navigation

[0] Themen-Index

[#] Nächste Seite

[*] Vorherige Sete

Zur normalen Ansicht wechseln