Scribd
Upload
26 views

Tutorial Node-Red SVG

Uploaded by

oussama haggouche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Tutorial Node-Red SVG

Uploaded by

oussama haggouche
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Tutorial SVG Node (SCADA-Like)

Machine Monitoring System


Node-Red
Yaser Ali Husen

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Overview
This tutorial contains How to develop a SCADA-Like Dashboard using Node-Red
We can develop a machine monitoring dashboard like SCADA using Node-Red.
Additional Software:
1. Inkscape
2. Symbol Factory (optional)

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make SVG File
1. Download and install inkscape
Link: https://inkscape.org/
2. Open inkscape, make SCADA dashboard, and save as SVG file
3. For importing a SVG file, klik File  Import…
4. Set ID for each object that want to modify in Node-Red
Right click an object, click Object Properties…, fill ID name and click Set button

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make SVG File
5. For getting some SVG file, you can install Symbol Factory and export to a SVG file, import in inkscape
application

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Node-Red Preparation
1. Install node-red-contrib-ui-svg

2. Install node-red-contrib-drawsvg

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
1. Import sample flow

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
2. Setup SVG Editor location, click node SVG graphics, open tab Settings, fill Editor URL

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
3. Load SVG file, click tab Editor, click icon

4. Open document, browse SVG file, click load

 Document  Open
 Browse SVG file location
 Click Load button

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
5. Resize Dimension, Click Resize icon

6. Choose Dimension Area, Check Full window, and OK

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
7. Check and set ID object (For text object, set ID with _value, example: output_value)

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
8. Close and save, update and deploy

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
9. Example send command to SVG
Change color

Change text

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen
Make Node-Red Dashboard
10. Open Dashboard

Lean Manufacturing & Industry 4.0 www.lean-tool.com Presented by: Yaser Ali Husen

You might also like