many many thanks I have a project with ui template and debug nodes only
[
{
"id": "906edfc6d47a2107",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "96206c0bbcc7557d",
"type": "ui-base",
"name": "My Dashboard",
"path": "/dashboard",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"navigationStyle": "default"
},
{
"id": "b72f4bc82dfbbef4",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094CE",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
},
{
"id": "b20ed9dfbe5e854b",
"type": "ui-page",
"name": "Page",
"ui": "96206c0bbcc7557d",
"path": "/page",
"icon": "home",
"layout": "grid",
"theme": "b72f4bc82dfbbef4",
"order": -1,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "2166414fd2f5f24e",
"type": "ui-group",
"name": "My Group",
"page": "b20ed9dfbe5e854b",
"width": "6",
"height": "1",
"order": -1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "dbf6f95082c0e8cc",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
},
{
"id": "fb010ea46d95b0cb",
"type": "ui_base",
"theme": {
"name": "theme-light",
"lightTheme": {
"default": "#0094CE",
"baseColor": "#0094CE",
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
"edited": false
},
"darkTheme": {
"default": "#097479",
"baseColor": "#097479",
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif",
"edited": false
},
"customTheme": {
"name": "Untitled Theme 1",
"default": "#4B7930",
"baseColor": "#4B7930",
"baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
},
"themeState": {
"base-color": {
"default": "#0094CE",
"value": "#0094CE",
"edited": false
},
"page-titlebar-backgroundColor": {
"value": "#0094CE",
"edited": false
},
"page-backgroundColor": {
"value": "#fafafa",
"edited": false
},
"page-sidebar-backgroundColor": {
"value": "#ffffff",
"edited": false
},
"group-textColor": {
"value": "#1bbfff",
"edited": false
},
"group-borderColor": {
"value": "#ffffff",
"edited": false
},
"group-backgroundColor": {
"value": "#ffffff",
"edited": false
},
"widget-textColor": {
"value": "#111111",
"edited": false
},
"widget-backgroundColor": {
"value": "#0094ce",
"edited": false
},
"widget-borderColor": {
"value": "#ffffff",
"edited": false
},
"base-font": {
"value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
}
},
"angularTheme": {
"primary": "indigo",
"accents": "blue",
"warn": "red",
"background": "grey",
"palette": "light"
}
},
"site": {
"name": "Node-RED Dashboard",
"hideToolbar": "false",
"allowSwipe": "false",
"lockMenu": "false",
"allowTempTheme": "true",
"dateFormat": "DD/MM/YYYY",
"sizes": {
"sx": 48,
"sy": 48,
"gx": 6,
"gy": 6,
"cx": 6,
"cy": 6,
"px": 0,
"py": 0
}
}
},
{
"id": "ca12a15e938714e5",
"type": "ui_group",
"name": "Default",
"tab": "dbf6f95082c0e8cc",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "51bf0475.ddfd2c",
"type": "ui_group",
"name": "Group 2",
"tab": "279d8078.dcf29",
"order": 2,
"disp": true,
"width": "6"
},
{
"id": "279d8078.dcf29",
"type": "ui_tab",
"z": "906edfc6d47a2107",
"name": "New Test",
"icon": "dashboard"
},
{
"id": "81372c32f0628efa",
"type": "debug",
"z": "906edfc6d47a2107",
"name": "debug 1",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 580,
"y": 320,
"wires": []
},
{
"id": "489b75fd90578069",
"type": "ui_template",
"z": "906edfc6d47a2107",
"group": "ca12a15e938714e5",
"name": "",
"order": 0,
"width": 0,
"height": 0,
"format": "<!doctype html>\n<html>\n<head>\n <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <link type=\"text/css\" rel=\"stylesheet\" href=\"/static/JsQRScanner.css\">\n <script type=\"text/javascript\" src=\"/static/js/jsqrscanner.nocache.js\"></script>\n</head>\n<body>\n <div class=\"row-element-set row-element-set-QRScanner\">\n <h1>JsQRScanner</h1>\n <div class=\"row-element\">\n <div class=\"FlexPanel detailsPanel QRScannerShort\">\n <div class=\"FlexPanel shortInfoPanel\">\n <div class=\"gwt-HTML\">\n Point the webcam to a QR code.\n </div>\n </div>\n </div>\n </div>\n <br>\n <div class=\"row-element\">\n <div class=\"qrscanner\" id=\"scanner\">\n </div>\n </div>\n <div class=\"row-element\">\n <div class=\"form-field form-field-memo\">\n <div class=\"form-field-caption-panel\">\n <div class=\"gwt-Label form-field-caption\">\n Scanned text\n </div>\n </div>\n <div class=\"FlexPanel form-field-input-panel\">\n <textarea id=\"scannedTextMemo\" onchange=\"scannedTransfer()\" class=\"textInput form-memo form-field-input textInput-readonly\" rows=\"3\" readonly>\n </textarea>\n </div>\n </div>\n </div>\n <br> \n </div>\n\n <script type=\"text/javascript\">\n \n function onQRCodeScanned(scannedText)\n { \n var scannedTextMemo = document.getElementById(\"scannedTextMemo\");\n if(scannedTextMemo)\n { \n scannedTextMemo.value = scannedText;\n console.log({payload: scannedText});\n //HERE NEED CALL scope.send in order to send to node-red the scannedText value\n }\n }\n\n function provideVideo()\n {\n var n = navigator;\n if (n.mediaDevices && n.mediaDevices.getUserMedia)\n {\n return n.mediaDevices.getUserMedia({\n video: {\n facingMode: \"environment\"\n },\n audio: false\n });\n } \n return Promise.reject('Your browser does not support getUserMedia');\n }\n\n function provideVideoQQ()\n {\n return navigator.mediaDevices.enumerateDevices()\n .then(function(devices) {\n var exCameras = [];\n devices.forEach(function(device) {\n if (device.kind === 'videoinput') {\n exCameras.push(device.deviceId)\n }\n }); \n return Promise.resolve(exCameras);\n }).then(function(ids){\n if(ids.length === 0)\n {\n return Promise.reject('Could not find a webcam');\n }\n \n return navigator.mediaDevices.getUserMedia({\n video: {\n 'optional': [{\n 'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera\n }]\n }\n }); \n }); \n }\n\n function JsQRScannerReady()\n { \n var jbScanner = new JsQRScanner(onQRCodeScanned);\n jbScanner.setSnapImageMaxSize(300);\n var scannerParentElement = document.getElementById(\"scanner\");\n if(scannerParentElement)\n {\n jbScanner.appendTo(scannerParentElement);\n } \n }\n\n (function(scope) {\n var scannedTextMemo = document.getElementById(\"scannedTextMemo\");\n $('scannedTextMemo.value').on('change',function(){\n console.log('ciao');\n scope.send(scannedTextMemo.value);\n });\n scope.scannedTransfer = function(input) {\n let msg = {\n payload : input\n }\n scope.send(msg);\n };\n })(scope);\n </script>\n</body>\n</html>\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 580,
"y": 220,
"wires": [
[
"81372c32f0628efa"
]
]
}
]