2
0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-03-03 16:56:54 +00:00

55_InfoPanel: added

git-svn-id: https://svn.fhem.de/fhem/trunk@7892 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
betateilchen 2015-02-06 14:52:44 +00:00
parent bb561ce51c
commit 75110f43f2
4 changed files with 256 additions and 323 deletions

View File

@ -1,5 +1,6 @@
# Add changes at the top of the list. Keep it in ASCII, and 80-char wide.
# Do not insert empty lines here, update check depends on it.
- added: move 55_InfoPanel.pm from ./contrib to ./FHEM
- feature: YAMAHA_AVR: new commands play, pause, stop, skip, shuffle, repeat
- feature: 71_YAMAHA_NP: New command set and readings for menu navigation
- feature: 71_YAMAHA_NP: New command 'dimmer [1..3]'

View File

@ -798,10 +798,6 @@ sub btIP_evalLayout($$@) {
$svg .= btIP_itemEllipse($id,$x1,$y1,$r1,$r2,$format,%params);
}
when("font") {
$params{font} = $def;
}
when("font") {
$params{font} = $def;
}
@ -1237,6 +1233,260 @@ Please read <a href="http://forum.fhem.de/index.php/topic,32828.0.html" target="
</ul>
<br/><br/>
<a name="InfoPanellayout"></a>
<b>Layout definition</b><br/><br/>
<ul>
<li><code>area &lt;id&gt; &lt;x1&gt; &lt;y1&gt; &lt;x2&gt; &lt;y2&gt; &lt;link&gt;</code><br/>
<br/>
<ul>create a responsive area which will call a link when clicked.<br/>
<br/>
id = element id<br/>
x1,y1 = upper left corner<br/>
x2,y2 = lower right corner<br/>
link = url to be called<br/>
</ul></li><br/>
<br>
<li><code>boxcolor &lt;rgba&gt;</code><br/>
<br/>
<ul>define an rgb color code to be used for filling button and textbox<br/>
</ul></li><br/>
<br>
<li><code>button &lt;id&gt; &lt;x1&gt; &lt;y1&gt; &lt;x2&gt; &lt;y2&gt; &lt;r1&gt; &lt;r2&gt; &lt;link&gt; &lt;text&gt;</code><br/>
<br/>
<ul>create a responsive colored button which will call a link when clicked.<br/>
<br/>
id = element id<br/>
x1,y1 = upper left corner<br/>
x2,y2 = lower right corner<br/>
r1,r2 = radius for rounded corners<br/>
link = url to be called<br/>
text = text that will be written onto the button<br/>
<br/>
button will be filled with color defined by "boxcolor"<br/>
text color will be read from "rgb" value<br/>
</ul></li><br/>
<br/>
<li><code>buttonpanel</code><br/>
<br/>
<ul>needed once in your layout file if you intend to use buttons in the same layout.<br/>
</ul></li><br/>
<br/>
<li><code>circle &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;r&gt; [&lt;fill&gt;]</code><br/>
<br/>
<ul>create a circle<br/>
<br/>
id = element id<br/>
x,y = center coordinates of circle<br/>
r = radius<br/>
fill = circle will be filled with "rgb" color if set to 1<br/>
</ul></li><br/>
<br/>
<li><code>date &lt;id&gt; &lt;x&gt; &lt;y&gt;</code><br/>
<br/>
<ul>print date<br/>
<br/>
id = element id<br/>
x,y = position<br/>
</ul></li><br/>
<br/>
<li><code>ellipse &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;r1&gt; &lt;r2&gt; [&lt;fill&gt;]</code><br/>
<br/>
<ul>create an ellipse<br/>
<br/>
id = element id<br/>
x,y = center coordinates of circle<br/>
r1,r2 = radius<br/>
fill = ellipse will be filled with "rgb" color if set to 1<br/>
</ul></li><br/>
<br/>
<li><code>font &lt;font-family&gt;</code><br/>
<br/>
<ul>define font family used for text elements (text, date, time, seconds ...)<br/>
<br/>
Example: <code>font arial</code><br/>
</ul></li><br/>
<br/>
<li><code>group &lt;id&gt; open &lt;x&gt; &lt;y&gt;<br/>
group - close</code>&nbsp;&nbsp;(id will not be evaluated, just give any value)<br/>
<br/>
<ul>group items<br/>
<br/>
open|close = define start and end of group<br/>
x,y = upper left corner as reference for all grouped items, will be inherited to all elements.<br/>
<br/>
Examples:<br/>
<code>
group - open 150 150<br/>
rect ...<br/>
img ...<br/>
group - close<br/>
</code>
</ul></li><br/>
<br/>
<li><code>img &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;scale&gt; &lt;sourceType&gt; &lt;dataSource&gt;</code><br/>
<br/>
<ul>embed an image into InfoPanel<br/>
<br/>
id = element id<br/>
x,y = upper left corner<br/>
scale = scale to be used for resizing; may be factor or defined by width or height<br/>
sourceType = file | url | data<br/>
dataSource = where to read data from, depends on sourceType<br/>
</ul></li><br/>
<br/>
<li><code>line &lt;id&gt; &lt;x1&gt; &lt;y1&gt; &lt;x2&gt; &lt;y2&gt; [&lt;stroke&gt;]</code><br/>
<br/>
<ul>draw a line<br/>
<br/>
id = element id<br/>
x1,y1 = coordinates (start)<br/>
x2,y2 = coordinates (end)<br/>
stroke = stroke width for line; if omitted, default = 0<br/>
</ul></li><br/>
<br/>
<li><code>moveby &lt;x&gt; &lt;y&gt;</code><br/>
<br/>
<ul>move most recently x- and y-coordinates by given steps<br/>
</ul></li><br/>
<br/>
<li><code>moveto &lt;x&gt; &lt;y&gt;</code><br/>
<br/>
<ul>move x- and y-coordinates to the given positon<br/>
</ul></li><br/>
<br/>
<li><code>plot &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;scale&gt; &lt;inline&gt; &lt;plotName&gt;</code><br/>
<br/>
<ul>embed an SVG plot into InfoPanel<br/>
<br/>
id = element id<br/>
x,y = upper left corner<br/>
scale = scale to be used for resizing; may be factor or defined by width or height<br/>
inline = embed plot as data (inline=1) or as link (inline=0)<br/>
plotName = name of desired SVG device from your fhem installation<br/>
</ul></li><br/>
<br/>
<li><code>pt &lt;[+-]font-size&gt;</code><br/>
<br/>
<ul>define font size used for text elements (text, date, time, seconds ...)<br/>
can be given as absolute or relative value.<br/>
<br/>
Examples:<br/>
<code>pt 12</code><br/>
<code>pt +3</code><br/>
<code>pt -2</code><br/>
</ul></li><br/>
<br/>
<li><code>rect &lt;id&gt; &lt;x1&gt; &lt;y1&gt; &lt;x2&gt; &lt;y2&gt; &lt;r1&gt; &lt;r2&gt; [&lt;fill&gt;]</code><br/>
<br/>
<ul>create a rectangle<br/>
<br/>
id = element id<br/>
x1,y1 = upper left corner<br/>
x2,y2 = lower right corner<br/>
r1,r2 = radius for rounded corners<br/>
fill = rectangle will be filled with "rgb" color if set to 1<br/>
</ul></li><br/>
<br/>
<li><code>rgb &lt;rgb[a]&gt;</code><br/>
<br/>
<ul>define rgba value (hex digits!) used for text, lines, circles, ellipses<br/>
<br/>
<code>r = red value</code><br/>
<code>g = green value</code><br/>
<code>b = blue value</code><br/>
<code>a = alpha value used for opacity; optional</code><br/>
</ul></li><br/>
<br/>
<li><code>seconds &lt;id&gt; &lt;x&gt; &lt;y&gt; [&lt;format&gt;]</code><br/>
<br/>
<ul>print seconds<br/>
<br/>
id = element id<br/>
x,y = position<br/>
format = seconds will be preceeded by ':' if set to 'colon'; optional<br/>
</ul></li><br/>
<br/>
<li><code>text &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;text&gt;</code><br/>
<br/>
<ul>print text<br/>
<br/>
id = element id<br/>
x,y = position<br/>
text = text content to be printed<br/>
</ul></li><br/>
<br/>
<li><code>textbox &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;boxWidth&gt; &lt;boxHeight&gt; &lt;text&gt;</code><br/>
<br/>
<ul>create a textbox to print text with auto wrapping<br/>
<br/>
id = element id<br/>
x,y = upper left corner<br/>
boxWidth,boxHeight = dimensions of textbox<br/>
text = text to be printed in textbox<br/>
<br/>
<b>Important:</b> textboxes can not be responsive!<br/>
</ul></li><br/>
<br/>
<li><code>textboxalign &lt;align&gt;</code><br/>
<br/>
<ul>define horizontal alignment for text inside textboxes<br/>
<br/>
valid values: left center right justify<br/>
</ul></li><br/>
<br/>
<li><code>textdesign &lt;align&gt;</code><br/>
<br/>
<ul>define comma-separated list for text design and decoration<br/>
<br/>
valid values: underline overline line-through bold italic oblique clear<br/>
<br/>
Examples:<br/>
<code>
textdesign underline<br/>
textdesign bold,italic,underline
</code><br/>
<br/>
<b>Important:</b> "clear" resets all to default values!<br/>
</ul></li><br/>
<br/>
<li><code>thalign &lt;align&gt;</code><br/>
<br/>
<ul>define horizontal alignment for text output<br/>
<br/>
valid values: start middle end<br/>
</ul></li><br/>
<br/>
<li><code>time &lt;id&gt; &lt;x&gt; &lt;y&gt;</code><br/>
<br/>
<ul>print time<br/>
<br/>
id = element id<br/>
x,y = position<br/>
</ul></li><br/>
<br/>
<li><code>trash &lt;id&gt; &lt;x&gt; &lt;y&gt; &lt;scale&gt; &lt;foregroundColor&gt; &lt;backgroundColor&gt;</code><br/>
<br/>
<ul>print a trashcan with selectable colors for foreground and background<br/>
<br/>
id = element id<br/>
x,y = position<br/>
scale = scale to be used for resizing; may be factor or defined by width or height<br/>
foregroundColor = hex digits used for foreground<br/>
backgroundColor = hex digits used for background<br/>
</ul></li><br/>
<br/>
<li><code>tvalign &lt;align&gt;</code><br/>
<br/>
<ul>define vertical alignment for text output<br/>
<br/>
valid values: auto baseline middle center hanging<br/>
</ul></li><br/>
<br/>
</ul>
<br/>
<b>Author's notes</b><br/>
<br/>
<ul>
@ -1251,7 +1501,7 @@ Please read <a href="http://forum.fhem.de/index.php/topic,32828.0.html" target="
<h3>InfoPanel</h3>
<ul>
Sorry, keine deutsche Dokumentation vorhanden.<br/><br/>
Die englische Doku gibt es hier: <a href='http://fhem.de/commandref.html#InfoPanel'>GDS</a><br/>
Die englische Doku gibt es hier: <a href='commandref.html#InfoPanel'>InfoPanel</a><br/>
</ul>
=end html_DE
=cut

View File

@ -1,84 +0,0 @@
#
# 50 Pixel für die Gestaltung
# einer Kopfzeile freihalten
#
thalign "middle"
rgb "00FF00FF"
pt 24
text headLine 400 30 "Hier könnte Ihre Kopfzeile stehen..."
pt 16
rgb "7F7F7FFF" # grau
line - 0 50 800 50
# Definiere Layout als ButtonPanel
#
buttonpanel
# Farbe für ButtonText
#
rgb "4D4D4DFF"
# Farbe für Button
#
boxcolor "FF0000FF"
button 11 0 55 160 135 0 0 {"Button11Link"} {"Button11Text"}
boxcolor "00FF00FF"
button 12 160 55 320 135 0 0 {"+http://www.google.de"} {"Google in new"}
boxcolor "FF0000FF"
button 13 320 55 480 135 0 0 {"-http://www.google.de"} {"Google in same"}
boxcolor "00FF00FF"
button 14 480 55 640 135 0 0 {"http://www.google.de"} {"Google invisible"}
boxcolor "FF0000FF"
button 15 640 55 800 135 0 0 {"Button15Link"} {"Button15Text"}
boxcolor "00FF00FF"
button 21 0 135 160 215 0 0 {"Button21Link"} {"Button21Text"}
boxcolor "FF0000FF"
button 22 160 135 320 215 0 0 {"Button22Link"} {"Button22Text"}
boxcolor "00FF00FF"
button 23 320 135 480 215 0 0 {"Button23Link"} {"Button23Text"}
boxcolor "FF0000FF"
button 24 480 135 640 215 0 0 {"Button24Link"} {"Button24Text"}
boxcolor "00FF00FF"
button 25 640 135 800 215 0 0 {"Button25Link"} {"Button25Text"}
boxcolor "FF0000FF"
button 31 0 215 160 295 0 0 {"Button31Link"} {"Button31Text"}
boxcolor "00FF00FF"
button 32 160 215 320 295 0 0 {"Button32Link"} {"Button32Text"}
boxcolor "FF0000FF"
button 33 320 215 480 295 0 0 {"Button33Link"} {"Button33Text"}
boxcolor "00FF00FF"
button 34 480 215 640 295 0 0 {"Button34Link"} {"Button34Text"}
boxcolor "FF0000FF"
button 35 640 215 800 295 0 0 {"Button35Link"} {"Button35Text"}
boxcolor "00FF00FF"
button 41 0 295 160 375 0 0 {"Button41Link"} {"Button41Text"}
boxcolor "FF0000FF"
button 42 160 295 320 375 0 0 {"Button42Link"} {"Button42Text"}
boxcolor "00FF00FF"
button 43 320 295 480 375 0 0 {"Button43Link"} {"Button43Text"}
boxcolor "FF0000FF"
button 44 480 295 640 375 0 0 {"Button44Link"} {"Button44Text"}
boxcolor "00FF00FF"
button 45 640 295 800 375 0 0 {"Button45Link"} {"Button45Text"}
boxcolor "999999FF"
button 51 0 375 160 430 0 0 {"Button51Link"} {"Button51Text"}
boxcolor "CCCCCCFF"
button 52 160 375 320 430 0 0 {"Button52Link"} {"Button52Text"}
boxcolor "999999FF"
button 53 320 375 480 430 0 0 {"Button53Link"} {"Button53Text"}
boxcolor "CCCCCCFF"
button 54 480 375 640 430 0 0 {"Button54Link"} {"Button54Text"}
boxcolor "999999FF"
button 55 640 375 800 430 0 0 {"Button55Link"} {"Button55Text"}
#

View File

@ -1,234 +0,0 @@
# Schriftartfamilie festlegen
#
font arial
# Farbe für die nächsten Aktionen festlegen
# gültig bis zur nächsten Definition per rgb
#
# Format: rrggbbaa
# rr gg bb = rgb Werte (hexadezimal)
# aa = Deckkraft (hexadezimal) je höher der Wert,
# umso höher die Deckkraft
#
rgb "7F7F7FFF" # graue, voll deckend
# Linien zeichnen
#
# Format: line <id> <x1> <y1> <x2> <y2> [<th>]
# id = Name des Objekts
# x1,y1 = obere linke Ecke des Rechtecks
# x2 y2 = untere rechte Ecke des Rechtecks
# th = Linienstärke (in Pixel), optional, default=1
#
line - 0 150 800 150 2
line - 200 0 200 400 2
line - 0 400 800 400
line - 600 0 600 400
rgb "00FF00FF" # Fadenkreuz in grün
line - 400 100 400 400
line - 100 300 700 300
# pt Schriftgröße in Pixel
# gültig bis zur nächsten Definition
#
pt 24
rgb "FFFFFFFF" # Schriftfarbe weiß, voll deckend
# Text zentriert ausgeben
#
thalign "middle"
# Text ausgeben
# Format: text <id> <x> <y> {<text>}
#
text - 400 25 "InfoPanel"
# Text linksbündig ausgeben
#
thalign "start"
# Datum ausgeben
# Format: date <id> <x> <y>
#
date - 50 25
# Text rechtsbündig ausgeben
#
thalign "end"
# Uhrzeit ausgeben
# Format: time <id> <x> <y>
#
time - 750 25
# Rechteck zeichnen
# Format: rect <id> <x1> <y1> <x2> <y2> <rx> <ry> [<filled>]
# id = Name des Objekts
# x1,y1 = obere linke Ecke des Rechtecks
# x2 y2 = untere rechte Ecke des Rechtecks
# rx,ry = Radien für abgerundete Ecken
# filled = Rechteck füllen (0|1)
#
rgb FF00007F
rect - 200 150 400 300 0 0 1 # rot gefüllt ohne Abrundung
rect - 410 160 590 290 10 10 1 # rot gefüllt mit runden Ecken
# Rechteck als Link festlegen
# Format: area <id> <x1> <y1> <x2> <y2> <target>
# id = Name des Objekts
# x1,y1 = obere linke Ecke des Rechtecks
# x2 y2 = untere rechte Ecke des Rechtecks
# target = Ziel-URL
#
# wir verwenden das linke rote Rechteck
# um zu fhem zu verlinken
area - 200 150 400 300 http://www.fhem.de
# condition funktioniert wie in 02_RSS.pm
#
# condition { ReadingsVal('HMinfo', 'ERR_battery', 0) }
condition 1
# Grafiken einbinden
# Format: img <id> <x> <y> <scale> <srcType> <data>
# id = Name des Objekts
# x,y = obere linke Ecke der Grafik
#
# wir legen ein rotes Quadrat 48x48 hinter das Bild
rgb "FF0000FF"
rect - 700 200 747 247 2 2 1
# jetzt kommt das Bild in einer Skalierung
# Breite = 46 Pixel
#
img - 701 201 w46 file "./www/images/fhemSVG/batterie.svg"
# Kreis zeichnen
# Format: circle <id> <x> <y> <r> [<filled>]
# id = Name des Objekts
# x,y = Mittelpunkt des Kreises
# r = Radius
# filled = Rechteck füllen (0|1)
#
rgb "FFFF005F" # gelb
circle - 700 350 50 1
circle - 720 370 10 0
# Kreis zeichnen
# Format: ellipse <id> <x> <y> <rx> <ry> [<filled>]
# id = Name des Objekts
# x,y = Mittelpunkt des Kreises
# rx,ry = Radien der Ellipse
# r = Radius
# filled = Rechteck füllen (0|1)
#
rgb "0000FF5F" # blau
ellipse - 100 300 50 70 1
ellipse - 100 300 30 20 0
# Plots aus fhem einbinden
# Format: <id> <x> <y> <scale> <inline> <PlotName[;zoom][;offset]>
# id = Name des Objekts
# x,y = obere linke Ecke des Plots
# scale = Skalierungsfaktor
# inline = Plot als Link (0) oder als BASE64 (1) einfügen
# Plotname = Name des SVG devices in fhem
# zoom = Darstellungsbereich des Plots
# offset = Offset des Plots
#
# bei Bedarf ein farbiges Rechteck hinter den Plot legen:
#
rgb "5858587F" # dunkelgrau
rect - 0 420 800 580 5 5 1
# jetzt den Plot einbinden
plot - 0 420 1 1 "SVG_out_Balkon;day"
rgb "FFFFFFFF"
thalign "start"
# Textausrichtung vertikal
#
tvalign "baseline"
text - 10 150 "baseline"
tvalign "middle"
text - 110 150 "middle"
tvalign "center"
text - 610 150 "center"
tvalign "hanging"
text - 710 150 "hanging"
tvalign "baseline"
# Sekunden anzeigen:
#
seconds - 300 350 # Sekunden ohne Doppelpunkt
seconds - 500 350 colon # Sekunden mit Doppelpunkt
## Textbox anlegen
font arial
rgb "FFFFFFFF"
pt 12
# boxcolor: Hintergrundfarbe der Textbox
# Format: identisch zu rgb
#
boxcolor "FF0000FF"
# padding: äußere Rahmenbreite der Hintergrundfarbe
# Format: padding <n> (pixel)
#
padding "5"
# textbox
# Format: textbox <id> <x> <y> <width> <height> <text>
#
textbox - 210 50 180 50 "bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla"
#