Narcissistic Project Managers

    node-red-vis

    0.4.2 • Public • Published

    Logo node-red VIS

    NPM version Downloads

    NPM

    This project adds web visualisation to Node-RED. It is based on ioBroker.vis.

    Functionality

    We introduce "vis in" node which creates the visualisation server with communication via socket.io.

    Demo interface

    Demo interface

    Install

    cd $NODE_RED_HOME
    npm install node-red-vis

    Usage

    Create "advanced => vis in" node and 3 inject nodes as pictured:

    node-red

    Here is code to import: [{"id":"a26bad1e.5d945","type":"vis in","language":"en","x":393.09092712402344,"y":81.09089660644531,"z":"4004eda7.bffb14","wires":[["1b331485.e4cceb"]]},{"id":"1d96675d.e26999","type":"inject","name":"","topic":"/kitchen/lamp","payload":"true","payloadType":"string","repeat":"","crontab":"","once":false,"x":184.0908966064453,"y":54.09089660644531,"z":"4004eda7.bffb14","wires":[["a26bad1e.5d945"]]},{"id":"e72316cd.18dce8","type":"debug","name":"","active":true,"console":"false","complete":"false","x":686.0910186767578,"y":80.09089660644531,"z":"4004eda7.bffb14","wires":[]},{"id":"d9c35749.263ca8","type":"inject","name":"","topic":"/kitchen/lamp","payload":"false","payloadType":"string","repeat":"","crontab":"","once":false,"x":185.33331298828125,"y":112.33329772949219,"z":"4004eda7.bffb14","wires":[["a26bad1e.5d945"]]},{"id":"2d3eee9.fd2c112","type":"inject","name":"","topic":"/balkon/temperature","payload":"22","payloadType":"string","repeat":"","crontab":"","once":false,"x":197.20001220703125,"y":166.1999969482422,"z":"4004eda7.bffb14","wires":[["a26bad1e.5d945"]]},{"id":"1b331485.e4cceb","type":"switch","name":"","property":"topic","rules":[{"t":"eq","v":"/kitchen/lamp"},{"t":"eq","v":""}],"checkall":"true","outputs":2,"x":523.2000274658203,"y":81.19999694824219,"z":"4004eda7.bffb14","wires":[["e72316cd.18dce8"],[]]}]

    Deploy it. After deploying go to http://localhost:1880/vis/edit.html and create "basic - ctrl Bulb on/off":

    basic

    and "RGraph - Gauge-Basic":

    RGraph-Gauge-Basic

    Write into Object ID of "basic - ctrl Bulb on/off" - "/kitchen/lamp":

    ctrl-Bulb(On-Off)

    and into Object ID of "RGraph - Gauge-Basic" - "/balkon/temperature":

    RGraph-Gauge

    Wait for the project saved (about 3 seconds) and after that click here:

    Close

    You will see something like this:

    Runtime

    If you click on lamp following payload will be sent:

    Debug

    You can forward this message to your hardware to control it.

    There is a possibility to export project into vis:

    Debug

    Insert following code into dialog edit field:

    
    {
      "settings": {
        "style": {
          "background_class": "hq-background-blue-marine-lines"
        },
        "theme": "redmond",
        "sizex": "",
        "sizey": "",
        "hideDescription": false,
        "gridSize": ""
      },
      "widgets": {
        "e00001": {
          "tpl": "tplBulbOnOffCtrl",
          "data": {
            "oid": "/kitchen/lamp"
          },
          "style": {
            "left": "8px",
            "top": "8px",
            "width": "132px",
            "height": "159px"
          },
          "widgetSet": "basic"
        },
        "e00002": {
          "tpl": "tplRGgauge",
          "data": {
            "min_value": "0",
            "max_value": "100",
            "factor": "1",
            "value_offset": "0",
            "labels_color": "#000000",
            "oid": "/balkon/temperature"
          },
          "style": {
            "left": "148px",
            "top": "9px",
            "width": 200,
            "height": 200
          },
          "widgetSet": "RGraph"
        }
      },
      "rerender": false,
      "filterList": [],
      "activeWidgets": []
    }
    

    Debug

    The only issue is at start all drawn controls must receive the value.

    You can inspire yourself here. This is a Live-Version of ioBroker.vis!

    Change log

    v 0.4.2 (2016-06-17)

    • (bluefox) fix name of google fonts

    v 0.4.1 (2016-06-15)

    • (bluefox) update vis version to 0.10.5

    v 0.4.0 (2016-06-14)

    • (bluefox) update all vis packages

    v 0.3.2 (2015-11-10)

    • (bluefox) fix install errors and support of npm 3.x

    v 0.3.0 (2015-11-02)

    • (bluefox) support of latest version of iobroker.vis

    v 0.2.2 (2015-08-14)

    • (bluefox) enable to send "vis.control.command" to vis, like
         {"command": "refresh", "instance": "FFFFFFFF"}
    

    to refresh the view. Read here more about commands.

    • (bluefox) remove jshint warnings.

    Install

    npm i node-red-vis

    DownloadsWeekly Downloads

    28

    Version

    0.4.2

    License

    CC-BY-NC-4.0

    Last publish

    Collaborators

    • foxriver76
    • iobluefox
    • bluefox
    • apollon77
    • ldittmar
    • alcalzone