# Having problem with svg node
**URL:** https://discourse.nodered.org/t/having-problem-with-svg-node/54097
**Category:** General
**Created:** [22 November 2021 10:26 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097 "2021-11-22T10:26:20Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [22 November 2021 10:26 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/1 "2021-11-22T10:26:20Z")
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [22 November 2021 12:30 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/2 "2021-11-22T12:30:02Z")
I fixed event probleme but
binding I cant fix that
and I am use this exmple and nothink
>
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [24 November 2021 21:48 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/3 "2021-11-24T21:48:12Z")
Hi @d0d04m3,
sorry for the delay. Was a bit too busy last evenings with other stuff.
> [@d0d04m3](#):
>
> binding I cant fix that and I am use this exmple and nothink
I have imported that example flow again, to make sure it still works with the last version of the SVG node. And here everything works fine: when I click on the inject node, the message is being injected and the colors and texts are updated. Exactly as demonstrated in the animation on thar readme page.
So in order to be able to help you, you will need to give me some more details:
- Node-RED version
- Dashboard version
- Operating system (windows, linux...)
- Browser (chrome, ...)
- Do you see errors in your Node-RED log or in the browser console log (via your browser developer tools)?
- Do you see any errors in your "Debug" sidebar (in the flow editor) when you activate this checkbox, deploy and inject your messages again:
- Other useful information?
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [25 November 2021 17:00 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/4 "2021-11-25T17:00:06Z")
Yes thanks I removed and design aging with last version drawnsvg
So maybe the old version not worked any more because am used drawnsvg local node
So event binding animation js event work for me and fixed all my issues but I have some trouble
clearsetinterval() function inside js event not worked
And I can't remove js event via cmd
And add/remove animation via cmd
Not found in wiki or doc
This version support this future or not ?
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [25 November 2021 20:28 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/5 "2021-11-25T20:28:38Z")
> [@d0d04m3](#):
>
> So maybe the old version not worked any more because am used drawnsvg local node
Don't know what could have go wrong, because I don't really have time to follow up the Drawsvg developments. But from his [release notes](https://www.drawsvg.org/home/release-notes.html) I see that some animation stuff has been changed. Not sure if that will solve your problem.
Anyway I have published version _ **1.3.0** _ in the palette:
This one will offer you DrawSvg version 9.5 instead of 8.0.
> [@d0d04m3](#):
>
> clearsetinterval() function inside js event not worked
Can you explain what you want to achieve, and also the code that you have tried?
> [@d0d04m3](#):
>
> And I can't remove js event via cmd
See in the [documentation](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/ee74077e198478d69558234766a7fa5b26f3a94e/docs/msg_control.md#add-javascript-events-via-msg) how to add and remove js events.
> [@d0d04m3](#):
>
> And add/remove animation via cmd
No that is indeed currently not possible
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [28 November 2021 10:04 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/6 "2021-11-28T10:04:29Z")
ok so
new version of svgdraw its limited and required expert mode so your need key for activated
And old version not works for me
And clearinterval() method clears a timer set with the setinterval().
So I created inputs msg js event
When receive "start" payload
Run this loop
MyTimeloop = setInterval("my function", millseconds);
And if receive "stop"
Call the clearinterval() method to stop the executing MyTimeloop
clearinterval(MyTimeloop)
So when I send start its work but if send stop and call clearinterval()
Nothing happened
MyTimeloop not stopped
And more issues if add js event with cmd
For event I need use Input msg
But I see error:
The msg.payload.event unsupported JavaScript event name and trays with
Input msg
inputmsg
input
But all its filed
And same issus for selector
If keep empty I see error
How to add input msg js event with cmd
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [29 November 2021 19:48 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/7 "2021-11-29T19:48:32Z")
> [@d0d04m3](#):
>
> new version of svgdraw its limited and required expert mode so your need key for activated.
> And old version not works for me
I have installed the latest drawsvg node version locally, and I have no problem at all using it. So I have no idea what you mean. I cannot help you, unless you provide some more details about I can reproduce the problem easily...
> [@d0d04m3](#):
>
> And clearinterval() method clears a timer set with the setinterval().
I have created tonight a [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Using-timers-in-Js-events-(store-on-the-%24scope)) page with a tutorial, which explains how to use the AngularJs _ **$scope** _ object to store a reference to your client-side Js timer:
> [@d0d04m3](#):
>
> But I see error:
> The msg.payload.event unsupported JavaScript event name and trays with
Can you please share a "simplified" version of your flow, containing : the mimimal SVG required, the JS event handler with your JS code, the inject nodes that inject your message. So only the basics required to reproduce your problem. Otherwise I have to guess what you are doing wrong, which costs me a lot of my precious free time.
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [21 December 2021 08:37 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/8 "2021-12-21T08:37:34Z")
issus with version
> 9-5 2021/11
>
> - Splitting features into 2 profiles (basic,expert) with google and patreon login
> Thank you for your interest in drawsvg.
>
> You can evaluate the **expert** profile of drawsvg for a period of **10 days of use**.
>
> - To evaluate the expert profile, log in with your **google** or [**patreon**](https://www.patreon.com/) account.
> - Beyond the trial period, you can subscribe to [**drawsvg patreon**](https://www.patreon.com/drawsvg) to use the expert profile.
>
> Try the expert profile of drawsvg.
>
> If you have an **expert access code** , enter it to switch to the expert profile.
>
> Your current drawsvg user profile is **basic**.
so how to activat expret profile
and local svg node same issuse
other truble
```auto
[
{
"id": "57a8b96d9110af8e",
"type": "inject",
"z": "460be7b6fe8595e1",
"name": "remove",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"command\":\"remove_js_event\",\"event\":\"Inputmsg\",\"selector\":\"\"}",
"payloadType": "json",
"x": 200,
"y": 240,
"wires": [
[
"bb93fff5.927ba"
]
]
},
{
"id": "4de069ee748477dc",
"type": "inject",
"z": "460be7b6fe8595e1",
"name": "Add",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "{\"command\":\"add_js_event\",\"event\":\"inputmsg\",\"selector\":\"\",\"script\":\"debugger; var color = \\\"red\\\"; if (msg.topic == \\\"triggrt\\\"){setInterval(function(){ if (color == \\\"red\\\") {color = \\\"blue\\\"} else color = \\\"red\\\"$(\\\"#camera_living\\\").css(\\\"fill\\\", color);}, 1000);}\"}",
"payloadType": "json",
"x": 190,
"y": 200,
"wires": [
[
"bb93fff5.927ba"
]
]
},
{
"id": "6f738ec01629dd16",
"type": "inject",
"z": "460be7b6fe8595e1",
"name": "trigger",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "trigger",
"payloadType": "date",
"x": 440,
"y": 140,
"wires": [
[
"bb93fff5.927ba"
]
]
},
{
"id": "bb93fff5.927ba",
"type": "ui_svg_graphics",
"z": "460be7b6fe8595e1",
"group": "997e40da.b5acc",
"order": 1,
"width": "14",
"height": "10",
"svgString": " ",
"clickableShapes": [
{
"targetId": "#camera_living",
"action": "click",
"payload": "camera_living",
"payloadType": "str",
"topic": "camera_living"
}
],
"javascriptHandlers": [],
"smilAnimations": [
{
"id": "myAnimation",
"targetId": "pir_living",
"classValue": "all_animation",
"attributeName": "r",
"transformType": "rotate",
"fromValue": "1",
"toValue": "30",
"trigger": "msg",
"duration": "500",
"durationUnit": "ms",
"repeatCount": "0",
"end": "restore",
"delay": "1",
"delayUnit": "s",
"custom": "camera_living.click; "
},
{
"id": "textRotate",
"targetId": "banner",
"classValue": "all_animation",
"attributeName": "visibility",
"transformType": "rotate",
"fromValue": "visible",
"toValue": "hidden",
"trigger": "msg",
"duration": "1",
"durationUnit": "s",
"repeatCount": "0",
"end": "restore",
"delay": "1",
"delayUnit": "s",
"custom": ""
},
{
"id": "cameraColoring",
"targetId": "camera_living",
"classValue": "all_animation",
"attributeName": "fill",
"transformType": "rotate",
"fromValue": "blue",
"toValue": "lime",
"trigger": "msg",
"duration": "500",
"durationUnit": "ms",
"repeatCount": "0",
"end": "restore",
"delay": "1",
"delayUnit": "s",
"custom": ""
}
],
"bindings": [
{
"selector": "#banner",
"bindSource": "payload.title",
"bindType": "text",
"attribute": ""
},
{
"selector": "#camera_living",
"bindSource": "payload.position.x",
"bindType": "attr",
"attribute": "x"
},
{
"selector": "#camera_living",
"bindSource": "payload.camera.colour",
"bindType": "attr",
"attribute": "fill"
}
],
"showCoordinates": false,
"autoFormatAfterEdit": false,
"showBrowserErrors": true,
"showBrowserEvents": true,
"enableJsDebugging": true,
"sendMsgWhenLoaded": false,
"noClickWhenDblClick": false,
"outputField": "",
"editorUrl": "//drawsvg.org/drawsvg.html",
"directory": "",
"panning": "disabled",
"zooming": "disabled",
"panOnlyWhenZoomed": false,
"doubleClickZoomEnabled": false,
"mouseWheelZoomEnabled": false,
"dblClickZoomPercentage": "150",
"cssString": "div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit !important;\n}",
"name": "",
"x": 360,
"y": 320,
"wires": [
[
"c997135f.8035f"
]
]
},
{
"id": "c997135f.8035f",
"type": "debug",
"z": "460be7b6fe8595e1",
"name": "Floorplan output",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"x": 460,
"y": 360,
"wires": []
},
{
"id": "997e40da.b5acc",
"type": "ui_group",
"name": "Floorplan test",
"tab": "95801a22.bd5f18",
"order": 1,
"disp": true,
"width": "14",
"collapse": false
},
{
"id": "95801a22.bd5f18",
"type": "ui_tab",
"name": "SVG",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]
```
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [21 December 2021 20:31 UTC](https://discourse.nodered.org/t/having-problem-with-svg-node/54097/9 "2021-12-21T20:31:45Z")
> [@d0d04m3](#):
>
> issus with version
Ok seems DrawSvg now offers two different profiles.
I now will continue guessing: the problem is that you want to have the expert mode, which is available via the profile icon in the right-top of the online editor (via [drawsvg.org](http://drawsvg.org)). But that profile icon is not available when you access the same DrawSvg editor via Node-RED:
Is that the problem? If so, you could have save me a lot of my free time by explaining it simply like this...
> [@d0d04m3](#):
>
> other truble
Since you seem to like short descriptions, I will continue in your style:
