Help with my images SVG please

RicardoCotrina
Mon, 11 Oct 2021 18:30:49 +0000
Dashboard

I'm using some SVG image templates, and I have 2 that I wish would show up. One on top of the other and vice versa when you click. That is to say, that the images alternate.
Thank you, I will be aware of your comments.

I am using the node "ui_svg_graphics"...

I am attaching a screenshot of the SVG images that I want to be superimposed when I click. Greetings.

My flow is:

[
    {
        "id": "d8d3fa0bf37b7f47",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": ""
    },
    {
        "id": "fbe55564f0fe0f3f",
        "type": "ui_svg_graphics",
        "z": "d8d3fa0bf37b7f47",
        "group": "5286eab45a5fb268",
        "order": 4,
        "width": 7,
        "height": 2,
"svgString": " <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><defs id=\"svgEditorDefs\"> #state_switch{fill:black;font-family:Georgia;font-size:12.999988084915614px;}\n </defs><desc>Copyright Opto 22</desc> <g id=\"switch_on\">\n\t<g id=\"shape\">\n\t\t<rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\"/>\n\t</g>\n\t<g id=\"shadow\">\n\t\t<rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\"/>\n\t\t<polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \"/>\n\t</g>\n\t<g id=\"dark\">\n\t\t<polygon fill=\"#0071ba\" points=\"79.564,22.3 79.564,70.811 48.875,72.835 48.875,26.188 \"/>\n\t\t<polygon fill=\"#0071ba\" points=\"79.564,70.811 91.839,72.835 91.839,26.188 79.564,22.3 \"/>\n\t</g>\n\t<g id=\"light\">\n\t\t<rect x=\"7.956\" y=\"26.188\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\"/>\n\t</g>\n\t<g id=\"hlight\">\n\t\t<path fill=\"#a3daff\" d=\"M79.473,70.311h-1V23.367L49.146,27.09l-0.126,-0.992l29.89,-3.794c0.143,-0.016,0.285,0.026,0.393,0.121c0.108,0.095,0.17,0.231,0.17,0.375V70.311Z\"/>\n\t\t\n\t\t\t<rect x=\"63.675\" y=\"56.192\" transform=\"matrix(0.0646 0.9979 -0.9979 0.0646 130.9192 2.8788)\" fill=\"#a3daff\" width=\"0.499\" height=\"30.159\"/>\n\t\t<rect x=\"46.374\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\"/>\n\t\t<rect x=\"10.161\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\"/>\n\t\t<rect x=\"12.866\" y=\"70.13\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t\t<rect x=\"12.866\" y=\"28.393\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t</g>\n</g> <text x=\"35.6782\" y=\"16.4152\" id=\"state_switch\"/> ",
        "clickableShapes": [
            {
                "targetId": "#switch_off",
                "action": "click",
                "payload": "#switch_off",
                "payloadType": "str",
                "topic": "#switch_off"
            }
        ],
        "javascriptHandlers": [
            {
                "selector": "#switch_off",
                "action": "click",
                "sourceCode": "msg.payload = \"Hola\""
            }
        ],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "name": "SWITCH - OFF",
        "x": 1780,
        "y": 260,
        "wires": [
            [
                "6a67957aef1cfa39"
            ]
        ]
    },
    {
        "id": "e57f20f5f3bae2db",
        "type": "ui_svg_graphics",
        "z": "d8d3fa0bf37b7f47",
        "group": "5286eab45a5fb268",
        "order": 6,
        "width": 7,
        "height": 2,
"svgString": " <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><desc>Copyright Opto 22</desc> <g>\n\t<g id=\"shape\">\n\t\t<rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\"/>\n\t</g>\n\t<g id=\"shadow\">\n\t\t<rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\"/>\n\t\t<polygon opacity=\"0.5\" fill=\"#003e66\" enable-background=\"new \" points=\"94.908,74.608 5.092,74.608 1,78.836 99,78.836 \"/>\n\t</g>\n\t<g id=\"dark\">\n\t\t<polygon fill=\"#0071ba\" points=\"20.436,71.13 20.436,21.209 51.125,26.529 51.125,73.176 \"/>\n\t\t<polygon fill=\"#0071ba\" points=\"20.436,21.209 8.161,26.529 8.161,73.176 20.436,71.13 \"/>\n\t</g>\n\t<g id=\"light\">\n\t\t<rect x=\"51.125\" y=\"26.529\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\"/>\n\t</g>\n\t<g id=\"hlight\">\n\t\t<polygon fill=\"#a3daff\" points=\"20.118,70.107 19.118,70.107 19.118,22.873 8.957,27.496 8.543,26.586 20.118,21.319 \"/>\n\t\t\n\t\t\t<rect x=\"14.264\" y=\"66.284\" transform=\"matrix(0.1638 0.9865 -0.9865 0.1638 82.6304 45.4365)\" fill=\"#a3daff\" width=\"0.501\" height=\"10.348\"/>\n\t\t<rect x=\"53.126\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\"/>\n\t\t<rect x=\"89.339\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\"/>\n\t\t<rect x=\"55.831\" y=\"28.734\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t\t<rect x=\"55.831\" y=\"70.471\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\"/>\n\t</g>\n</g> ",
        "clickableShapes": [
            {
                "targetId": "#switch_on",
                "action": "click",
                "payload": "#switch_on",
                "payloadType": "str",
                "topic": "#switch_on"
            }
        ],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": false,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "disabled",
        "zooming": "disabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": false,
        "dblClickZoomPercentage": 150,
        "name": "Switch - ON",
        "x": 1770,
        "y": 300,
        "wires": [
            [
                "7f295b98ceec6e7d"
            ]
        ]
    },
    {
        "id": "6a67957aef1cfa39",
        "type": "debug",
        "z": "d8d3fa0bf37b7f47",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 2250,
        "y": 260,
        "wires": []
    },
    {
        "id": "7f295b98ceec6e7d",
        "type": "debug",
        "z": "d8d3fa0bf37b7f47",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 2250,
        "y": 300,
        "wires": []
    },
    {
        "id": "5286eab45a5fb268",
        "type": "ui_group",
        "name": "Bomba",
        "tab": "8bbab1b47b8e87c8",
        "order": 1,
        "disp": true,
        "width": 14,
        "collapse": false
    },
    {
        "id": "8bbab1b47b8e87c8",
        "type": "ui_tab",
        "name": "SVG",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

6 posts - 3 participants