Take and display a photo with Raspberry Pi

I have been write these few lines because I lost times to understand where was the issue, and I saw many people have this, but don't solve it.

Installation OS: DietPi

I saw many informations related to modify "httpStatic" parameter in ~/node-red/settings.js. I tested with parameters httpStatic, httpAdminRoot, httpNodeRoot, ... But nothing to do !

I have been found another solution. Create a symbolic link in your "node-red-dashboard/dist" folder

  • Go to ./dietpi/node-red/node_modules/node-red-dashboard/dist/
  • Create a symbolic link from ./dietpi/Pictures/ to pictures (for instance) (ln -s ./dietpi/Pictures/ pictures)
  • Now you could access to your pictures in: http://xxxx:1880/ui/pictures/xxxx.jpg"
  • To display you can add some lines to an ui_template (see in the flow)

You will find below a complete flow which running.

[{"id":"c74bd0ef.b29328","type":"exec","z":"1c76e7fb.0df6f","command":"","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"Take a shot ","x":690,"y":140,"wires":[["95e1d467.9dbc98","c6509cbf.be3708"],["95e1d467.9dbc98"],["95e1d467.9dbc98"]],"info":"\n\nsudo raspistill -o /mnt/dietpi_userdata/Pictures/\nsudo raspistill -o /mnt/dietpi_userdata/Pictures/20200327_182546.jpg\n\"sudo raspistill -o /Pictures/\" \n\nNOK\n\"python -c 'script.py; rf1(\"+msg.payload+\")'\""},{"id":"f2c87fa2.f61ce8","type":"inject","z":"1c76e7fb.0df6f","name":"Manual photo shot","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":180,"wires":[["9a40c84d.d7c958"]]},{"id":"95e1d467.9dbc98","type":"debug","z":"1c76e7fb.0df6f","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":830,"y":160,"wires":[]},{"id":"9a40c84d.d7c958","type":"moment","z":"1c76e7fb.0df6f","name":"","topic":"photo_shot","input":"payload","inputType":"msg","inTz":"Europe/Paris","adjAmount":0,"adjType":"days","adjDir":"add","format":"YYYYMMDD_HHMMSS","locale":"fr_FR","output":"date","outputType":"msg","outTz":"Europe/Paris","x":330,"y":140,"wires":[["4f97bb00.4d4b6c"]]},{"id":"4f97bb00.4d4b6c","type":"function","z":"1c76e7fb.0df6f","name":"Concatenate","func":"\n//\nvar httpAdress = \"http://192.168.1.56:1880/ui/pictures/\";\n\nmsg.payload = \"sudo raspistill -o /mnt/dietpi_userdata/Pictures/\" + \n              msg.date + \".jpg\";\nmsg.name = msg.date;\nmsg.link = httpAdress + msg.date + \".jpg\";\n\nreturn msg;","outputs":1,"noerr":0,"x":510,"y":140,"wires":[["c74bd0ef.b29328"]]},{"id":"92968cc3.40bc6","type":"ui_button","z":"1c76e7fb.0df6f","name":"","group":"810c43dd.100e98","order":3,"width":0,"height":0,"passthru":false,"label":"Take a photo","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"date","topic":"","x":150,"y":140,"wires":[["9a40c84d.d7c958"]]},{"id":"c6509cbf.be3708","type":"ui_template","z":"1c76e7fb.0df6f","group":"810c43dd.100e98","name":"","order":4,"width":"6","height":"7","format":"<p> Picture date: {{msg.date}}\n<br><a href={{msg.link}}>\n<img width=\"100%\" height=\"100%\" src={{msg.link}} alt='Image not found'/>\n</a>\n</p>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":840,"y":120,"wires":[[]]},{"id":"810c43dd.100e98","type":"ui_group","z":"","name":"MyGarage","tab":"6ab2937e.b0cfb4","disp":true,"width":"6","collapse":false},{"id":"6ab2937e.b0cfb4","type":"ui_tab","z":"","name":"MyGarage","icon":"drive_eta","disabled":false,"hidden":false}]

Flow Info

Created 5 years, 5 months ago
Rating: not yet rated

Owner

Actions

Rate:

Node Types

Core
  • debug (x1)
  • exec (x1)
  • function (x1)
  • inject (x1)
Other
  • moment (x1)
  • ui_button (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • RasPi
  • Raspberry
  • Pi
  • RaspberryPi
  • picture
  • photo
  • dashboard
  • display
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option