# Photo slide error

**URL:** <https://discourse.nodered.org/t/photo-slide-error/51774>\
**Category:** Dashboard\
**Created:** [2 October 2021 10:41 UTC](https://discourse.nodered.org/t/photo-slide-error/51774 "2021-10-02T10:41:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bvt-events](https://avatars.discourse-cdn.com/v4/letter/b/a8b319/32.png) [@bvt-events](https://discourse.nodered.org/u/bvt-events)\
**Post date:** [2 October 2021 10:41 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/1 "2021-10-02T10:41:41Z")

</div>

a good afternoon,

I tried to soften the following flow in my dashboard. [Dashboard slideshow gallery](https://discourse.nodered.org/t/dashboard-slideshow-gallery/22291)

I only see that it changes with my photo that are in the folder, only I get no picture at all with dashboard. what's wrong? and how can i fix this.

here at the flow:

```auto
[{"id":"59c23b01.d78674","type":"ui_button","z":"65644409.d5fedc","name":">","group":"d2e998ef.e44f08","order":5,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-right","payload":"next","payloadType":"str","topic":"","x":550,"y":580,"wires":[["12b30e1d.7e5542"]]},{"id":"c24613ec.5dfd1","type":"ui_button","z":"65644409.d5fedc","name":"<","group":"d2e998ef.e44f08","order":4,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-left","payload":"previous","payloadType":"str","topic":"","x":550,"y":610,"wires":[["12b30e1d.7e5542"]]},{"id":"fef5b40f.538648","type":"ui_button","z":"65644409.d5fedc","name":"<<","group":"d2e998ef.e44f08","order":3,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_rewind","payload":"first","payloadType":"str","topic":"","x":550,"y":490,"wires":[["12b30e1d.7e5542"]]},{"id":"a1645ac9.756e38","type":"ui_button","z":"65644409.d5fedc","name":">>","group":"d2e998ef.e44f08","order":6,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_forward","payload":"last","payloadType":"str","topic":"","x":550,"y":520,"wires":[["12b30e1d.7e5542"]]},{"id":"1913948d.eb97bb","type":"ui_button","z":"65644409.d5fedc","name":"play","group":"d2e998ef.e44f08","order":8,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"play_arrow","payload":"play","payloadType":"str","topic":"","x":550,"y":430,"wires":[["12b30e1d.7e5542","e26a4b9c.dcb3d8"]]},{"id":"8dce426b.e5d1e","type":"ui_button","z":"65644409.d5fedc","name":"pause","group":"d2e998ef.e44f08","order":9,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"pause","payload":"pause","payloadType":"str","topic":"","x":550,"y":460,"wires":[["12b30e1d.7e5542","e26a4b9c.dcb3d8"]]},{"id":"d42cdbf4.b3c288","type":"function","z":"65644409.d5fedc","name":"action case","func":"let action = msg.payload; //what to navigate ?\nlet numSlides = msg.numSlides; //total pictures in the \"files\" array\nlet slideIndex = flow.get(\"slideIndex\") || 0; //index position picture\nlet gateSlide = flow.get(\"gateSlide\")||0; // play or pause\n\n switch (action) {\n case \"play\":\n flow.set (\"gateSlide\", true);\n break;\n case \"pause\":\n flow.set (\"gateSlide\", false);\n break;\n case \"first\": \n slideIndex = 0;//go to first\n break; \n case \"last\":\n slideIndex = numSlides-1;//got to last\n break;\n case \"del\":// **********DELETE PICTURE********** \n msg.fileName = flow.get(\"slides\")[slideIndex]; //Tx: name picture\n node.send([null,{ // 2nd output : \n fileName:msg.fileName, path:msg.path, numSlides:msg.numSlides,slideIndex:slideIndex\n }]); \n return msg\n case \"next\":\n slideIndex++;\n if(gateSlide === true){\n if (slideIndex > numSlides - 1) slideIndex = 0; //repeat if played\n } else {\n if (slideIndex > numSlides - 1) slideIndex = numSlides-1; //stay at last if next\n }\n break;\n case \"previous\": \n slideIndex--;\n if (slideIndex < 0) slideIndex = 0; //stay on first\n break;\n default:\n break;\n }\nmsg.affSlideIndex = slideIndex+1; //Tx N° picture\nflow.set(\"slideIndex\", slideIndex); //save position for next time\nmsg.slideIndex=slideIndex; //Tx position picture\n\n//get name picture from slideIndex position in the \"slides\" array\nmsg.fileName = flow.get(\"slides\")[msg.slideIndex]; //Tx: picture name\n\n//alternative message if Folder is empty\nif (numSlides === 0) {\n msg.fileName = \"Empty Folder ! \";\n msg.affSlideIndex = 0; //Tx N° picture\n}\nnode.status({\"text\" : msg.fileName}); //under the node\n\n\nreturn msg;\n\n\n\n\n","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":870,"y":500,"wires":[["ec22ec57.728cf"],["7c2276ac.1c37b8"]]},{"id":"17020f90.5b295","type":"fs-ops-dir","z":"65644409.d5fedc","name":"","path":"path","pathType":"msg","filter":"*","filterType":"str","dir":"files","dirType":"msg","x":780,"y":380,"wires":[["a0a2796f.2cfa88"]]},{"id":"a0a2796f.2cfa88","type":"change","z":"65644409.d5fedc","name":"set array in flow.slides","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":950,"y":380,"wires":[["51a3f66.6f0ab08"]]},{"id":"51a3f66.6f0ab08","type":"function","z":"65644409.d5fedc","name":"Set numSlides","func":"let totalPic = flow.get(\"slides\").length; //get sise of array\nnode.status({text:totalPic}); // display under node\nmsg.numSlides = totalPic;//Tx: numSlides = total pictures in the files array\nreturn msg;\n\n/* Tx en sortie : \n\n*/","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1140,"y":380,"wires":[["d42cdbf4.b3c288"]]},{"id":"9a65fa80.217758","type":"inject","z":"65644409.d5fedc","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"Initialize pictures","payloadType":"str","x":410,"y":380,"wires":[["61e8a9fd.cc5e48"]]},{"id":"61e8a9fd.cc5e48","type":"function","z":"65644409.d5fedc","name":"set path","func":"//let path=flow.get('picturePath');\npath = \"/home/pi/Desktop/fotos /nood\";\n//flow.set ('picturePath',path); //save picturePath : le chemin du dossier des pictures\nmsg.path = path;\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":650,"y":380,"wires":[["17020f90.5b295"]]},{"id":"2e89e1aa.db15fe","type":"link in","z":"65644409.d5fedc","name":"getPath","links":["12b30e1d.7e5542","1a896f6d.7a1971"],"x":565,"y":380,"wires":[["61e8a9fd.cc5e48"]]},{"id":"12b30e1d.7e5542","type":"link out","z":"65644409.d5fedc","name":"getPath","links":["2e89e1aa.db15fe"],"x":665,"y":500,"wires":[]},{"id":"7c2276ac.1c37b8","type":"fs-ops-delete","z":"65644409.d5fedc","name":"del","path":"path","pathType":"msg","filename":"fileName","filenameType":"msg","x":1050,"y":580,"wires":[["ec49c26d.02bc4"]]},{"id":"1a896f6d.7a1971","type":"link out","z":"65644409.d5fedc","name":"getPath","links":["2e89e1aa.db15fe"],"x":1255,"y":510,"wires":[]},{"id":"ec49c26d.02bc4","type":"function","z":"65644409.d5fedc","name":"Stay at last","func":"let slideIndex = msg.slideIndex;\nlet numSlides = msg.numSlides;\n if (slideIndex==numSlides-1) {\n msg.payload=\"previous\"\n } \n else { msg.payload=\"refresh\" } \nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1210,"y":640,"wires":[["1a896f6d.7a1971"]]},{"id":"fcf45582.e33608","type":"switch","z":"65644409.d5fedc","name":"flow gate filter Switch","property":"gateSlide","propertyType":"flow","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":950,"y":650,"wires":[["59c23b01.d78674"]]},{"id":"d89eb0b1.757f1","type":"trigger","z":"65644409.d5fedc","name":"2s","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"-2","extend":false,"units":"s","reset":"","bytopic":"all","outputs":1,"x":680,"y":650,"wires":[["40f3dfb2.c4b66"]]},{"id":"416ff6ca.c893f8","type":"inject","z":"65644409.d5fedc","name":"","repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"Sequencer","payloadType":"str","x":550,"y":650,"wires":[["d89eb0b1.757f1"]]},{"id":"40f3dfb2.c4b66","type":"function","z":"65644409.d5fedc","name":"Gate","func":"let read = flow.get(\"gateSlide\");\nlet status = read ? \"Opened\" : \"Closed\";\nlet color = read ? \"green\" : \"red\";\nnode.status({fill:color,shape:\"ring\",text:status});\nreturn msg;","outputs":1,"noerr":0,"x":790,"y":650,"wires":[["fcf45582.e33608"]]},{"id":"e26a4b9c.dcb3d8","type":"ui_text","z":"65644409.d5fedc","group":"d2e998ef.e44f08","order":10,"width":2,"height":1,"name":"play/pause","label":"{{msg.payload}}","format":"","layout":"row-left","x":700,"y":430,"wires":[]},{"id":"56886666.3eaec8","type":"image","z":"65644409.d5fedc","name":"","width":160,"data":"flow","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1680,"y":560,"wires":[]},{"id":"ec22ec57.728cf","type":"ui_template","z":"65644409.d5fedc","group":"d2e998ef.e44f08","name":"img","order":1,"width":10,"height":8,"format":"<!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv.parent {\n position: relative;\n height: 480px ;\n}\ndiv.absolute {\n position: absolute;\n width: 100%;\n bottom: 0px;\n} \n\n</style>\n</head>\n<body>\n <div class=\"parent\">\n <div class=\"absolute\" >\n <img src=\"/camAlerte/{{msg.fileName}}\" alt=\"Camera Picture\" style=\"width:100%\"><br>\n {{msg.fileName}} {{msg.affSlideIndex}}/{{msg.numSlides}} \n </div>\n </div>\n</body>\n</html>\n<!--EXPLICATION : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_bottom -->\n\n<!-- ////// SIMPLE VERSION //////////\n<style> \nimg {\n width: 100%;\n height: auto;\n border:1px solid green;\n}\n</style>\n<body>\n<div >\n<img src= \"/camAlerte/{{msg.fileName}}\" alt=\"Camera Picture\" ><br>\n</div>\n</body>\n\n\n\n\n-->\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1390,"y":480,"wires":[["56886666.3eaec8"]]},{"id":"d2e998ef.e44f08","type":"ui_group","name":"Slideshow","tab":"b123e6c8.d3e948","order":1,"disp":true,"width":"10","collapse":false},{"id":"b123e6c8.d3e948","type":"ui_tab","name":"Slide","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

and the picture of dashboard:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/f/1f3abfa8b5b0e83ddb034b98aa4510ddf4c92097.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 October 2021 10:44 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/2 "2021-10-02T10:44:00Z")

</div>

Hi, firstly, your flow is not importable

In order to make code more readable and importable it is important to surround your code with three backticks  
`````  
`like this`  
`````

You can edit and correct your post by clicking the pencil icon.

See this post for more details - [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506)

* * *

At a quick glance, I suspect you have the path wrong?

> [@bvt-events](#):
>
> \npath = "/home/pi/Desktop/fotos /nood"

↑ there is a space in the path name.

---

<div class="post-metadata">

**Author:** ![bvt-events](https://avatars.discourse-cdn.com/v4/letter/b/a8b319/32.png) [@bvt-events](https://discourse.nodered.org/u/bvt-events)\
**Post date:** [2 October 2021 10:57 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/3 "2021-10-02T10:57:02Z")

</div>

that's not the problem that space. because I see that it searches in my folder with me photos and also shows the good photos.

see picture

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72853a5e110515e62a27cbda440ccc0630e55ccc.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [2 October 2021 11:16 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/4 "2021-10-02T11:16:25Z")

</div>

Have you setup the `httpStatic: '/home/pi/Documents/node-red-static',` ?

If you havent, you can also do it by creating an endpoint - or - load the image as a buffer and convert to base64.

example...

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/dfc354d45585a5339399895c92aa2ae32a6dbb00.png)

![a2c1wZESvf](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/5/0566e79d88ab56f1277ed389bd3f7aea139fbea4.gif)

```auto
[{"id":"59c23b01.d78674","type":"ui_button","z":"b872cb4b.5a6448","name":">","group":"d2e998ef.e44f08","order":5,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-right","payload":"next","payloadType":"str","topic":"","x":570,"y":700,"wires":[["12b30e1d.7e5542"]]},{"id":"c24613ec.5dfd1","type":"ui_button","z":"b872cb4b.5a6448","name":"<","group":"d2e998ef.e44f08","order":4,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-left","payload":"previous","payloadType":"str","topic":"","x":570,"y":730,"wires":[["12b30e1d.7e5542"]]},{"id":"fef5b40f.538648","type":"ui_button","z":"b872cb4b.5a6448","name":"<<","group":"d2e998ef.e44f08","order":3,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_rewind","payload":"first","payloadType":"str","topic":"","x":570,"y":610,"wires":[["12b30e1d.7e5542"]]},{"id":"a1645ac9.756e38","type":"ui_button","z":"b872cb4b.5a6448","name":">>","group":"d2e998ef.e44f08","order":6,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_forward","payload":"last","payloadType":"str","topic":"","x":570,"y":640,"wires":[["12b30e1d.7e5542"]]},{"id":"1913948d.eb97bb","type":"ui_button","z":"b872cb4b.5a6448","name":"play","group":"d2e998ef.e44f08","order":8,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"play_arrow","payload":"play","payloadType":"str","topic":"","x":570,"y":550,"wires":[["12b30e1d.7e5542","e26a4b9c.dcb3d8"]]},{"id":"8dce426b.e5d1e","type":"ui_button","z":"b872cb4b.5a6448","name":"pause","group":"d2e998ef.e44f08","order":9,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"pause","payload":"pause","payloadType":"str","topic":"","x":570,"y":580,"wires":[["12b30e1d.7e5542","e26a4b9c.dcb3d8"]]},{"id":"d42cdbf4.b3c288","type":"function","z":"b872cb4b.5a6448","name":"action case","func":"let action = msg.payload; //what to navigate ?\nlet numSlides = msg.numSlides; //total pictures in the \"files\" array\nlet slideIndex = flow.get(\"slideIndex\") || 0; //index position picture\nlet gateSlide = flow.get(\"gateSlide\")||0; // play or pause\n\n switch (action) {\n case \"play\":\n flow.set (\"gateSlide\", true);\n break;\n case \"pause\":\n flow.set (\"gateSlide\", false);\n break;\n case \"first\": \n slideIndex = 0;//go to first\n break; \n case \"last\":\n slideIndex = numSlides-1;//got to last\n break;\n case \"del\":// **********DELETE PICTURE********** \n msg.fileName = flow.get(\"slides\")[slideIndex]; //Tx: name picture\n node.send([null,{ // 2nd output : \n fileName:msg.fileName, path:msg.path, numSlides:msg.numSlides,slideIndex:slideIndex\n }]); \n return msg\n case \"next\":\n slideIndex++;\n if(gateSlide === true){\n if (slideIndex > numSlides - 1) slideIndex = 0; //repeat if played\n } else {\n if (slideIndex > numSlides - 1) slideIndex = numSlides-1; //stay at last if next\n }\n break;\n case \"previous\": \n slideIndex--;\n if (slideIndex < 0) slideIndex = 0; //stay on first\n break;\n default:\n break;\n }\nmsg.affSlideIndex = slideIndex+1; //Tx N° picture\nflow.set(\"slideIndex\", slideIndex); //save position for next time\nmsg.slideIndex=slideIndex; //Tx position picture\n\n//get name picture from slideIndex position in the \"slides\" array\nmsg.file = flow.get(\"slides\")[msg.slideIndex]; //Tx: picture name\nmsg.filename = msg.path + '/' + msg.file\n\n//alternative message if Folder is empty\nif (numSlides === 0) {\n msg.fileName = \"Empty Folder ! \";\n msg.affSlideIndex = 0; //Tx N° picture\n}\nnode.status({\"text\" : msg.fileName}); //under the node\n\n\nreturn msg;\n\n\n\n\n","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":890,"y":620,"wires":[["8742b22c0e19d23b"],["7c2276ac.1c37b8"]]},{"id":"17020f90.5b295","type":"fs-ops-dir","z":"b872cb4b.5a6448","name":"","path":"path","pathType":"msg","filter":"*.jpg","filterType":"str","dir":"files","dirType":"msg","x":800,"y":500,"wires":[["a0a2796f.2cfa88"]]},{"id":"a0a2796f.2cfa88","type":"change","z":"b872cb4b.5a6448","name":"set array in flow.slides","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":970,"y":500,"wires":[["51a3f66.6f0ab08"]]},{"id":"51a3f66.6f0ab08","type":"function","z":"b872cb4b.5a6448","name":"Set numSlides","func":"let totalPic = flow.get(\"slides\").length; //get sise of array\nnode.status({text:totalPic}); // display under node\nmsg.numSlides = totalPic;//Tx: numSlides = total pictures in the files array\nreturn msg;\n\n/* Tx en sortie : \n\n*/","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1160,"y":500,"wires":[["d42cdbf4.b3c288"]]},{"id":"9a65fa80.217758","type":"inject","z":"b872cb4b.5a6448","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"Initialize pictures","payloadType":"str","x":430,"y":500,"wires":[["61e8a9fd.cc5e48"]]},{"id":"61e8a9fd.cc5e48","type":"function","z":"b872cb4b.5a6448","name":"set path","func":"//let path=flow.get('picturePath');\nconst path = \"c:/temp\";\n//const path = \"/home/pi/Desktop/fotos /nood\";\n//flow.set ('picturePath',path); //save picturePath : le chemin du dossier des pictures\nmsg.path = path;\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":670,"y":500,"wires":[["17020f90.5b295"]]},{"id":"2e89e1aa.db15fe","type":"link in","z":"b872cb4b.5a6448","name":"getPath","links":["12b30e1d.7e5542","1a896f6d.7a1971"],"x":585,"y":500,"wires":[["61e8a9fd.cc5e48"]]},{"id":"12b30e1d.7e5542","type":"link out","z":"b872cb4b.5a6448","name":"getPath","links":["2e89e1aa.db15fe"],"x":685,"y":620,"wires":[]},{"id":"7c2276ac.1c37b8","type":"fs-ops-delete","z":"b872cb4b.5a6448","name":"del","path":"path","pathType":"msg","filename":"fileName","filenameType":"msg","x":1070,"y":700,"wires":[["ec49c26d.02bc4"]]},{"id":"1a896f6d.7a1971","type":"link out","z":"b872cb4b.5a6448","name":"getPath","links":["2e89e1aa.db15fe"],"x":1355,"y":760,"wires":[]},{"id":"ec49c26d.02bc4","type":"function","z":"b872cb4b.5a6448","name":"Stay at last","func":"let slideIndex = msg.slideIndex;\nlet numSlides = msg.numSlides;\n if (slideIndex==numSlides-1) {\n msg.payload=\"previous\"\n } \n else { msg.payload=\"refresh\" } \nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1230,"y":760,"wires":[["1a896f6d.7a1971"]]},{"id":"fcf45582.e33608","type":"switch","z":"b872cb4b.5a6448","name":"flow gate filter Switch","property":"gateSlide","propertyType":"flow","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":970,"y":770,"wires":[["59c23b01.d78674"]]},{"id":"d89eb0b1.757f1","type":"trigger","z":"b872cb4b.5a6448","name":"2s","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"-2","extend":false,"units":"s","reset":"","bytopic":"all","outputs":1,"x":700,"y":770,"wires":[["40f3dfb2.c4b66"]]},{"id":"416ff6ca.c893f8","type":"inject","z":"b872cb4b.5a6448","name":"","repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"Sequencer","payloadType":"str","x":570,"y":770,"wires":[["d89eb0b1.757f1"]]},{"id":"40f3dfb2.c4b66","type":"function","z":"b872cb4b.5a6448","name":"Gate","func":"let read = flow.get(\"gateSlide\");\nlet status = read ? \"Opened\" : \"Closed\";\nlet color = read ? \"green\" : \"red\";\nnode.status({fill:color,shape:\"ring\",text:status});\nreturn msg;","outputs":1,"noerr":0,"x":810,"y":770,"wires":[["fcf45582.e33608"]]},{"id":"e26a4b9c.dcb3d8","type":"ui_text","z":"b872cb4b.5a6448","group":"d2e998ef.e44f08","order":10,"width":2,"height":1,"name":"play/pause","label":"{{msg.payload}}","format":"","layout":"row-left","x":720,"y":550,"wires":[]},{"id":"56886666.3eaec8","type":"image","z":"b872cb4b.5a6448","name":"","width":160,"data":"flow","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":1700,"y":680,"wires":[]},{"id":"ec22ec57.728cf","type":"ui_template","z":"b872cb4b.5a6448","group":"d2e998ef.e44f08","name":"img","order":1,"width":10,"height":8,"format":"<!DOCTYPE html>\n<html>\n<head>\n<style>\ndiv.parent {\n position: relative;\n height: 480px ;\n}\ndiv.absolute {\n position: absolute;\n width: 100%;\n bottom: 0px;\n} \n\n</style>\n</head>\n<body>\n <div class=\"parent\">\n <div class=\"absolute\" >\n <!-- <img src=\"/camAlerte/{{msg.fileName}}\" alt=\"Camera Picture\" style=\"width:100%\"><br> -->\n <img src=\"data:image/jpeg;base64,{{msg.payload}}\" alt=\"Camera Picture\" style=\"width:100%\"><br>\n {{msg.file}} {{msg.affSlideIndex}}/{{msg.numSlides}} \n </div>\n </div>\n</body>\n</html>\n<!--EXPLICATION : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_bottom -->\n\n<!-- ////// SIMPLE VERSION //////////\n<style> \nimg {\n width: 100%;\n height: auto;\n border:1px solid green;\n}\n</style>\n<body>\n<div >\n<img src= \"/camAlerte/{{msg.fileName}}\" alt=\"Camera Picture\" ><br>\n</div>\n</body>\n\n\n\n\n-->\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":1510,"y":600,"wires":[["56886666.3eaec8"]]},{"id":"8742b22c0e19d23b","type":"file in","z":"b872cb4b.5a6448","name":"","filename":"","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":1130,"y":600,"wires":[["2a200d5042211b32"]]},{"id":"2a200d5042211b32","type":"base64","z":"b872cb4b.5a6448","name":"","action":"","property":"payload","x":1300,"y":600,"wires":[["ec22ec57.728cf","480e7ebb5ba23cc1"]]},{"id":"480e7ebb5ba23cc1","type":"debug","z":"b872cb4b.5a6448","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1510,"y":500,"wires":[]},{"id":"d2e998ef.e44f08","type":"ui_group","name":"Slideshow","tab":"b123e6c8.d3e948","order":1,"disp":true,"width":"10","collapse":false},{"id":"b123e6c8.d3e948","type":"ui_tab","name":"Slide","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![bvt-events](https://avatars.discourse-cdn.com/v4/letter/b/a8b319/32.png) [@bvt-events](https://discourse.nodered.org/u/bvt-events)\
**Post date:** [2 October 2021 11:33 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/5 "2021-10-02T11:33:18Z")

</div>

That is the solution, thank you

---

<div class="post-metadata">

**Author:** ![dynamicdave](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dynamicdave/32/96_2.png) [@dynamicdave](https://discourse.nodered.org/u/dynamicdave)\
**Post date:** [2 October 2021 12:03 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/6 "2021-10-02T12:03:22Z")

</div>

Sorry if this is just a little bit off-topic.

Have you looked at Single File Gallery (SFG)?? [Single File PHP Gallery 4.11.0](https://sye.dk/sfpg/)

A brilliant PHP script that handles the management and display (showslide) of photos in an  
"auto-magically" way. It is so simple to set-up and use.

All you need to do is create a folder on your web-server (it needs to be able to interpret PHP files), then drop all the relevant photos into it. And then "hey-presto" everything is available before your very eyes.

Our Home Surveillance System project makes extensive use of SFG to manage the various capture folders (e.g. Recordings, Snapshots and Motion Detections). It's well worth a look!!!

> [@Home Surveillance System (HSS)](https://discourse.nodered.org/t/home-surveillance-system-hss/51726):
>
> David (@dynamicdave), Paul (@zenofmud and Walter (@krambriw) are pleased to announce the release of their Home Surveillance System (HSS) project based on Node-RED running on a Raspberry Pi (recommended hardware is... Raspberry Pi-3B or 4B). As can be seen from the photos below, HSS has four monitors and a main display area that can show video streams from local and/or remote cameras [walter\_2] On-the-fly recordings can …

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 October 2021 12:04 UTC](https://discourse.nodered.org/t/photo-slide-error/51774/7 "2021-10-16T12:04:05Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.