Modul PostMe: Unterschied zwischen den Versionen

Version vom 31. Oktober 2016, 20:38 Uhr

Achtung: Work in progress. Bitte vorläufig Finger weg !

Einbinden in die FHEM-Anzeige

PostMes können in jede beliebige Webseite eingebunden werden.

Mit dem Code

<embed src="/fhem/PostMe_widget?type=pins&postit=<devicename>"/>

wird eine interaktive Liste aller Titelzeilen der PostMes dieses Systems angezeigt.

Mit dem Code

<embed src="/fhem/PostMe_widget?type=pin&postit=<devicename>&name=<name>"/>

wird ein einzelnes PostMe mit dem Namen <name> als Titelzeile angezeigt. In diesen Darstellungen kann durch die Maus erreicht werden, dass zur einzeiligen Anzeige der Titelzeile der volle Inhalt des PostMes angezeigt wird.

Wenn das Attribut postmeClick auf 0 gesetzt ist (Default-Wert), erfolgt die Anzeige und das Löschen des PostMe-Inhaltes durch Überfahren bzw. Wegfahren des Mauszeigers auf die Titelzeile.
Wenn das Attribut postmeClick auf 1 gesetzt ist, muss die Titelzeile angeklickt werden, um den Inhalt zu sehen - und das entsprechens Fenster bzw. die Dialogbock explizit geschlossen werden.

Welcher Art die Anzeige des PostMe-Inhalte sist, wird durch ein anderes Attribut geregelt.

Wenn postmeStyle=jQuery" (Default-Wert), erfolgt die Anzeige in einer jQuery-Dialogbox.
Wenn postmeStyle=HTML", erfolgt die Anzeige in einem neuen (kleinen) Browser-Fenster.
Wenn postmeStyle=SVG" (Default-Wert), erfolgt die Anzeige in einer SVG-Viewbox.

Aussehen der widgets

Die oben genannten Widgets werden in ihrem Aussehen über Cascading Stylesheets gesteuert. Drei Klassen sind dafür relevant, sie sollten in die Datei style.css (oder, wenn man einen anderen Stylesheet-Präfix gesetzt hat, <präfix>style.css) eingetragen werden. Mit beispielhafter Farbe für die Widgets:

.postmeclass { background-color:#ffee80; padding:10px; border-color:black; border:groove}

.postmeclass2 { background-color:#ffee80; padding:10px;}

div.ui-widget-content {background-color: #ffee80; border-color:red;margin-top:-20px}

@@ Zeile 2: / Zeile 2: @@
 ===Einbinden in die FHEM-Anzeige===
-Zuerst sollte
+PostMes können in jede beliebige Webseite eingebunden werden.
+* Mit dem Code
+ <embed src="/fhem/PostMe_widget?type=pins&postit=''<devicename>''"/>
+wird eine interaktive Liste aller Titelzeilen der PostMes dieses Systems angezeigt.
+* Mit dem Code
+ <embed src="/fhem/PostMe_widget?type=pin&postit=''<devicename>''&name=''<name>''"/>
+wird ein einzelnes PostMe mit dem Namen ''<name>'' als Titelzeile angezeigt.
+In diesen Darstellungen kann durch die Maus erreicht werden, dass zur einzeiligen Anzeige der Titelzeile der volle Inhalt des PostMes angezeigt wird.
+* Wenn das Attribut ''postmeClick'' auf 0 gesetzt ist (Default-Wert), erfolgt die Anzeige und das Löschen des PostMe-Inhaltes durch Überfahren bzw. Wegfahren des Mauszeigers auf die Titelzeile.
+* Wenn das Attribut ''postmeClick'' auf 1 gesetzt ist, muss die Titelzeile angeklickt werden, um den Inhalt zu sehen - und das entsprechens Fenster bzw. die Dialogbock explizit geschlossen werden.
+Welcher Art die Anzeige des PostMe-Inhalte sist, wird durch ein anderes Attribut geregelt.
+* Wenn ''postmeStyle=jQuery" (Default-Wert), erfolgt die Anzeige in einer jQuery-Dialogbox.
+* Wenn ''postmeStyle=HTML", erfolgt die Anzeige in einem neuen (kleinen) Browser-Fenster.
+* Wenn ''postmeStyle=SVG" (Default-Wert), erfolgt die Anzeige in einer SVG-Viewbox.
+====Aussehen der widgets====
+Die oben genannten Widgets werden in ihrem Aussehen über Cascading Stylesheets gesteuert. Drei Klassen sind dafür relevant, sie sollten in die Datei '''style.css''' (oder, wenn man einen anderen Stylesheet-Präfix gesetzt hat, <präfix>style.css) eingetragen werden. Mit beispielhafter Farbe für die Widgets:
-  #logo    { margin-top:10px; margin-left:20px; width:120px; height:132px;
+  .postmeclass { background-color:#ffee80; padding:10px; border-color:black; border:groove}
-           background-image:url(../images/default/fhemicon.png); }
+ .postmeclass2 { background-color:#ffee80; padding:10px;}
+ div.ui-widget-content {background-color: #ffee80; border-color:red;margin-top:-20px}