We will add the konva library to the node red dasboard ui, this is a cavnas library to draw stuff.
First thing to is do an npm install for the library
|
1 2 3 |
npm install konva --save |
Next add this line to the index.html under node-red-dasboard/src folder
|
1 2 3 4 |
<!-- build:js --> <script src="vendor/konva/konva.min.js"></script> |
Finally run gulp under node-red-dasboard
|
1 2 3 |
gulp |
Create a new template node in node-red ans paste this to test it
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div id="container"></div> <script> var width = window.innerWidth; var height = window.innerHeight; var stage = new Konva.Stage({ container: 'container', width: width, height: height }); var layer = new Konva.Layer(); var rect = new Konva.Rect({ x: 50, y: 50, width: 100, height: 50, fill: 'green', stroke: 'black', strokeWidth: 4 }); // add the shape to the layer layer.add(rect); // add the layer to the stage stage.add(layer); </script> |