Contents


Overview

Skill Level: Any Skill Level

Show how to use a combination of python, node-red and html to display and auto-update image captured on raspberry pi camera

Ingredients

Raspberry Pi -- configured with Raspbian and NodeRed

BlueMix account running a Node Red Instance

Step-by-step

  1. Take a Picture on the Raspberry Pi

    Following the instructions from https://www.raspberrypi.org/learning/getting-started-with-picamera/worksheet/

    setup the camera to take a picture.

     

    The only modification to that is to add the #!/usr/bin/python3 and make it executable.

    Have it store the image to a known location.

    It is a good idea to set the sleep time to 1 second

     

    #!/usr/bin/python

    from picamera import PiCamera
    from time import sleep

    camera = PiCamera()

    camera.start_preview()
    sleep(1)
    camera.capture('/home/pi/Desktop/image.jpg')
    camera.stop_preview()
  2. Create a Node Red Flow on the Raspberry Pi

    Create an HTTP node input where you create http request input on the rasperry pi.

    Create an Execute Node configured to run the script you wrote in step 1.

    Create a File node where you get the file.

    Create a HTTP response node where you send the file back after the http request.

    Conenct the 5 nodes together like this:

    NodeRedFlow

  3. Create a UI template node on your BlueMix NodeRed Flow

    If you need instructions for using the UI nodes go http://flows.nodered.org/node/node-red-contrib-ui

    Create a node red flow that connects a repeating inject timestamp into a function that creates the web path to the camera picture page made available in step 2, with the time stamp appended at the end. IE

    var address = global.get("PiNodeRedAddress");
    msg.payload= address+"/smallimg?t="+msg.payload;
    return msg;

     

    Then create a template node and update the code to the following. Be sure to specify the IP address of the raspberry pi.

    <img src={{msg.payload}}
    width='290'
    height='220'
    id='img'
    alt='Getting Image'
    >
  4. View your UI web page and see your image

    Navigate to your Raspberry Pi web address /ui and see your image being updated.

7 comments on"Displaying Image From Raspberry Pi in NodeRed UI hosted on BlueMix"

  1. Could you please upload a link to your flow? It would be very helpful. Thanks

  2. AlanWagstaff February 15, 2017

    I will in a few days. I need to get access to that Raspberry Pi to grab it for you.

  3. akashshere March 19, 2017

    i want to upgrade node red so please guide us and give steps….

  4. sshhaashank June 09, 2017

    i want to make a camera authentication service ie i would have stored an initial picture and when a user enters image is taken and compared and then permission granted.How to do it?

    • AlanWagstaff June 21, 2017

      Are you running node red on a raspberry pi to do this? I have not done this before, so I am not sure either. I would try following a procedure as above to take a store a picture for the setup. Then to take a follow on picture the trick will be in comparing the two. Not sure if there is a good node-red widget to see if two images are “close” to each other.

  5. ProductiveK July 01, 2018

    I have followed directions to the best of my ability but can’t get this to work, i can see the image on the raspberry pi but cannot view the image on the node red dashboard on watson iot, can you send a picture of the watson it node red flows and code, this would be very helpful.

Join The Discussion