Can someone help me how to change this image in the SVG node with a payload with the new link to the new image
Synes godt om
Kommenter
Del
Thank you so much for the fast reply. I really appreciate it.
I have tried but dont think i did it right.
I am not sure how to send that msg. Is it from a function node and do I have to change the syntax in the SVG node?
Can you help with the flow please??. Here is the flow to import.
[
{
"id": "11efafb081448151",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "c6f5630c59d25f58",
"type": "ui_svg_graphics",
"z": "11efafb081448151",
"group": "f014eb03.a3c618",
"order": 1,
"width": "14",
"height": "13",
"svgString": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100%\" viewBox=\"0 0 400 100\" width=\"100%\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none;stroke:none\"/><defs id=\"svgEditorDefs\"><style type=\"text/css\">.svg_text_unselect{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;}\n</style></defs>\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<image x=\"-16.6269\" y=\"-65.2529\" width=\"396.714\" height=\"225.902\" id=\"e1_image\" preserveAspectRatio=\"xMidYMid meet\" xlink:href=\"https://funhall.dk/wp-content/uploads/2022/03/escape-rum-1-timer.jpg\" transform=\"matrix(1.09797 0 0 1 -11.6156 4.80591)\"/><text style=\"fill:white;font-size:40px;font-weight:bold;text-anchor:end;font-style:normal;font-family:"Bookman Old Style"\" x=\"378.779\" y=\"64.0543\" id=\"e3_texte\" xml:space=\"preserve\" class=\"svg_text_unselect\"> {{msg.payload}}</text><text style=\"fill:white;font-size:8px;font-weight:bold;text-anchor:end;font-style:normal;font-family:"Bookman Old Style"\" x=\"376.532\" y=\"124.14\" id=\"e2_texte\" xml:space=\"preserve\"> Penalty: {{msg.penalty}} min.</text><text style=\"fill:black;font-family:Arial;font-size:20px\" x=\"-8.666\" y=\"-40.668\" id=\"e1_texte\"/><text style=\"fill:white;font-family:Bookman Old Style;font-size:20px\" x=\"8.63731\" y=\"-26.9142\" id=\"e4_texte\">{{msg.hintHead}}</text><text style=\"fill:white;font-family:Bookman Old Style;font-size:8px\" x=\"8.41543\" y=\"-1.18169\" id=\"e5_texte\" xml:space=\"preserve\" textLength=\"61.85085449921053\" transform=\"matrix(0.75 0 0 0.75 7.64142 -1.60601)\"/><text style=\"fill:white;font-family:Bookman Old Style;font-size:8px\" x=\"10.5235\" y=\"-4.52878\" id=\"e6_texte\">{{msg.hint}}</text></svg>",
"clickableShapes": [],
"javascriptHandlers": [],
"smilAnimations": [],
"bindings": [],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": false,
"showBrowserEvents": false,
"enableJsDebugging": false,
"sendMsgWhenLoaded": false,
"noClickWhenDblClick": false,
"outputField": "payload",
"editorUrl": "//drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": 150,
"cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit;\n}",
"name": "timer screen",
"x": 610,
"y": 300,
"wires": [
[]
]
},
{
"id": "b7b5192eb1b2d231",
"type": "inject",
"z": "11efafb081448151",
"name": "Picture",
"props": [
{
"p": "image",
"v": "https://funhall.dk/wp-content/uploads/2022/03/escape-rum-1-timer.jpg",
"vt": "str"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0\" y=\"0\" height=\"100%\" viewBox=\"0 0 400 100\" width=\"100%\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none;stroke:none\"/><defs id=\"svgEditorDefs\"><style type=\"text/css\">.svg_text_unselect{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;} </style></defs> <!-- Add here your SVG shapes (circles, rectangles, ...) --> <!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).--> timer screen / <image x=\"-16.6269\" y=\"-65.2529\" width=\"396.714\" height=\"225.902\" id=\"e1_image\" preserveAspectRatio=\"xMidYMid meet\" xlink:href=\"https://funhall.dk/wp-content/uploads/2022/03/escape-rum-1-timer.jpg\" transform=\"matrix(1.09797 0 0 1 -11.6156 4.80591)\"/><text style=\"fill:white;font-size:40px;font-weight:bold;text-anchor:end;font-style:normal;font-family:"Bookman Old Style"\" x=\"378.779\" y=\"64.0543\" id=\"e3_texte\" xml:space=\"preserve\" class=\"svg_text_unselect\"> {{msg.payload}}</text><text style=\"fill:white;font-size:8px;font-weight:bold;text-anchor:end;font-style:normal;font-family:"Bookman Old Style"\" x=\"376.532\" y=\"124.14\" id=\"e2_texte\" xml:space=\"preserve\"> Penalty: {{msg.penalty}} min.</text><text style=\"fill:black;font-family:Arial;font-size:20px\" x=\"-8.666\" y=\"-40.668\" id=\"e1_texte\"/><text style=\"fill:white;font-family:Bookman Old Style;font-size:20px\" x=\"8.63731\" y=\"-26.9142\" id=\"e4_texte\">{{msg.hintHead}}</text><text style=\"fill:white;font-family:Bookman Old Style;font-size:8px\" x=\"8.41543\" y=\"-1.18169\" id=\"e5_texte\" xml:space=\"preserve\" textLength=\"61.85085449921053\" transform=\"matrix(0.75 0 0 0.75 7.64142 -1.60601)\"/><text style=\"fill:white;font-family:Bookman Old Style;font-size:8px\" x=\"10.5235\" y=\"-4.52878\" id=\"e6_texte\">{{msg.hint}}</text></svg>",
"x": 290,
"y": 240,
"wires": [
[
"c6f5630c59d25f58"
]
]
},
{
"id": "1944fd142ff7fe72",
"type": "inject",
"z": "11efafb081448151",
"name": "Test picture 1",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "https://funhall.dk/wp-content/uploads/2022/02/kaffe-frugtfad-3-scaled.jpg",
"payloadType": "str",
"x": 290,
"y": 360,
"wires": [
[
"c6f5630c59d25f58"
]
]
},
{
"id": "f014eb03.a3c618",
"type": "ui_group",
"name": "Floorplan test",
"tab": "80068970.6e2868",
"order": 1,
"disp": true,
"width": "14",
"collapse": false
},
{
"id": "80068970.6e2868",
"type": "ui_tab",
"name": "SVG",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Btw. i have other payload msg into the SVG node.
I will have a look tonight. Now at work.
Thanks you so much......
I just figure it out.
But thanks anyway
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
