HI ,
I want to display in the dashboard, a slideshow gallery like this :
https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp
The pictures a stored in the raspberry with NodeRed, by surveillance cameras during movement.
Any help is appreciable
Chris
Hi Christian,
I can answer today question #1. Hopefully I will be able to recover information from a project I supported in the past to answer in a couple of days question #2. Most likely an exec node with the linux rm command will work. I want however to see what I have done in the past as I used the very same code from w3schools in one of the prototypes for the slideshow.
You can get a list of images in a folder with the contrib node: node-red-contrib-fs-ops
It is super easy to use. It works like a charm.
Sorry if this is a bit off track for you...
Here's a link to a project that you might find useful
https://discourse.nodered.org/t/ir-detector-the-project-that-grew-and-grew/473
http://resources-area.co.uk/node-red-flows/it_grew_and_grew.pdf
The item you might find useful is the reference to... Single File PHP Gallery on the very last page of the PDF document.
All you need to do is create a directory (on a server) that includes the PHP file. The PHP script "automagically" catalogues the images in the directory and build a nice web page with navigation buttons so you can step through the images.
I use it with my Infra-Red dection system at home. When an Infrared detector 'fires' it triggers a camera attached to a RPi-Z-W that takes a picture. The image is sent via FTP to the directory on the server where the magic happens.
It might not have the same "swishness" as the w3schools offering, BUT it is dead simple to implement, works like a dream and is very easy to integrate into a Node-RED dashboard and it's FREE.
Regards, David.
Thanks David @dynamicdave , and Andrei @Andrei, i will test all links and I will come back here to show my progress.
I added a flow to Node-RED library with a working example of a slideshow. It uses MQTT commands to control the slideshow. The commands are play, pause, next, previous and display one of the ten first slides. The strings accepted as commands are the ones configured inside the switch node named "Key mapping".
https://flows.nodered.org/flow/990b338798dc80c829f75677f7176647
Thanks to you Andrei for this clear flow
But as i'm dumb 
, i can not display pictures from my Raspberry Folder :
i change Directory by : /home/pi/Pictures/camAlerte/
i change in SlideShow grid : background-image : url(/camAlerte/{{payload}});
[{"id":"a8b1b208.7036f","type":"tab","label":"SlideShow","disabled":false,"info":"# **Dashboard slideshow**\r\n\r\nThis flow creates a slideshow in the Dashboard with pictures from a local directory in your computer. The slideshow is controlled by MQTT messages.\r\n\r\n\r\n## **Features**\r\n\r\n - You can play and pause the slideshow.\r\n - The time each picture displays is configurable in a delay node.\r\n - You can display a display any of the ten first pictures by sending an MQTT message.\r\n\r\n\r\n## **Prerequisites**\r\n\r\n - Requires the installation of contrib node: **fs-ops-dir**.\r\n - Requires access to an MQTT broker to publish/subcribe to commands.\r\n - Create directory /slideshow in Node-RED static floder and populate it with pictures.\r\n\r\n\r\n## **How it works**\r\n\r\nThe heart of the flow is a core template node that will format a message to display the picture as a background image.\r\n\r\nBelow the code inside this template node.\r\n\r\n```\r\n#Slide_Slideshow md-card {\r\n background-image : url(/slideshow/{{payload}});\r\n background-repeat: no-repeat;\r\n background-position: center;\r\n background-size: cover;\r\n}\r\n```\r\n\r\n\r\n## **Built and tested With**\r\n\r\n* [Node-RED] - version 1.0.3\r\n* [Dashboard] - version 2.19.2 \r\n\r\n\r\n \r\n\r\n## **Authors**\r\n\r\n**Andrei Ochmat** \r\n\r\n\r\n## **License**\r\n\r\nFree for any kind of use\r\n\r\n## **Acknowledgments**\r\n\r\n* Possible thanks to the outstanding work of Nick O'Leary and Dave Conway-Jones\r\n\r\n"},{"id":"60ad7d44.fbf6b4","type":"inject","z":"a8b1b208.7036f","name":"Startup","topic":"","payload":"arrow-right","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"2","x":90,"y":250,"wires":[["47a67bdc.4e3d14"]]},{"id":"9d439c99.fd9bf","type":"fs-ops-dir","z":"a8b1b208.7036f","name":"","path":"path","pathType":"msg","filter":"*","filterType":"str","dir":"files","dirType":"msg","x":310,"y":60,"wires":[["e1e3d238.38b69"]]},{"id":"e1e3d238.38b69","type":"change","z":"a8b1b208.7036f","name":"","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":60,"wires":[["7c321a01.a8a374"]]},{"id":"7c321a01.a8a374","type":"function","z":"a8b1b208.7036f","name":"Set numSlides","func":"let pay = flow.get(\"slides\").length;\nnode.status({text:pay});\nflow.set(\"numSlides\", pay);\nreturn msg;","outputs":1,"noerr":0,"x":630,"y":50,"wires":[[]]},{"id":"7a1d11d0.1f10f","type":"template","z":"a8b1b208.7036f","name":"Slideshow Grid","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<style>\n\n#Slide_Slideshow md-card {\n background-image : url(/jolies photos/{{payload}});\n background-repeat: no-repeat;\n background-position: center;\n background-size: cover;\n}\n\n</style>\n\n\n<body>\n\n</body>\n<!--\n background-image : url(/home/pi/Pictures/camAlerte/{{payload}});\n background-image : url(/slideshow/{{payload}});\n 2020-01-31 18:06:08.jpg\n D:\\Documents\\Pictures\\Nature et découverte\\jolies photos\n-->","output":"str","x":910,"y":200,"wires":[["aa88787b.caa498","c1b38638.7c5c18"]]},{"id":"6a1426d9.0c4808","type":"function","z":"a8b1b208.7036f","name":"Slide Sequencer + +","func":"let numSlides = flow.get(\"numSlides\");\nlet slideIndex = flow.get(\"slideIndex\") || 0;\nslideIndex++;\nif (slideIndex > numSlides - 1) slideIndex = 0;\nflow.set(\"slideIndex\", slideIndex);\nmsg.slideIndex = slideIndex;\nreturn msg;","outputs":1,"noerr":0,"x":660,"y":140,"wires":[["489b40b1.dc643"]]},{"id":"489b40b1.dc643","type":"function","z":"a8b1b208.7036f","name":"Get Slide","func":"msg.payload = flow.get(\"slides\")[msg.slideIndex];\nnode.status({\"text\" : msg.payload});\nreturn msg;","outputs":1,"noerr":0,"x":880,"y":140,"wires":[["7a1d11d0.1f10f","555ecf3c.74961"]]},{"id":"fd8b81be.0c618","type":"comment","z":"a8b1b208.7036f","name":"Read image file names from directory /slideshow","info":"https://flows.nodered.org/flow/990b338798dc80c829f75677f7176647\n\nChange the path for the picture files in the node fs-ops-dir\nModify the parameters in the MQTT nodes to suit your broker of choice\n\n\n\noriginal Directory:\nC:\\Users\\OCM\\.node-red\\static\\slideshow\n\nRaspberry:\n/home/pi/Pictures/camAlerte/\n\nPC win10:\nD:\\Documents\\Pictures\\Nature et découverte\\jolies photos\nD:\\Documents\\Pictures\\transfert\n","x":310,"y":20,"wires":[]},{"id":"efbf4cb5.6feec","type":"function","z":"a8b1b208.7036f","name":"Slide Sequencer - -","func":"let numSlides = flow.get(\"numSlides\");\nlet slideIndex = flow.get(\"slideIndex\") || 0;\nslideIndex--;\nif (slideIndex < 0) slideIndex = numSlides - 1;\nflow.set(\"slideIndex\", slideIndex);\nmsg.slideIndex = slideIndex;\nreturn msg;","outputs":1,"noerr":0,"x":650,"y":170,"wires":[["489b40b1.dc643"]]},{"id":"50b18685.b9d3c8","type":"mqtt in","z":"a8b1b208.7036f","name":"Keyboard","topic":"command/keyboard","qos":"2","datatype":"auto","broker":"a6c1a205.efb05","x":380,"y":580,"wires":[[]]},{"id":"b1f2d81e.46a898","type":"switch","z":"a8b1b208.7036f","name":"Key mapping","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"arrow-left","vt":"str"},{"t":"eq","v":"arrow-right","vt":"str"},{"t":"eq","v":"play","vt":"str"},{"t":"eq","v":"pause","vt":"str"},{"t":"eq","v":"digit0","vt":"str"},{"t":"eq","v":"digit1","vt":"str"},{"t":"eq","v":"digit2","vt":"str"},{"t":"eq","v":"digit3","vt":"str"},{"t":"eq","v":"digit4","vt":"str"},{"t":"eq","v":"digit5","vt":"str"},{"t":"eq","v":"digit6","vt":"str"},{"t":"eq","v":"digit7","vt":"str"},{"t":"eq","v":"digit8","vt":"str"},{"t":"eq","v":"digit9","vt":"str"}],"checkall":"false","repair":false,"outputs":14,"x":420,"y":370,"wires":[["efbf4cb5.6feec"],["6a1426d9.0c4808"],["6667d216.f0509c"],["f541acb7.688ed"],["8dd3538.ed273b"],["a9a7f8a8.cc97c8"],["5551bde9.00f004"],["fa43780d.7042c8"],["bbe98a2a.3a4768"],["c14d0f02.0e6ea"],["3b970e83.2bd682"],["e7e1ce3a.8f83e"],["3c407dc1.316672"],["13332497.a4bb9b"]]},{"id":"41a93f42.92796","type":"comment","z":"a8b1b208.7036f","name":"to do: add error handling for directory empty","info":"","x":300,"y":1290,"wires":[]},{"id":"47a67bdc.4e3d14","type":"delay","z":"a8b1b208.7036f","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":230,"y":250,"wires":[["b1f2d81e.46a898"]]},{"id":"9620563c.e5c4f8","type":"switch","z":"a8b1b208.7036f","name":"flow gate filter Switch","property":"gate.slide","propertyType":"global","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":650,"y":100,"wires":[["6a1426d9.0c4808"]]},{"id":"aa5b8cf8.11385","type":"trigger","z":"a8b1b208.7036f","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"-5","extend":false,"units":"s","reset":"","bytopic":"all","name":"","x":290,"y":100,"wires":[["c888c18e.65de9"]]},{"id":"a5c47933.d9b758","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"Sequencer","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":100,"y":100,"wires":[["aa5b8cf8.11385"]]},{"id":"c888c18e.65de9","type":"function","z":"a8b1b208.7036f","name":"Gate","func":"let read = global.get(\"gate.slide\");\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":460,"y":100,"wires":[["9620563c.e5c4f8"]]},{"id":"6667d216.f0509c","type":"change","z":"a8b1b208.7036f","name":"Play Slide","rules":[{"t":"set","p":"gate.slide","pt":"global","to":"true","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":640,"y":210,"wires":[[]]},{"id":"f541acb7.688ed","type":"change","z":"a8b1b208.7036f","name":"Stop Slide","rules":[{"t":"set","p":"gate.slide","pt":"global","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":240,"wires":[[]]},{"id":"8dd3538.ed273b","type":"change","z":"a8b1b208.7036f","name":"slide0","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"0","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":270,"wires":[["79877944.d3c748"]]},{"id":"a9a7f8a8.cc97c8","type":"change","z":"a8b1b208.7036f","name":"slide1","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"1","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":300,"wires":[["f0118ca6.0ffd3"]]},{"id":"5551bde9.00f004","type":"change","z":"a8b1b208.7036f","name":"slide2","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"2","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"2","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":330,"wires":[["66c73099.194dc"]]},{"id":"fa43780d.7042c8","type":"change","z":"a8b1b208.7036f","name":"slide3","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"3","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"3","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":360,"wires":[["3eafcf51.b3c06"]]},{"id":"bbe98a2a.3a4768","type":"change","z":"a8b1b208.7036f","name":"slide4","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"4","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"4","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":390,"wires":[["c0a995da.aa2808"]]},{"id":"c14d0f02.0e6ea","type":"change","z":"a8b1b208.7036f","name":"slide5","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"5","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"5","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":420,"wires":[["3c5cd9e0.4fa5f6"]]},{"id":"3b970e83.2bd682","type":"change","z":"a8b1b208.7036f","name":"slide6","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"6","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"6","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":450,"wires":[["88671ce9.9bf61"]]},{"id":"e7e1ce3a.8f83e","type":"change","z":"a8b1b208.7036f","name":"slide7","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"7","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"7","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":480,"wires":[["2a78913d.5ba3ce"]]},{"id":"3c407dc1.316672","type":"change","z":"a8b1b208.7036f","name":"slide8","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"0","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":510,"wires":[["95a55a6f.df6818"]]},{"id":"79877944.d3c748","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":270,"wires":[]},{"id":"da96a33e.c873e","type":"link in","z":"a8b1b208.7036f","name":"","links":["79877944.d3c748","f0118ca6.0ffd3","66c73099.194dc","3eafcf51.b3c06","c0a995da.aa2808","3c5cd9e0.4fa5f6","88671ce9.9bf61","2a78913d.5ba3ce","95a55a6f.df6818","1a2c114c.c8df8f"],"x":835,"y":390,"wires":[["489b40b1.dc643"]]},{"id":"f0118ca6.0ffd3","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":740,"y":300,"wires":[]},{"id":"66c73099.194dc","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":330,"wires":[]},{"id":"3eafcf51.b3c06","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":360,"wires":[]},{"id":"13332497.a4bb9b","type":"change","z":"a8b1b208.7036f","name":"slide9","rules":[{"t":"set","p":"slideIndex","pt":"msg","to":"9","tot":"num"},{"t":"set","p":"slideIndex","pt":"flow","to":"9","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":540,"wires":[["1a2c114c.c8df8f","d36d435e.8ed26"]]},{"id":"c0a995da.aa2808","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":390,"wires":[]},{"id":"3c5cd9e0.4fa5f6","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":420,"wires":[]},{"id":"88671ce9.9bf61","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":450,"wires":[]},{"id":"2a78913d.5ba3ce","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":480,"wires":[]},{"id":"95a55a6f.df6818","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":510,"wires":[]},{"id":"1a2c114c.c8df8f","type":"link out","z":"a8b1b208.7036f","name":"","links":["da96a33e.c873e"],"x":735,"y":540,"wires":[]},{"id":"8d1eb405.a25308","type":"comment","z":"a8b1b208.7036f","name":"Images are rendered as background-images , so the size is not very critical","info":"","x":790,"y":20,"wires":[]},{"id":"aa88787b.caa498","type":"ui_template","z":"a8b1b208.7036f","group":"73a0a8fc.2ddf18","name":"","order":1,"width":28,"height":9,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":930,"y":240,"wires":[[]]},{"id":"ab051919.7c87e8","type":"inject","z":"a8b1b208.7036f","name":"Go","topic":"","payload":"Initialize pictures","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":80,"y":60,"wires":[["a607989b.75b898"]]},{"id":"97f6712d.5e2ad","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit0","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":420,"wires":[["b1f2d81e.46a898"]]},{"id":"3a25b40e.735f0c","type":"mqtt out","z":"a8b1b208.7036f","name":"","topic":"command/keyboard","qos":"2","retain":"false","broker":"a6c1a205.efb05","x":410,"y":520,"wires":[]},{"id":"ae164607.dd9538","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit1","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":450,"wires":[["b1f2d81e.46a898"]]},{"id":"3555a943.96cd46","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"pause","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":330,"wires":[["b1f2d81e.46a898"]]},{"id":"1e6de90b.3e29d7","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"play","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":300,"wires":[["b1f2d81e.46a898"]]},{"id":"7abf86a3.94e758","type":"inject","z":"a8b1b208.7036f","name":"arrow-right","topic":"","payload":"arrow-right","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"2","x":170,"y":360,"wires":[["b1f2d81e.46a898"]]},{"id":"7214822e.1bab5c","type":"inject","z":"a8b1b208.7036f","name":"arrow-left","topic":"","payload":"arrow-left","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"2","x":170,"y":390,"wires":[["b1f2d81e.46a898"]]},{"id":"f8e3ade0.98769","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit2","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":480,"wires":[["b1f2d81e.46a898"]]},{"id":"68bb4fc5.2f8f4","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit3","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":510,"wires":[["b1f2d81e.46a898"]]},{"id":"1efe8f1e.2d4b81","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit4","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":540,"wires":[["b1f2d81e.46a898"]]},{"id":"ca8a5579.d4d2a8","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit5","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":570,"wires":[["b1f2d81e.46a898"]]},{"id":"f5d4ea43.4adf68","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit6","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":600,"wires":[["b1f2d81e.46a898"]]},{"id":"85772374.cd909","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit7","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":630,"wires":[["b1f2d81e.46a898"]]},{"id":"eb06dd37.5f52","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit8","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":660,"wires":[["b1f2d81e.46a898"]]},{"id":"ec38ed04.a60f9","type":"inject","z":"a8b1b208.7036f","name":"","topic":"","payload":"digit9","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":690,"wires":[["b1f2d81e.46a898","4550b0c0.07f19"]]},{"id":"76586f7a.4ecf4","type":"comment","z":"a8b1b208.7036f","name":" background-image : url(/slideshow/{{payload}});","info":"","x":980,"y":290,"wires":[]},{"id":"555ecf3c.74961","type":"ui_text","z":"a8b1b208.7036f","group":"73a0a8fc.2ddf18","order":3,"width":5,"height":1,"name":"pictureName","label":"{{msg.payload}}","format":"","layout":"row-center","x":1050,"y":140,"wires":[]},{"id":"c1b38638.7c5c18","type":"debug","z":"a8b1b208.7036f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":1110,"y":210,"wires":[]},{"id":"a607989b.75b898","type":"function","z":"a8b1b208.7036f","name":"path","func":"msg.path = \"/home/pi/Pictures/camAlerte/\";\nreturn msg\n","outputs":1,"noerr":0,"x":190,"y":60,"wires":[["9d439c99.fd9bf"]]},{"id":"d36d435e.8ed26","type":"debug","z":"a8b1b208.7036f","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":870,"y":540,"wires":[]},{"id":"f917fb3d.0c5498","type":"comment","z":"a8b1b208.7036f","name":"payload: \"digit9\"","info":"msg : Object\nobject\n_msgid: \"b537335.0375fd\"\ntopic: \"\"\npayload: \"digit9\"","x":320,"y":720,"wires":[]},{"id":"4550b0c0.07f19","type":"debug","z":"a8b1b208.7036f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":360,"y":690,"wires":[]},{"id":"897df4dd.445a58","type":"comment","z":"a8b1b208.7036f","name":"payload: \"digit9\" slideIndex: 9","info":"msg : Object\nobject\n_msgid: \"ed422d47.b2d98\"\ntopic: \"\"\npayload: \"digit9\"\nslideIndex: 9","x":880,"y":580,"wires":[]},{"id":"a6c1a205.efb05","type":"mqtt-broker","z":"","name":"Mosquitto","broker":"192.168.1.40","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"73a0a8fc.2ddf18","type":"ui_group","z":"","name":"Slideshow","tab":"b123e6c8.d3e948","disp":false,"width":"28","collapse":false},{"id":"b123e6c8.d3e948","type":"ui_tab","z":"","name":"Slide","icon":"dashboard","disabled":false,"hidden":false}]
The file name is correctly displayed
where i am false ?
Please tell me what is your http static folder, the one that appear in the initialization log.
4 Feb 10:01:14 - [info] Node-RED version: v1.0.3
4 Feb 10:01:14 - [info] Node.js version: v8.11.1
4 Feb 10:01:14 - [info] Windows_NT 10.0.17763 x64 LE
4 Feb 10:01:17 - [info] Loading palette nodes
4 Feb 10:02:44 - [info] Worldmap version 2.2.0
4 Feb 10:02:50 - [info] Dashboard version 2.19.2 started at /ui
4 Feb 10:02:56 - [info] Settings file : \Users\OCM.node-red\settings.js
4 Feb 10:02:56 - [info] HTTP Static : C:\Users\OCM.node-red\static
this is when i start node-red :
4 Feb 15:07:31 - [info]
Welcome to Node-RED
===================
4 Feb 15:07:31 - [info] Node-RED version: v1.0.3
4 Feb 15:07:31 - [info] Node.js version: v10.18.1
4 Feb 15:07:31 - [info] Linux 4.19.93-v7+ arm LE
4 Feb 15:07:32 - [info] Loading palette nodes
4 Feb 15:07:40 - [info] Dashboard version 2.19.3 started at /ui
4 Feb 15:07:41 - [info] Settings file : /home/pi/.node-red/settings.js
4 Feb 15:07:41 - [info] Context store : 'default' [module=localfilesystem]
4 Feb 15:07:41 - [info] User directory : /home/pi/.node-red
4 Feb 15:07:41 - [warn] Projects disabled : editorTheme.projects.enabled=false
4 Feb 15:07:41 - [info] Flows file : /home/pi/.node-red/flows_pi.json
4 Feb 15:07:41 - [info] Server now running at http://127.0.0.1:1880/
4 Feb 15:07:42 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.
If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.
You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
4 Feb 15:07:42 - [info] Starting flows
TypeError: Cannot read property 'config' of null
at addWidget (/home/pi/.node-red/node_modules/node-red-dashboard/index.js:70:39)
at Object.addWidget (/home/pi/.node-red/node_modules/node-red-dashboard/index.js:131:48)
at new ValueTrailNode (/home/pi/.node-red/node_modules/node-red-contrib-ui-value-trail/ui-value-trail.js:196:15)
at Object.createNode (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/util.js:483:31)
at Flow.start (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/Flow.js:189:48)
at start (/usr/lib/node_modules/node-red/node_modules/@node-red/runtime/lib/nodes/flows/index.js:329:33)
at tryCatchReject (/usr/lib/node_modules/node-red/node_modules/when/lib/makePromise.js:845:30)
at runContinuation1 (/usr/lib/node_modules/node-red/node_modules/when/lib/makePromise.js:804:4)
at Fulfilled.when (/usr/lib/node_modules/node-red/node_modules/when/lib/makePromise.js:592:4)
at Pending.run (/usr/lib/node_modules/node-red/node_modules/when/lib/makePromise.js:483:13)
at Scheduler._drain (/usr/lib/node_modules/node-red/node_modules/when/lib/Scheduler.js:62:19)
at Scheduler.drain (/usr/lib/node_modules/node-red/node_modules/when/lib/Scheduler.js:27:9)
at process._tickCallback (internal/process/next_tick.js:61:11)
4 Feb 15:07:43 - [info] [ftp-server:NR-server] Starting ftp server: 192.168.1.54:7021
4 Feb 15:07:45 - [info] Started flows
http static folder ? 
We want to serve a resource (picture files) from a server (Node-RED runtime) to a browser. In such case we have to configure the httpstatic folder in "settings.js". Before I explain how I do in my system please do another real quick testing.
Try to get a photo in a browser page, something like below (just changing the ip address and the image file name). I expect it will fail.
http://127.0.0.1:1880/jolies photos/xxx.jpeg
yes it fail
[EDIT ] : i just update my settings.js
4 Feb 16:15:11 - [info] Node-RED version: v1.0.3
4 Feb 16:15:11 - [info] Node.js version: v10.18.1
4 Feb 16:15:11 - [info] Linux 4.19.93-v7+ arm LE
4 Feb 16:15:13 - [info] Loading palette nodes
4 Feb 16:15:21 - [info] Dashboard version 2.19.3 started at /ui
4 Feb 16:15:22 - [info] Settings file : /home/pi/.node-red/settings.js
4 Feb 16:15:22 - [info] HTTP Static : /home/pi/Pictures/camAlerte
ok, good. So let´s configure a httpstatic folder to your environment ?
Based on these two threads:
https://discourse.nodered.org/t/import-javascript-library-into-node-red/7665/2
https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880
/home/pi/.node-red/static. Of course, "static" could be named whatever you likehttpStatic in your settings file (settings.js) to /home/pi/.node-red/static
// When httpAdminRoot is used to move the UI to a different root path, the
// following property can be used to identify a directory of static content
// that should be served at http://localhost:1880/.
//httpStatic: '/home/nol/node-red-static/',
httpStatic: '/home/pi/.node-red/static',
opss... you did it very quickly 
Now if you copy your photos to this folder you can test and tell us what happened
ok this is what a do :
For example,
/home/pi/Documents/node-red-static/camAlerte/
cam.jpg .httpStatic in your settings file to httpStatic: '/home/pi/Documents/node-red-static/',
4 Feb 17:05:57 - [info] HTTP Static : /home/pi/Documents/node-red-static
http://localhost:1880/camAlerte/cam.jpg in your browser. and ............
[EDIT] The difference is i put the / at the end of http static in the settings.js :
httpStatic: '/home/pi/Documents/node-red-static/',
with or without the /is same ...
What a tried :
http://127.0.0.1:1880/node-red-static/cam.jpg
http://127.0.0.1:1880/node-red-static/camAlerte/cam.jpg
http://127.0.0.1:1880/home/pi/Documents/node-red-static/camAlerte/cam.jpg
without succes !
it' alive !
the slideshow display pictures 
i don't know why in browser i can't access , but the flow is working !
Cool.
In regards to the static folder access this should work
http://127.0.0.1:1880/node-red-static/camAlerte/cam.jpg
but only if you opened the browser in the same machine that runs Node-RED:
If you opened the browser in another computer you have to change the ip address to point to the actual that hosts Node-RED.
@andrei,
my slideshow is starting to take shape,
this is chromium in the raspberry , where Node-red run :
<style>
#Slide_Slideshow md-card {
background-image : url(/camAlerte/{{payload}});
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% auto ;
}
</style>
<body></body>
but by putting the image in "background", my text node also has the image in background.
Can we display the image other than in the background?
with a classic img tag like this:
<img src = "url (/camAlerte/{{payload}})" style="width: 100%">
This is an example, I know it doesn't work. But is it possible?
Indeed, it is getting cool. Fixing the issue should not be difficult. I need to do some testing as there are at least three different solutions that comes to my mind. The first one, and probably the quickest one, would be to put the widgets in different groups. You would leave only the template node in the group Slide_Slideshow (give the text node another dashboard group). The second way (need testing) is try to change the CSS selector. The third one is like you said, but also need to test. I like using background as it is forgiving when it comes to the size of the picture. Even using different sizes they will all fit well in the available space.
@Andrei, Thanks for support. I modified it to remove the dependency of MQTT. It works very good. However, I tried to changed the group of the template to another tab. It did not work. It seems that the template is linked to the "slide" tab and to the "Slideshow" group. Can you explain how? so that, I can change the group and tab to another group and tab.
Thank you for your support. The provided link does not work
https://discourse.nodered.org/t/ir-detector-the-project-that-grew-and-grew/473
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy