DashBoard photo slide thing? maybe slidshow?

Hello,

i know there is a section about this, i could not get my photos to work on that particular selection. the is another one common to the google searches. still seems more complicated then my goals.

i helped my daughter setup a Pi camera focused on a bean. through crontab it takes photos every 30 min with the plans to stitch a nice time laps at the end.

i also have a crontab function to keep a backup of the photos on my server. so i don't need to take the photos or inject them to the folder.

is there a way to just display the last photo in the folder, and when someone opens the dashboard it updates and grabs the latest photo?

or even a continues slide show of the photos in the folder?

You will need to extract the last (or rather latest) filename. You can do that with one of the filing system contrib nodes. Alternatively, capture the output from an ls -l command sorted by date (sorry can't remember the parameter for that) from the folder and grab the last entry.

so use the exe node. do my linux command with ls -lt (long format newest first) put that into a change node to read only the first line and ignore the rest? forgot to ask the rest of my question. got excited and tryed the command thing.

how do you get node red to ignore the information after the first line?

ok i've been playing with one of the slideshow node things and i can't get the photos to show.

[{"id":"a32424b.3788cd8","type":"tab","label":"Flow 7","disabled":false,"info":""},{"id":"22f4d933.e744e6","type":"ui_button","z":"a32424b.3788cd8","name":">","group":"d2e998ef.e44f08","order":6,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-right","payload":"next","payloadType":"str","topic":"","x":270,"y":340,"wires":[["f67f597f.c48118"]]},{"id":"490696a4.72faf8","type":"ui_button","z":"a32424b.3788cd8","name":"<","group":"d2e998ef.e44f08","order":5,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","icon":"fa-chevron-left","payload":"previous","payloadType":"str","topic":"","x":270,"y":380,"wires":[["f67f597f.c48118"]]},{"id":"a6e64f10.e6cd88","type":"ui_button","z":"a32424b.3788cd8","name":"<<","group":"d2e998ef.e44f08","order":4,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_rewind","payload":"first","payloadType":"str","topic":"","x":270,"y":260,"wires":[["f67f597f.c48118"]]},{"id":"71c538b3.012f6","type":"ui_button","z":"a32424b.3788cd8","name":">>","group":"d2e998ef.e44f08","order":7,"width":1,"height":1,"passthru":true,"label":"","tooltip":"","color":"","bgcolor":"grey","icon":"fast_forward","payload":"last","payloadType":"str","topic":"","x":270,"y":300,"wires":[["f67f597f.c48118"]]},{"id":"6525296f.26e76","type":"ui_button","z":"a32424b.3788cd8","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":270,"y":180,"wires":[["f67f597f.c48118","8f373f05.298ed8"]]},{"id":"db54f43e.c96a6","type":"ui_button","z":"a32424b.3788cd8","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":270,"y":220,"wires":[["f67f597f.c48118","8f373f05.298ed8"]]},{"id":"2d9ea997.5df70e","type":"function","z":"a32424b.3788cd8","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":630,"y":240,"wires":[["312b2c39.1cb6dc","f6628b6c.d4b3f"],["a7f17431.0d6d1"]]},{"id":"f368f910.20f8d","type":"fs-ops-dir","z":"a32424b.3788cd8","name":"","path":"path","pathType":"msg","filter":"","filterType":"str","dir":"files","dirType":"msg","x":480,"y":100,"wires":[["104ca63c.c18c82"]]},{"id":"104ca63c.c18c82","type":"change","z":"a32424b.3788cd8","name":"set array in flow.slides","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":100,"wires":[["93ab4903.b1806"]]},{"id":"93ab4903.b1806","type":"function","z":"a32424b.3788cd8","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":880,"y":100,"wires":[["2d9ea997.5df70e"]]},{"id":"a01c5d24.4fafd8","type":"inject","z":"a32424b.3788cd8","name":"Go","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3600","crontab":"","once":false,"onceDelay":"1","topic":"","payload":"Initialize pictures","payloadType":"str","x":150,"y":100,"wires":[["8e6d5070.23a6b8"]]},{"id":"8e6d5070.23a6b8","type":"function","z":"a32424b.3788cd8","name":"set path","func":"//let path=flow.get('picturePath');\npath = "/home/pi/extra/pipersplant/";\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":340,"y":100,"wires":[["f368f910.20f8d"]]},{"id":"3d9636f3.bd4352","type":"link in","z":"a32424b.3788cd8","name":"getPath","links":["271aca69.06a7c6","d4dc51cb.4e0ef","6816661c.dc4008","f8f338.7920fcc8","f67f597f.c48118","4616e465.e9e8cc","e90aeeb0.8b501"],"x":195,"y":140,"wires":[["8e6d5070.23a6b8"]]},{"id":"f67f597f.c48118","type":"link out","z":"a32424b.3788cd8","name":"getPath","links":["3d9636f3.bd4352"],"x":415,"y":280,"wires":[]},{"id":"312b2c39.1cb6dc","type":"ui_template","z":"a32424b.3788cd8","group":"d2e998ef.e44f08","name":"img","order":1,"width":10,"height":8,"format":"\n\n\n\ndiv.parent {\n position: relative;\n height: 100%;\n}\ndiv.absolute {\n position: absolute;\n width: 100%;\n bottom: 0px;\n} \n\n\n\n\n <div class="parent">\n <div class="absolute" >\n <img src="pipersplant/{{msg.fileName}}" alt="Bean Growth!" style="width:100%">
\n {{msg.fileName}} {{msg.affSlideIndex}}/{{msg.numSlides}} \n \n \n\n\n\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":850,"y":220,"wires":[[]]},{"id":"f6628b6c.d4b3f","type":"ui_text","z":"a32424b.3788cd8","d":true,"group":"d2e998ef.e44f08","order":13,"width":"6","height":"1","name":"picName/number","label":"{{msg.fileName}}","format":"{{msg.affSlideIndex}}/{{msg.numSlides}}","layout":"row-center","x":890,"y":180,"wires":[]},{"id":"a7f17431.0d6d1","type":"fs-ops-delete","z":"a32424b.3788cd8","name":"del","path":"path","pathType":"msg","filename":"fileName","filenameType":"msg","x":850,"y":260,"wires":[["57a0bd5b.c96e64"]]},{"id":"e90aeeb0.8b501","type":"link out","z":"a32424b.3788cd8","name":"getPath","links":["3d9636f3.bd4352"],"x":1095,"y":260,"wires":[]},{"id":"57a0bd5b.c96e64","type":"function","z":"a32424b.3788cd8","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":990,"y":260,"wires":[["e90aeeb0.8b501"]]},{"id":"c634acaa.e08a1","type":"switch","z":"a32424b.3788cd8","name":"flow gate filter Switch","property":"gateSlide","propertyType":"flow","rules":[{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":1,"x":720,"y":500,"wires":[["22f4d933.e744e6"]]},{"id":"14175ea1.ef5c19","type":"trigger","z":"a32424b.3788cd8","name":"2s","op1":"","op2":"","op1type":"pay","op2type":"pay","duration":"-2","extend":false,"units":"s","reset":"","bytopic":"all","outputs":1,"x":410,"y":500,"wires":[["9f779c88.4d3c78"]]},{"id":"23de5e0.ba31722","type":"inject","z":"a32424b.3788cd8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":"1","topic":"","payload":"Sequencer","payloadType":"str","x":250,"y":500,"wires":[["14175ea1.ef5c19"]]},{"id":"9f779c88.4d3c78","type":"function","z":"a32424b.3788cd8","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,"initialize":"","finalize":"","libs":[],"x":540,"y":500,"wires":[["c634acaa.e08a1"]]},{"id":"8f373f05.298ed8","type":"ui_text","z":"a32424b.3788cd8","group":"d2e998ef.e44f08","order":10,"width":2,"height":1,"name":"play/pause","label":"{{msg.payload}}","format":"","layout":"row-left","x":450,"y":200,"wires":[]},{"id":"b4de03b2.5d5198","type":"comment","z":"a32424b.3788cd8","name":"Read me","info":"## Prerequisites\nThis Flow work in the Raspberry with Raspbian and Node-red installed\n - Requires the installation of contrib node: fs-ops-dir.\n - Create folders in Node-RED and populate it with pictures. (The difference with Andrei Flow is that I don't display the images in the background). => 1/\n - Requires Context Storage and httpStatic activated change the settings.js file in the raspberry => 2/.\n\n\n## How to do prerequisites ?\n1/ in the /home/pi/Documents Folder : create a new Foder named: node-red-static\nin this /home/pi/Documents/node-red-static Folder , create a new Folder named: camAlerte\n\n2/ this flow use context storage: in the /home/pi/.node-red Folder , open the settings.jsand verify (around line 222) must be like this : \n\n // Context Storage\n // The following property can be used to enable context storage. The configuration\n // provided here will enable file-based context that flushes to disk every 30 seconds.\n // Refer to the documentation for further options: https://nodered.org/docs/api/context/\n //\n contextStorage: {\n default: {\n module:\"localfilesystem\",\n\t\t\tconfig: {\n\t\t\t\tdir:\"~/.node-red\",\n\t\t\t\tbase:\"context\",\n\t\t\t\tcache:true,\n\t\t\t\tflushInterval:30\n\t\t\t}\n },\n },\n\n\n And add (modify) a line (around line108) ,like this : \n\n // When httpAdminRoot is used to move the UI to a different root path, the\n // following property can be used to identify a directory of static content\n // that should be served at http://localhost:1880/.\n\t//httpStatic: '/home/nol/node-red-static/',\n httpStatic: '/home/pi/Documents/node-red-static',\n\n(of course , you can change the location and the name of the directory)\n## How it works\nAfter indicating the folder of images, the fs-ops-dir node create an array of pictures name contained in the folder. It only remains to display the desired image by indicating its position in the table. It's a template node that will format a message to display the picture.\n\nBelow the code inside this template node.\n\n<img src=\"/camAlerte/{{msg.fileName}}\" alt=\"Camera Picture\" style=\"width:100%\"><br>\n\n\n## Built and tested With\n
[Node-RED] - version 1.0.3\n
[Dashboard] - version 2.19.4 \n","x":620,"y":60,"wires":},{"id":"a7a22eb9.cb4358","type":"comment","z":"a32424b.3788cd8","name":"Your Folder here :","info":"example : \n/home/pi/extra/pipersplant/","x":330,"y":40,"wires":},{"id":"d2e998ef.e44f08","type":"ui_group","name":"Slideshow","tab":"dff60b6.f28d178","order":3,"disp":true,"width":"10","collapse":false},{"id":"dff60b6.f28d178","type":"ui_tab","name":"Piper","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

that is the code. i've got all my folder chages made as per the readme.

below is what i get

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