Hello,
I'm working on a project where I generate a QR code and want to display it in my dashboard. Unfortunately, this isn't working.
I can generate the QR code, but I can't display it via a template node.
I'm using the "node-red-contrib-qrcode-generator" to generate the QR code.
This generates a data URL, but I can't display it.
If I place the link in the template node, it works, but as soon as I make it dynamic with the URL as msg.payload, it stops working and I see a strange icon.
Does anyone know what I'm doing wrong and how I can fix this?
Thanks in advance!
This is my current flow:
[
{
"id": "5db07db4ad84b11e",
"type": "qrcode-generator",
"z": "59d74dfb2578e436",
"name": "",
"qrtype": "text2qr",
"text2qrText": "",
"ssid": "",
"hiddenssid": false,
"wifitype": "",
"phonenum": "",
"smsphonenum": "",
"smstext": "",
"mailto": "",
"mailsubject": "",
"mailbody": "",
"latitude": "",
"longitude": "",
"colorlight": "#ffffff",
"colordark": "#000000",
"printstatus": false,
"x": 750,
"y": 160,
"wires": [
[
"a01e0eec311b75da"
]
]
},
{
"id": "b359e5c2fb3d386f",
"type": "inject",
"z": "59d74dfb2578e436",
"name": "",
"props": [
{
"p": "qrcodeinput",
"v": "hello_world",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 530,
"y": 160,
"wires": [
[
"5db07db4ad84b11e"
]
]
},
{
"id": "72d7fd304c41ce7b",
"type": "debug",
"z": "59d74dfb2578e436",
"name": "debug 4",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "auto",
"x": 790,
"y": 380,
"wires": []
},
{
"id": "a01e0eec311b75da",
"type": "ui-template",
"z": "59d74dfb2578e436",
"group": "814c61671a035281",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "<div style=\"white-space: pre-wrap; word-wrap: break-word; max-height: 250px; overflow-y: auto; padding: 10px; border: 1px solid #ccc; border-radius: 10px;\">\n <h3></h3>\n <img src=\"{{msg.payload}}\" style=\"max-width:100%; height:auto;\">\n</div>",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 800,
"y": 260,
"wires": [
[
"72d7fd304c41ce7b"
]
]
},
{
"id": "814c61671a035281",
"type": "ui-group",
"name": "Welkom!",
"page": "75a598be68292179",
"width": "12",
"height": "4",
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "75a598be68292179",
"type": "ui-page",
"name": "Home",
"ui": "44e48157b09337b1",
"path": "/home",
"icon": "home",
"layout": "grid",
"theme": "7b56f3f25e965ad4",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 1,
"className": "",
"visible": true,
"disabled": false
},
{
"id": "44e48157b09337b1",
"type": "ui-base",
"name": "JServer",
"path": "/dashboard",
"appIcon": "http://192.168.178.20:1880/DMX512.JPG",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control",
"ui-switch",
"ui-text",
"ui-form",
"ui-slider",
"ui-button-group",
"ui-template"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "default",
"showReconnectNotification": true,
"notificationDisplayTime": "5",
"showDisconnectNotification": true,
"allowInstall": true
},
{
"id": "7b56f3f25e965ad4",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#000000",
"primary": "#191919",
"bgPage": "#252525",
"groupBg": "#ffffff",
"groupOutline": "#000000"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]
icon that appears when I try to generate the qr code dynamically:
