Local IP address to QR-code

This flow reads the IP address, generates and displays a QR-code.

This eases the use of a smartphone to connect to the dashboard by reading the QR-code.

The final IP address can be customised with the customise node:

msg.payload = payload.networkInterfaces.*.address[$contains($, /192./)]
msg.payload = "http://" & payload & ":1880/ui"

The exec node should mention the exact path to qr for Command.

Here, the exact path is /usr/local/bin/qr, obtained with which:

% which qr
/usr/local/bin/qr

External dependencies

The flow requires an external QR-code generator, like the qrcode Python package.

Install Python packages image and qrcode with

pip3 install image
pip3 install qrcode

Usage: qr "Some text" > test.png

Usage: qr "Some text"

Reference: https://pypi.org/project/PyQRCode/

Node-RED dependencies

  • node-red-dashboard to display the image
  • node-red-node-base64 to format the image
  • node-red-contrib-os to read the IP address, could be replaced by another solution
  • node-red-contrib-image-output to debug the flow, could be omitted
[{"id":"d97b2960.f2ef38","type":"inject","z":"b37f3718.862418","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":100,"y":100,"wires":[["ad89142b.50f378"]]},{"id":"ad89142b.50f378","type":"NetworkIntf","z":"b37f3718.862418","name":"","x":250,"y":180,"wires":[["7b963bb2.0417b4","ea0a8f5.96bf27"]]},{"id":"ea0a8f5.96bf27","type":"debug","z":"b37f3718.862418","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":610,"y":120,"wires":[]},{"id":"7b963bb2.0417b4","type":"change","z":"b37f3718.862418","name":"customise","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.networkInterfaces.*.address[$contains($, /192./)]","tot":"jsonata"},{"t":"set","p":"payload","pt":"msg","to":"\"http://\" & payload & \":1880/ui\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":250,"y":240,"wires":[["a92167b8.867b88","45311f2f.c7238"]]},{"id":"a92167b8.867b88","type":"debug","z":"b37f3718.862418","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":610,"y":180,"wires":[]},{"id":"45311f2f.c7238","type":"exec","z":"b37f3718.862418","command":"/usr/local/bin/qr","addpay":true,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":260,"y":300,"wires":[["8328eade.ee9fb8","a91232de.6e35d"],[],[]]},{"id":"8328eade.ee9fb8","type":"image","z":"b37f3718.862418","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":620,"y":220,"wires":[]},{"id":"a91232de.6e35d","type":"base64","z":"b37f3718.862418","name":"","action":"str","property":"payload","x":240,"y":440,"wires":[["5d5246ef.73c568"]]},{"id":"5d5246ef.73c568","type":"template","z":"b37f3718.862418","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<img src=\"data:image/png;base64,{{{payload}}}\">","output":"str","x":420,"y":440,"wires":[["86a168e6.3c2c58"]]},{"id":"86a168e6.3c2c58","type":"ui_template","z":"b37f3718.862418","group":"890778c.fdea288","name":"","order":0,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":600,"y":440,"wires":[[]]},{"id":"428e3733.b85b88","type":"comment","z":"b37f3718.862418","name":"Local IP to QRcode","info":"\nRequires an external QR-code generator\n\nInstall Python packages `image` and `qrcode`\n\n```\npip3 install image\npip3 install qrcode\n```\n\nUsage: `qr \"Some text\" > test.png`\nUsage: `qr \"Some text\"`\n\n+ https://pypi.org/project/PyQRCode/","x":370,"y":60,"wires":[]},{"id":"5e71dd35.5f4fe4","type":"ui_button","z":"b37f3718.862418","name":"","group":"890778c.fdea288","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":60,"wires":[["ad89142b.50f378"]]},{"id":"890778c.fdea288","type":"ui_group","z":"","name":"Default","tab":"618d5f4c.a95f","order":1,"disp":true,"width":"6","collapse":false},{"id":"618d5f4c.a95f","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

Flow Info

Created 4 years, 4 months ago
Updated 3 years, 11 months ago
Rating: not yet rated

Owner

Actions

Rate:

Node Types

Core
  • change (x1)
  • comment (x1)
  • debug (x2)
  • exec (x1)
  • inject (x1)
  • template (x1)
Other
  • NetworkIntf (x1)
  • base64 (x1)
  • image (x1)
  • ui_button (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)

Tags

  • qr-code
  • dashboard
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option