replace_svg not happy when via payload

[MadTooler]

I am using the read file node with a single utf8 string then changing all the (") to \" as noted in your docs.

Then I want to replace the svg in the node to what was read from the file.

I send the payload of the file read to a change node with the replace_svg per payload:

{
    "command": "replace_svg",
    "svg": payload
}

That gives an error in my chrome browser: Invalid payload. The tag of the first element should be 'svg' (msg._msgid = '709e1ddd4f04f4ba')

However, if I send the same payload out to file, then copy and paste the same output into the change node instead of passing the payload, it works fine.

Any idea what I am doing to make the node angry?

[bartbutenaers]

@MadTooler,

I have very few free time lately. It would really help if you could share a simple flow, containg a workind and non-working case. So that I can quickly reproduce it, and provide you an answer or if necessary a fix.

Thanks!! Bart

[MadTooler]

@bartbutenaers Sorry for not sharing the flow earlier. I very much value your time and very much understand the cost of giving it to others. I am working on a project I need to somewhat keep private for a little longer. It makes it hard to generate examples sometimes.

Ok, I got it working. I stopped replacing the (") with \" and it started passing properly. I also have my change node passing as a Java expression instead of json.

I had been escaping the " as noted here https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/docs/msg_control.md#set-entire-svg-via-msg, but that seems not to be necessary.

Here is an example flow where it loads a file "circle.svg"

[
    {
        "id": "0e8b219cbc166155",
        "type": "ui_button",
        "z": "749048a338bb143e",
        "name": "",
        "group": "02c865a086176caf",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "load from file",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 190,
        "y": 1080,
        "wires": [
            [
                "909d70c61e29c4f9"
            ]
        ]
    },
    {
        "id": "909d70c61e29c4f9",
        "type": "file in",
        "z": "749048a338bb143e",
        "name": "",
        "filename": "/home/pi/circle.svg",
        "filenameType": "str",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 410,
        "y": 1080,
        "wires": [
            [
                "8b2b5acb5fbca4c2"
            ]
        ]
    },
    {
        "id": "8b2b5acb5fbca4c2",
        "type": "change",
        "z": "749048a338bb143e",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "{\t    \"command\": \"replace_svg\",\t    \"svg\": payload \t}",
                "tot": "jsonata"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 620,
        "y": 1080,
        "wires": [
            [
                "2397442a26665cd9"
            ]
        ]
    },
    {
        "id": "2397442a26665cd9",
        "type": "ui_svg_graphics",
        "z": "749048a338bb143e",
        "group": "02c865a086176caf",
        "order": 17,
        "width": 9,
        "height": 9,
        "svgString": "",
        "clickableShapes": [],
        "javascriptHandlers": [],
        "smilAnimations": [],
        "bindings": [],
        "showCoordinates": true,
        "autoFormatAfterEdit": false,
        "showBrowserErrors": false,
        "showBrowserEvents": false,
        "enableJsDebugging": false,
        "sendMsgWhenLoaded": false,
        "noClickWhenDblClick": false,
        "outputField": "payload",
        "editorUrl": "//drawsvg.org/drawsvg.html",
        "directory": "",
        "panning": "both",
        "zooming": "enabled",
        "panOnlyWhenZoomed": false,
        "doubleClickZoomEnabled": false,
        "mouseWheelZoomEnabled": true,
        "dblClickZoomPercentage": "100",
        "cssString": "div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}",
        "name": "TestLoadSVG",
        "x": 820,
        "y": 1080,
        "wires": [
            []
        ]
    },
    {
        "id": "02c865a086176caf",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "ff88f37d825bd473",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "ff88f37d825bd473",
        "type": "ui_tab",
        "name": "RulerSet",
        "icon": "dashboard",
        "order": 14,
        "disabled": false,
        "hidden": false
    }
]

[bartbutenaers]

@MadTooler, Where you able to solve your issue? Bart

[MadTooler]

@bartbutenaers Thanks for checking back. I know you are busy.

This issue is mostly working so I closed it to get it off your plate. I noted earlier that it was a formatting problem with using the directions in the wiki. See here:

Ok, I got it working. I stopped replacing the (") with \" and it started passing properly. I also have my change node passing as a Java expression instead of json.

The formatting issues seem to plague me with other implementations as well. I find my code having to bounce between java expressions and json with brace and bracket variations pending the error messages. I have also found something I am doing occasionally getting the system unhappy until I reboot. The need to reboot is almost surely my fault, and not something I will drag anyone else through until I can determine otherwise. My flows have become very large and intertwined and I need to do a lot of housekeeping for anyone to make sense of my madness.

[bartbutenaers]

Ah yes, I see now that I added at the time being this in the documentation:

If this isn't sufficient on some browsers, you can find extra tips here

So it wasn't a fully waterproof solution after all. It is a bit too long ago, so not sure anymore why the escaping was required (for transferring the data from nodejs to the browser, or for visualizing inside the browser). Perhaps I could have solved it by base64 encoding the svg string before sending it to the browser, and then decoding it again inside the browser. Not sure...