在 Node-RED 仪表板中创建网站弹出窗口

Question

我正在使用 Node-RED 创建交互式平面图（带有仪表板和“node-red-contrib-ui-svg”

我的问题：我想通过单击信息图标在 Node-RED 仪表板中弹出网站，但我不知道如何创建弹出窗口。我尝试了“http in”、“http request”、“http response”和函数节点，但没有用。也许我只是没有得到正确的有效载荷？
通过单击 SVG，事件开始，SVG 节点将有效负载发送到输出。稍后应该有多个事件，不同的 SVG 打开不同的 URL-popups

有人知道，是否可以在 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",
    "z": "213370b.a1a7e9",
    "name": "googl",
    "url": "svg",
    "method": "get",
    "upload": false,
    "swaggerDoc": "",
    "x": 90,
    "y": 100,
    "wires": [
        [
            "3e9f0610.1b40da"
        ]
    ]
},
{
    "id": "7e8c6b26.c6b194",
    "type": "http response",
    "z": "213370b.a1a7e9",
    "name": "",
    "statusCode": "",
    "headers": {},
    "x": 570,
    "y": 60,
    "wires": []
},
{
    "id": "e6a43abb.2208c8",
    "type": "function",
    "z": "213370b.a1a7e9",
    "name": "",
    "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",
    "z": "213370b.a1a7e9",
    "name": "",
    "method": "GET",
    "ret": "txt",
    "paytoqs": false,
    "url": "nodered.org",
    "tls": "",
    "persist": false,
    "proxy": "",
    "authType": "",
    "x": 270,
    "y": 100,
    "wires": [
        [
            "e6a43abb.2208c8"
        ]
    ]
},
{
    "id": "2360d5fd.e4dc9a",
    "type": "ui_svg_graphics",
    "z": "213370b.a1a7e9",
    "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,
    "name": "",
    "x": 120,
    "y": 60,
    "wires": [
        [
            "e6a43abb.2208c8"
        ]
    ]
},
{
    "id": "ff128f4a.e252",
    "type": "ui_group",
    "z": "",
    "name": "SVG",
    "tab": "9f9846f6.57ce98",
    "order": 1,
    "disp": true,
    "width": "23",
    "collapse": false
},
{
    "id": "9f9846f6.57ce98",
    "type": "ui_tab",
    "z": "",
    "name": "Background",
    "icon": "dashboard",
    "disabled": false,
    "hidden": false
}
]

Answer 1

如果您仍在寻找解决方案，“模态对话框”就是您要找的。试试这个： https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8

在 Node-RED 仪表板中创建网站弹出窗口

Creating a website-popup in Node-RED Dashboard

svg

popup

node-red