FHEM > RSS

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

<< < (5/7) > >>

betateilchen:
Schöner machen - wir kombinieren den Plot im RSS mit einem Rechteck

Mal ehrlich, so richtig "schön" sieht das hier ja noch nicht aus:

(http://up.picr.de/17990117wq.jpg)

Irgendwie hängen die Achsenbeschriftungen auf dem schwarzen Hintergrund "in der Luft".
So würde das doch viel angenehmer aussehen:

(http://up.picr.de/17990121nv.jpg)

Kein Problem, wir können ja nun Rechtecke zeichnen und die sogar füllen. Wir legen also einfach ein passend großes Rechteck mit der gewünschten Hintergrundfarbe unter den Plot.


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

--- Ende Code ---

Wichtig: auf die Reihenfolge achten.

Wer nicht glaubt, dass das wichtig sei, kann ja spasseshalber die Reihenfolge mal umdrehen und erst den Plot und dann das Rechteck einbauen  8) Ich sagte ja eingangs schon, dass die Layout von oben nach unten abgearbeitet wird. Man muss sich das an dem aktuellen Beispiel wie ein Wurstbrot vorstellen:


* der schwarze Hintergrund ist die Brotscheibe
* das graue Rechteck ist die Butter auf der Brotscheibe
* der SVG Plot ist der Wurstbelag auf der Butter auf der Brotscheibe

betateilchen:
Bitte kommentiert jetzt die drei Zeilen für die roten Rechtecke wieder aus (oder löscht sie einfach)


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

--- Ende Code ---

Seit heute gibt es noch eine weitere Neuerung im RSS-Modul

Seit heute kann man mit einem Attribut die Hintergrundfarbe eines RSS definieren, anstatt immer nur mit dem schwarzen Standardhintergrund arbeiten zu müssen.

Beispiel:


--- Code: ---attr myrss bgcolor 0000FF
--- Ende Code ---

Diese Änderung wird sofort wirksam, das "set myrss rereadcfg" ist nicht notwendig, da die Änderung ja nicht im Layout erfolgt.

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

Die "Unschärfen" im Bild kommen von der Unzulänglichkeit des jpg Formates. Das wurde ja im Diskussionsthread schon besprochen und ich habe heute auch schon einen Patch vorgeschlagen, mit dem man wahlweise auch PNG als Ausgabeformat definieren kann.

Das würde dann so aussehen:

(http://up.picr.de/17990240mp.png)

Die Unschärfen sind komplett verschwunden. Sofern die Änderung im Laufe des Workshops noch in das Modul eingebaut wird, werde ich darauf natürlich noch einmal eingehen.

Ich bevorzuge als bgcolor übrigens den Farbcode 1C1C1C - das ist nicht ganz so hart wie das totale schwarz.


--- Code: ---attr myrss bgcolor 1C1C1C
--- Ende Code ---

Für den weiteren Verlauf des Workshops gehe ich von einem schwarzen (zumindest einem sehr dunklen) Hintergrund aus.

betateilchen:
Schritt 10 - wir benutzen Werte aus fhem-Readings im RSS

Bitte ändert in der Layout-Datei den Teil mit der Kopfzeile so ab:


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

rgb "FF0000"
text 200 30 { ReadingsVal('owo','c_temperature','')."°C"}

rgb "2E64FE"
text .5  30 { ReadingsVal('owo','c_humidity','')."%"}

rgb "00FF00"
text 500 30 { ReadingsVal('owo','c_pressure','')." hPa"}

--- Ende Code ---

und bewundert die schöne neue Kopfzeile:

(http://up.picr.de/17990309bk.jpg)

Ich denke, dazu muss man nicht viel erklären. Das ist die grundsätzliche Vorgehensweise, wenn man Werte aus irgendwelchen fhem-Devices im RSS darstellen möchte: man liest sie einfach aus und übergibt sie an "text" Der Teil zwischen den geschweiften Klammern ist reine perl Syntax, wie man sie auch aus notify, at und der 99_myUtils kennt.

betateilchen:
Schritt 11a - Ausrichtung von Texten

Bitte ergänzt in Eurer Layoutdatei am Ende folgende Zeilen:


--- Code: ---# weitere  Linien im Darstellungsbereich 1
rgb "7F7F7F"
line 400  40 400 240
line 600  40 600 240
line 400 140 800 140

# Demo Textausrichtung vertikal
rgb "FFFFFF"
tvalign "top"
text 410 140 "TO"

tvalign "center"
text 440 140 "CE gjp"

tvalign "base"
text 490 140 "BA gjp"

tvalign "bottom"
text 540 140 "BO gjp"

tvalign "base" # Rücksetzen auf default

# Demo Textausrichtung horizontal
thalign "left"
text 600 170 "LEFT"

thalign "center"
text 600 200 "CENTER"

thalign "right"
text 600 230 "RIGHT"

thalign "left" # Rücksetzen auf default

--- Ende Code ---

Das Ergebnis sollte so aussehen:

(http://up.picr.de/17991364oh.jpg)

Auf diese Weise kann man anhand von gedachten Hilfslinien Texte sowohl waagerecht als auch senkrecht ausrichten.
Das Beispiel sollte eigentlich selbst erklärend sein.

thalign => aufgedröselt:
t = text
h = horizontal
align= ausrichten

tvalign => aufgedröselt:
t = text
v = vertikal
align= ausrichten

Natürlich gibt es diese Möglichkeit auch für eingefügte Bilder - nach der nächsten Maus.

betateilchen:
Schritt 11b - Ausrichtung von Bildern

Was für Texte geht, geht natürlich auch für Bilder.

Bitte ergänzt Eure Layout-Datei am Ende um folgende Zeilen:


--- Code: ---# nochmal zwei Hilfslinien
rgb "7F7F7F"
line 300  40 300 240
line   0 140 250 140

# Demo Bildausrichtung vertikal
ivalign "top"
img  10 140 1 png url "http://up.picr.de/17991350as.png"

ivalign "center"
img  75 140 1 png url "http://up.picr.de/17991350as.png"

ivalign "bottom"
img 140 140 1 png url "http://up.picr.de/17991350as.png"

ivalign "top" # Rücksetzen auf default

# Demo Bildausrichtung horizontal
ihalign "left"
img 300  50 1 png url "http://up.picr.de/17991350as.png"

ihalign "center"
img 300 115 1 png url "http://up.picr.de/17991350as.png"

ihalign "right"
img 300 180 1 png url "http://up.picr.de/17991350as.png"

ihalign "left" # Rücksetzen auf default

--- Ende Code ---

Das Ergebnis sollte so aussehen:

(http://up.picr.de/17991713uj.png)

ihalign => aufgedröselt:
i = image
h = horizontal
align= ausrichten

ivalign => aufgedröselt:
i = text
v = vertikal
align= ausrichten


Für die Ausrichtung von Text und Bilder gilt gleichermassen: Natürlich kann man horizontale und vertikale Ausrichtung auch kombinieren!

Wer also das Popcorn genau in den Mittelpunkt des RSS setzen will, ohne die Pixel für die Positionierung ausrechnen zu müssen, kann das so machen:


--- Code: ---ihalign "center"
ivalign "center"
img .5 .5 1 png url "http://up.picr.de/17991350as.png"

--- Ende Code ---

Dafür mache ich jetzt keinen Screenshot, das könnt Ihr mal selbst testen.

Navigation

[0] Themen-Index

[#] Nächste Seite

[*] Vorherige Sete

Zur normalen Ansicht wechseln