55_InfoPanel.pm - Wer 02_RSS.pm mag, wird auch das hier lieben...

[betateilchen]

Angeregt durch das Modul 02_RSS.pm kamen mir einige Änderungsideen, die letztendlich dazu führten, dass ein neues Modul entstehen musste.

(http://up.picr.de/20919993jw.jpg)

Im Verzeichnis ./contrib/InfoPanel befinden sich das Demolayout, um die hier gezeigte Ausgabe zu generieren.

Was ist nun das Neue gegenüber RSS? Nun, die gesamte Ausgabe ist kein Bild, sondern eine html Seite mit SVG Elementen. Das heißt, das gesamte Rendern der Anzeige erfolgt im Browser und nicht mehr auf der fhem Plattform.

Vom Modul 02_RSS wurde die Philosophie einer einfach zu erstellenden Layoutdatei übernommen. Die Syntax der einzelnen Elemente orientiert sich weitgehend an den Layoutdateien für 02_RSS. Eine wichtige Änderung gibt es allerdings: Alle Elemente, die anzuzeigende Objekte darstellen, brauchen eine ID. Die kann man sich eigentlich selbst ausdenken, wenn man nur einen - angibt, erzeugt das Modul automatisch für jedes Objekt eine ID. Sinn dieser ID ist die Möglichkeit für JS-Masochisten, auf jedes Element zugreifen und es modifizieren zu können.

Im Beispiellayout sind alle derzeit implementierten Darstellungsmöglichkeiten mit Beispielen enthalten.
Bei der Plotanzeige müsst Ihr natürlich einen Plotnamen aus Eurer eigenen Installation angeben.

Die Attribute für das InfoPanel-device sind nahezu identisch zu den Attributen des RSS-Moduls (refresh, bgcolor...) und werden in der commandref beschrieben.

Die turtle-Grafik (moveby, moveto, x/y als Positionsangaben) funktioniert wie gewohnt.


Softwarevoraussetzung:

Das Modul benötigt die perl Module MIME::Base64 und Image::Info Für Debian Anwender: die Pakete heißen libmime-base64-perl und libimage-info-perl

Die GD Library und die libRSVG werden NICHT benötigt!

[JoWiemann]

Hallo Betateilchen,

sieht echt gut aus. Danke für die Idee und Umsetzung.

Bei meinen Browsern Win7 & IE11 und Win7 & aktueller Firefox funktioniert leider die Positionierung der Schrift nicht. (siehe Anhang) Einen Plot habe ich noch nicht eingebunden.

CubieTruck mit Debian
Deine demo.layout

Grüße Jörg

[betateilchen]

Na wenn nur die vertikale Schriftausrichtung nicht funktioniert, damit lässt sich leben  Horizontal funktioniert es ja zumindest. Die Ausrichtung einer Schrift ist in erster Linie von der Schriftart selbst abhängig. Hast Du mal interessehalber eine andere Schrift probiert?

[JoWiemann]

Noch nicht. Werde ich aber probieren.

Nur Interesse halber. Aus rereadcfg bei 02_RSS ist reread bei Dir geworden. Gewollt ?

Grüße Jörg

PS: Meine Plots funktionieren.

[betateilchen]

Aus rereadcfg bei 02_RSS ist reread bei Dir geworden. Gewollt ?

Ja. Wobei Du das reread nicht brauchst, wenn Du Änderungen am Frontend über "Edit files" durchführst. Dann wird nämlich nach einer Layoutänderung das Layout automatisch neu geladen.

[JoWiemann]

OK, danke für die Info.

[JoWiemann]

Hast Du mal interessehalber eine andere Schrift probiert?

Hallo Betateilchen,

hab jetzt mal ein paar Schriftarten durchgespielt. Alle mit dem selben Ergebnis. Na ja, vielleicht stoße ich ja noch mal auf eine die Dein Ergebnis reproduziert. Ansonsten, bisher keine Fehler gefunden. Hut ab.

Grüße Jörg

[betateilchen]

IE und FF sind berüchtigt für solche Effekte.
In meinem Chrome und auf den Tablet-Browsern funktioiert das alles recht gut.

[betateilchen]

Ein großer Vorteil der svg-Daten ist beispielsweise, dass man für Mülltonnen nur noch eine einzige Vorlagendatei braucht und die gewünschte Farbe einfach on-the-fly festlegt:

Beispiel: weiße Tonne auf blauem Grund:

Code Auswählen Erweitern


# weiss auf blau
rgb "0000FFFF"
rect -  5 1 52 48 2 2 1
img  - 11 2 h46 data {getTrash('white')}


In der Funktion getTrash(<color>) steckt in der 99_myUtils.pm folgender Code:

Code Auswählen Erweitern


sub getTrash($) {
  my ($color) = @_;
  my ($data,$readBytes);
  my $trash = '/opt/fhem_add/images/trash.svg';
  my $length = -s "$trash";

  open(GRAFIK, "<", $trash) or die("File not found $!");
  binmode(GRAFIK);
  $readBytes = read(GRAFIK, $data, $length);
  close(GRAFIK);

  $data =~ s/\|color\|/$color/g;
  return $data;
}


Die verwendete Datei trash.svg habe ich hier angehängt. Der Pfad, wo die Datei liegt, muss natürlich in der Funktion korrekt angegeben werden.

[betateilchen]

Gerade habe ich eine aktualiserte Moduldatei sowie ein aktualisertes Demo-Layout eingecheckt, in dem die neuen Layoutobjekte

• textbox
• boxcolor
• padding

enthalten sind.

(http://forum.fhem.de/index.php?action=dlattach;topic=32828.0;attach=26312)


---

[betateilchen]

Ab sofort gibt es die Möglichkeit, Layoutteile als Include zu verwenden.

Code Auswählen Erweitern


# hier startet die eigentliche Layoutdatei
#

rgb "7F7F7FFF" # grau
line - 0 50 800 50


# nun kommt eine Include Datei mit den Kopfzeilen:
#

@include ./FHEM/btip_tpl_kopfzeile.layout


# Ab hier geht es mit der
# eigentlichen Layoutdatei weiter
#

condition 1
font arial
pt 20
rgb "FF0000FF"
thalign "middle"
text - .5 .5 "Hallo"



erzeugt folgendes Ergebnis:

(http://forum.fhem.de/index.php?action=dlattach;topic=32828.0;attach=26347)

Die Includes können in beliebiger Tiefe verschachtelt werden - was ich aber nicht empfehle, das dies schnell sehr unübersichtlich wird.

Wichtig:

• Vor und nach einer @include Zeile im Layout sollte unbedingt eine Leerzeile im Layout sein
• Eine @include Zeile kann nicht in der Form "#@include ..." auskommentiert werden! Alternativ: das @ direkt durch ein # ersetzen.

[betateilchen]

Ausserdem wurde ein neues Item "textboxalign" implementiert, mit dem die Textausrichtung innerhalb einer Textbox festgelegt wird. Zulässige Werte sind "left" "center" "right" "justify"

Beispiel:

Code Auswählen Erweitern

textboxalign center

[JoWiemann]

Hallo Betateilchen,

funktioniert.

Bei Conrad gibt im Moment ein Tablet für unter 50.-€. Damit rückt die "moderne" Fernbedienung in Reichweite.

Grüße Jörg

[Hollo]

Ab sofort gibt es die Möglichkeit, Layoutteile als Include zu verwenden...

Das klingt sehr vielversprechend. 
So hatte ich das bisher mit der "Kopf- und Fusszeile" angedacht und ein "Grundlayout" gespeichert, welches ich dann in die anderen kopieren musste.
Macht Änderungen wesentlich einfacher und übersichtlicher.

[Benni]

... ja, ich denke ich werde es lieben!

Ich freue mich schon aufs WE, da habe ich dann nämlich endlich auch mal Zeit mich mit Info-Panel zu beschäftigen.

Gruß Benni.