55_InfoPanel - Rechtecke für Dummies

[betateilchen]

1. Wir definieren uns ein testPanel:

Code Auswählen Erweitern

define testPanel InfoPanel ./FHEM/testpanel.layout

Ergebnis, wenn wir das InfoPanel aufrufen:

(http://up.picr.de/20950624nd.jpg)

Logisch, denn die Layoutdatei existiert noch nicht.
(Wer nur einen schwarzen Bildschirm ohne Fehlermeldung bekommt = kein Grund zur Panik, die Fehlermeldung wird erst seit heute angezeigt)


2. Wir legen eine Layoutdatei ohne Elemente an

Code Auswählen Erweitern


#

#


und rufen das testPanel nochmal auf. Ergebnis:

(http://up.picr.de/20950639uf.jpg)

Ein InfoPanel

• ohne Elemente im Layout
• ohne im device festgelgtes Attribut bgcolor
• ohne im device festgelegtes Attribut size

erzeugt immer eine schwarze Fläche mit 800x600 Pixeln. Das sind Standardwerte, falls vom Benutzer nichts anderes definiert ist..


3. Wir füllen die linke Hälfte des Panels mit grauer Farbe

Code Auswählen Erweitern


#

rgb "7F7F7FFF"
rect -   0   0 400 600 0 0 1 0

#


und betrachten das Ergebnis:

(http://up.picr.de/20950751tp.jpg)

Wie zu erwarten war.

4. Wir definieren ein rotes Rechteck ohne Füllung und ohne Umrandung:

Code Auswählen Erweitern


#

rgb "7F7F7FFF"
rect -   0   0 400 600 0 0 1 0

# weiter in rot
rgb "FF0000FF"

# Rechteck ohne Füllung, ohne Umrandung
rect - 300  50 500 100 0 0 0 0

#


und betrachten das Ergebnis:

(http://up.picr.de/20950751tp.jpg)

Es ist nichts von einem roten Rechteck zu sehen. Das Objekt existiert zwar (wer es nicht glaubt, schaut in den html-Quelltext) aber es ist komplett unsichtbar.


5. Wir definieren ein rotes Rechteck mit Füllung, ohne Umrandung

Code Auswählen Erweitern


#

rgb "7F7F7FFF"
rect -   0   0 400 600 0 0 1 0

# weiter in rot
rgb "FF0000FF"

# Rechteck ohne Füllung, ohne Umrandung
rect - 300  50 500 100 0 0 0 0

# Rechteck mit Füllung, ohne Umrandung
rect - 300 150 500 200 0 0 1 0

#


Ergebnis:

(http://up.picr.de/20950778kx.jpg)


6. Wir definieren ein Rechteck ohne Füllung, aber mit roter Umrandung in 1px Strichstärke

Code Auswählen Erweitern


#

rgb "7F7F7FFF"
rect -   0   0 400 600 0 0 1 0

# weiter in rot
rgb "FF0000FF"

# Rechteck ohne Füllung, ohne Umrandung
rect - 300  50 500 100 0 0 0 0

# Rechteck mit Füllung, ohne Umrandung
rect - 300 150 500 200 0 0 1 0

# Rechteck ohne Füllung, mit Umrandung, 1px Strichstärke
rect - 300 250 500 300 0 0 0 1

#


Ergebnis:

(http://up.picr.de/20950789zz.jpg)


7. Wir erzeugen ein Rechteck mit roter Füllung und blauer Umrandung in 2px Strichstärke

Code Auswählen Erweitern


#

rgb "7F7F7FFF"
rect -   0   0 400 600 0 0 1 0

# weiter in rot
rgb "FF0000FF"

# Rechteck ohne Füllung, ohne Umrandung
rect - 300  50 500 100 0 0 0 0

# Rechteck mit Füllung, ohne Umrandung
rect - 300 150 500 200 0 0 1 0

# Rechteck ohne Füllung, mit Umrandung, 1px Strichstärke
rect - 300 250 500 300 0 0 0 1

# Rechteck mit roter Füllung und blauer Umrandung, 2px Strichstärke
rect - 300 350 500 400 0 0 1 0
rgb "0000FFFF"
rect - 300 350 500 400 0 0 0 2

#


Ergbebnis:

(http://up.picr.de/20950802yf.jpg)


Ich hoffe sehr, dass jetzt auch der Letzte verstanden hat, wie man Rechtecke mit und ohne Füllung sowie mit und ohne Umrandung zeichnet!



Das Funktionsprinzip ist bei Kreis und Ellipse absolut identisch!

Code Auswählen Erweitern



# Kreise
rgb "FF0000FF"
circle - 400 450 20 1 0
circle - 400 500 20 0 1
circle - 400 550 20 1 0
rgb "0000FFFF"
circle - 400 550 20 0 2

# Ellipsen
rgb "FF0000FF"
ellipse - 400 30 15 10 1 0
ellipse - 400 60 15 10 0 1
ellipse - 400 90 15 10 1 0
rgb "0000FFFF"
ellipse - 400 90 15 10 0 2



(http://up.picr.de/20950860kb.jpg)