Hi everyone,
after search here, I found how to show images on dashboard from a local path.
Now, I have to receive informations from a camera using TCP/IP and show at dashboard.
So, I used a node 'tcp in' and configure with IP/port and use Outpu as 'stream of String'...so I can listening the device(camera), but I have the follow problem:
Every message received from device contains: 'PSVB' + 'mystring'. (At this case I texted "Test")
However I need to receive data type: real. So I change at device from string to real(one variable which I need), and it sends ' PSVB '. So, anyone knows how to receive this message with caracteres more numbers?
Code:
[{"id":"92c56d3d.e7382","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"9ad3a676.fb8e18","type":"function","z":"92c56d3d.e7382","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,"x":610,"y":280,"wires":[["4884e9ec.ba76e8","b801b61b.5779a8"],["11b37e4.3b05b82"]]},{"id":"90503d5b.ffde9","type":"fs-ops-dir","z":"92c56d3d.e7382","name":"","path":"path","pathType":"msg","filter":"*","filterType":"str","dir":"files","dirType":"msg","x":640,"y":80,"wires":[["253f6c60.54a4b4"]]},{"id":"253f6c60.54a4b4","type":"change","z":"92c56d3d.e7382","name":"set array in flow.slides","rules":[{"t":"set","p":"slides","pt":"flow","to":"files","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":80,"wires":[["54bb6dc4.541184"]]},{"id":"54bb6dc4.541184","type":"function","z":"92c56d3d.e7382","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,"x":1020,"y":80,"wires":[["9ad3a676.fb8e18"]]},{"id":"43321266.29243c","type":"inject","z":"92c56d3d.e7382","name":"Go","topic":"","payload":"Initialize pictures","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"1","x":330,"y":40,"wires":[["f54067c5.9ce6f8"]]},{"id":"f54067c5.9ce6f8","type":"function","z":"92c56d3d.e7382","name":"set path","func":"//let path=flow.get('picturePath');\npath = \"C:/Users/franc/.node-red/node-red-static/Robotika\";\n//flow.set ('picturePath',path); //save picturePath : le chemin du dossier des pictures\nmsg.path = path;\nreturn msg;\n","outputs":1,"noerr":0,"x":500,"y":80,"wires":[["90503d5b.ffde9"]]},{"id":"438773ec.a7331c","type":"link in","z":"92c56d3d.e7382","name":"getPath","links":["271aca69.06a7c6","d4dc51cb.4e0ef","6816661c.dc4008","f8f338.7920fcc8","4616e465.e9e8cc","3a414b07.7ceb94","fd02b897.8eecd8"],"x":575,"y":140,"wires":[["f54067c5.9ce6f8"]]},{"id":"4884e9ec.ba76e8","type":"ui_template","z":"92c56d3d.e7382","group":"332c9960.a38046","name":"img","order":1,"width":"0","height":"0","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=\"/Robotika/{{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":830,"y":240,"wires":[[]]},{"id":"b801b61b.5779a8","type":"ui_text","z":"92c56d3d.e7382","d":true,"group":"40e977fa.504fb8","order":12,"width":5,"height":1,"name":"picName/number","label":"{{msg.fileName}}","format":"{{msg.affSlideIndex}}/{{msg.numSlides}}","layout":"row-spread","x":870,"y":200,"wires":[]},{"id":"11b37e4.3b05b82","type":"fs-ops-delete","z":"92c56d3d.e7382","name":"del","path":"path","pathType":"msg","filename":"fileName","filenameType":"msg","x":810,"y":280,"wires":[["e8dc5fa7.23a16"]]},{"id":"3a414b07.7ceb94","type":"link out","z":"92c56d3d.e7382","name":"getPath","links":["438773ec.a7331c"],"x":1095,"y":240,"wires":[]},{"id":"e8dc5fa7.23a16","type":"function","z":"92c56d3d.e7382","name":"Stay at last","func":"let slideIndex = msg.slideIndex;\nlet numSlides = msg.numSlides;\n if (slideIndex<numSlides-1) {\n msg.payload=\"next\"\n } \n else { msg.payload=\"play\" } \nreturn msg;\n","outputs":1,"noerr":0,"x":950,"y":280,"wires":[["3a414b07.7ceb94"]]},{"id":"4dfb898b.87e218","type":"inject","z":"92c56d3d.e7382","name":"","topic":"","payload":"next","payloadType":"str","repeat":"1","crontab":"","once":true,"onceDelay":"1","x":230,"y":80,"wires":[["f54067c5.9ce6f8"]]},{"id":"6e5c960c.57c128","type":"comment","z":"92c56d3d.e7382","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 ?**\n**1/** 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\n**2/** this flow use context storage: in the `/home/pi/.node-red` Folder , open the `settings.js`and 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":480,"y":40,"wires":[]},{"id":"2714c560.8085ea","type":"ui_template","z":"92c56d3d.e7382","group":"a3f0a56e.200958","name":"Logo / Clock","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/Robotika/logo.png'\n logo.height = 65;\n div1[0].style.margin = '5px auto';\n\n div1.append(logo);\n\n //add clock\n var div2 = $('<div/>');\n var p = $('<p/>');\n\n div2.append(p);\n div2[0].style.margin = '5px';\n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n //add to toolbar when it's available\n var addToToolbarTimer;\n \n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n \n if(!toolbar.length) return;\n \n toolbar.append(div1);\n toolbar.append(div2);\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":950,"y":20,"wires":[[]]},{"id":"654b6252.8a7dfc","type":"debug","z":"92c56d3d.e7382","name":"Show information","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":790,"y":420,"wires":[]},{"id":"a3aa9d81.c3188","type":"tcp in","z":"92c56d3d.e7382","name":"Node-RED Client","server":"client","host":"169.254.154.100","port":"36701","datamode":"stream","datatype":"utf8","newline":"","topic":"Msg from BVS","base64":false,"x":260,"y":420,"wires":[["654b6252.8a7dfc"]]},{"id":"332c9960.a38046","type":"ui_group","z":"","name":"InspeĆ§Ć£o Visual","tab":"6e51523d.4c5cfc","order":1,"disp":true,"width":"12","collapse":false},{"id":"40e977fa.504fb8","type":"ui_group","z":"","name":"Slideshow","tab":"","order":1,"disp":true,"width":"10","collapse":false},{"id":"a3f0a56e.200958","type":"ui_group","z":"","name":"Default","tab":"","order":1,"disp":false,"width":"24","collapse":false},{"id":"6e51523d.4c5cfc","type":"ui_tab","z":"","name":"rotĆ³tipo","icon":"","order":1,"disabled":false,"hidden":false}]