dashboardnode-red

Node-Red Image on Dashboard

I am performing object detection on an image from a camera and storing it in a directory with a fixed name. Every few seconds, the image is updated and stored with the same name in the directory.

I am running node-red on my Mac. I want to show this image on my npm dashboard and update it update it every time the source image is updated. Is there a way to do this?

I tried with the media node in the node-red dashboard but it doesn't update my image.

Solution

  • I solved the problem in two parts:

    1. Setting httpStatic in the settings.js file
    2. Setting up the template node in node-red

    Setting httpStatic

    1. Go to the folder ~/.node-red and open the settings.js file

    2. In this file, uncomment the line starting with httpStatic and put in the path to the directory/ folder where the images are stored.The line of code will look like: httpStatic: 'Path to your folder',

    3. Restart Node RED

    This sets up the path you provided as the root directory for Node RED from which it'll start searching for your files

    Setting up template node in Node RED

    1. Bring in a template node and put in the following code: 
      <body>
<script>
setInterval(function(){
    $("#myimg").attr("src", "path to your image w.r.t. httpStatic?"+new 
     Date().getTime());
     },7000);
</script>
<div style="height:500px;">
<p align='center' id="box">
    <img src="path to your image w.r.t. httpStatic" id="myimg">
</p>
</div>
</body>

    The given above checks the directory in which you have the image(s) every 7 seconds and updates the images if the image changes.

    Note: Be sure to provide the path to the image with respect to the root directory set in httpStatic

    You can change the size of the division, alignment of the image and time interval for updation according to your need.