Node Red access to the local API

Moderator: Telldus

Post Reply
kamsvag
Posts: 62
Joined: Thu Jan 18, 2018 11:08 am

Node Red access to the local API

Post by kamsvag » Thu Jan 18, 2018 11:08 am

Ok, so I just wanted to share something I build in Node Red today. It utilize the Dashboard node so if you haven't already installed it, go ahead.

Simply copy/paste into Node Red, set your own Bearer/API key and IP of your Tellstick zNet Lite v2 and you should be good to go. I've been sloppy, so you will have to enter our key at two places (the nodes named Headers) and your IP at three (it's marked with question nodes).

Code: Select all

[{"id":"d4c5bfe.948664","type":"function","z":"9a4f16f0.65d3e8","name":"Headers","func":"msg.headers = {\n\t'Authorization': 'Bearer XXXXXXXXXXXXXXXXXXXXXXXXX',\n\t};\nreturn msg;","outputs":1,"noerr":0,"x":300,"y":100,"wires":[["7238fed9.4906f"]]},{"id":"7238fed9.4906f","type":"http request","z":"9a4f16f0.65d3e8","name":"HTTP","method":"GET","ret":"obj","url":"http://10.0.100.6/api/devices/list?supportedMethods=2","tls":"","x":430,"y":100,"wires":[["2b22c034.d627d"]]},{"id":"14048d17.1ca4d3","type":"inject","z":"9a4f16f0.65d3e8","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"x":130,"y":80,"wires":[["d4c5bfe.948664"]]},{"id":"59c8f721.3994b8","type":"ui_template","z":"9a4f16f0.65d3e8","group":"8e82bb7c.9f6cc8","name":"","order":0,"width":"10","height":"25","format":"<style>\n    li { display: block; }\n</style>\n\n<div style=\"min-height: 300px;\">\n  <ul>\n      <li ng-repeat=\"item in msg.payload | orderBy : 'name'\">\n      <span>\n          <button ng-click=\"send({new: [item.id, 1]})\">\n              On\n          </button>\n          <button ng-click=\"send({new: [item.id, 0]})\">\n              Off\n          </button>\n          {{item.name}}, {{item.state}}\n      </span>\n    </li>\n  </ul>\n</div>","storeOutMessages":false,"fwdInMessages":false,"x":1100,"y":100,"wires":[["b19b902c.9a74"]]},{"id":"6a46abf2.503d84","type":"function","z":"9a4f16f0.65d3e8","name":"Headers","func":"msg.headers = {\n\t'Authorization': 'Bearer XXXXXXXXXXXXXXXXXXXXXXXXX',\n\t};\nreturn msg;","outputs":1,"noerr":0,"x":1420,"y":100,"wires":[["4298a34c.946e5c"]]},{"id":"19271eb7.f132b1","type":"http request","z":"9a4f16f0.65d3e8","name":"","method":"GET","ret":"obj","url":"http://10.0.100.6/api/device/turnOn?id={{MsgID.id}}","tls":"","x":1730,"y":80,"wires":[["658bf645.f6f7f8","c5c76cfe.406c3"]]},{"id":"4298a34c.946e5c","type":"switch","z":"9a4f16f0.65d3e8","name":"On or Off","property":"MsgDO.do","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"0","vt":"num"},{"t":"else"}],"checkall":"false","outputs":3,"x":1560,"y":100,"wires":[["19271eb7.f132b1"],["92d35b10.54b998"],[]]},{"id":"92d35b10.54b998","type":"http request","z":"9a4f16f0.65d3e8","name":"","method":"GET","ret":"obj","url":"http://10.0.100.6/api/device/turnOff?id={{MsgID.id}}","tls":"","x":1730,"y":120,"wires":[["658bf645.f6f7f8","c5c76cfe.406c3"]]},{"id":"658bf645.f6f7f8","type":"debug","z":"9a4f16f0.65d3e8","name":"","active":true,"console":"false","complete":"false","x":1910,"y":80,"wires":[]},{"id":"b19b902c.9a74","type":"function","z":"9a4f16f0.65d3e8","name":"Make Readable","func":"var MsgID = { id: msg.new[0] };\nvar MsgDO = { do: msg.new[1] };\nvar Msg = { MsgID, MsgDO };\nreturn [ Msg ];","outputs":1,"noerr":0,"x":1260,"y":100,"wires":[["6a46abf2.503d84"]]},{"id":"2b22c034.d627d","type":"split","z":"9a4f16f0.65d3e8","name":"","splt":"","x":550,"y":100,"wires":[["52a7e683.52bec8"]]},{"id":"52a7e683.52bec8","type":"split","z":"9a4f16f0.65d3e8","name":"","splt":"","x":670,"y":100,"wires":[["d2b8aab0.3cab28"]]},{"id":"d2b8aab0.3cab28","type":"change","z":"9a4f16f0.65d3e8","name":"","rules":[{"t":"change","p":"payload.state","pt":"msg","from":"0","fromt":"num","to":"On","tot":"str"},{"t":"change","p":"payload.state","pt":"msg","from":"2","fromt":"num","to":"Off","tot":"str"},{"t":"change","p":"payload.name","pt":"msg","from":".","fromt":"str","to":" ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":820,"y":100,"wires":[["e7aefd97.30d3a"]]},{"id":"e7aefd97.30d3a","type":"join","z":"9a4f16f0.65d3e8","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","timeout":"","count":"","x":970,"y":100,"wires":[["59c8f721.3994b8"]]},{"id":"c5c76cfe.406c3","type":"delay","z":"9a4f16f0.65d3e8","name":"","pauseType":"delay","timeout":"3","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1900,"y":120,"wires":[["6dc43be6.ae23d4"]]},{"id":"6dc43be6.ae23d4","type":"link out","z":"9a4f16f0.65d3e8","name":"Refresh","links":["c0c23631.f946c8"],"x":1995,"y":120,"wires":[]},{"id":"c0c23631.f946c8","type":"link in","z":"9a4f16f0.65d3e8","name":"Refresh","links":["6dc43be6.ae23d4"],"x":175,"y":120,"wires":[["d4c5bfe.948664"]]},{"id":"7245f1dc.519f9","type":"comment","z":"9a4f16f0.65d3e8","name":"Header: Set your own key for local API access","info":"","x":410,"y":60,"wires":[]},{"id":"14760409.0987fc","type":"comment","z":"9a4f16f0.65d3e8","name":"HTTP: Set IP for you Tellstick","info":"","x":500,"y":140,"wires":[]},{"id":"dcb3bcf.27d474","type":"comment","z":"9a4f16f0.65d3e8","name":"Header: Set your own key for local API access","info":"","x":1530,"y":40,"wires":[]},{"id":"98842260.4a2f9","type":"comment","z":"9a4f16f0.65d3e8","name":"HTTP: Set IP for you Tellstick","info":"","x":1780,"y":160,"wires":[]},{"id":"8e82bb7c.9f6cc8","type":"ui_group","z":"","name":"Controls","tab":"9efa07a6.42cb98","order":2,"disp":true,"width":"10"},{"id":"9efa07a6.42cb98","type":"ui_tab","z":"","name":"Controll","icon":"dashboard","order":1}]

kamsvag
Posts: 62
Joined: Thu Jan 18, 2018 11:08 am

Re: Node Red access to the local API

Post by kamsvag » Thu Jan 18, 2018 11:08 am

Not interesting at all?
or did it not work for others?

Feedback would be nice.

fcorin
Posts: 12
Joined: Thu Jan 18, 2018 11:08 am

Re: Node Red access to the local API

Post by fcorin » Thu Jan 18, 2018 11:08 am

I finally had a chance to try it out. First time I tried Node red, but I found your example quite good and it did indeed work.

I played a bit and changed your buttons and added sliders for dimmable devices.

Code: Select all

[{"id":"ce9b1764.fe2438","type":"tab","label":"znet local","disabled":false,"info":""},{"id":"a94ec312.761f2","type":"function","z":"ce9b1764.fe2438","name":"Headers","func":"msg.headers = {\n\t'Authorization': 'Bearer XXXXXXXXXXXXXXXXXX',\n\t};\nreturn msg;","outputs":1,"noerr":0,"x":296,"y":243,"wires":[["5e14a0a5.b7d95"]]},{"id":"5e14a0a5.b7d95","type":"http request","z":"ce9b1764.fe2438","name":"HTTP","method":"GET","ret":"obj","url":"http://192.168.x.y/api/devices/list?supportedMethods=19","tls":"","x":426,"y":243,"wires":[["93c82e4d.dea11","a11107ca.7db938"]]},{"id":"4a9d0252.47c95c","type":"inject","z":"ce9b1764.fe2438","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"x":126,"y":223,"wires":[["a94ec312.761f2"]]},{"id":"c9a65dcc.1bc53","type":"ui_template","z":"ce9b1764.fe2438","group":"a512de0c.31711","name":"Controls","order":0,"width":"10","height":"25","format":"<style>\n    li { display: block; background-color: #ccc; padding: 5px; margin: 5px 0;}\n</style>\n\n<div style=\"min-height: 300px;\">\n    <ul>\n        <li ng-repeat=\"item in msg.payload | orderBy : 'name'\">\n            <div>\n                <div>{{item.name}} {{item.onoff}}</div>\n                <div>\n                <md-switch \n                    ng-true-value=\"'On'\" \n                    ng-false-value=\"'Off'\" \n                    ng-model=\"item.onoff\"\n                    ng-change=\"send({new:[item.id, item.onoff]})\"\n                    flex\n                    aria-label=\"OnOff\"\n                    class=\"md-inline\"\n                    ></md-switch>\n                <md-slider\n                    ng-if=\"item.methods==19\"\n                    md-discrete \n                    ng-change=\"send({new:[item.id, 'dim',item.percent]})\"\n                    ng-model=\"item.percent\"\n                    step=\"5\" min=\"0\" max=\"100\" \n                    aria-label=\"Percent\"\n                    flex\n                    class=\"md-inline\"\n                    >\n                </md-slider>\n                </div>\n            </div>\n        </li>\n    </ul>\n</div>\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":1125,"y":270,"wires":[["71bcd06d.93011"]]},{"id":"2729f87a.9321e8","type":"function","z":"ce9b1764.fe2438","name":"Headers","func":"msg.headers = {\n\t'Authorization': 'Bearer XXXXXXXXXXXXXXXXXX',\n\t};\nreturn msg;","outputs":1,"noerr":0,"x":479,"y":509,"wires":[["4a7d9ae0.5a5364"]]},{"id":"c010a750.121b48","type":"http request","z":"ce9b1764.fe2438","name":"","method":"GET","ret":"obj","url":"http://192.168.x.y/api/device/turnOn?id={{MsgID.id}}","tls":"","x":820,"y":488,"wires":[["f8caaab3.581108","4d0651b4.1e3a1"]]},{"id":"4a7d9ae0.5a5364","type":"switch","z":"ce9b1764.fe2438","name":"On or Off or Dim","property":"MsgDO.do","propertyType":"msg","rules":[{"t":"eq","v":"On","vt":"str"},{"t":"eq","v":"Off","vt":"str"},{"t":"eq","v":"dim","vt":"str"}],"checkall":"false","outputs":3,"x":639,"y":509,"wires":[["c010a750.121b48"],["63021f68.cc366"],["270eed15.413ec2"]]},{"id":"63021f68.cc366","type":"http request","z":"ce9b1764.fe2438","name":"","method":"GET","ret":"obj","url":"http://192.168.x.y/api/device/turnOff?id={{MsgID.id}}","tls":"","x":820,"y":525,"wires":[["f8caaab3.581108","4d0651b4.1e3a1"]]},{"id":"f8caaab3.581108","type":"debug","z":"ce9b1764.fe2438","name":"","active":false,"console":"false","complete":"true","x":1056,"y":411,"wires":[]},{"id":"71bcd06d.93011","type":"function","z":"ce9b1764.fe2438","name":"Make Readable","func":"\n\nvar MsgID = { id: msg.new[0] };\nvar MsgDO = { do: msg.new[1] };\nvar MsgLevel={level: parseInt(2.55*parseInt(msg.new[2]))};\nvar Msg = { MsgID, MsgDO, MsgLevel };\nreturn [ Msg ];","outputs":1,"noerr":0,"x":310,"y":510,"wires":[["2729f87a.9321e8"]]},{"id":"93c82e4d.dea11","type":"split","z":"ce9b1764.fe2438","name":"","splt":"","x":546,"y":243,"wires":[["cdaa40e1.3c1bd"]]},{"id":"cdaa40e1.3c1bd","type":"split","z":"ce9b1764.fe2438","name":"","splt":"","x":666,"y":243,"wires":[["5f473fcc.01397"]]},{"id":"5f473fcc.01397","type":"change","z":"ce9b1764.fe2438","name":"","rules":[{"t":"change","p":"payload.name","pt":"msg","from":".","fromt":"str","to":" ","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":849.6363830566406,"y":245.727276802063,"wires":[["cd500c8c.da1c9"]]},{"id":"cd500c8c.da1c9","type":"join","z":"ce9b1764.fe2438","name":"","mode":"auto","build":"string","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","timeout":"","count":"","x":1024.1818504333496,"y":187.54545402526855,"wires":[["a5428bfd.4c99f8"]]},{"id":"4d0651b4.1e3a1","type":"delay","z":"ce9b1764.fe2438","name":"","pauseType":"delay","timeout":"3","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":1031,"y":541,"wires":[["8368e1fe.34c77"]]},{"id":"8368e1fe.34c77","type":"link out","z":"ce9b1764.fe2438","name":"Refresh","links":["a2573d2d.dbd15"],"x":1043,"y":647,"wires":[]},{"id":"a2573d2d.dbd15","type":"link in","z":"ce9b1764.fe2438","name":"Refresh","links":["8368e1fe.34c77"],"x":170,"y":342,"wires":[["a94ec312.761f2"]]},{"id":"3a0d7253.74e37e","type":"comment","z":"ce9b1764.fe2438","name":"Header: Set your own key for local API access","info":"","x":406,"y":203,"wires":[]},{"id":"7ce77c5b.8aef34","type":"comment","z":"ce9b1764.fe2438","name":"HTTP: Set IP for you Tellstick","info":"","x":496,"y":283,"wires":[]},{"id":"7de6db8f.ae9c44","type":"comment","z":"ce9b1764.fe2438","name":"Header: Set your own key for local API access","info":"","x":589,"y":449,"wires":[]},{"id":"4ad09f5.2f00d6","type":"comment","z":"ce9b1764.fe2438","name":"HTTP: Set IP for you Tellstick","info":"","x":841,"y":612,"wires":[]},{"id":"a11107ca.7db938","type":"debug","z":"ce9b1764.fe2438","name":"","active":false,"console":"false","complete":"true","x":635,"y":88,"wires":[]},{"id":"270eed15.413ec2","type":"http request","z":"ce9b1764.fe2438","name":"","method":"GET","ret":"txt","url":"http://192.168.x.y/api/device/dim?id={{MsgID.id}}&level={{MsgLevel.level}}","tls":"","x":821,"y":562,"wires":[["4d0651b4.1e3a1","f8caaab3.581108"]]},{"id":"a5428bfd.4c99f8","type":"function","z":"ce9b1764.fe2438","name":"","func":"\nfor(var i=0;i<msg.payload.length;i++){\n    var itm=msg.payload[i];\n    if( itm.statevalue!==\"\"){\n        itm.percent=Math.ceil((itm.statevalue*100/255)/5*5);\n    }else{\n        itm.percent=0;\n    }\n    if(itm.state==\"2\"){\n        itm.onoff=\"Off\";\n    }else{\n        itm.onoff=\"On\";\n    }\n    msg.payload[i]=itm;\n}\n\nreturn msg;","outputs":1,"noerr":0,"x":1157.3636169433594,"y":160.4545383453369,"wires":[["c9a65dcc.1bc53"]]},{"id":"a512de0c.31711","type":"ui_group","z":"","name":"Controls","tab":"471c6ac.964c694","order":2,"disp":true,"width":"10"},{"id":"471c6ac.964c694","type":"ui_tab","z":"","name":"Znet","icon":"dashboard","order":1}]
--
Fredrik

kamsvag
Posts: 62
Joined: Thu Jan 18, 2018 11:08 am

Re: Node Red access to the local API

Post by kamsvag » Thu Jan 18, 2018 11:08 am

I would like to change the "On/Off" status notification to images of a lamp indicating on or off.

fcorin
Posts: 12
Joined: Thu Jan 18, 2018 11:08 am

Re: Node Red access to the local API

Post by fcorin » Thu Jan 18, 2018 11:08 am

You could do something like this:

Code: Select all

<style>
    li { display: block; background-color: #ccc; padding: 5px; margin: 5px 0;}
    .bulb {
        display: inline-block;
        width:30px;
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bulb-Off {
    	background-image: url(data:image/png;base64,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);
    }
    .bulb-On {
    	background-image: url(data:image/png;base64,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);
    }
</style>

<div style="min-height: 300px;">
    <ul>
        <li ng-repeat="item in msg.payload | orderBy : 'name'">
            <div>
                <div><div class="bulb bulb-{{item.onoff}}"></div> {{item.name}}</div>
                <div>
                <md-switch 
                    ng-true-value="'On'" 
                    ng-false-value="'Off'" 
                    ng-model="item.onoff"
                    ng-change="send({new:[item.id, item.onoff]})"
                    flex
                    aria-label="OnOff"
                    class="md-inline"
                    ></md-switch>
                <md-slider
                    ng-if="item.methods==19"
                    md-discrete 
                    ng-change="send({new:[item.id, 'dim',item.percent]})"
                    ng-model="item.percent"
                    step="5" min="0" max="100" 
                    aria-label="Percent"
                    flex
                    class="md-inline"
                    >
                </md-slider>
                </div>
            </div>
        </li>
    </ul>
</div>
--
Fredrik

kamsvag
Posts: 62
Joined: Thu Jan 18, 2018 11:08 am

Re: Node Red access to the local API

Post by kamsvag » Thu Jan 18, 2018 11:08 am

So I took your code and adapted to my own.
Here is what we got now.

Code: Select all

<style>

    li { display: block; }

.bulb {
        display: inline-block;
        width:20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .bulb-Off {
       background-image: url(data:image/png;base64,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);
    }
    .bulb-On {
       background-image: url(data:image/png;base64,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);
    }
</style>



<div style="min-height: 300px;">

  <ul>

 	<li ng-repeat="item in msg.payload | orderBy : 'name'">

	<span>

		<div class="bulb bulb-{{item.state}}"></div>
          
		<button ng-click="send({new: [item.id, 1]})">

			On

		</button>

		<button ng-click="send({new: [item.id, 0]})">
			Off
		</button>

		{{item.name}}

	</span>

	</li>

	</ul>

</div>

Post Reply