hi all, I have a ui template with some javascript function
i would like return a value to node-red
<script type="text/javascript">
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
console.log({payload: "test" + scannedText});
}
</script>
How can I send scannedText to nodered?
many thanks
can someone help me?
The built in help has an example of how to send data back from UI template to node-red.
Also, on the forum, search scope send in the Dashboard category.
Here is one such example: Upload file to SQL table - #4 by Steve-Mcl - check out the ui_template named "Upload Button"
Alternatively, you could create a http endpoint flow to receive data & use Ajax in your template to POST data back to node-red.
i'm really sorry for disturb
I'm trying using many example but i have one small problem
i have written this function
<script>
function scannedTransfer(){
var UUID = ScannedUUID;
//added some output for testing
console.log("Working, Scanned: " + UUID)
alert(UUID);
this.send(UUID);
}
</script>
if function is called the console.log and the alert works very well while the this.send not works 
Which dashboard is this? Original (old v1) or new flowfuse dashboard 2.0?
i'm using 1
In which case, this.send(UUID) will not work. Read the built in help. You need to use the scope object.
Hi,
I have the same issue, nothing coming out of the template node:
I can see the 'Here!' in the console but noting in the debug node
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
console.log("here!");
scope.send({payload: "test_send"});
}
});
})(scope);
</script>
No, your code is very different. You should probably start your own thread and provide a minimal flow that demonstrates your issue.
Do you have a debug attached to the output of the template?
Also, why have you placed that inside the watch msg handler? This means you need to send a message to generate a msg, which is a bit pointless as it is.
Typically, you create a function that is called by a button.
You maybe right, I will move to a new thread
im really sorry for disturb you again
i try in this way:
<script type="text/javascript">
var ScannedUUID="ciao";
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
scannedTransfer(scannedText)
console.log({payload: scannedText});
}
}
(function(scope) {
scope.scannedTransfer = function(payload) {
let msg = {
payload
}
scope.send(msg);
};
})(scope);
</script>
nothing output from scope funcion
i'm sorry again
Where is onQRCodeScanned called?
You cannot call scannedTransfer outside of scope
Try adding console.log("inside scope") console.log("inside scope scannedTransfer") statements outside and inside of your functions. Look in the browser console for them. Click the code link and add debug points to understand what is happening.
many many thanks for your available
to better understand the problem I attach entire code
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/static/JsQRScanner.css">
<script type="text/javascript" src="/static/js/jsqrscanner.nocache.js"></script>
</head>
<body>
<div class="row-element-set row-element-set-QRScanner">
<h1>JsQRScanner</h1>
<div class="row-element">
<div class="FlexPanel detailsPanel QRScannerShort">
<div class="FlexPanel shortInfoPanel">
<div class="gwt-HTML">
Point the webcam to a QR code.
</div>
</div>
</div>
</div>
<br>
<div class="row-element">
<div class="qrscanner" id="scanner">
</div>
</div>
<div class="row-element">
<div class="form-field form-field-memo">
<div class="form-field-caption-panel">
<div class="gwt-Label form-field-caption">
Scanned text
</div>
</div>
<div class="FlexPanel form-field-input-panel">
<textarea id="scannedTextMemo" class="textInput form-memo form-field-input textInput-readonly" rows="3" readonly>
</textarea>
</div>
</div>
</div>
<br>
</div>
<script type="text/javascript">
function onQRCodeScanned(scannedText)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
console.log({payload: scannedText});
//HERE NEED CALL scope.send in order to send to node-red the scannedText value
}
}
function provideVideo()
{
var n = navigator;
if (n.mediaDevices && n.mediaDevices.getUserMedia)
{
return n.mediaDevices.getUserMedia({
video: {
facingMode: "environment"
},
audio: false
});
}
return Promise.reject('Your browser does not support getUserMedia');
}
function provideVideoQQ()
{
return navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var exCameras = [];
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
exCameras.push(device.deviceId)
}
});
return Promise.resolve(exCameras);
}).then(function(ids){
if(ids.length === 0)
{
return Promise.reject('Could not find a webcam');
}
return navigator.mediaDevices.getUserMedia({
video: {
'optional': [{
'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
}]
}
});
});
}
function JsQRScannerReady()
{
var jbScanner = new JsQRScanner(onQRCodeScanned);
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if(scannerParentElement)
{
jbScanner.appendTo(scannerParentElement);
}
}
(function(scope) {
scope.scannedTransfer = function(input) {
let msg = {
payload : input
}
scope.send(msg);
};
})(scope);
</script>
</body>
</html>
or maybe is easies to call scope function from textarea with event onchange? I prefer using javascript only if you can help me
many many thanks in advance
Where is the HTML placed in your flow? what node? how do you serve this?
Probably better to share a flow export (only select the nodes that matter - i.e. minimal possible reproducible flow)
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"
]
]
}
]
firsly, node-red-dasboard creates the whole HTML + BODY - so you should NOT include thos in your template.
Next, in order to access scope you need your functions to be in side that first function
function onQRCodeScanned(){
// can NOT use scope here
}
(function (scope) {
// can use scope here
})()
(function (scope) {
// can use scope here
function onQRCodeScanned(){
// can use scope here
}
})()
<div class="row-element-set row-element-set-QRScanner">
<h1>JsQRScanner</h1>
<div class="row-element">
<div class="FlexPanel detailsPanel QRScannerShort">
<div class="FlexPanel shortInfoPanel">
<div class="gwt-HTML">
Point the webcam to a QR code.
</div>
</div>
</div>
</div>
<br>
<div class="row-element">
<div class="qrscanner" id="scanner">
</div>
</div>
<div class="row-element">
<div class="form-field form-field-memo">
<div class="form-field-caption-panel">
<div class="gwt-Label form-field-caption">
Scanned text
</div>
</div>
<div class="FlexPanel form-field-input-panel">
<textarea id="scannedTextMemo" class="textInput form-memo form-field-input textInput-readonly" rows="3"
readonly>
</textarea>
</div>
</div>
</div>
<br>
</div>
<script type="text/javascript">
(function (scope) {
function onQRCodeScanned(scannedText) {
var scannedTextMemo = document.getElementById("scannedTextMemo");
if (scannedTextMemo) {
scannedTextMemo.value = scannedText;
console.log({ payload: scannedText });
scope.send({ payload: scannedText });
}
}
function provideVideo() {
var n = navigator;
if (n.mediaDevices && n.mediaDevices.getUserMedia) {
return n.mediaDevices.getUserMedia({
video: {
facingMode: "environment"
},
audio: false
});
}
return Promise.reject('Your browser does not support getUserMedia');
}
function provideVideoQQ() {
return navigator.mediaDevices.enumerateDevices()
.then(function (devices) {
var exCameras = [];
devices.forEach(function (device) {
if (device.kind === 'videoinput') {
exCameras.push(device.deviceId)
}
});
return Promise.resolve(exCameras);
}).then(function (ids) {
if (ids.length === 0) {
return Promise.reject('Could not find a webcam');
}
return navigator.mediaDevices.getUserMedia({
video: {
'optional': [{
'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
}]
}
});
});
}
function JsQRScannerReady() {
var jbScanner = new JsQRScanner(onQRCodeScanned);
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if (scannerParentElement) {
jbScanner.appendTo(scannerParentElement);
}
}
})(scope);
</script>
many thanks
I did some test:
not works and the function are not called.
If I try in the following way:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="/static/JsQRScanner.css">
<script type="text/javascript" src="/static/js/jsqrscanner.nocache.js"></script>
<div class="row-element-set row-element-set-QRScanner">
<h1>JsQRScanner</h1>
<div class="row-element">
<div class="FlexPanel detailsPanel QRScannerShort">
<div class="FlexPanel shortInfoPanel">
<div class="gwt-HTML">
Point the webcam to a QR code.
</div>
</div>
</div>
</div>
<br>
<div class="row-element">
<div class="qrscanner" id="scanner">
</div>
</div>
<div class="row-element">
<div class="form-field form-field-memo">
<div class="form-field-caption-panel">
<div class="gwt-Label form-field-caption">
Scanned text
</div>
</div>
<div class="FlexPanel form-field-input-panel">
<textarea id="scannedTextMemo" class="textInput form-memo form-field-input textInput-readonly" rows="3" readonly>
</textarea>
</div>
</div>
</div>
<br>
<md-button ng-click="myfunction('OK')">ok</md-button>
</div>
<script type="text/javascript">
(function(scope) {
**//WORKS ONLY IF I PUSH BUTTON**
scope.myfunction = function(payload) {
var scannedTextMemo = document.getElementById("scannedTextMemo");
console.log(scannedTextMemo.value)
let msg = {
payload,
topic:scannedTextMemo.value
}
scope.send(msg);
};
})(scope);
scope.send({payload: "preload"}); **//WORKS outside previous scope function too**
function onQRCodeScanned(scannedText,scope,payload)
{
var scannedTextMemo = document.getElementById("scannedTextMemo");
if(scannedTextMemo)
{
scannedTextMemo.value = scannedText;
console.log({payload: scannedText});
scope.send({payload: "load"}); **//NOT WORKS NEVER**
}
}
function provideVideo()
{
var n = navigator;
if (n.mediaDevices && n.mediaDevices.getUserMedia)
{
return n.mediaDevices.getUserMedia({
video: {
facingMode: "environment"
},
audio: false
});
}
return Promise.reject('Your browser does not support getUserMedia');
}
function provideVideoQQ()
{
return navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
var exCameras = [];
devices.forEach(function(device) {
if (device.kind === 'videoinput') {
exCameras.push(device.deviceId)
}
});
return Promise.resolve(exCameras);
}).then(function(ids){
if(ids.length === 0)
{
return Promise.reject('Could not find a webcam');
}
return navigator.mediaDevices.getUserMedia({
video: {
'optional': [{
'sourceId': ids.length === 1 ? ids[0] : ids[1]//this way QQ browser opens the rear camera
}]
}
});
});
}
function JsQRScannerReady()
{
var jbScanner = new JsQRScanner(onQRCodeScanned);
jbScanner.setSnapImageMaxSize(300);
var scannerParentElement = document.getElementById("scanner");
if(scannerParentElement)
{
jbScanner.appendTo(scannerParentElement);
}
}
scope.send({payload:"postLoad"}) **//WORKS outside previous scope function too**
</script>
scope.send() works outside (function(scope){scope.send inside the scope function works when I push the button which I added just for a testscope.send inside the function onQRCodeScanned never worksI tried put all code inside the (function(scope{ ... }(scope) but the external javascript code is not loaded
maybe I have some problem to understand how to use the scope function
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy