Conflicts switch- / template node

Dashboard
1

Hi,
could there be an indissoluble conflict between switch- and template node on different dasboard tabs? Please have a look at the flow example below:

Labels":["on"]},{"id":"1904c372.197ced","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchC - Tab 1","group":"ca36f588.167628","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":300,"y":260,"wires":[["9beaca45.8ffd18"]],"inputLabels":["on"]},{"id":"2b485602.3104aa","type":"ui_template","z":"9f1bfdb8.0650e","group":"fae189b3.6298c8","name":" alle Geschosse","order":1,"width":0,"height":0,"format":"\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" \n\t width="250" height="400" xml:space="preserve" id="SVGX">\n\n\t\n\t<g id="SWA" > \t\t\n\t\t<circle id="iOG-SW1-circle" stroke="none" fill="red" cx="100" cy="100" r="25" />\t\n\t\t<text fill="rgb(0, 0, 0)" font-family="HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, \n\t\t\tsans-serif" font-weight="bold" font-size="12" > \n\t\t\t<tspan x="90" y="140">Switch A\n\t\t\n\t\n\t\t\t\n\t\n\t<g id="SWC" > \t\t\n\t\t<circle id="iUG-SW1-circle" stroke="none" fill="red" cx="200" cy="100" r="25" />\t\n\t\t<text fill="rgb(0, 0, 0)" font-family="HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, \n\t\t\tsans-serif" font-weight="bold" font-size="12" > \n\t\t\t<tspan x="190" y="140">Switch C\n\t\t\n\t\n \n\n\n","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":720,"y":240,"wires":[["a992a2e5.91915"]]},{"id":"a992a2e5.91915","type":"debug","z":"9f1bfdb8.0650e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":930,"y":240,"wires":},{"id":"3f184344.09fc9c","type":"inject","z":"9f1bfdb8.0650e","name":"on","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":180,"wires":[["f1e40186.1c6d1"]]},{"id":"6a631de7.771c14","type":"inject","z":"9f1bfdb8.0650e","name":"off","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":140,"wires":[["f1e40186.1c6d1","b2c6f541.434858","88719e1d.6589b"]]},{"id":"f1e40186.1c6d1","type":"function","z":"9f1bfdb8.0650e","name":"A colour","func":"if (msg.payload === "on") {\n msg = {payload: {jquerySelector:"#iOG-SW1-circle", fill:"green"} };\n} else {\n msg = {payload: {jquerySelector:"#iOG-SW1-circle", fill:"red"} };\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":140,"wires":[["2b485602.3104aa"]]},{"id":"9beaca45.8ffd18","type":"function","z":"9f1bfdb8.0650e","name":"C colour","func":"if (msg.payload === "on") {\n msg = {payload: {jquerySelector:"#iUG-SW1-circle", fill:"green"} };\n} else {\n msg = {payload: {jquerySelector:"#iUG-SW1-circle", fill:"red"} };\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":360,"wires":[["2b485602.3104aa"]]},{"id":"714884e3.e8093c","type":"inject","z":"9f1bfdb8.0650e","name":"on","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":400,"wires":[["9beaca45.8ffd18"]]},{"id":"6d34935f.fe782c","type":"inject","z":"9f1bfdb8.0650e","name":"off","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":360,"wires":[["9beaca45.8ffd18","1904c372.197ced","c616a609.fdeb18"]]},{"id":"c616a609.fdeb18","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchC - Tab 2","group":"cdefa61e.db6338","order":7,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":300,"y":300,"wires":[["9beaca45.8ffd18"]],"inputLabels":["on"]},{"id":"88719e1d.6589b","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchA - Tab 2","group":"cdefa61e.db6338","order":6,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":280,"y":80,"wires":[["f1e40186.1c6d1"]],"inputLabels":["on"]},{"id":"ca36f588.167628","type":"ui_group","z":"","name":"buttons","tab":"12c72ad1.a1f885","order":2,"disp":true,"width":"4","collapse":false},{"id":"fae189b3.6298c8","type":"ui_group","z":"","name":"template","tab":"12c72ad1.a1f885","order":1,"disp":false,"width":"10","collapse":false},{"id":"cdefa61e.db6338","type":"ui_group","z":"","name":"erste","tab":"1d2ee812.b46138","order":1,"disp":true,"width":"6","collapse":false},{"id":"12c72ad1.a1f885","type":"ui_tab","z":"","name":"test","icon":"weekend","order":1},{"id":"1d2ee812.b46138","type":"ui_tab","z":"","name":"Button Panel","icon":"dashboard","order":8}]

All is working fine with the switch-nodes etablished on the same dasboard-tab as the template node (switch a tab 1 /switch c tab 1).
But trying to control the scene by the switches on a different dasboard-tab then the template node (switch a tab 2 /switch c tab 2) causes redicolous behavior. So when the templae circles .are all red (switches off) and switch a tab 2 is turnes on alll is working fine (green circle a, / red circle c). Now turning switch c tab 2 on circle a goes to red and circle c to green. The switches on dasboard-tab 2 are bothh on!. Turnig switch c tab 2 off all crcles are red, same turning switch a tab off.
What is the reason why? Angular specific?
Thanks

2

Unfortunately your flow isn’t currently importable.Please read the following post How to share code or flow json and then edit the above message.

3

thanks you so much

[{"id":"b2c6f541.434858","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchA- Tab 1","group":"ca36f588.167628","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":280,"y":40,"wires":[["f1e40186.1c6d1"]],"inputLabels":["on"]},{"id":"1904c372.197ced","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchC - Tab 1","group":"ca36f588.167628","order":4,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":300,"y":260,"wires":[["9beaca45.8ffd18"]],"inputLabels":["on"]},{"id":"2b485602.3104aa","type":"ui_template","z":"9f1bfdb8.0650e","group":"fae189b3.6298c8","name":" alle Geschosse","order":1,"width":0,"height":0,"format":"\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \n\t width=\"250\" height=\"400\"  xml:space=\"preserve\" id=\"SVGX\">\n\n\t<!-- Switch A -->\n\t<g id=\"SWA\"  > \t\t\n\t\t<circle id=\"iOG-SW1-circle\" stroke=\"none\" fill=\"red\" cx=\"100\" cy=\"100\" r=\"25\" />\t\n\t\t<text  fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, \n\t\t\tsans-serif\" font-weight=\"bold\" font-size=\"12\" > \n\t\t\t<tspan x=\"90\" y=\"140\">Switch A</tspan>\n\t\t</text>\n\t</g>\n\t\t\t\n\t<!-- Switch C -->\n\t<g id=\"SWC\" > \t\t\n\t\t<circle id=\"iUG-SW1-circle\" stroke=\"none\" fill=\"red\" cx=\"200\" cy=\"100\" r=\"25\" />\t\n\t\t<text  fill=\"rgb(0, 0, 0)\" font-family=\"HelveticaNeue-Bold, 'Helvetica Neue', Helvetica, Arial, \n\t\t\tsans-serif\" font-weight=\"bold\" font-size=\"12\" > \n\t\t\t<tspan x=\"190\" y=\"140\">Switch C</tspan>\n\t\t</text>\n\t</g>\n  \n</svg>\n\n<script>\n    (function(scope){ \n        scope.$watch('msg', function(msg) {\n            if (msg){\n\t\t\t\t$(msg.payload.jquerySelector).attr('fill', msg.payload.fill)\t\t\t\t\n            }\t\t\t\n        });\n    })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":true,"templateScope":"local","x":720,"y":240,"wires":[["a992a2e5.91915"]]},{"id":"a992a2e5.91915","type":"debug","z":"9f1bfdb8.0650e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":930,"y":240,"wires":[]},{"id":"3f184344.09fc9c","type":"inject","z":"9f1bfdb8.0650e","name":"on","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":180,"wires":[["f1e40186.1c6d1"]]},{"id":"6a631de7.771c14","type":"inject","z":"9f1bfdb8.0650e","name":"off","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":140,"wires":[["f1e40186.1c6d1","b2c6f541.434858","88719e1d.6589b"]]},{"id":"f1e40186.1c6d1","type":"function","z":"9f1bfdb8.0650e","name":"A colour","func":"if (msg.payload === \"on\") {\n    msg = {payload: {jquerySelector:\"#iOG-SW1-circle\", fill:\"green\"} };\n} else {\n    msg = {payload: {jquerySelector:\"#iOG-SW1-circle\", fill:\"red\"} };\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":140,"wires":[["2b485602.3104aa"]]},{"id":"9beaca45.8ffd18","type":"function","z":"9f1bfdb8.0650e","name":"C colour","func":"if (msg.payload === \"on\") {\n    msg = {payload: {jquerySelector:\"#iUG-SW1-circle\", fill:\"green\"} };\n} else {\n    msg = {payload: {jquerySelector:\"#iUG-SW1-circle\", fill:\"red\"} };\n}\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":360,"wires":[["2b485602.3104aa"]]},{"id":"714884e3.e8093c","type":"inject","z":"9f1bfdb8.0650e","name":"on","topic":"","payload":"on","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":90,"y":400,"wires":[["9beaca45.8ffd18"]]},{"id":"6d34935f.fe782c","type":"inject","z":"9f1bfdb8.0650e","name":"off","topic":"","payload":"off","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":90,"y":360,"wires":[["9beaca45.8ffd18","1904c372.197ced","c616a609.fdeb18"]]},{"id":"c616a609.fdeb18","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchC - Tab 2","group":"cdefa61e.db6338","order":7,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":300,"y":300,"wires":[["9beaca45.8ffd18"]],"inputLabels":["on"]},{"id":"88719e1d.6589b","type":"ui_switch","z":"9f1bfdb8.0650e","name":"","label":"SwitchA - Tab 2","group":"cdefa61e.db6338","order":6,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":280,"y":80,"wires":[["f1e40186.1c6d1"]],"inputLabels":["on"]},{"id":"ca36f588.167628","type":"ui_group","z":"","name":"buttons","tab":"12c72ad1.a1f885","order":2,"disp":true,"width":"4","collapse":false},{"id":"fae189b3.6298c8","type":"ui_group","z":"","name":"template","tab":"12c72ad1.a1f885","order":1,"disp":false,"width":"10","collapse":false},{"id":"cdefa61e.db6338","type":"ui_group","z":"","name":"erste","tab":"1d2ee812.b46138","order":1,"disp":true,"width":"6","collapse":false},{"id":"12c72ad1.a1f885","type":"ui_tab","z":"","name":"test","icon":"weekend","order":1},{"id":"1d2ee812.b46138","type":"ui_tab","z":"","name":"Button Panel","icon":"dashboard","order":8}]

hope it's better now

4

It works fine for me. My only suggestion woul be when flipping SwitchA- Tab 2 in addition to changing the color of the light, you should flip SwitchA- Tab 1 to show it is on. And the reverse is true flipping SwitchA- Tab 1 should change SwitchA- Tab 2

5

Hm,
grinding SwitchA-Tab 2 throught SwitchA- Tab1 (and Switch C as well) shows the same rediculous behaviour. concerning the circle colour. The status-displays of all switch-nodes are correct.
Well, having some time, I'll set up the system from the beginning.
For the moment thank you so much

6

What browser are you using?

7

same story with ms-edge and chrome

8

Ahhhh, I've reproduced it, let me take a look...

9

@dceejay, @hotNipi, @ukmoose - someone with more jquery knowledge maybe be able to explain (or fix) this issue but I don't know why.

Ok, I've recreated it and I think I know what is happening but not why

To recreate
(1) import the flow at the end of this post
(2) go to the UI and you will see two red circles and two switches
(3) go to Tab 2 and flip both switches
(4) go back to Tab 1 and you will see only one circle is green
(5) go to Tab 2 and flip both switches
(6) open another browser window and go to tab 1
(7) go back to the original window and flip both switches
you will now see in window 2 both circles are green, but in the original window if you go to tab 1 only one circle will be green.
There are two tabs in the ui 'Tab 1' and 'Tab 2Each tab has two switchesAandCTab 1had two circlesAandC` that will be red or green depending on the position of the switch

The switches pass 'on' or 'off to a function node. The function sets msg.payload to a jquery selectio and color based on the on/off here is the code for function A, the only change in function C is #SWA-circle" is #SWC-circle"

if (msg.payload === "on") {
    msg = {payload: {jquerySelector:"#SWA-circle", fill:"green"} };
} else {
    msg = {payload: {jquerySelector:"#SWA-circle", fill:"red"} };
}
return msg;

this is passed to a ui_template node which has the two circles with a fill="red"

What I'm guessing is that when the second message is sent to the ui_template, it sets the fill back to red when this happens in a single browser window with different tabs while if you have the two tabs in different browser windows it is not resetting the fill color.

here is a cleaned up version of the issue
tab_conflict.json (6.1 KB)

10

Yes, it seems to be a problem if there are two tabs in the same browser.
In another example I have a second template node in each of the tabs to toggle between them. Using them causes unexpected toggling the colour of some (not all) circles (there are three in this example).

11

If there are two browsers they will have different socket id so may not get all the updates ( unless you remove it from the msg)

12

@dceejay - when you swap to a new dashboard tab (tab A to tab B), does the tab get refreshed at that point in time? and does it rerun the msg and apply it to the ui_template. If so, that would explain what is happening.

each switch ends up sending a msg to the ui_template with a jquerySelector pointing at the ID of the circle to be colored. ie
{payload: {jquerySelector:"#SWA-circle", fill:"green"} }; or
{payload: {jquerySelector:"#SWA-circle", fill:"red"} }; or
{payload: {jquerySelector:"#SWC-circle", fill:"green"} }; or
{payload: {jquerySelector:"#SWC-circle", fill:"red"} };

using different browsers it works the way you would expect. Flip switch A on - circle A goes green. Flip switch C on and now both circles are green.

The issue only shows up using a single browser with multiple tabs. In that case, the last switch turned on will cause that circle to go green and the other will be red, the default color in the ui-template node. It's like the template code is being refreshed from
<circle id="SWA-circle" stroke="none" fill="red" cx="100" cy="100" r="25" />