Блог

Я создаю интерактивный план этажа с использованием Node-RED (с панелью управления и «node-red-contrib-ui-svg«

Моя проблема: я хочу, чтобы веб-сайт всплывал на узловой красной панели управления, нажав на значок информации, но я не знаю, как создать всплывающее окно. Я попробовал это с «http in», «http request», «http response» и функциональными узлами, но это не сработало. Может быть, я просто неправильно понимаю полезную нагрузку?
При нажатии на SVG запускается событие, и узел SVG отправляет полезную нагрузку на вывод. Позже должно произойти несколько событий с разными SVGS, открывающими разные URL-всплывающие окна

Кто-нибудь знает, возможно ли создать всплывающее окно в Node-RED Dashboard, и если да, скажите мне, как я могу это сделать?
Вот небольшой пример того, что я пробовал:

 [
{
    "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.payloadnnnreturn 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
}
]
  

Если вы все еще ищете решение, «модальный диалог» — это то, что вы ищете. Попробуйте это:https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8