{"id":2515,"date":"2016-01-30T21:20:18","date_gmt":"2016-01-30T19:20:18","guid":{"rendered":"http:\/\/www.hjgode.de\/wp\/?p=2515"},"modified":"2016-03-01T19:57:03","modified_gmt":"2016-03-01T17:57:03","slug":"fhem-myrss-gestaltung","status":"publish","type":"post","link":"https:\/\/www.hjgode.de\/wp\/2016\/01\/30\/fhem-myrss-gestaltung\/","title":{"rendered":"FHEM myrss Gestaltung"},"content":{"rendered":"

Angeregt durch den 02_RSS Workshop<\/a> im fhem forum dachte ich, das ist eine wunderbar einfach M\u00f6glichkeit Status-Anzeigen \u00fcbersichtlich zu pr\u00e4sentieren. Meine fhem Web Seite ist nun ziemlich \u00fcberladen und ich suchte nach einer einfachen Gestaltung. Da gibt es zwar noch Tablet UI und Floorplan, aber beide sind nicht wirklich einfach in der Gestaltung.<\/p>\n

F\u00fcr 02_RSS ben\u00f6tigt man nur eine Textdatei mit Anweisungen und es lassen sich sehr sch\u00f6ne und \u00fcbersichtliche ‘Seiten’ mit fhem Information gestalten. Dazu gibt es auch einen eigenen Thread<\/a> im fhem Forum. Leider haben viele User ihre Layouts dort ohne die entsprechende Layout-Datei vorgestellt. Ich bin da nicht so ein Geheimnis-Kr\u00e4mer und m\u00f6chte euch den einen oder anderen Kniff aufzeigen.<\/p>\n

\"myrss\"<\/p>\n

Das ist mein derzeitiges Layout; in meinem Netz unter http:\/\/192.168.0.40:8083\/fhem\/rss\/myrss.html zu erreichen. Der Zugriff \u00fcber HTML erm\u00f6glicht die Verwendung von Image Maps damit man man Bereiche des Bilds mit anderen Webseiten verkn\u00fcpfen kann.<\/p>\n

Beipiel M\u00fcllabfuhr<\/h2>\n

Damit man Bilder zu Zust\u00e4nden oder Readings-Werten einfacher einsetzen kann, sollten die Readings und die Bilder zusammen passende Werte und Namen verwenden, statt endlose conditions einzusetzen. Ich habe einen holiday Kalender f\u00fcr die M\u00fcllabfuhr Termine in fhem angelegt. Beispiel der abfall.holiday Datei:<\/p>\n

1 01-07 grau\r\n1 01-13 gelb\r\n1 01-15 papier\r\n1 01-18 buendel\r\n1 01-21 grau\r\n1 01-22 braun\r\n1 01-27 gelb<\/pre>\n
Dazu habe ich die Bilder: tonne_braun.png\u00a0 tonne_buendel.png\u00a0 tonne_gelb.png\u00a0 tonne_grau.png\u00a0 tonne_none.png\u00a0 tonne_papier.png. Nun kann ich in der myrss.layout Textdatei folgendes benutzen um die M\u00fcllabfuhr Termine der n\u00e4chsten Tage bildlich darzustellen:<\/p>\n
text 400 60 { 'Abfalltermine 5 Tage:' }\r\ntext 410 75 'heute->'<\/pre>\n
img 410 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 0') .'.png' }\r\nimg 435 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 1') .'.png' }\r\nimg 460 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 2') .'.png' }\r\nimg 485 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 3') .'.png' }\r\nimg 510 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 4') .'.png' }\r\nimg 535 80 0.2 png file { '\/opt\/fhem\/www\/images\/tonne_'. fhem('get abfall days 5') .'.png' }<\/pre>\n
Hier wird also der von abfall.holiday zur\u00fcckgelieferte Readings-Wert in den Bildnamen ‘umgewandelt’.<\/p>\n
F\u00fcr den ‘anstehenden’ Abfall Termin habe ich hier mal condition verwendet:<\/p>\n
# Grafiken Termine in abfall.holiday\r\ntext 650 60 'Abfall Morgen:'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'none') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_none.png'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'grau') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_grau.png'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'papier') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_papier.png'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'gelb') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_gelb.png'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'braun') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_braun.png'\r\n\r\ncondition { (ReadingsVal('abfall','tomorrow','') eq 'buendel') }\r\nimg 760 45 0.3 png file '\/opt\/fhem\/www\/images\/tonne_buendel.png'\r\ncondition 1<\/pre>\n
Dies kann man auch einfacher als<\/p>\n
img 760 45 0.3 png file { '\/opt\/fhem\/www\/images\/tonne_'. ReadingsVal('abfall','tomorrow','none') . '.png' }<\/pre>\n
schreiben.<\/p>\n
Ein weiteres Beispiel Zustands-Readings als Bild darzustellen:<\/p>\n
licht\r\ntext 14 450 'Licht'\r\npt 10\r\ntext 15 465 \"Essen\"\r\nimg 15 470 1 png file { '\/opt\/fhem\/www\/images\/default\/' . ReadingsVal('lichtessen','state','off') . '.png' }<\/pre>\n
Die Bilder f\u00fcr die Lampe heissen on.png und off.png, der ReadingsVal f\u00fcr State liefert on oder off. Das passt.<\/p>\n
Mehrere Readings in einer Zeile<\/h2>\n
text 200 30 { ReadingsVal(‘MeinWetter’,’temperature’,”).’\u00b0C\u00a0 ‘.ReadingsVal(‘MeinWetter’,’humidity’,”).’%’.ReadingsVal(‘MeinWetter’,’pressure’,”).’ hPa’}<\/p>\n
RSS Layout Ausdr\u00fccke in geschweiften Klammern werden vom 02_RSS Modul ausgewertet. So kann man Readings nebeneinander ausgeben, ohne f\u00fcr jedes Reading eine eignen text Zeile zu schreiben.<\/p>\n
Diese interpretierte Ausgabe versteht auch sprint fAusdr\u00fccke:<\/p>\n
thalign 'left'\r\ntext 10 80 'Aussen:'\r\ntext 15 95 { sprintf('%02.1f\u00b0C \/ %i%%', ReadingsVal('Hideki_30_1','temperature',0), ReadingsVal('Hideki_30_1','humidity',0)) }<\/pre>\n
Damit kann man sich die Folge von einzelnen text Zeilen f\u00fcr links- und rechtsb\u00fcndigen Text sparen.<\/p>\n
Die Wettervorhersage<\/h2>\n
Erst einmal die Wochentage ausgeben:<\/p>\n
text 25 300 { ReadingsVal('MeinWetter','fc1_day_of_week', 'heute:') }\r\n text 95 300 { ReadingsVal('MeinWetter','fc2_day_of_week', '+1 :') }\r\n text 165 300 { ReadingsVal('MeinWetter','fc3_day_of_week', '+2 :') }\r\n text 235 300 { ReadingsVal('MeinWetter','fc4_day_of_week', '+3 :') }\r\n text 305 300 { ReadingsVal('MeinWetter','fc5_day_of_week', '+4 :') }<\/pre>\n
Die Werte ‘heute’, ‘+1’ usw. werden nur verwendet, wenn ReadingsVal fehlschl\u00e4gt.<\/p>\n
Dann die Symbole, wieder werden Readings als Namensteil verwendet:<\/p>\n
img 15 300 .3 png file { '\/opt\/fhem\/www\/images\/default\/weather\/' . ReadingsVal('MeinWetter','fc1_icon', 'na') . '.png' }\r\nimg 85 300 .3 png file { '\/opt\/fhem\/www\/images\/default\/weather\/' . ReadingsVal('MeinWetter','fc2_icon', 'na') . '.png' }\r\nimg 155 300 .3 png file { '\/opt\/fhem\/www\/images\/default\/weather\/' . ReadingsVal('MeinWetter','fc3_icon', 'na') . '.png' }\r\nimg 225 300 .3 png file { '\/opt\/fhem\/www\/images\/default\/weather\/' . ReadingsVal('MeinWetter','fc4_icon', 'na') . '.png' }\r\nimg 295 300 .3 png file { '\/opt\/fhem\/www\/images\/default\/weather\/' . ReadingsVal('MeinWetter','fc5_icon', 'na') . '.png' }<\/pre>\n
und schlie\u00dflich noch die zu erwartenden Tages-Temperaturen:<\/p>\n
pt 8\r\ntext 25 345 { ReadingsVal('MeinWetter','fc1_low_c', '0').' \/ '.ReadingsVal('MeinWetter','fc1_high_c', '0').'\u00b0C' }\r\ntext 95 345 { ReadingsVal('MeinWetter','fc2_low_c', '0').' \/ '.ReadingsVal('MeinWetter','fc2_high_c', '0').'\u00b0C' }\r\ntext 165 345 { ReadingsVal('MeinWetter','fc3_low_c', '0').' \/ '.ReadingsVal('MeinWetter','fc3_high_c', '0').'\u00b0C' }\r\ntext 235 345 { ReadingsVal('MeinWetter','fc4_low_c', '0').' \/ '.ReadingsVal('MeinWetter','fc4_high_c', '0').'\u00b0C' }\r\ntext 305 345 { ReadingsVal('MeinWetter','fc5_low_c', '0').' \/ '.ReadingsVal('MeinWetter','fc5_high_c', '0').'\u00b0C' }<\/pre>\n
Unwetter Warnungen<\/h2>\n
Leider funktioniert bei mir das Modul UWZ (Unwetterzentrale) nicht korrekt. Ich habe es nicht dazu bekommen, die aktuelle Karter vom Server lokal zu speichern. Das macht bei mir daher ein crontab Eintrag und ein Bash Script. Wenn man die URL der Unwetterzentrale im Layout direkt benutzt, kann dies den Aufbau des Bildes zeitlich verz\u00f6gern, solange eben bis das Bild vom Internet Server der Unwetterzentrale geladen ist.<\/p>\n
Hier also die Variante mit Internet URL der Unwetterkarte:<\/p>\n
img 700 500 w100 png url 'http:\/\/www.unwetterzentrale.de\/images\/map\/nrw_index.png'<\/pre>\n
Und hier mit lokaler Kopie der Karte:<\/p>\n
img 700 500 w100 png file '\/opt\/fhem\/www\/images\/nrw_index.png'<\/pre>\n
Dann sind da noch m\u00f6gliche Warnsymbole und Kurztexte:<\/p>\n
condition { (ReadingsVal('Unwetterzentrale','WarnCount',0) == 1) }\r\nimg 405 300 .5 gif url { ReadingsVal('Unwetterzentrale','Warn_0_IconURL','') }\r\npt 10\r\n# textbox x y breite spacing TEXT\r\ntext 475 300 { 'Warnung von '.ReadingsVal('Unwetterzentrale','Warn_0_Start_Date','-').' '.ReadingsVal('Unwetterzentrale','Warn_0_Start_Time','-')}\r\ntext 475 315 { 'bis '.ReadingsVal('Unwetterzentrale','Warn_0_End_Date','-').' '.ReadingsVal('Unwetterzentrale','Warn_0_End_Time','-')}\r\ntextbox 475 330 300 { ReadingsVal('Unwetterzentrale','Warn_0_ShortText','---') }\r\ncondition 1\r\n\r\ncondition { (ReadingsVal('Unwetterzentrale','WarnCount',0) == 2) }\r\nimg 405 400 .5 gif url { ReadingsVal('Unwetterzentrale','Warn_1_IconURL','') }\r\npt 10\r\n# textbox x y breite spacing TEXT\r\ntext 475 400 { 'Warnung von '.ReadingsVal('Unwetterzentrale','Warn_1_Start_Date','-').' '.ReadingsVal('Unwetterzentrale','Warn_1_Start_Time','-')}\r\ntext 475 415 { 'bis '.ReadingsVal('Unwetterzentrale','Warn_1_End_Date','-').' '.ReadingsVal('Unwetterzentrale','Warn_1_End_Time','-')}\r\ntextbox 475 430 300 { ReadingsVal('Unwetterzentrale','Warn_1_ShortText','---') }\r\ncondition 1<\/pre>\n
Hier werden maximal zwei Meldungen angezeigt. \u00dcber condition wird vor einem Block gepr\u00fcft, ob einen Meldung 0 oder 1 vorliegt. Wenn nicht, wird nichts ausgegeben, das Layout-Bild bleibt dann in diesem Bereich leer.<\/p>\n
URL ImageMapping<\/h2>\n
\u00dcber das Attribut areas kann man eine ImageMap anlegen. Die kann f\u00fcr mein Layout z.B. so aussehen:<\/p>\n
<area shape='rect' coords='600,400,800,600' href='http:\/\/www.unwetterzentrale.de\/uwz\/nrwindex.html'\/><area shape='rect' coords='764,1,800,60' href='http:\/\/fhem.de'\/><area shape='rect' coords='600,400,799,599' href='http:\/\/192.168.0.40:8083\/fhem' target='_top'\/><\/pre>\n
Ganz flei\u00dfige k\u00f6nnen dar\u00fcber sogar Befehle an fhem senden, \u00e4hnlich wie bei { fhem(‘set LichtStehlampe on’) }.<\/p>\n
Meine fhem.cfg f\u00fcr myrss<\/h2>\n
define myrss RSS jpg 192.168.0.40 .\/FHEM\/rss.layout\r\nattr myrss areas <area shape=\"rect\" coords=\"600,400,800,600\" href=\"http:\/\/www.unwetterzentrale.de\/uwz\/nrwindex.html\"\/>\r\nattr myrss refresh 300\r\nattr myrss size 800x600\r\nattr myrss viewport width=device-width, initial-scale=1.0, minimum-scale=1.0<\/pre>\n
Anhang<\/h3>\n
abfall.holiday (korrigiert 1.3.2016) f\u00fcr die Gemeinde J\u00fcchen (Rhein Kreis Neuss)<\/p>\n
meine rss.layout f\u00fcr myrss<\/p>\n[Download not found]\n[Download not found]\n","protected":false},"excerpt":{"rendered":"
Angeregt durch den 02_RSS Workshop im fhem forum dachte ich, das ist eine wunderbar einfach M\u00f6glichkeit Status-Anzeigen \u00fcbersichtlich zu pr\u00e4sentieren. Meine fhem Web Seite ist nun ziemlich \u00fcberladen und ich suchte nach einer einfachen Gestaltung. Da gibt es zwar noch Tablet UI und Floorplan, aber beide sind nicht wirklich einfach in der Gestaltung. F\u00fcr 02_RSS […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[542],"tags":[543,323],"class_list":["post-2515","post","type-post","status-publish","format-standard","hentry","category-fhem","tag-fhem","tag-rssi"],"_links":{"self":[{"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/posts\/2515"}],"collection":[{"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/comments?post=2515"}],"version-history":[{"count":8,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/posts\/2515\/revisions"}],"predecessor-version":[{"id":2548,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/posts\/2515\/revisions\/2548"}],"wp:attachment":[{"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/media?parent=2515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/categories?post=2515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hjgode.de\/wp\/wp-json\/wp\/v2\/tags?post=2515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}