@mickym said in payload wird in TemplateNode als Text formatiert ausgegeben:
Da musst Du dann ebenfalls die Icons noch einbinden, aber Du hast einen fertiges Object und musst Dir das nicht aus dem HTML Code zusammenbasteln. Ausserdem sind solche Dinge wie Warnlevel etc. alles innerhalb eines Objektes.
Der Grund war eigentlich der, dass ich die DWD Node eh schon auf meinem Dashboard verwende. Aber das bringt mir ja in soweit nichts, wenn ich nicht daheim bin. Deshalb die Idee über E-mail. Und auf dem Dashboard passt die Darstellung auch mit Icon im Dreieck usw. Aber dass dies solche Unterschiede zur E-mail macht mit eigentlich noch recht rudimentäre CSS Styles hätte ich so auch nicht erwartet 🦌
@mickym said in payload wird in TemplateNode als Text formatiert ausgegeben:
Den Flow kann ich nur importieren, wenn Du ihn in Code-Tags packst.
Das habe ich nun gemacht. Hoffentlich klappts so 😉
Spoiler
[{"id":"5361c5f2d7620919","type":"tab","label":"Flow 4","disabled":false,"info":"","env":[]},{"id":"d1a3c0f416cee917","type":"inject","z":"5361c5f2d7620919","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<div class=\"dwd-warning-container\"> <div class=\"dwd-icon-container\"> <img class=\"dwd-icon\" src=\"http://www.dwd.de/DWD/warnungen/warnapp/viewer/img/warndreieck/warn_icons_sturm.png\"> <img class=\"dwd-icon-frame\" src=\"http://www.dwd.de/DWD/warnungen/warnapp/viewer/img/warndreieck/gelb.png\"> </div> <div class=\"dwd-event\">WINDBÖEN</div> <div class=\"dwd-time\">Di. 30. Apr. 14:00 - Do. 2. Mai 18:00</div> <div class=\"dwd-description\">Es treten Windböen mit Geschwindigkeiten bis 60 km/h (17 m/s, 33 kn, Bft 7) aus südlicher Richtung auf. In exponierten Lagen muss mit Sturmböen um 70 km/h (20 m/s, 38 kn, Bft 8) gerechnet werden.</div> <div class=\"dwd-instruction\">Hinweis auf umherfliegende leichte Gegenstände. Handlungsempfehlungen: lose Gegenstände sichern; z.B. Zelte und Abdeckungen befestigen</div> </div>","payloadType":"str","x":210,"y":480,"wires":[["16eb3e046a601675","b05791f283c2b54d","61b78e959774efab","b3cc3c44a17b4fcd","ca05a6e51165fdac","f89a75bb485a9685"]]},{"id":"16eb3e046a601675","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-description","ret":"text","as":"multi","x":420,"y":400,"wires":[["ae1dd4b7fc8e3bb1"]]},{"id":"b05791f283c2b54d","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-event","ret":"text","as":"multi","x":410,"y":440,"wires":[["5c8fd9e7b356be4d"]]},{"id":"61b78e959774efab","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-instruction","ret":"text","as":"multi","x":420,"y":480,"wires":[["fc5c0b5e9058c481"]]},{"id":"b3cc3c44a17b4fcd","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-icon-frame","ret":"attr","as":"multi","x":420,"y":520,"wires":[["35f4b9e99503dc04"]]},{"id":"ae1dd4b7fc8e3bb1","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-description","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":400,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"5c8fd9e7b356be4d","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-event","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":440,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"fc5c0b5e9058c481","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-instruction","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":480,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"35f4b9e99503dc04","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-icon-frame","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"payload.src","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":520,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"7e6aa753b6b3fdfb","type":"join","z":"5361c5f2d7620919","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"6","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":850,"y":460,"wires":[["a82db8a1aeb54eda"]]},{"id":"ca05a6e51165fdac","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-time","ret":"text","as":"multi","x":400,"y":600,"wires":[["844db8800f95ce80"]]},{"id":"844db8800f95ce80","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-time","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":600,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"469ea1cc3b9485bf","type":"change","z":"5361c5f2d7620919","name":"Border-Color-Farben","rules":[{"t":"set","p":"payload.border-color","pt":"msg","to":"{\t \"translate\": [\t {\"deutsch\": \"gelb\",\"englisch\":\"yellow\"},\t {\"deutsch\": \"ocker\",\"englisch\":\"orange\"},\t {\"deutsch\": \"rot\",\"englisch\":\"red\"},\t {\"deutsch\": \"lila\",\"englisch\":\"DarkMagenta\"}\t ]\t}.translate[deutsch=$$.payload.color].englisch","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1260,"y":460,"wires":[["a41dd0970402d870"]]},{"id":"f89a75bb485a9685","type":"html","z":"5361c5f2d7620919","name":"","property":"payload","outproperty":"payload","tag":".dwd-icon","ret":"attr","as":"multi","x":400,"y":560,"wires":[["348719242eaad8aa"]]},{"id":"348719242eaad8aa","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"dwd-icon","tot":"str"},{"t":"set","p":"payload","pt":"msg","to":"payload.src","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":560,"wires":[["7e6aa753b6b3fdfb"]]},{"id":"a82db8a1aeb54eda","type":"change","z":"5361c5f2d7620919","name":"","rules":[{"t":"set","p":"payload.color","pt":"msg","to":"payload.dwd-icon-frame","tot":"msg"},{"t":"change","p":"payload.color","pt":"msg","from":".*\\/(.*).png$","fromt":"re","to":"$1","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"DWD - Wetterwarnung","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1030,"y":460,"wires":[["469ea1cc3b9485bf"]]},{"id":"a41dd0970402d870","type":"template","z":"5361c5f2d7620919","name":"E-mail Inhalt","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n<head>\n<style>\n .dwd-warning-container {\n margin-top: 30px;\n margin-bottom: 30px;\n }\n\n .dwd-icon-container {\n display: flex;\n justify-content: center; \n align-items: center; \n }\n\n .dwd-icon {\n width: 100px;\n height: auto;\n }\n\n .dwd-event {\n padding: 10px;\n margin-bottom: 30px;\n }\n\n .dwd-time {\n color: gray;\n text-align: center;\n }\n\n h1 {\n border-color: {{payload.border-color}};\n font-size: 40px;\n font-weight: bold;\n border-width: 3px;\n border-style: solid;\n text-align: center;\n } \n\n</style>\n</head>\n<body>\n\n<div class=\"dwd-warning-container\">\n <div class=\"dwd-icon-container\">\n <center><img class=\"dwd-icon\" src=\"{{payload.dwd-icon}}\"></center>\n </div>\n <div class=\"dwd-event\">\n <h1>{{payload.dwd-event}}</h1> \n </div>\n <div class=\"dwd-time\">{{payload.dwd-time}}</div>\n <div class=\"dwd-description\">\n <h4>Beschreibung</h4> \n {{payload.dwd-description}}\n </div>\n <div class=\"dwd-instruction\">\n <h4>Hinweise und Empfehlungen</h4> \n {{payload.dwd-instruction}}\n </div>\n</div>\n</body>\n</html>","output":"str","x":1490,"y":460,"wires":[[]]}]
@mickym said in payload wird in TemplateNode als Text formatiert ausgegeben:
DWD Meldungen oben rechts
Cooles Dashboard 🙂
@mickym said in payload wird in TemplateNode als Text formatiert ausgegeben:
bei mir geht das 80px
Ich habs herausgefunden denn so habe ich es auch gemacht. Der Standard E-mail Client von Samsung kennt wohl keine <h1> bis <h6> Schriften 😄 Auf einem anderen Mail Client wie Thunderbird klappts auch mit den verschiedenen Größen. Da wird man immer verrückt wenn das vermeintlich richtige nicht funktionieren mag.
Aber Danke nochmal für die schnelle und wie immer umfassende Hilfe 😉
