问题描述
我正在使用Node-RED（带有仪表板和“ node-red-contrib-ui-svg”
）创建交互式平面图。我的问题：我想通过单击信息图标在Node-RED仪表板中显示一个网站弹出窗口，但是我不知道如何创建弹出窗口。我在“ http in”，“ http请求”，“ http响应”和功能节点上进行了尝试，但是没有用。也许我的负载不正确？
通过单击SVG，事件开始，并且SVG节点将有效负载发送到输出。
稍后应该有多个事件，这些事件使用不同的SVG打开不同的URL弹出窗口
有人知道，是否可以在Node-RED仪表板中创建弹出窗口，如果可以，请告诉我我该怎么做？
这是我尝试过的一个小示例流程：
[
{
"id": "213370b.a1a7e9","type": "tab","label": "Floorplan","disabled": false,"info": ""
},{
"id": "3a8acfc1.2d033","type": "debug","z": "213370b.a1a7e9","name": "","active": true,"tosidebar": true,"console": false,"tostatus": false,"complete": "true","targettype": "full","x": 570,"y": 100,"wires": []
},{
"id": "3d085e29.713452","type": "http in","name": "googl","url": "svg","method": "get","upload": false,"swaggerDoc": "","x": 90,"wires": [
[
"3e9f0610.1b40da"
]
]
},{
"id": "7e8c6b26.c6b194","type": "http response","statusCode": "","headers": {},"y": 60,{
"id": "e6a43abb.2208c8","type": "function","func": "msg.responseUrl=msg.payload;\nmsg.payload=msg.payload\n\n\nreturn msg;","outputs": 1,"noerr": 0,"x": 450,"y": 80,"wires": [
[
"7e8c6b26.c6b194","3a8acfc1.2d033"
]
]
},{
"id": "3e9f0610.1b40da","type": "http request","method": "GET","ret": "txt","paytoqs": false,"url": "nodered.org","tls": "","persist": false,"proxy": "","authType": "","x": 270,"wires": [
[
"e6a43abb.2208c8"
]
]
},{
"id": "2360d5fd.e4dc9a","type": "ui_svg_graphics","group": "ff128f4a.e252","order": 1,"width": 0,"height": 0,"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 100 100\" width=\"100\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><defs id=\"svgEditorDefs\"><symbol id=\"2139\" viewBox=\"0 0 64 64\" preserveAspectRatio=\"xMidYMid meet\"><rect x=\"0\" y=\"0\" width=\"64\" height=\"64\" style=\"stroke:none;fill:none;\"/><g xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"32\" cy=\"32\" fill=\"#42ade2\" r=\"30\"/><g fill=\"#fff\"><path d=\"m36.51 25h-6.992c-2.633 0-5.145 1.05-5.584 2.333-.436 1.284.447 2.334 1.965 2.334s2.072 2.02 1.23 4.492l-4.889 14.349c-.844 2.471.619 4.492 3.252 4.492h6.992c2.633 0 5.143-1.051 5.582-2.333.436-1.283-.447-2.335-1.963-2.335-1.518 0-2.072-2.02-1.23-4.491l4.889-14.349c.843-2.47-.619-4.492-3.252-4.492\"/><path d=\"m36.29 11c-2.666 0-5.406 2.238-6.121 5-.717 2.761.869 4.999 3.533 4.999 2.668 0 5.408-2.238 6.123-4.999.717-2.763-.867-5-3.535-5\"/></g></g></symbol><polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\"/></defs><use xlink:href=\"#2139\" x=\"4.410\" y=\"4.552\" width=\"19.061\" height=\"19.061\" id=\"svg_i\" transform=\"matrix(1.87014 0 0 1.87014 -2.59955 -2.72311)\"/></svg>","clickableShapes": [
{
"targetId": "#svg_i","action": "click","payload": "http://www.google.com","payloadType": "str","topic": "#svg_i"
}
],"smilAnimations": [],"bindings": [],"showCoordinates": false,"autoFormatAfterEdit": false,"showbrowserErrors": false,"outputField": "payload","editorUrl": "//drawsvg.org/drawsvg.html","directory": "","panning": "disabled","zooming": "disabled","panOnlyWhenZoomed": false,"doubleClickZoomEnabled": false,"mouseWheelZoomEnabled": false,"x": 120,{
"id": "ff128f4a.e252","type": "ui_group","z": "","name": "SVG","tab": "9f9846f6.57ce98","disp": true,"width": "23","collapse": false
},{
"id": "9f9846f6.57ce98","type": "ui_tab","name": "Background","icon": "dashboard","hidden": false
}
]
解决方法
如果您仍在寻找解决方案，那么您正在寻找“模式对话框”。尝试这个： https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8