Static images support

[bartbutenaers]

Hi Riku (@rikukissa),

To display some 'no image available' image, I started to draw it using SVG (as we agreed upon). However it became very fast a messy complex setup:

• The image had to be rescaled, based on the width.
• Not easy to draw things (e.g. camera ...)
• ...

So I went back to the static image solution. If you don't like it, you can write some SVG code. But I'm running out of time at the moment ... The advantage is that the html file doesn't have to be updated, since the client code doesn't need to be aware about the content of the images.

The mechanism works like this:

• I have added two files (no_image.png and incorrect_input.png) to the Github repository

• These files are loaded at startup once. I have loaded them synchronously, but perhaps we can do it asynchronously (?????) :

  var node = this;
  
  var filePath = path.join(__dirname, 'no_image.png');
  fs.readFile(filePath, function(err, contents) {
      // Cache the no_image.png file
      node.noImage = contents.toString("base64"); 
  
      var filePath = path.join(__dirname, 'incorrect_input.png');
      fs.readFile(filePath, function(err, contents) {
          // Cache the incorrect_input.png file
          node.incorrectInput = contents.toString("base64");
  
          // Show a 'no image' at the start, in case no images will be pushed afterwards
          pushImage(node.noImage);
      });
  });

• At startup the no_image.png file is pushed to the flow editor:

  

• When a new input message arrives, the payload type will be validated: buffer or string. I don't check it for the base64 regex, because I'm afraid that will have a negative impact on performance. And you say that the toString('base64') returns the original string if it is already base64 encoded. This means there should be already a base64 check inside the toString, so we don't have to do it again. Correct me if I'm wrong, or just add your regex again to my code ...

• When the payload is invalid, the incorrect_input.png file will be pushed to the flow_editor:

  

  Remark: if the previous input message was also invalid, then incorrect_input.png will not be pushed again to the flow editor (to avoid pushing N times the same static images to the client).

P.S. I have also changed (in the html file) the mouse cursor. When hoovering above the image, it showed a 'move' cursor: This was inherited from the nodegroup: But that is a bit silly: the node itself can be moved, but not the image ... So I changed it to the default Node-Red splithair cursor. Now the default cursor doesn't change when hoovering above the image. Please restore the 'move' cursor if you don't like my explanation...

Looking forward to your feedback!! Bart

[bartbutenaers]

P.S. Normally I show errors in the node status (with a red ring). However then the node status is located on the same position as our arrow, which doesn't look. Therefore I have added an extra incorrect_input.png, so I display the node status inside the image ...

[bartbutenaers]

@rikukissa,

I just discovered an issue with this pull request.

The images (e.g. 'no image available') are displayed correctly in the Node-Red flow. However when I refresh my browser window, those images disappear. Seems that the 'latestImages' list is empty after the refresh, and as a result the 'render' function is not called:

Moreover the function ImageNode on the server side is also not called, when the browser window is refreshed. As a result, the images are also not resend to the browser.

Do you have perhaps any suggestion how we could solve this?

Thanks !!!