Custom Node Red Dashboard UI Part 2

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


npm install konva --save

npm install konva --save

Next add this line to the index.html under node-red-dasboard/src folder


<!-- build:js -->
<script src="vendor/konva/konva.min.js"></script>

Finally run gulp under node-red-dasboard


gulp

gulp

Create a new template node in node-red ans paste this to test it


  <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>

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>

This entry was posted in Javascript and tagged on July 11, 2017

Custom Node Red Dashboard UI Part 2

Recent Posts

Categories