[SOLVED] Help with Dashboard slideshow gallery

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.

  1. What code should I use to find the images in a raspberry folder?
  2. The most would be to add a "trash" button to delete photos that are useless. What is the code for deleting a file in a folder?

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.

http://sye.dk/sfpg/

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

3 Likes

Thanks to you Andrei for this clear flow

But as i'm dumb :stuck_out_tongue_winking_eye:, 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 ? :thinking:

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

  1. create a directory called /home/pi/.node-red/static. Of course, "static" could be named whatever you like
  2. copy your photos into that directory
  3. edit property httpStatic 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',
  1. restart Node-RED and watch in the initialization log if you see now the http static line
  2. try to load a picture in the browser using

http://127.0.0.1:1880/static/xxx.jpeg

opss... you did it very quickly :slight_smile:

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,

  1. create a directory called /home/pi/Documents/node-red-static/camAlerte/
  2. copy all of the pictures.jpg content into that directory - lets assume that includes a file called cam.jpg .
  3. set httpStatic in your settings file to httpStatic: '/home/pi/Documents/node-red-static/',
  4. restart Node-RED and confirm http static folder : 4 Feb 17:05:57 - [info] HTTP Static : /home/pi/Documents/node-red-static
  5. check you can load http://localhost:1880/camAlerte/cam.jpg in your browser. and ............
    image
    :sob:

[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 :star_struck:
i don't know why in browser i can't access , but the flow is working !


i will come back when i finish the flow properly
Thanks @Andrei

1 Like

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.

:thinking: this is chromium in the raspberry , where Node-red run :

@andrei,
my slideshow is starting to take shape, :star_struck:

<style>
#Slide_Slideshow md-card {
   background-image : url(/camAlerte/{{payload}});
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: 100% auto  ;
}
</style>
<body></body>

image
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?

1 Like

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