Node-Red Image on Dashboard

Question

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. PLease help.

dax007 dax007 · Accepted Answer · 2020-08-19T09:34:05

I solved the problem in two parts:

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

Setting httpStatic

Go to the folder ~/.node-red and open the settings.js file
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',
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

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.

Node-Red Image on Dashboard

1 Answers