Bastelarbeit: 02_RSSsvg.pm

betateilchen · 21 Januar 2015, 01:45:49

Ziel:

RSS Ausgabe komplett als HTML und SVG
bessere Bildqualität der Ausgabe
RSS erstellen ohne GD Library und aufwändiges Rendern auf der fhem Plattform
Keine TTF fonts mehr auf der fhem Plattform notwendig
direktes Einbinden von fhem plots, die ja ohnehin schon als SVG daherkommen

(http://up.picr.de/20748644st.jpg)

Die Layout-Datei bleibt weitgehend kompatibel zu den bestehenden Layouts:



rgb "7F7F7FFF" # grau
line 0  50 800  50
line 0 220 800 220
line 0 388 800 388
line 200 50 200 220
line 400 50 400 220
line 600 50 600 220

rgb "585858"
rect 0 222 800 386 1

font arial
pt 24
rgb "FFFFFF" # weiss

tvalign "middle"
thalign "start"
date  10 25
thalign "end"
time 790 25

thalign "middle"
rgb "FF0000"
text 300 25 { ReadingsVal("BMP180","temperature","n/a "). "°C";  }

rgb "00FF00" # grün
text 500 25 { int(ReadingsVal("BMP180","pressure-nn","0")). " hPa"  }

plot 0 224 1 "SVG_bmpLog_1"

#

Ergebnis: simpler html-Quelltext, der sauschnell zum Browser übertragen und dort gerendert 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>svgtest</title>
<meta http-equiv="refresh" content="60"/>
</head>
<body topmargin="0" leftmargin="0" margin="0" padding="0">
<svg width="800" height="433" viewBox="0 0 800 433" style=" stroke-width: 0px; background-color:000000; " >
<line x1="0" y1="50" x2="800" y2="50" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<line x1="0" y1="220" x2="800" y2="220" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<line x1="0" y1="388" x2="800" y2="388" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<line x1="200" y1="50" x2="200" y2="220" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<line x1="400" y1="50" x2="400" y2="220" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<line x1="600" y1="50" x2="600" y2="220" style="stroke:rgb(127,127,127); stroke-width:1; stroke-opacity:1; " />
<rect x="0" y="222" width="800" height="164" style="fill:rgb(88,88,88); fill-opacity:1; stroke-width:0;" />
<text x="10" y="25" fill="rgb(255,255,255)" fill-opacity="1" font-size="24px" font-family="arial" text-anchor="start" alignment-baseline="middle" >
21.01.2015
</text>
<text x="790" y="25" fill="rgb(255,255,255)" fill-opacity="1" font-size="24px" font-family="arial" text-anchor="end" alignment-baseline="middle" >
01:39
</text>
<text x="300" y="25" fill="rgb(255,0,0)" fill-opacity="1" font-size="24px" font-family="arial" text-anchor="middle" alignment-baseline="middle" >
33.8°C
</text>
<text x="500" y="25" fill="rgb(0,255,0)" fill-opacity="1" font-size="24px" font-family="arial" text-anchor="middle" alignment-baseline="middle" >
1014 hPa
</text>
<image id="SVG_bmpLog_1" x="0" y="224" width="800" height="160" 
xlink:href="/fhem/SVG_showLog?dev=SVG_bmpLog_1&amp;logdev=bmpLog&amp;gplotfile=SVG_bmpLog_1&amp;logfile=CURRENT" />
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>

betateilchen · 21 Januar 2015, 14:54:24

Zum Thema Qualitätsverbesserung:

Der plot oben im Bild wurde per plotAsPng() aus 98_SVG eingebunden, der untere Plot direkt als SVG - der Unterschied ist sehr deutlich.

(http://up.picr.de/20752279pz.jpg)

McCavity · 22 Januar 2015, 08:02:35

Ähm... wäre da zur besseren Beurteilung des Bildes nicht .png als Ausgabeformat besser gewesen, als .jpg...? So gehen doch die Details in den JPG-Artefakten verloren...

Ist ja nur 'ne Anregung

LG

McCavity

Matscher · 22 Januar 2015, 08:41:00

Unabhängig davon, wäre das so oder so ein Verbesserung.

Ich finde es sehr gut und bin gespannt auf das erste Release!

Hollo · 22 Januar 2015, 09:29:38

Das ist sehr vielversprechend.
Wenn das "Rendern" auf dem Raspi wegfällt, könnte das die Lösung so einiger Probleme sein/werden... weisses Bild, Stillstand, Vollauslastung, HMLAN-Disconnects

Ich bin gespannt und danke Dir schon jetzt für Deine Mühen.

betateilchen · 22 Januar 2015, 09:30:54

Zitat von: McCavity am 22 Januar 2015, 08:02:35
.png als Ausgabeformat besser gewesen, als .jpg...?

Der Screenshot war sogar ein png aber der Bilderhoster macht daraus ein jpg.

Zitat von: McCavity am 22 Januar 2015, 08:02:35
Ist ja nur 'ne Anregung

Oder vielleicht doch nur Klugschei...ei?

Zitat von: Matscher am 22 Januar 2015, 08:41:00
bin gespannt auf das erste Release!

Das Modul ist weitgehend fertig. Aber ich muss noch paar Dinge lösen:

textbox funktioniert noch nicht (da scheint es nichts "einfaches" in SVG zu geben)
wechselnde Hintergrundbilder
Darstellungsprobleme auf vielen Tablet-Browsern

Und dann muss ich mir noch einen neuen Namen für das Projekt ausdenken. Denn mit RSS wird das Endergebnis nicht mehr viel zu tun haben (genauer: nix mehr), das Ergebnis geht mehr in Richtung "Info-Panel".

In einer späteren Ausbaustufe dann vielleicht sogar interaktiv, womit es sich dann in Richtung Frontend entwickeln würde (aber das ist Zukunftsmusik).

McCavity · 22 Januar 2015, 11:31:43

Zitat von: betateilchen am 22 Januar 2015, 09:30:54
Oder vielleicht doch nur Klugschei...ei?

Sprich's ruhig aus: Klugscheißerei. Ja, das war es zu einem gewissen Grad, besonders Deshalb, weil Du in Deinem RSS-Workshop (den ich übrigens auch sehr gut fand, das nur am Rande) je selbst genau auf die Unterschiede JPG <-> PNG eingegangen bist. Deshalb hat es mich ja so gewundert, daß ich a) in dem Bild plötzlich Artefakte entdeckte und dann b) beim Nachprüfen auf ein .jpg stieß. Da ich mir nicht erklären konnte, wie jemandem, der die Unterschiede auf jeden Fall kennt, so ein "Lapsus" unterlaufen kann (daß ein Provider ein überlegenes Format einfach in ein minderwertigeres ändert war mir auch neu), wollte ich halt mal freundlich(! Deshalb die "Anregung"!) nachfragen. Aber gut, wenn das Klugscheißerei ist, dann kann ich hervorragend damit leben.

Schwamm drüber, das ist eh Off-Topic. On-Topic freue auch ich mich auf das Modul, da mein schwachbrüstiger RPI nach jeder Performanceverbesserung lechzt - alles, was ich auf den Browser auslagern kann, belastet ihn nicht

LG

McCavity

betateilchen · 23 Januar 2015, 13:42:04

Zitat von: betateilchen am 22 Januar 2015, 09:30:54
Und dann muss ich mir noch einen neuen Namen für das Projekt ausdenken. Denn mit RSS wird das Endergebnis nicht mehr viel zu tun haben (genauer: nix mehr), das Ergebnis geht mehr in Richtung "Info-Panel".

Und genau deshalb wird das neue Modul auch 55_InfoPanel.pm heissen, um jede Verwechslungsgefahr und "Vergleiche" mit dem RSS Modul auszuschließen. Es soll definitiv KEIN Ersatz für 02_RSS.pm werden. Ich verwende lediglich noch viele Ideen und Erfahrungen aus dem RSS Modul, vor allem was das Layoutfile und dessen Auswertung angeht.

Zu gegebener Zeit werde ich dann einen neuen Thread eröffnen.

(http://up.picr.de/20768702zf.jpg)

Die Symbole oben rechts:

Schneeflocke: es ist unter 4°C kalt
DWD Logo: es gibt eine Wetterwarnung (wird unten im roten Feld angezeigt)
blaue Tonne: heute ist Altpapierabfuhr

betateilchen · 26 Januar 2015, 16:35:40

Zitat von: betateilchen am 23 Januar 2015, 13:42:04
Zu gegebener Zeit werde ich dann einen neuen Thread eröffnen.

hier gehts weiter: http://forum.fhem.de/index.php/topic,32828.0.html