From 8d90da3f4c517854d38e01a5e66ba1f78e75f95d Mon Sep 17 00:00:00 2001
From: Rob Marcer <92092324+robmarcer@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:19:16 +0100
Subject: [PATCH 1/4] first draft of article
---
.../2023/07/images-in-node-red-dashboards.md | 93 ++++++++++++++++++
...images-from-disk-and-show-in-dashboard.png | Bin 0 -> 32166 bytes
.../2023/07/images/save-images-to-disk.png | Bin 0 -> 19807 bytes
src/blog/2023/07/images/the-dashboard.gif | Bin 0 -> 1607425 bytes
4 files changed, 93 insertions(+)
create mode 100644 src/blog/2023/07/images-in-node-red-dashboards.md
create mode 100644 src/blog/2023/07/images/load-images-from-disk-and-show-in-dashboard.png
create mode 100644 src/blog/2023/07/images/save-images-to-disk.png
create mode 100644 src/blog/2023/07/images/the-dashboard.gif
diff --git a/src/blog/2023/07/images-in-node-red-dashboards.md b/src/blog/2023/07/images-in-node-red-dashboards.md
new file mode 100644
index 0000000000..bbc6bda6ce
--- /dev/null
+++ b/src/blog/2023/07/images-in-node-red-dashboards.md
@@ -0,0 +1,93 @@
+---
+title: Add images to dashboards when working in containerised Node-RED
+subtitle: Import your images into your Node-RED dashboards, wherever you are running your instances
+description: Import your images into your Node-RED dashboards, wherever you are running your instances
+date: 2023-07-20
+authors: ["rob-marcer"]
+image: blog/2023/07/images/opc-ua-1/opc-ua-1-title-image.png
+tags:
+ - posts
+ - flowforge
+ - node-red
+---
+
+Using images in your Node-RED dashboards can significantly improve your users' experience. The most common method to add images to dashboards, is to store them within the filesystem of an Node-RED instance but sometimes that's not an option. How can you easily use images when working in a containerised environment such as Docker, Kubernetes, or FlowForge?
+
+
+
+When designing a dashboard, images allow you to significantly enrich your content. Some examples include:
+
+- displaying maps to guide engineers to a problem which needs resolving.
+
+- displaying pictures of specific hardware on a factory-floor which needs to be checked.
+
+- displaying physical tools which should be used to resolve a problem.
+
+## Why not just store them in Node-RED's host operating system?
+
+Storing images locally can work well when you can access and edit the images on an operating system, but that approach doesn't scale if you are moving instances through a DevOps pipeline. It can also not work well when deploying to environments where you don't have easy access to the host operating system.
+
+How can we include images in dashboards, and be confident that a given build of an application will show the correct images, no matter where your Node-RED instances are hosted?
+
+## Inspiration
+
+There are various solutions to this problem, I wanted to share one I came across when working with a FlowForge customer recently. I've modified the flows to make them more general in design, but the underlying principal is the same. I asked if I was OK to credit the customer but they said there was no need. Thanks for the inspiration, kind customer!
+
+## Solution explanation
+
+There are three key sections to this solution:
+
+1. Pull the images we need from URLs
+
+1. Store those images in the temporary filesystem of Node-RED
+
+1. Serve up those images as needed in the dashboard
+
+It is possible for us to skip step 2, but I wanted to have the images stored locally, in the Node-RED instance. storing the images locally will improve the loading times of the dashboard. This is especially beneficial when your dashboard is dynamically displaying relevant images, e.g. to show an image of a specific machine which needs to be attended to.
+
+The key benefit of pulling the images from URLs this way is, no matter where you are running Node-RED, the correct images will be shown in your dashboard.
+
+## File and file-in nodes
+
+I've included the flows as json below so you can try them out yourself. Please note, I'm using FlowForge's own [file and file-in nodes](https://flowforge.com/docs/user/filenodes/) in these examples. If you want to use these flows on hosting other than FlowForge, you will need to replace the nodes with the standard Node-RED file and file-in nodes.
+
+## The flows
+
+The first flow takes image URLs in an array, each image is downloaded, processed, then saved to the local file storage. Let's take a look at the flow:
+
+
+
+You can import this flow into Node-RED using the code below:
+
+```json
+[{"id":"6b8059f703d0f574","type":"group","z":"c6f2a894be05d857","name":"Write the images to disk from the URLs","style":{"label":true},"nodes":["04fb6911559797a0","8a3c077f0f85a905","22c5026dd58e418b","6fcca5cfee2bcb89"],"x":38,"y":53,"w":1004,"h":434},{"id":"04fb6911559797a0","type":"group","z":"c6f2a894be05d857","g":"6b8059f703d0f574","name":"Inject the image URLs to download","style":{"label":true},"nodes":["e635ceb0577a86d5","29fe40a054be5b2b","1e81a35c27aae6ad"],"x":74,"y":79,"w":502,"h":82},{"id":"e635ceb0577a86d5","type":"inject","z":"c6f2a894be05d857","g":"04fb6911559797a0","name":"Send in image URLs as an array","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[\"https://openjsf.org/wp-content/uploads/sites/84/2023/02/ff-logo-wordmark-light_4x.png\",\"https://nodered.org/images/nr-image-1.png\",\"https://flowforge.com/img/screen-pseudo-overview-2QvTVle3Mr-384.avif\"]","payloadType":"json","x":250,"y":120,"wires":[["29fe40a054be5b2b"]]},{"id":"29fe40a054be5b2b","type":"split","z":"c6f2a894be05d857","g":"04fb6911559797a0","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":450,"y":120,"wires":[["1e81a35c27aae6ad"]]},{"id":"1e81a35c27aae6ad","type":"link out","z":"c6f2a894be05d857","g":"04fb6911559797a0","name":"link out 3","mode":"link","links":["f582702ec222069c"],"x":535,"y":120,"wires":[]},{"id":"8a3c077f0f85a905","type":"group","z":"c6f2a894be05d857","g":"6b8059f703d0f574","name":"Download the images","style":{"label":true},"nodes":["453f3b9d7d312bd2","ecbd7b1a410ecd9d","4d650baa2118036e","f582702ec222069c"],"x":84,"y":179,"w":532,"h":82},{"id":"453f3b9d7d312bd2","type":"http request","z":"c6f2a894be05d857","g":"8a3c077f0f85a905","name":"Get the image","method":"GET","ret":"bin","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":460,"y":220,"wires":[["4d650baa2118036e"]]},{"id":"ecbd7b1a410ecd9d","type":"change","z":"c6f2a894be05d857","g":"8a3c077f0f85a905","name":"Set URL to download","rules":[{"t":"move","p":"payload","pt":"msg","to":"url","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":220,"wires":[["453f3b9d7d312bd2"]]},{"id":"4d650baa2118036e","type":"link out","z":"c6f2a894be05d857","g":"8a3c077f0f85a905","name":"link out 1","mode":"link","links":["8bc38803dec97185"],"x":575,"y":220,"wires":[]},{"id":"f582702ec222069c","type":"link in","z":"c6f2a894be05d857","g":"8a3c077f0f85a905","name":"link in 3","links":["1e81a35c27aae6ad"],"x":125,"y":220,"wires":[["ecbd7b1a410ecd9d"]]},{"id":"22c5026dd58e418b","type":"group","z":"c6f2a894be05d857","g":"6b8059f703d0f574","name":"Save the images to the local storage","style":{"label":true},"nodes":["95c819560d22f394","0fe7f013b6356c5d","7edc6cb2b0d243db","829bfc8e6e293ada","8bc38803dec97185","98980d88013c6e12"],"x":84,"y":279,"w":932,"h":82},{"id":"95c819560d22f394","type":"base64","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"convert to base64","action":"str","property":"payload","x":250,"y":320,"wires":[["829bfc8e6e293ada"]]},{"id":"0fe7f013b6356c5d","type":"file","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"Write file to storage","filename":"filename","filenameType":"msg","appendNewline":true,"createDir":false,"overwriteFile":"true","encoding":"none","x":850,"y":320,"wires":[["98980d88013c6e12"]]},{"id":"7edc6cb2b0d243db","type":"string","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"Get filename from the URL","methods":[{"name":"getRightMost","params":[{"type":"str","value":"/"}]}],"prop":"responseUrl","propout":"filename","object":"msg","objectout":"msg","x":620,"y":320,"wires":[["0fe7f013b6356c5d"]]},{"id":"829bfc8e6e293ada","type":"image","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"preview","width":"150","data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":true,"outputs":1,"x":420,"y":320,"wires":[["7edc6cb2b0d243db"]]},{"id":"8bc38803dec97185","type":"link in","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"link in 1","links":["4d650baa2118036e"],"x":125,"y":320,"wires":[["95c819560d22f394"]]},{"id":"98980d88013c6e12","type":"link out","z":"c6f2a894be05d857","g":"22c5026dd58e418b","name":"link out 2","mode":"link","links":["1e94b5bab542830a"],"x":975,"y":320,"wires":[]},{"id":"6fcca5cfee2bcb89","type":"group","z":"c6f2a894be05d857","g":"6b8059f703d0f574","name":"Output a debug once all images have been processed","style":{"label":true},"nodes":["d1a6feea3ac829c6","119f8008752bc4fb","1e94b5bab542830a"],"x":64,"y":379,"w":382,"h":82},{"id":"d1a6feea3ac829c6","type":"debug","z":"c6f2a894be05d857","g":"6fcca5cfee2bcb89","name":"debug 140","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":330,"y":420,"wires":[]},{"id":"119f8008752bc4fb","type":"join","z":"c6f2a894be05d857","g":"6fcca5cfee2bcb89","name":"","mode":"auto","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":"false","timeout":"","count":"","reduceRight":false,"x":190,"y":420,"wires":[["d1a6feea3ac829c6"]]},{"id":"1e94b5bab542830a","type":"link in","z":"c6f2a894be05d857","g":"6fcca5cfee2bcb89","name":"link in 2","links":["98980d88013c6e12"],"x":105,"y":420,"wires":[["119f8008752bc4fb"]]}]
+```
+
+We've now downloaded the images we need, and saved them to our local storage, to make them load more quickly when a user views them in the dashboard.
+
+Onto the second flow, which will get the images from the local storage and then load them into the dashboard. Let's take a look at it:
+
+
+
+You can import this flow into Node-RED using the code below:
+
+```json
+[{"id":"c0f2a076e4449f10","type":"group","z":"c6f2a894be05d857","name":"Get the images from the filestore and display in the Dashboard","style":{"label":true},"nodes":["a671e373b7ca0be8","767590694c5a17f7","fb1ce2ca6b73d950","fee0b4a8fff9f4aa","c9930135726cf256","806b98a5bdf7ceea","b58daed1ee453873"],"x":48,"y":513,"w":954,"h":654},{"id":"a671e373b7ca0be8","type":"junction","z":"c6f2a894be05d857","g":"c0f2a076e4449f10","x":320,"y":560,"wires":[[]]},{"id":"767590694c5a17f7","type":"junction","z":"c6f2a894be05d857","g":"c0f2a076e4449f10","x":320,"y":640,"wires":[[]]},{"id":"fb1ce2ca6b73d950","type":"group","z":"c6f2a894be05d857","g":"c0f2a076e4449f10","name":"Get the images from the local storage","style":{"label":true},"nodes":["924666bcda6c633b","e6f985ed4ff557b5","bee4039410549ec8","83477da8696ae6e7"],"x":84,"y":679,"w":492,"h":82},{"id":"924666bcda6c633b","type":"image","z":"c6f2a894be05d857","g":"fb1ce2ca6b73d950","name":"preview","width":"150","data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":true,"outputs":1,"x":440,"y":720,"wires":[["83477da8696ae6e7"]]},{"id":"e6f985ed4ff557b5","type":"file in","z":"c6f2a894be05d857","g":"fb1ce2ca6b73d950","name":"Read file from storage","filename":"payload","filenameType":"msg","format":"utf8","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":260,"y":720,"wires":[["924666bcda6c633b"]]},{"id":"bee4039410549ec8","type":"link in","z":"c6f2a894be05d857","g":"fb1ce2ca6b73d950","name":"link in 4","links":["b669ea3caf594f9a"],"x":125,"y":720,"wires":[["e6f985ed4ff557b5"]]},{"id":"83477da8696ae6e7","type":"link out","z":"c6f2a894be05d857","g":"fb1ce2ca6b73d950","name":"link out 5","mode":"link","links":["044af6d97af553e4"],"x":535,"y":720,"wires":[]},{"id":"fee0b4a8fff9f4aa","type":"group","z":"c6f2a894be05d857","g":"c0f2a076e4449f10","name":"Prepare each image to be shown in the dashboard","style":{"label":true},"nodes":["8cb8c95c2f5a1591","6eabd7a88e3863d3","044af6d97af553e4","264eb6e2f10c1ab5"],"x":84,"y":779,"w":832,"h":82},{"id":"8cb8c95c2f5a1591","type":"change","z":"c6f2a894be05d857","g":"fee0b4a8fff9f4aa","name":"Add the file type to the mimetype, add to image content","rules":[{"t":"set","p":"mimetype","pt":"msg","to":"\"data:image/\"&msg.filetype&\";base64,\"","tot":"jsonata"},{"t":"set","p":"output","pt":"msg","to":"msg.mimetype&msg.payload","tot":"jsonata"},{"t":"move","p":"output","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":820,"wires":[["264eb6e2f10c1ab5"]]},{"id":"6eabd7a88e3863d3","type":"string","z":"c6f2a894be05d857","g":"fee0b4a8fff9f4aa","name":"Get file type from file name","methods":[{"name":"getRightMost","params":[{"type":"str","value":"."}]}],"prop":"filename","propout":"filetype","object":"msg","objectout":"msg","x":280,"y":820,"wires":[["8cb8c95c2f5a1591"]]},{"id":"044af6d97af553e4","type":"link in","z":"c6f2a894be05d857","g":"fee0b4a8fff9f4aa","name":"link in 5","links":["83477da8696ae6e7"],"x":125,"y":820,"wires":[["6eabd7a88e3863d3"]]},{"id":"264eb6e2f10c1ab5","type":"link out","z":"c6f2a894be05d857","g":"fee0b4a8fff9f4aa","name":"link out 6","mode":"link","links":["e95c6d9464521102"],"x":875,"y":820,"wires":[]},{"id":"c9930135726cf256","type":"group","z":"c6f2a894be05d857","g":"c0f2a076e4449f10","name":"Send the images to the correct section of the dashboard","style":{"label":true},"nodes":["ecf3cb2b1bc5096e","0629532fdd62fd03","3a790fd52e77cb43","3613df20a3a361e2","e95c6d9464521102","2728c1ee286a404b"],"x":84,"y":879,"w":892,"h":162},{"id":"ecf3cb2b1bc5096e","type":"ui_template","z":"c6f2a894be05d857","g":"c9930135726cf256","group":"8c5b99709c90620a","name":"Display the image on the Dashboard","order":1,"width":0,"height":0,"format":"\n\n\n\n\n\n \n
\n \n
![\"Image](\"{{msg.payload}}\")
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n