Raspberry Pi GPIO via HTML

General
1

I can write HTML and javascript... but I can't seem to find out how to connect a simple HTML button to trigger a GPIO to be on or off. I can do it with other methods... but somewhere between HTML and the msg.payload I'm loosing it.

I really hope someone can help me because I can do some amazing stuff with SVG graphics if I can just get a few buttons to work!

I'm new so I can't attach a file... but I have a server so... here is a URL.

http://askjerry.info/raspi/Node_Red_Forum_Data/Web%20with%204%20LED%20and%208%20Buttons.json

If someone can just put whatever is needed into one IF( ) statement... I should be good.

Thanks in advance.
Jerry

2

Hi, here is a flow with 3 examples

The first one is the simplest and using a button in the dashboard

The second, still in the dashboard, is using a ui_template node

The third is a stripped down version of my private html page used for home automation. It is maybe an overkill in this case but it shows how to use web sockets for communication. I have also added status feedback via a status node so you get the correct status shown on the web page (in reality, you would of course change this to the most proper way of detecting the status of a device). To view this page you would just enter http://yourip:1880/btest

image
image929Ă—711 41.8 KB 

[{"id":"f8b6ffc.183e9","type":"rpi-gpio out","z":"a4d7c0e0.63723","name":"","pin":"36","set":"","level":"0","freq":"","out":"out","x":760,"y":150,"wires":[]},{"id":"83b1553e.b32898","type":"rpi-gpio out","z":"a4d7c0e0.63723","name":"","pin":"36","set":"","level":"0","freq":"","out":"out","x":760,"y":280,"wires":[]},{"id":"5c93b87c.98cb18","type":"ui_button","z":"a4d7c0e0.63723","name":"","group":"e540e3b9.88a4c","order":9,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":480,"y":150,"wires":[["f8b6ffc.183e9"]]},{"id":"19fead12.335e83","type":"ui_template","z":"a4d7c0e0.63723","group":"e540e3b9.88a4c","name":"Test","order":7,"width":0,"height":0,"format":"<button ng-mousedown=\"send({payload: 1})\" ng-mouseup=\"send({payload: 0})\">button</button>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":480,"y":280,"wires":[["83b1553e.b32898"]]},{"id":"fa9a9fda.36ed8","type":"template","z":"a4d7c0e0.63723","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/> \n<META HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\">\n<META HTTP-EQUIV=\"PRAGMA\" CONTENT=\"NO-CACHE\">\n<title>Button test</title>\n<!-- comment -->\n\n<style type=\"text/css\">\n    .on { \n        border:4px inset;\n        color:#369;\n        background:#f9d543; \n    }\n        \n    .off {\n        border:4px outset;\n        color:#369;\n        background:#f9d543; \n    }\n</style>\n\n<script type=\"text/javascript\">\nvar worker = new Worker('worker.js');\nwSocket = null;\nprot = \"\";\nip = \"\";\nurl = \"\";\n\n    function doWork(prm) {\n        worker.postMessage(prm);\n    }\n\n\n    function init() {\n\t\t// event handlers for WebSocket:\n        wSocket = null;\n        prot = \"\";\n        ip = location.host;\n\n        if (location.protocol == \"https:\") {\n            prot = \"wss://\";\n        }\n        else {\n            prot = \"ws://\";\n        }\n\n        url = prot + ip + \"/ws/location\"; \n        wSocket = new WebSocket(url);\n        wSocket.onopen = function() {\n            document.getElementById(\"theBody\").style.backgroundColor =\"green\"; //Green\n        };\n        wSocket.onmessage = wsMessage;\n        wSocket.onclose = function() {\n            document.getElementById(\"theBody\").style.backgroundColor =\"#C0C0C0\"; //Grey\n        };\n    }\n\n    function doSend(strng) {\n        if (wSocket.readyState == 1) {\n            //wSocket.send(JSON.stringify(strng));\n            wSocket.send(strng);\n        }\n    }\n\n\n    function TriggerWebSocketEvent(eventname, el){\n        if(el.className == \"on\") {\n            el.className=\"off\";\n            doSend(eventname+' turnoff');\n            } \n        else {\n            el.className=\"on\";\n            doSend(eventname+' turnon');\n            } \n        return false;\n    }\n\n    function wsMessage(event) {\n        //alert(event.data);\n        document.getElementById(\"theBody\").style.backgroundColor =\"black\"; //Black\n\n        if (event.data.match('gpio test turnon')) {\n            document.getElementById(\"p21\").style.backgroundColor=\"#FBF14D\";\n            document.getElementById(\"p21\").style.color =\"black\";\n            document.getElementById(\"p21\").className = \"on\";\n            document.getElementById(\"p21\").style.fontSize =\"25\";\n        }\n        if (event.data.match('gpio test turnoff')) {\n            document.getElementById(\"p21\").style.backgroundColor=\"black\";\n            document.getElementById(\"p21\").style.color =\"white\";\n            document.getElementById(\"p21\").className = \"off\";\n            document.getElementById(\"p21\").style.fontSize =\"25\";\n        }\n   }\n</script>\n\n<body id=\"theBody\" onLoad=\"init()\" bgcolor=black text=white link=white vlink=white alink=white/>\n<br />\n<center>\n<table border=\"2\" width=\"100%\" height=\"70%\">\n  <tr><!-- Row 9 -->\n        <td><div style=\"text-align:center\"><button id=\"p21\" class=\"off\" onMouseDown=\"TriggerWebSocketEvent('gpio test', this)\" style=\"background-color:black; height:60px; width:280px\">&nbsp;Button test&nbsp;</button></div></td>\n  </tr>\n</table>\n</center>\n</body>\n\n\n","output":"str","x":680,"y":420,"wires":[["76a16c3e.529f84"]]},{"id":"bbcf4371.7ff22","type":"http in","z":"a4d7c0e0.63723","name":"","url":"/btest","method":"get","upload":false,"swaggerDoc":"","x":490,"y":420,"wires":[["fa9a9fda.36ed8"]]},{"id":"76a16c3e.529f84","type":"http response","z":"a4d7c0e0.63723","name":"","statusCode":"","headers":{},"x":860,"y":420,"wires":[]},{"id":"dac5ecb8.ce85d","type":"websocket in","z":"a4d7c0e0.63723","name":"","server":"fd2d0ed6.0b368","client":"","x":510,"y":550,"wires":[["23f00426.d0170c"]]},{"id":"1a5b2751.eda119","type":"websocket out","z":"a4d7c0e0.63723","name":"","server":"fd2d0ed6.0b368","client":"","x":1160,"y":710,"wires":[]},{"id":"b68eb430.fdd9c8","type":"rpi-gpio out","z":"a4d7c0e0.63723","name":"","pin":"36","set":"","level":"0","freq":"","out":"out","x":1130,"y":550,"wires":[]},{"id":"23f00426.d0170c","type":"switch","z":"a4d7c0e0.63723","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"gpio test turnon","vt":"str"},{"t":"eq","v":"gpio test turnoff","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":760,"y":550,"wires":[["dc7994b8.d8a608"],["6c093fc0.d73fb"]]},{"id":"dc7994b8.d8a608","type":"change","z":"a4d7c0e0.63723","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"1","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":520,"wires":[["b68eb430.fdd9c8"]]},{"id":"6c093fc0.d73fb","type":"change","z":"a4d7c0e0.63723","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":580,"wires":[["b68eb430.fdd9c8"]]},{"id":"f511cc5b.738e4","type":"status","z":"a4d7c0e0.63723","name":"","scope":["b68eb430.fdd9c8"],"x":490,"y":710,"wires":[["c4622204.e9d16"]]},{"id":"c4622204.e9d16","type":"switch","z":"a4d7c0e0.63723","name":"","property":"status.text","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"0","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":760,"y":710,"wires":[["a4f383ef.3d563"],["ffadbe37.79fc5"]]},{"id":"a4f383ef.3d563","type":"change","z":"a4d7c0e0.63723","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"gpio test turnon","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":680,"wires":[["1a5b2751.eda119"]]},{"id":"ffadbe37.79fc5","type":"change","z":"a4d7c0e0.63723","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"gpio test turnoff","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":750,"wires":[["1a5b2751.eda119"]]},{"id":"e540e3b9.88a4c","type":"ui_group","z":"","name":"SITE","tab":"34f404a1.5f76cc","order":3,"disp":true,"width":"6","collapse":false},{"id":"fd2d0ed6.0b368","type":"websocket-listener","z":"","path":"/ws/location","wholemsg":"false"},{"id":"34f404a1.5f76cc","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":10}]
3

Not quite sure what you are looking for.
Here's a link to a flow I posted on the 'Share Your Projects' section a year or so ago.
It uses jQuery and Ajax to detect a button on a webpage and send that information to Node-RED.

4

@Askjerry

And this is your example with websockets added. I have just added the functionality for LED1 but you get the idea

image
image1628Ă—726 53.7 KB 

[{"id":"2098df0f.b84a5","type":"template","z":"a4d7c0e0.63723","name":"ASKJERRY","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<HTML>\n    <HEAD>\n        <meta http-equiv=\"content-type\" content=\"text/html; charset=ISO-8859-1\">\n        <!-- <meta http-equiv=\"refresh\" content=\"60\">\n        <title>ASKJERRY</title>\n        <!-- ====================================================================== -->\n        <script>\n        wSocket = null;\n        prot = \"\";\n        ip = \"\";\n        url = \"\";\n\n        function init() {\n    \t\t// event handlers for WebSocket:\n            wSocket = null;\n            prot = \"\";\n            ip = location.host;\n    \n            if (location.protocol == \"https:\") {\n                prot = \"wss://\";\n            }\n            else {\n                prot = \"ws://\";\n            }\n    \n            url = prot + ip + \"/ws/btest\"; \n            wSocket = new WebSocket(url);\n            wSocket.onmessage = wsMessage;\n        }\n\n        function doSend(strng) {\n            if (wSocket.readyState == 1) {\n                //wSocket.send(JSON.stringify(strng));\n                wSocket.send(strng);\n            }\n        }\n\n        function Do_Something(STAT)\n        { \n            if(STAT===\"LOADED\") { stat_1.value=\"Page Loaded\"; init();  }\n            if(STAT===\"L1ON\")   { stat_1.value=\"LED 1 ON\"; doSend(\"1\");}\n            if(STAT===\"L1OFF\")  { stat_1.value=\"LED 1 OFF\"; doSend(\"0\");}\n            if(STAT===\"L2ON\")   { stat_1.value=\"LED 2 ON\";      }\n            if(STAT===\"L2OFF\")  { stat_1.value=\"LED 2 OFF\";     }\n            if(STAT===\"L3ON\")   { stat_1.value=\"LED 3 ON\";      }\n            if(STAT===\"L3OFF\")  { stat_1.value=\"LED 3 OFF\";     }\n            if(STAT===\"L4ON\")   { stat_1.value=\"LED 4 ON\";      }\n            if(STAT===\"L4OFF\")  { stat_1.value=\"LED 4 OFF\";     }\n        }\n        </script>\n\n        <style>\n            .fixit {text-align: center;}\n        </style>\n    </head>\n<!-- ============================================================================= -->\n<body onload=\"Do_Something('LOADED')\">\n<!-- ------------------------------------------------------------------------------------------------------------------------------ -->\n<HR>\n<h1>Web Control Test Version 1</h1>\n<HR>\n<!-- ============================================================================= -->\n<div>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L1ON')\"> LED 1 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L1OFF')\"> LED 1 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L2ON')\"> LED 2 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L2OFF')\"> LED 2 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L3ON')\"> LED 3 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L3OFF')\"> LED 3 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L4ON')\"> LED 4 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L4OFF')\"> LED 4 OFF </button><br>\n<br>\n</div>\n<input type=\"text\" id=\"stat_1\" style=\"width: 200px; height: 30px;\" class=\"fixit\">\n\n</body>\n</HTML>","output":"str","x":530,"y":1080,"wires":[["4113f11c.c4188"]]},{"id":"c1148b4c.bc2548","type":"http in","z":"a4d7c0e0.63723","name":"","url":"/askjerry","method":"get","upload":false,"swaggerDoc":"","x":310,"y":1080,"wires":[["2098df0f.b84a5"]]},{"id":"4113f11c.c4188","type":"http response","z":"a4d7c0e0.63723","name":"","statusCode":"","headers":{},"x":720,"y":1080,"wires":[]},{"id":"96a39cf9.a5d2f","type":"debug","z":"a4d7c0e0.63723","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":510,"y":1150,"wires":[]},{"id":"3a5e831f.7ff8ec","type":"websocket in","z":"a4d7c0e0.63723","name":"","server":"cebfcccf.0dae1","client":"","x":310,"y":1150,"wires":[["96a39cf9.a5d2f","f1c01f9e.93581"]]},{"id":"f1c01f9e.93581","type":"rpi-gpio out","z":"a4d7c0e0.63723","name":"","pin":"36","set":"","level":"0","freq":"","out":"out","x":520,"y":1200,"wires":[]},{"id":"cebfcccf.0dae1","type":"websocket-listener","z":"","path":"/ws/btest","wholemsg":"false"}]
5
6

Krambriw I owe you a BUNCH! :grin:

I knew I was missing something... wasn't sure what exactly. Once I saw your example pushing a 1 or 0, THEN I knew I should be able to push a STRING then use "something" to decode it and push the 1 or 0 to the appropriate GPIO port.

I got it !!! (With your help!!!)

I still haven't dug into the "btest" code... but I'll look at that next. Most likely... I'll copy/paste it into EVRYTHING simply because it works. :cowboy_hat_face:

Thanks Again!

I still don't see an UPLOAD link on this reply... so ugly or not... I'll paste it in.

[{"id":"14bc1a7d.da2376","type":"tab","label":"ASKJERRY","disabled":false,"info":""},{"id":"aaee7ca1.0778","type":"template","z":"14bc1a7d.da2376","name":"ASKJERRY","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<HTML>\n    <HEAD>\n        <meta http-equiv=\"content-type\" content=\"text/html; charset=ISO-8859-1\">\n        <!-- <meta http-equiv=\"refresh\" content=\"60\">\n        <title>ASKJERRY</title>\n        <!-- ====================================================================== -->\n        <script>\n        wSocket = null;\n        prot = \"\";\n        ip = \"\";\n        url = \"\";\n\n        function init() {\n    \t\t// event handlers for WebSocket:\n            wSocket = null;\n            prot = \"\";\n            ip = location.host;\n    \n            if (location.protocol == \"https:\") {\n                prot = \"wss://\";\n            }\n            else {\n                prot = \"ws://\";\n            }\n    \n            url = prot + ip + \"/ws/btest\"; \n            wSocket = new WebSocket(url);\n            wSocket.onmessage = wsMessage;\n        }\n\n        function doSend(strng) {\n            if (wSocket.readyState == 1) {\n                //wSocket.send(JSON.stringify(strng));\n                wSocket.send(strng);\n            }\n        }\n\n        function Do_Something(STAT)\n        { \n            if(STAT===\"LOADED\")     { stat_1.value=\"Page Loaded\";   init();                 }\n            \n            if(STAT===\"L1ON\")       { stat_1.value=\"LED 1 ON\";      doSend(\"LED-1-ON\");     }\n            if(STAT===\"L1OFF\")      { stat_1.value=\"LED 1 OFF\";     doSend(\"LED-1-OFF\");    }\n            \n            if(STAT===\"L2ON\")       { stat_1.value=\"LED 2 ON\";      doSend(\"LED-2-ON\");     }\n            if(STAT===\"L2OFF\")      { stat_1.value=\"LED 2 OFF\";     doSend(\"LED-2-OFF\");    }\n            \n            if(STAT===\"L3ON\")       { stat_1.value=\"LED 3 ON\";      doSend(\"LED-3-ON\");     }\n            if(STAT===\"L3OFF\")      { stat_1.value=\"LED 3 OFF\";     doSend(\"LED-3-OFF\");    }\n            \n            if(STAT===\"L4ON\")       { stat_1.value=\"LED 4 ON\";      doSend(\"LED-4-ON\");     }\n            if(STAT===\"L4OFF\")      { stat_1.value=\"LED 4 OFF\";     doSend(\"LED-4-OFF\");    }\n            \n            if(STAT===\"ALL ON\")     { stat_1.value=\"ALL ON\";        doSend(\"LED ALL ON\");   }\n            if(STAT===\"ALL OFF\")    { stat_1.value=\"ALL OFF\";       doSend(\"LED ALL OFF\");  }\n        }\n        </script>\n\n        <style>\n            .fixit {text-align: center;}\n        </style>\n    </head>\n<!-- ============================================================================= -->\n<body onload=\"Do_Something('LOADED')\">\n<!-- ------------------------------------------------------------------------------------------------------------------------------ -->\n<HR>\n<h1>Web Control Test Version 1</h1>\n<HR>\n<!-- ============================================================================= -->\n<div>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L1ON')\"> LED 1 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L1OFF')\"> LED 1 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L2ON')\"> LED 2 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L2OFF')\"> LED 2 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L3ON')\"> LED 3 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L3OFF')\"> LED 3 OFF </button><br>\n<br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L4ON')\"> LED 4 ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('L4OFF')\"> LED 4 OFF </button><br>\n<hr>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('ALL ON')\"> ALL ON </button><br>\n<button type=\"button\" style=\"width: 200px; height: 30px;\" onclick=\"Do_Something('ALL OFF')\"> ALL OFF </button><br>\n</div>\n<HR>\nHere is the last button pressed:    \n<input type=\"text\" id=\"stat_1\" style=\"width: 200px; height: 30px;\" class=\"fixit\">\n\n</body>\n</HTML>","output":"str","x":409,"y":54,"wires":[["7d01893.c59c678"]]},{"id":"e458f517.fd04c8","type":"http in","z":"14bc1a7d.da2376","name":"","url":"/askjerry","method":"get","upload":false,"swaggerDoc":"","x":170,"y":54,"wires":[["aaee7ca1.0778"]]},{"id":"7d01893.c59c678","type":"http response","z":"14bc1a7d.da2376","name":"","statusCode":"","headers":{},"x":650,"y":54,"wires":[]},{"id":"93617d6.73e108","type":"debug","z":"14bc1a7d.da2376","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":134,"wires":[]},{"id":"5eebbaa0.bc7964","type":"websocket in","z":"14bc1a7d.da2376","name":"","server":"c54610ac.68175","client":"","x":170,"y":134,"wires":[["93617d6.73e108","8778d531.ccf968","4bed4bea.b141e4","c706b2fb.eadf8","8234581e.3d9a38","145249e8.2b82e6"]]},{"id":"b9ac6bdd.2a2e38","type":"rpi-gpio out","z":"14bc1a7d.da2376","name":"","pin":"32","set":true,"level":"0","freq":"","out":"out","x":660,"y":233,"wires":[]},{"id":"d3981ef0.591dc","type":"rpi-gpio out","z":"14bc1a7d.da2376","name":"","pin":"36","set":true,"level":"0","freq":"","out":"out","x":660,"y":289,"wires":[]},{"id":"6a45c830.59ba68","type":"rpi-gpio out","z":"14bc1a7d.da2376","name":"","pin":"38","set":true,"level":"0","freq":"","out":"out","x":660,"y":350,"wires":[]},{"id":"d1bb2f60.851e1","type":"rpi-gpio out","z":"14bc1a7d.da2376","name":"","pin":"40","set":true,"level":"0","freq":"","out":"out","x":660,"y":409,"wires":[]},{"id":"8778d531.ccf968","type":"change","z":"14bc1a7d.da2376","name":"Detect LED 1","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-1-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-1-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":233,"wires":[["b9ac6bdd.2a2e38"]]},{"id":"4bed4bea.b141e4","type":"change","z":"14bc1a7d.da2376","name":"Detect LED 2","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-2-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-2-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":289,"wires":[["d3981ef0.591dc"]]},{"id":"c706b2fb.eadf8","type":"change","z":"14bc1a7d.da2376","name":"Detect LED 3","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-3-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-3-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":350,"wires":[["6a45c830.59ba68"]]},{"id":"8234581e.3d9a38","type":"change","z":"14bc1a7d.da2376","name":"Detect LED 4","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-4-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-4-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":409,"wires":[["d1bb2f60.851e1"]]},{"id":"145249e8.2b82e6","type":"change","z":"14bc1a7d.da2376","name":"Detect ALL Button","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED ALL ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED ALL OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":474,"wires":[["d1bb2f60.851e1","6a45c830.59ba68","d3981ef0.591dc","b9ac6bdd.2a2e38"]]},{"id":"c54610ac.68175","type":"websocket-listener","z":"","path":"/ws/btest","wholemsg":"false"}]
1 Like
7

The next phase was to see if I could do the whole interface with Inkscape SVG.
In Inkscape you can assign button clicks and IDs to any shape, so if I make a rectangle and call it "BTN1" for example, I can apply styles and such.

Rather than bore you with the details... I make a simple HTML framework then paste in the SVG.
(Open it with Notepad++ or similar.) So here... give this a try. :sunglasses:

It is set up to fill the LCD that attaches to the Raspberry Pi.

[{"id":"7415494e.5a41f8","type":"tab","label":"ASKJERRY","disabled":false,"info":""},{"id":"89ee9fcd.2fb6b","type":"http in","z":"7415494e.5a41f8","name":"","url":"/DISP","method":"get","upload":false,"swaggerDoc":"","x":160,"y":54,"wires":[["25db2b16.b62dc4"]]},{"id":"1808ad15.6a87a3","type":"http response","z":"7415494e.5a41f8","name":"","statusCode":"","headers":{},"x":650,"y":54,"wires":[]},{"id":"b6a83e4e.e5e08","type":"debug","z":"7415494e.5a41f8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":134,"wires":[]},{"id":"84dcc655.732818","type":"websocket in","z":"7415494e.5a41f8","name":"","server":"c54610ac.68175","client":"","x":170,"y":134,"wires":[["b6a83e4e.e5e08","52ff3308.04d12c","45c0924d.d7cc6c","9639e702.766198","8952ceb5.ce517","5312835.aeeaf7c"]]},{"id":"fb963f93.ca26e","type":"rpi-gpio out","z":"7415494e.5a41f8","name":"","pin":"32","set":true,"level":"0","freq":"","out":"out","x":660,"y":233,"wires":[]},{"id":"4fac4a62.7d6c24","type":"rpi-gpio out","z":"7415494e.5a41f8","name":"","pin":"36","set":true,"level":"0","freq":"","out":"out","x":660,"y":289,"wires":[]},{"id":"e0e5e5ec.2e8548","type":"rpi-gpio out","z":"7415494e.5a41f8","name":"","pin":"38","set":true,"level":"0","freq":"","out":"out","x":660,"y":350,"wires":[]},{"id":"31b15679.40c69a","type":"rpi-gpio out","z":"7415494e.5a41f8","name":"","pin":"40","set":true,"level":"0","freq":"","out":"out","x":660,"y":409,"wires":[]},{"id":"52ff3308.04d12c","type":"change","z":"7415494e.5a41f8","name":"Detect LED 1","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-1-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-1-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":233,"wires":[["fb963f93.ca26e"]]},{"id":"45c0924d.d7cc6c","type":"change","z":"7415494e.5a41f8","name":"Detect LED 2","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-2-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-2-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":289,"wires":[["4fac4a62.7d6c24"]]},{"id":"9639e702.766198","type":"change","z":"7415494e.5a41f8","name":"Detect LED 3","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-3-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-3-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":350,"wires":[["e0e5e5ec.2e8548"]]},{"id":"8952ceb5.ce517","type":"change","z":"7415494e.5a41f8","name":"Detect LED 4","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED-4-ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED-4-OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":409,"y":409,"wires":[["31b15679.40c69a"]]},{"id":"5312835.aeeaf7c","type":"change","z":"7415494e.5a41f8","name":"Detect ALL Button","rules":[{"t":"change","p":"payload","pt":"msg","from":"LED ALL ON","fromt":"str","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"LED ALL OFF","fromt":"str","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":410,"y":474,"wires":[["31b15679.40c69a","e0e5e5ec.2e8548","4fac4a62.7d6c24","fb963f93.ca26e"]]},{"id":"25db2b16.b62dc4","type":"template","z":"7415494e.5a41f8","name":"ASKJERRY","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<HTML>\n    <HEAD>\n        <meta http-equiv=\"content-type\" content=\"text/html; charset=ISO-8859-1\">\n        <meta http-equiv=\"refresh\" content=\"60\">\n        <title>ASKJERRY SVG</title>\n        <!-- ====================================================================== -->\n        <style>\n            .fixit {text-align: center;}\n            .lt-led { fill: #00FF00; }\n            .dk-led { fill: #000000; }\n        </style>\n        <!-- ====================================================================== -->\n        <script>\n        wSocket = null;\n        prot = \"\";\n        ip = \"\";\n        url = \"\";\n        // ============================================================================== \n        function init() {\n    \t\t// event handlers for WebSocket:\n            wSocket = null;\n            prot = \"\";\n            ip = location.host;\n    \n            if (location.protocol == \"https:\") {\n                prot = \"wss://\";\n            }\n            else {\n                prot = \"ws://\";\n            }\n    \n            url = prot + ip + \"/ws/btest\"; \n            wSocket = new WebSocket(url);\n            wSocket.onmessage = wsMessage;\n        }\n        // ============================================================================== \n        function doSend(strng) {\n            if (wSocket.readyState == 1) {\n                //wSocket.send(JSON.stringify(strng));\n                wSocket.send(strng);\n            }\n        }\n        // ============================================================================== \n        function Do_Something(STAT)\n        { \n            if(STAT===\"LOADED\")     { init();                   }\n            \n            if(STAT===\"L1ON\")       {  doSend(\"LED-1-ON\");  L1.style.fill=\"#00FF00\";     }\n            if(STAT===\"L1OFF\")      {  doSend(\"LED-1-OFF\"); L1.style.fill=\"#111111\";     }\n            \n            if(STAT===\"L2ON\")       {  doSend(\"LED-2-ON\");  L2.style.fill=\"#00FF00\";    }\n            if(STAT===\"L2OFF\")      {  doSend(\"LED-2-OFF\"); L2.style.fill=\"#111111\";    }\n            \n            if(STAT===\"L3ON\")       {  doSend(\"LED-3-ON\");  L3.style.fill=\"#00FF00\";    }\n            if(STAT===\"L3OFF\")      {  doSend(\"LED-3-OFF\"); L3.style.fill=\"#111111\";    }\n            \n            if(STAT===\"L4ON\")       {  doSend(\"LED-4-ON\");  L4.style.fill=\"#00FF00\";    }\n            if(STAT===\"L4OFF\")      {  doSend(\"LED-4-OFF\"); L4.style.fill=\"#111111\";    }\n            \n            if(STAT===\"ALL ON\")     \n            {  \n                doSend(\"LED ALL ON\");    \n                L1.style.fill=\"#00FF00\";\n                L2.style.fill=\"#00FF00\";\n                L3.style.fill=\"#00FF00\";\n                L4.style.fill=\"#00FF00\";\n            }\n            if(STAT===\"ALL OFF\")    \n            {  \n                doSend(\"LED ALL OFF\");   \n                L1.style.fill=\"#111111\";\n                L2.style.fill=\"#111111\";\n                L3.style.fill=\"#111111\";\n                L4.style.fill=\"#111111\";\n            }\n        }\n        </script>\n        <!-- ====================================================================== -->\n    </head>\n<!-- ============================================================================= -->\n<body onload=\"Do_Something('LOADED')\">\n<!-- ============================================================================= -->\n<div>\n<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<!-- Created with Inkscape (http://www.inkscape.org/) -->\n\n<svg\n   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n   xmlns:cc=\"http://creativecommons.org/ns#\"\n   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n   xmlns:svg=\"http://www.w3.org/2000/svg\"\n   xmlns=\"http://www.w3.org/2000/svg\"\n   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\n   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n   width=\"480\"\n   height=\"320\"\n   viewBox=\"0 0 480 320\"\n   version=\"1.1\"\n   id=\"svg6401\"\n   inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"\n   sodipodi:docname=\"DISP-4-LED-Panel (v1.0).svg\">\n  <defs\n     id=\"defs6395\" />\n  <sodipodi:namedview\n     id=\"base\"\n     pagecolor=\"#ffffff\"\n     bordercolor=\"#666666\"\n     borderopacity=\"1.0\"\n     inkscape:pageopacity=\"0.0\"\n     inkscape:pageshadow=\"2\"\n     inkscape:zoom=\"1.1181126\"\n     inkscape:cx=\"146.31166\"\n     inkscape:cy=\"191.06841\"\n     inkscape:document-units=\"px\"\n     inkscape:current-layer=\"layer1\"\n     showgrid=\"true\"\n     units=\"px\"\n     inkscape:showpageshadow=\"false\"\n     borderlayer=\"true\"\n     inkscape:window-width=\"1280\"\n     inkscape:window-height=\"737\"\n     inkscape:window-x=\"1912\"\n     inkscape:window-y=\"-8\"\n     inkscape:window-maximized=\"1\"\n     showguides=\"false\">\n    <inkscape:grid\n       type=\"xygrid\"\n       id=\"grid6403\" />\n  </sodipodi:namedview>\n  <metadata\n     id=\"metadata6398\">\n    <rdf:RDF>\n      <cc:Work\n         rdf:about=\"\">\n        <dc:format>image/svg+xml</dc:format>\n        <dc:type\n           rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" />\n        <dc:title></dc:title>\n      </cc:Work>\n    </rdf:RDF>\n  </metadata>\n  <g\n     inkscape:label=\"Layer 1\"\n     inkscape:groupmode=\"layer\"\n     id=\"layer1\"\n     transform=\"translate(0,-212.33332)\">\n    <rect\n       style=\"opacity:1;fill:#808080;fill-opacity:1;stroke:none;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"outside_frame\"\n       width=\"500\"\n       height=\"340\"\n       x=\"-10\"\n       y=\"202.33331\"\n       ry=\"7.0117198e-06\"\n       inkscape:label=\"#rect1222\" />\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:1.98158765;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998\"\n       width=\"252.40909\"\n       height=\"63.005222\"\n       x=\"10\"\n       y=\"222.33331\"\n       ry=\"7.3629162e-06\" />\n    <ellipse\n       style=\"opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L1\"\n       cx=\"42.7197\"\n       cy=\"253.83592\"\n       inkscape:label=\"#path823\"\n       rx=\"23.371214\"\n       ry=\"22.501862\" />\n    <rect\n       style=\"opacity:1;fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L1ON\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"84.78788\"\n       y=\"240.33481\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L1ON')\"\n       inkscape:label=\"#rect959\" />\n    <rect\n       style=\"opacity:1;fill:#44aa00;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L1OFF\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"168.92424\"\n       y=\"240.33481\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L1OFF')\"\n       inkscape:label=\"#rect959-0\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"105.01134\"\n       y=\"265.92474\"\n       id=\"text978\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L1ON')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976\"\n         x=\"105.01134\"\n         y=\"265.92474\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ON</tspan></text>\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"182.75491\"\n       y=\"265.92474\"\n       id=\"text978-8\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L1OFF')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-7\"\n         x=\"182.75491\"\n         y=\"265.92474\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">OFF</tspan></text>\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:1.98158765;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998-1\"\n       width=\"252.40909\"\n       height=\"63.005222\"\n       x=\"10\"\n       y=\"291.33902\"\n       ry=\"7.3629162e-06\" />\n    <ellipse\n       style=\"opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L2\"\n       cx=\"42.7197\"\n       cy=\"322.84164\"\n       inkscape:label=\"#path823-6\"\n       rx=\"23.371214\"\n       ry=\"22.501862\" />\n    <rect\n       style=\"opacity:1;fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L2ON\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"84.78788\"\n       y=\"309.34052\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L2ON')\"\n       inkscape:label=\"#rect959-7\" />\n    <rect\n       style=\"opacity:1;fill:#44aa00;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L2OFF\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"168.92424\"\n       y=\"309.34052\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L2OFF')\"\n       inkscape:label=\"#rect959-0-6\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"105.01135\"\n       y=\"336.25085\"\n       id=\"text978-0\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L2ON')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-9\"\n         x=\"105.01135\"\n         y=\"336.25085\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ON</tspan></text>\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"182.75491\"\n       y=\"336.25085\"\n       id=\"text978-8-7\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L2OFF')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-7-0\"\n         x=\"182.75491\"\n         y=\"336.25085\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">OFF</tspan></text>\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:1.98158765;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998-9\"\n       width=\"252.40909\"\n       height=\"63.005222\"\n       x=\"10\"\n       y=\"360.34473\"\n       ry=\"7.3629162e-06\" />\n    <ellipse\n       style=\"opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L3\"\n       cx=\"42.7197\"\n       cy=\"391.84732\"\n       inkscape:label=\"#path823-7\"\n       rx=\"23.371214\"\n       ry=\"22.501862\" />\n    <rect\n       style=\"opacity:1;fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L3ON\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"84.78788\"\n       y=\"378.34622\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L3ON')\"\n       inkscape:label=\"#rect959-3\" />\n    <rect\n       style=\"opacity:1;fill:#44aa00;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L3OFF\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"168.92424\"\n       y=\"378.34622\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L3OFF')\"\n       inkscape:label=\"#rect959-0-0\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"105.01135\"\n       y=\"406.5769\"\n       id=\"text978-4\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L3ON')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-6\"\n         x=\"105.01135\"\n         y=\"406.5769\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ON</tspan></text>\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"182.75491\"\n       y=\"406.5769\"\n       id=\"text978-8-1\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L3OFF')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-7-5\"\n         x=\"182.75491\"\n         y=\"406.5769\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">OFF</tspan></text>\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:1.98158765;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998-1-2\"\n       width=\"252.40909\"\n       height=\"63.005222\"\n       x=\"10\"\n       y=\"429.35043\"\n       ry=\"7.3629162e-06\" />\n    <ellipse\n       style=\"opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L4\"\n       cx=\"42.7197\"\n       cy=\"460.85306\"\n       inkscape:label=\"#path823-6-7\"\n       rx=\"23.371214\"\n       ry=\"22.501862\" />\n    <rect\n       style=\"opacity:1;fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L4ON\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"84.78788\"\n       y=\"447.35193\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L4ON')\"\n       inkscape:label=\"#rect959-7-3\" />\n    <rect\n       style=\"opacity:1;fill:#44aa00;fill-opacity:1;stroke:#000000;stroke-width:1.83459353;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"L4OFF\"\n       width=\"74.78788\"\n       height=\"27.002234\"\n       x=\"168.92424\"\n       y=\"447.35193\"\n       ry=\"6.3110701e-06\"\n       onclick=\"Do_Something('L4OFF')\"\n       inkscape:label=\"#rect959-0-6-4\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"105.01135\"\n       y=\"476.90302\"\n       id=\"text978-0-3\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L4ON')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-9-8\"\n         x=\"105.01135\"\n         y=\"476.90302\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ON</tspan></text>\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"182.75491\"\n       y=\"476.90302\"\n       id=\"text978-8-7-9\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('L4OFF')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-7-0-6\"\n         x=\"182.75491\"\n         y=\"476.90302\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">OFF</tspan></text>\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:2.34525108;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998-94\"\n       width=\"167.85345\"\n       height=\"132.70995\"\n       x=\"271.96725\"\n       y=\"222.51173\"\n       ry=\"1.5508751e-05\" />\n    <rect\n       style=\"opacity:1;fill:#aa0000;fill-opacity:1;stroke:#000000;stroke-width:4.69600487;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"LAON\"\n       width=\"127.96262\"\n       height=\"103.4011\"\n       x=\"291.91266\"\n       y=\"237.16615\"\n       ry=\"2.4167317e-05\"\n       onclick=\"Do_Something('ALL ON')\"\n       inkscape:label=\"#rect959-70\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"313.39767\"\n       y=\"301.62579\"\n       id=\"text978-1\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('ALL ON')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-8\"\n         x=\"313.39767\"\n         y=\"301.62579\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ALL ON</tspan></text>\n    <rect\n       style=\"opacity:1;fill:#ac9d93;fill-opacity:1;stroke:#000000;stroke-width:2.34773397;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"rect998-94-0\"\n       width=\"168.2121\"\n       height=\"132.70752\"\n       x=\"271.7879\"\n       y=\"359.62579\"\n       ry=\"1.5508467e-05\" />\n    <rect\n       style=\"opacity:1;fill:#44aa00;fill-opacity:1;stroke:#000000;stroke-width:4.69600487;stroke-miterlimit:4;stroke-dasharray:none\"\n       id=\"LAOFF\"\n       width=\"127.96262\"\n       height=\"103.4011\"\n       x=\"291.91263\"\n       y=\"374.27902\"\n       ry=\"2.4167321e-05\"\n       onclick=\"Do_Something('ALL OFF')\"\n       inkscape:label=\"#rect959-0-5\" />\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:19.89365005px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:1.49202383\"\n       x=\"308.5845\"\n       y=\"441.36221\"\n       id=\"text978-8-6\"\n       transform=\"scale(1.0191343,0.98122497)\"\n       onclick=\"Do_Something('ALL OFF')\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan976-7-6\"\n         x=\"308.5845\"\n         y=\"441.36221\"\n         style=\"fill:#ffcc00;stroke:none;stroke-width:1.49202383\">ALL OFF</tspan></text>\n    <text\n       xml:space=\"preserve\"\n       style=\"font-style:normal;font-weight:normal;font-size:15.74087715px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1.18056583\"\n       x=\"699.34521\"\n       y=\"170.99825\"\n       id=\"text1226\"\n       transform=\"scale(0.79437442,1.2588522)\"><tspan\n         sodipodi:role=\"line\"\n         id=\"tspan1224\"\n         x=\"699.34521\"\n         y=\"170.99825\"\n         style=\"font-size:12.91208744px;stroke-width:1.18056583\">You won't see stuff off the screen like these. </tspan><tspan\n         sodipodi:role=\"line\"\n         x=\"699.34521\"\n         y=\"190.67435\"\n         style=\"stroke-width:1.18056583\"\n         id=\"tspan1228\"><tspan\n   style=\"font-size:12.91208744px;stroke-width:1.18056583\"\n   id=\"tspan1230\">They hold the fill patterns we will use</tspan>.</tspan></text>\n  </g>\n</svg>\n\n</div>\n\n</body>\n</HTML>","output":"str","x":410,"y":60,"wires":[["1808ad15.6a87a3"]]},{"id":"c54610ac.68175","type":"websocket-listener","z":"","path":"/ws/btest","wholemsg":"false"}]

Next I'll need to work on how to get data INTO Node Red from the GPIO... but I'll read the forum a bit more as someone may have an answer I can follow... now that I have a basic understanding.

8

Hi Jerry, cool example, nice to hear you got it working!
To receive data, we are actually very close. Simplest I think, is to use the same websocket already existing
You just have to add some code in your template node to make this happen. Like this (in this case I'm just bringing up an alert but you can of course do whatever by adding your code):

        // ============================================================================== 
        function wsMessage(event) {
            alert(event.data);
        }

image
image763Ă—690 70.5 KB

image
image763Ă—690 56 KB

9

NICE!

I noticed that I got a generic 1 or 0 depending on the state, and then I thought about multiple switches and how I would tell them apart. I had already decoded the LED signals, so I used the same method to change the payload for the switch. Now I can filter accordingly and have it trigger some event or indicator. Awesome! I am 90% to where I need to be.

Next I'll find an I2C input/output and figure how to read/write to the I2C ADS1115 or ADS1015 ADC chip and have an analog input for my air-speed sensor. (Building a wind-tunnel.)

And eventually once I figure that out, I'll see if I can communicate to the MCP23017 16-Bit I2C interface which gains me another 16 GPIO for each chip I add. (Up to 8 addresses, so that's another 128 GPIO :crazy_face: )

And I figured out uploads too... turning out to be a really good Friday!

Thanks again!

BACKUP 4-10-2020.json (34.8 KB)

UPDATE
I found out if you are not careful... you will only export one object... here is the current status. I figured out connection to 12C.

10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.