I'm working on a dashboard and have found a way to implement an HTML5-QRCodeScanner using an mui_template node (i know that it is different than ui_dashboard, but has so far functioned pretty much exactly same.)
I've not used template nodes before and have been able to get everything work. The <div qr-scanner </div sends the qr results to <div qr-scanner-results </div but now I'd like to process this results further.
Basically my questions is how can I pass what is displayed in the results <div (the results that came from the qr-scanner <div) into another node? I've connected the mui_template node to a debug node, but nothing seems to pass. I've read a few template pages, but seem to struggle with implementing any solution (node.send(msg), or scope(send), or var newMsg = {}) but nothing seems to pass beyond the template node...
[
{
"id": "0e156dd3e727a5d4",
"type": "mui_template",
"z": "a56e06c3490c9181",
"group": "c8bdece1102124c6",
"name": "",
"order": 9,
"width": 0,
"height": 0,
"format": "<script src=\"https://unpkg.com/html5-qrcode\" type=\"text/javascript\">",
"storeOutMessages": true,
"fwdInMessages": true,
"templateScope": "local",
"x": 540,
"y": 220,
"wires": [
[]
]
},
{
"id": "47884bca12c15abd",
"type": "mui_template",
"z": "a56e06c3490c9181",
"group": "c8bdece1102124c6",
"name": "Scanner",
"order": 3,
"width": "8",
"height": "8",
"format": "<div id=\"qr-reader\" style=\"width:auto\"></div>\n\n<script>\nfunction docReady(fn) {\n// see if DOM is already available\nif (document.readyState === \"complete\" || document.readyState === \"interactive\") {\n// call on next available tick\nsetTimeout(fn, 1);\n} else {\ndocument.addEventListener(\"DOMContentLoaded\", fn);\n}\n}\n\ndocReady(function() {\nvar resultContainer = document.getElementById('qr-reader-results');\nvar lastResult, countResults = 0;\n\nvar html5QrcodeScanner = new Html5QrcodeScanner(\n\"qr-reader\", { fps: 10, qrbox: 250 });\n\nfunction onScanSuccess(decodedText, decodedResult) {\nif (decodedText !== lastResult) {\n++countResults;\nlastResult = decodedText;\nconsole.log(`Scan result = ${decodedText}`, decodedResult);\n\nresultContainer.innerHTML += `<div>${decodedText}</div>`;\n\n// Optional: To close the QR code scannign after the result is found\nhtml5QrcodeScanner.clear();\n}\n}\n\n// Optional callback for error, can be ignored.\nfunction onScanError(qrCodeError) {\n// This callback would be called in case of qr code scan error or setup error.\n// You can avoid this callback completely, as it can be very verbose in nature.\n}\n\nhtml5QrcodeScanner.render(onScanSuccess, onScanError);\n});\n</script>",
"storeOutMessages": true,
"fwdInMessages": false,
"templateScope": "local",
"x": 540,
"y": 260,
"wires": [
[
"36a16f2297534d67"
]
]
},
{
"id": "36a16f2297534d67",
"type": "debug",
"z": "a56e06c3490c9181",
"name": "debug 3",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 680,
"y": 260,
"wires": []
},
{
"id": "63e1b056ba246d73",
"type": "mui_template",
"z": "a56e06c3490c9181",
"group": "c8bdece1102124c6",
"name": "",
"order": 8,
"width": "10",
"height": "1",
"format": "<div id=\"qr-reader-results\"></div>",
"storeOutMessages": true,
"fwdInMessages": true,
"templateScope": "local",
"x": 540,
"y": 300,
"wires": [
[
"9923a21df1fcd66f"
]
]
},
{
"id": "9923a21df1fcd66f",
"type": "debug",
"z": "a56e06c3490c9181",
"name": "debug 4",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 680,
"y": 300,
"wires": []
},
{
"id": "c8bdece1102124c6",
"type": "mui_group",
"name": "Signout Form Part 02",
"tab": "3c91de014af2fdbb",
"order": 6,
"disp": false,
"width": "10",
"collapse": false
},
{
"id": "3c91de014af2fdbb",
"type": "mui_tab",
"name": "ePass",
"icon": "fa-menu",
"order": 2,
"disabled": false,
"hidden": false
}
]
Any help is appreciated.
