Help with my images SVG please

Dashboard
, ,
1

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.

WhatsApp Image 2021-10-11 at 1.25.02 PM

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": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"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\">#state_switch{fill:black;font-family:Georgia;font-size:12.999988084915614px;}\n</style></defs><desc>Copyright Opto 22</desc> <svg viewBox=\"0 0 100 100\" id=\"switch_off\"><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></svg><text x=\"35.6782\" y=\"16.4152\" id=\"state_switch\"/></svg>",
        "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": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\"><rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\"/><desc>Copyright Opto 22</desc> <svg viewBox=\"0 0 100 100\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" id=\"switch_on\"><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></svg></svg>",
        "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
    }
]
2

Hi @RicardoCotrina,

There are multiple ways to implement something like that. I wrote a tutorial some time ago to manage multiple floors in a house. Although a floor is completely different from a toghle button, it might give you some inspiration:

  • Replace the entire svg by another one.
  • Create two groups on top of each other, and only display one

Bart

3

I have not had any success, with the template you presented it does not allow me to use the SVG images. I have the images on my PC, is there a way to extract them?

4

Evening Ricardo,

I have updated your flow, as you can see below.
Will explain what I have changed, so you (and others) can learn from it:

  1. You had two separate SVG nodes, one for switch ON and one for switch off. I have used only one SVG node. That makes it much easier to only show one of both switch drawings.

  2. Your SVG drawings contained an embedded svg tag:

    <svg ...viewBox="0 0 100 100" ...">
   ...
  <svg viewBox="0 0 100 100" id="switch_off">
       <g id="switch_on">
           All the shapes of your OFF switch are here
       </g>
   </svg><text x="35.6782" y="16.4152" id="state_switch" />
</svg>

    I don't think those embedded svg tags have much added value, since they use the same viewbox. So I have removed those embedded SVG tags.

  3. Now we have a single SVG drawing containing two separate group tags. One group for the switch ON shapes, and one group for the switch OFF shapes:

    <svg ...viewBox="0 0 100 100" ...">
   ...
  <g id="switch_off">
        All the shapes of your OFF switch are here
   </g>
  <g id="switch_on">
        All the shapes of your ON switch are here
   </g>
</svg>

  4. Your two separate SVG drawings contained similar id's for the subgroups (e.g. both drawings had an element with id "shadow"). When we merge both drawings into a single SVG drawing, we would end up with two elements having the same id. Therefore I have renamed those elements (with postfix "_off" or "_on"), for example:

    <svg ...viewBox="0 0 100 100" ...">
   ...
  <g id="switch_off">
        <g id="shadow_off">
   </g>
  <g id="switch_on">
        <g id="shadow_on">
   </g>
</svg>

  5. Now we only have to set the visibility (style) attribute of those groups (with id "switch__on" or "switch_off") to "visible" or "hidden". Which means that only one of the two groups will be displayed, so only one of your two SVG drawings will be displayed.

  6. By default I set the "switch_on" group hidden, so the switch will be OFF by default:

    <g id="switch_on" visibility="hidden">

    If you want the switch to be ON by default, you need to move that attribute to the other group...

  7. Only when the "dark" area of the switch is clicked, you want to get an output message to be send. Only on this area of the switch the mouse cursor will get a 'hand' shape:

    button_hand

    You can achieve that by adding a standard click event handler to the both "dark" element id:

    image

  8. As soon as the button is clicked with the mouse, you want to see it changing shape visually. Which means you have to toggle the visibility of both groups.

    • To do that you could handle the output message on the server (which contains the new switch state) and convert it to an input message that changes the visibility of both groups. However then you will need an entire roundtrip to the server and back to your dashboard, which might feel very inresponsive.

    • Therefore it is better to toggle the visibility of both groups in a client side Javascript event handler:

      image
      image698Ă—185 5.76 KB

      This way the click event will immediately result in a visual switch change.

Below you can find the complete example flow. Note that both Inject nodes are optional. I only added them to demonstrate how you could inject a message to change the state:

image

[{"id":"46e1a56491a6574c","type":"ui_svg_graphics","z":"dd961d75822d1f62","group":"5286eab45a5fb268","order":6,"width":7,"height":2,"svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" id=\"Layer_1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 100 100\" xml:space=\"preserve\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"100\" height=\"100\" style=\"fill:none; stroke: none;\" />\n  <desc>Copyright Opto 22</desc>\n  <defs id=\"svgEditorDefs\">\n    <style type=\"text/css\">\n      #state_switch{fill:black;font-family:Georgia;font-size:12.999988084915614px;}\n    </style>\n  </defs>\n  <g id=\"switch_off\">\n    <g id=\"shape_off\">\n      <rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\" />\n    </g>\n    <g id=\"shadow_off\">\n      <rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\" />\n      <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    </g>\n    <g id=\"dark_off\">\n      <polygon fill=\"#0071ba\" points=\"79.564,22.3 79.564,70.811 48.875,72.835 48.875,26.188   \" />\n      <polygon fill=\"#0071ba\" points=\"79.564,70.811 91.839,72.835 91.839,26.188 79.564,22.3   \" />\n    </g>\n    <g id=\"light_off\">\n      <rect x=\"7.956\" y=\"26.188\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\" />\n    </g>\n    <g id=\"hlight_off\">\n      <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      <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      <rect x=\"46.374\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\" />\n      <rect x=\"10.161\" y=\"29.461\" fill=\"#a3daff\" width=\"0.5\" height=\"39.282\" />\n      <rect x=\"12.866\" y=\"70.13\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n      <rect x=\"12.866\" y=\"28.393\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n    </g>\n  </g>\n  <g id=\"switch_on\" visibility=\"hidden\">\n    <g id=\"shape_on\">\n      <rect x=\"1\" y=\"20.664\" fill=\"#009cff\" width=\"98\" height=\"58.173\" />\n    </g>\n    <g id=\"shadow_on\">\n      <rect x=\"5.092\" y=\"24.892\" fill=\"#003e66\" width=\"89.816\" height=\"49.716\" />\n      <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    </g>\n    <g id=\"dark_on\">\n      <polygon fill=\"#0071ba\" points=\"20.436,71.13 20.436,21.209 51.125,26.529 51.125,73.176   \" />\n      <polygon fill=\"#0071ba\" points=\"20.436,21.209 8.161,26.529 8.161,73.176 20.436,71.13   \" />\n    </g>\n    <g id=\"light_on\">\n      <rect x=\"51.125\" y=\"26.529\" fill=\"#3bbeff\" stroke=\"#000000\" stroke-miterlimit=\"10\" width=\"40.919\" height=\"46.647\" />\n    </g>\n    <g id=\"hlight_on\">\n      <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      <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      <rect x=\"53.126\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\" />\n      <rect x=\"89.339\" y=\"30.621\" fill=\"#a3daff\" width=\"0.5\" height=\"39.281\" />\n      <rect x=\"55.831\" y=\"28.734\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n      <rect x=\"55.831\" y=\"70.471\" fill=\"#a3daff\" width=\"31.303\" height=\"0.5\" />\n    </g>\n  </g>\n  <text x=\"35.6782\" y=\"16.4152\" id=\"state_switch\" />\n</svg>","clickableShapes":[{"targetId":"#dark_on","action":"click","payload":"Switch on","payloadType":"str","topic":"SWITCH_ON"},{"targetId":"#dark_off","action":"click","payload":"Switch off","payloadType":"str","topic":"SWITCH_OFF"}],"javascriptHandlers":[{"selector":"#dark_on","action":"click","sourceCode":"document.getElementById(\"switch_on\").style.visibility = \"hidden\";\ndocument.getElementById(\"switch_off\").style.visibility = \"visible\";"},{"selector":"#dark_off","action":"click","sourceCode":"document.getElementById(\"switch_on\").style.visibility = \"visible\";\ndocument.getElementById(\"switch_off\").style.visibility = \"hidden\";"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":true,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"ON/OFF switch","x":1800,"y":160,"wires":[["fe79529085bc6afe"]]},{"id":"fe79529085bc6afe","type":"debug","z":"dd961d75822d1f62","name":"Switch state","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1990,"y":160,"wires":[]},{"id":"13804813e4463aad","type":"inject","z":"dd961d75822d1f62","name":"Switch off","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#switch_off\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"},{\"command\":\"update_style\",\"selector\":\"#switch_on\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"}]","payloadType":"json","x":1600,"y":160,"wires":[["46e1a56491a6574c"]]},{"id":"d7c277cef617a78a","type":"inject","z":"dd961d75822d1f62","name":"Switch on","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#switch_off\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#switch_on\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","x":1600,"y":220,"wires":[["46e1a56491a6574c"]]},{"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}]

And here you can see the flow in action:

demo_svg_switch

Caution: I had to create a Js event bubble up fix for this, which is not available on NPM yet. So you will need to install the fixed node directly from my Github account (from within your .node-red folder):

npm install bartbutenaers/node-red-contrib-ui-svg

Hope you can now continue from here on with this by yourself.
Bart

4 Likes
5

Wow ty ! !

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.