Hello.
I could use your help. I use ui_template to generate HTML. According to the attached debug-node the code is correct. However, the dashboard seems to filter tags like "name". Can this be turned off somehow or can certain tags be whitelisted?
Here is the problematic flow:
[
{
"id": "e22fec0b.9cd1c8",
"type": "ui_template",
"z": "90243100.c40928",
"group": "dd366daf.ed20e8",
"name": "",
"order": 1,
"width": 7,
"height": 15,
"format": "<div ng-bind-html=\"msg.payload\"></div>\n\n<script>\nfunction hist_gal(imgs) {\n var expandImg = document.getElementById(\"expandedImg\");\n var imgText = document.getElementById(\"imgtext\");\n expandImg.src = imgs.src;\n imgText.innerHTML = imgs.alt;\n expandImg.parentElement.style.display = \"block\";\n}\n</script>",
"storeOutMessages": true,
"fwdInMessages": false,
"templateScope": "local",
"x": 1140,
"y": 480,
"wires": [
[]
]
},
{
"id": "321e9cb7.9abef4",
"type": "function",
"z": "90243100.c40928",
"name": "convert payload to html",
"func": "var images = msg.payload\nmsg.payload = \"<div class=\\\"gallery\\\" height=\\\"100%\\\"> \";\n\nmsg.payload += \"<div class=\\\"full-picture\\\">\";\n\nimages.forEach(function(image){\n image = image.replace(\"/home/pi/.node-red/storage\",\"..\");\n var desc = image;\n desc = desc.replace(\"../cam/\",\"\");\n desc = desc.replace(\".jpg\",\"\");\n msg.desc = desc;\n msg.payload += \"<div><a src=\\\"\\\" name=\\\"\" + desc + \"\\\"></a><img src=\\\"\" + image + \"\\\" /></div>\";\n}); \nmsg.payload += \"</div>\";\nmsg.payload += \"</div>\";\nreturn msg;\n",
"outputs": 1,
"noerr": 0,
"x": 870,
"y": 480,
"wires": [
[
"e22fec0b.9cd1c8",
"c51012b0.205c98"
]
]
},
{
"id": "390315ac.56fdf2",
"type": "fs-file-lister",
"z": "90243100.c40928",
"name": "",
"start": "/home/pi/.node-red/storage/cam",
"pattern": "*.jpg",
"hidden": false,
"path": true,
"single": true,
"depth": 0,
"stat": false,
"x": 440,
"y": 280,
"wires": [
[
"a3c78564.e348a8",
"d801f5d5.7fe41",
"321e9cb7.9abef4"
]
]
},
{
"id": "d93e226d.5444a8",
"type": "inject",
"z": "90243100.c40928",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "60",
"crontab": "",
"once": true,
"onceDelay": "5",
"x": 130,
"y": 280,
"wires": [
[
"390315ac.56fdf2"
]
]
},
{
"id": "dd366daf.ed20e8",
"type": "ui_group",
"z": "",
"name": "RĂĽckblick",
"tab": "71dfb607.40b268",
"order": 2,
"disp": true,
"width": 7,
"collapse": false
},
{
"id": "71dfb607.40b268",
"type": "ui_tab",
"z": "",
"name": "Kamera",
"icon": "cam",
"order": 3,
"disabled": false,
"hidden": false
}
]
Debug Output:
payload:
"<div class="gallery" height="100%">
<div class="full-picture">
<div><a src="" name="1570644700650"></a><img src="../cam/1570644700650.jpg" /></div>
<div><a src="" name="1570644716164"></a><img src="../cam/1570644716164.jpg" /></div>
<div><a src="" name="1570644723246"></a><img src="../cam/1570644723246.jpg" /></div>
<div><a src="" name="1570644727842"></a><img src="../cam/1570644727842.jpg" /></div>
<div><a src="" name="1570672800031"></a><img src="../cam/1570672800031.jpg" /></div>
<div><a src="" name="1570683600031"></a><img src="../cam/1570683600031.jpg" /></div>
<div><a src="" name="1570770000026"></a><img src="../cam/1570770000026.jpg" /></div>
<div><a src="" name="1570856400028"></a><img src="../cam/1570856400028.jpg" /></div>
<div><a src="" name="1570942800031"></a><img src="../cam/1570942800031.jpg" /></div>
<div><a src="" name="1571029412335"></a><img src="../cam/1571029412335.jpg" /></div>
<div><a src="" name="1571115600035"></a><img src="../cam/1571115600035.jpg" /></div>
<div><a src=""..."
Dashboard html output:
<div class="full-picture">
<div><a src=""></a><img src="../cam/1570644700650.jpg"></div>
<div><a src=""></a><img src="../cam/1570644716164.jpg"></div>
<div><a src=""></a><img src="../cam/1570644723246.jpg"></div>
<div><a src=""></a><img src="../cam/1570644727842.jpg"></div>
<div><a src=""></a><img src="../cam/1570672800031.jpg"></div>
<div><a src=""></a><img src="../cam/1570683600031.jpg"></div>
<div><a src=""></a><img src="../cam/1570770000026.jpg"></div>
<div><a src=""></a><img src="../cam/1570856400028.jpg"></div>
<div><a src=""></a><img src="../cam/1570942800031.jpg"></div>
<div><a src=""></a><img src="../cam/1571029412335.jpg"></div>
<div><a src=""></a><img src="../cam/1571115600035.jpg"></div>
<div><a src=""></a><img src="../cam/1571202000029.jpg"></div>
<div><a src=""></a><img src="../cam/1571288400030.jpg"></div>
</div>
