02_RSS und 98_SVG per html kombinieren

betateilchen · 18 Januar 2015, 17:19:48

Hallo Boris, hallo Rudi!

Ich sitze gerade über einer Änderung an der 02_RSS.pm mit der man mittels neuem Layout-Tag "embed" beliebige html-Objekte in die RSS Ausgabe (in der html Seite) einbinden kann.

Hintergrund: Irgendwann will ich SVG plots direkt in der RSS-Webseite haben und nicht mehr als plotAsPng(). Prinzipiell bin ich auch schon recht weit damit gekommen. Der Layout-Eintrag

Code Auswählen

embed 0 224 absolute <embed src="http://cubie.betateilchen.de:8083/fhem/SVG_showLog?dev=SVG_out_Balkon&amp;logdev=fhemDbLog&amp;gplotfile=SVG_out_Balkon&amp;logfile=HISTORY&amp;pos=" type="image/svg+xml" width="800" height="160" name="SVG_out_Balkon">

sorgt dafür, dass folgender HTML-Quelltext generiert wird:

Code Auswählen


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>wztablet</title>
<meta http-equiv="refresh" content="20"/>
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script><script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script><script type="text/javascript">var wvcDevices = {12345: 'wz_Tablet'}</script><script type="text/javascript" charset="UTF-8"></script>
</head>
<body topmargin="0" leftmargin="0" margin="0" padding="0">
<div id="rss_wztablet">
<img src="http://cubie.betateilchen.de:8083/fhem/rss/wztablet.png" usemap="#map"/>
<map name="map" id="map">
<area shape="rect" coords="0,  0,800,387" href="https://cubie.betateilchen.de/tab/panel.html" target="_top" /><area shape="rect" coords="0,388,800,442" href="https://cubie.betateilchen.de/tab/warntext.html" target="_top" />
</map>
</div>
<div style="position:absolute; left: 0px; top: 224px;">
<embed src="http://cubie.betateilchen.de:8083/fhem/SVG_showLog?dev=SVG_out_Balkon&amp;logdev=fhemDbLog&amp;gplotfile=SVG_out_Balkon&amp;logfile=HISTORY&amp;pos=" type="image/svg+xml" width="800" height="160" name="SVG_out_Balkon">
</div>
</body>
</html>

Daraus resultiert folgende Ausgabe im Browser:

(http://up.picr.de/20723926fo.jpg)

Soweit, so gut

Nun brauche ich ein bisschen Unterstützung

@Rudi:
Ich wünsche mir eine Funktion in 98_SVG, die mir das html-Gedöns für einen Plot anhand seines Namens fix und fertig als String zurückliefert. Also anstatt plotAsPng(<plotName>) eine analoge Funktion plotAsHtml(<plotName>). Ziel soll letztendlich sein, die Plots im Browser zu rendern.

@Boris:
Ich brauche eine Idee, wie ich in der Layout-Definition per condition abfragen kann, ob ein html erzeugt werden soll oder ein anderer Typ. Denn das embed hat natürlich nur in der html-Ausgabe Sinn. Andererseits will ich in den anderen Varianten weiterhin die Möglichkeit haben, mit plotAsPng() zu arbeiten.

Danke für Unterstützung und Anregungen

rudolfkoenig · 18 Januar 2015, 18:14:14

Je nach Detailtiefe:

SVG_showLog()
SVG_doShowLog()
SVG_render()

Dr. Boris Neubert · 18 Januar 2015, 18:18:42

Hallo Udo,

Zitat von: betateilchen am 18 Januar 2015, 17:19:48
Ich sitze gerade über einer Änderung an der 02_RSS.pm mit der man mittels neuem Layout-Tag "embed" beliebige html-Objekte in die RSS Ausgabe (in der html Seite) einbinden kann.

@Boris:
Ich brauche eine Idee, wie ich in der Layout-Definition per condition abfragen kann, ob ein html erzeugt werden soll oder ein anderer Typ. Denn das embed hat natürlich nur in der html-Ausgabe Sinn. Andererseits will ich in den anderen Varianten weiterhin die Möglichkeit haben, mit plotAsPng() zu arbeiten.

löst Du dann bitte gerade die Aufgabe mit, eine URL in einem iFrame darzustellen, um den Live-Stream einer Kamera einzublenden?

Mir ist noch nicht klar, wie Du das machst. Die vom RSS-Modul generierte HTML-Seite ist ja nichts anderes als ein per img-Tag erstellter Verweis auf die URL, welche die Grafik zurückliefert.

Das heißt:
- Die Erzeugung der Grafik muss embed ignorieren.
- Bei der HTML-Erzeugung werden die embeds aus dem Layout gezogen und behandelt.
- Wenn kein HTML erzeugt wird, soll bei der Erzeugung der Grafik statt eines Embeds ein andere Grafik eingefügt werden.

Mir gefällt das mit den ignorierten embeds nicht. Ich plädiere dafür, dass über ein Attribut zu lösen, siehe area für die ClickableImageMap.

Das geht nur, wenn Du aus der HTML-Seite bei der URL im img-Tag einen weiteren Parameter übergibst, der dann über das %params-Hash durchgereicht wird.

Vorschlag: alle Parameter, die bei RSS übergeben werden, werden im %params-Hash durchgereicht in einer Form, dass man darauf prüfen kann. Das kostet kaum Aufwand in der Programmierung und ermöglicht es, abhängig vom Aufrufparameter des Bildes oder der HTML-Seite verschiedene Darstellungsarten zu ermöglichen.

Viele Grüße
Boris

betateilchen · 18 Januar 2015, 18:32:17

@Rudi: danke, schau ich mir an, ob ich davon was gebrauchen kann

@Boris:
Prinzipiell ist das Ganze einfacher als Du denkst. Ich hatte doch oben schon ein Beispiel-HTML gepostet. Dank div-Containern. Im ersten Container ist das "übliche" RSS Bild. In weiteren Containern befindet sich eingebundene Objekte, die sich per div-Tags problemlos irgendwo in der HTML Ausgabe positionieren lässt. In so einem Container kann man prinzipiell auch einen iframe mit einer Livecam unterbringen (hab aber keine solche Hardware zum Testen zur Verfügung)

Und ich will nix automatisch ignorieren, ich will das bei der Erstellung der Layoutdatei angeben. Denn ich brauche den Mixed-Mode.

Code Auswählen


condition <outputType != html>
img .5 304 1 png data { plotAsPng("SVG_out_Balkon")}

condition <outputType == html>
embed 0 224 absolute balkonWetter <embed src="/fhem/SVG_showLog?dev=SVG_out_Balkon&amp;logdev=fhemDbLog&amp;gplotfile=SVG_out_Balkon&amp;logfile=HISTORY&amp;pos=" type="image/svg+xml" width="800" height="160" name="SVG_out_Balkon">

condition 1

Ich schick Dir mal eine patch-Datei per email, dann siehst Du, wie ich mir das vorstelle.

Syntax ist:

Code Auswählen

embed <x> <y> <posType> <divId> <arg>

betateilchen · 18 Januar 2015, 20:22:21

Zitat von: betateilchen am 18 Januar 2015, 18:32:17
@Rudi: danke, schau ich mir an, ob ich davon was gebrauchen kann

Hat leider nix genützt. Vermutlich hatte ich mich nicht exakt ausgedrückt, egal, ich habs per eigener Funktion gelöst.

Interessanterweise wird jetzt im Browser der Container mit dem SVG Plot schneller dargestellt als das eigentliche RSS-Bild in der HTML-Seite. Das macht die Anzeige auf dem Tablet extrem unruhig

betateilchen · 18 Januar 2015, 20:26:15

Zitat von: Dr. Boris Neubert am 18 Januar 2015, 18:18:42
Ich plädiere dafür, dass über ein Attribut zu lösen, siehe area für die ClickableImageMap.

Dieser Krampf hat mir noch nie gefallen. Übrigens kann man auch mit dem area Attribut bereits beliebige HTML-Elemente in die Webseite einfügen, solange es nicht auf eine bestimmte Positionierung ankommt.

betateilchen · 18 Januar 2015, 22:27:45

Zitat von: Dr. Boris Neubert am 18 Januar 2015, 18:18:42
löst Du dann bitte gerade die Aufgabe mit, eine URL in einem iFrame darzustellen, um den Live-Stream einer Kamera einzublenden?

Also Youtube Videos im RSS funktionieren schonmal ganz prima

Man sollte nur daran denken, den RSS-refresh (da nicht abschaltbar) auf einen sehr hohen Wert zu setzen.

(http://up.picr.de/20729483fx.jpg)

Simples RSS-Layout:

Code Auswählen

font /usr/share/fonts/truetype/ttf-liberation/LiberationSans-Regular.ttf

text 50 100 "Test RSS mit iframe"

embed 100 200 2 absolute testIframe "<iframe width=\"420\" height=\"315\" src=\"//www.youtube.com/embed/9HShl_ufOFI\" frameborder=\"0\" allowfullscreen></iframe>"

#

Ich wüsste nicht, warum das nicht auch mit einer eigenen Webcam funktionieren sollte.

betateilchen · 18 Januar 2015, 22:40:02

Ich wünsche mir, dass man mit dem Attributwert refresh=0 die Aktualisierung abschalten kann...

Code Auswählen


  my $r= (defined($refresh) && $refresh > 0) ? "<meta http-equiv=\"refresh\" content=\"$refresh\"/>\n" : "";