Chaning color on svg image

[NielsGangster]

I am trying to make a network drawing on this plugin. for that drawing i want to implement real time data. 1 of the things is switch status. i want to make the switch red on down and green on up. but its not working! any1 care to help? cell-7dT28qd2XVk11ckKEJr5-9: dataRef: "state" fillColor: thresholds:

• {color: "green", level: 0}
• {color: "red", level: 1} thats my code the dataref gives 1 or 0 so up or down.

[andymchugh]

It could be many things. Use the debugging buttons to try and step through it. The data button will tell you what it's receiving. The mappings button will tell you what cell ids have been matched to the yaml and what hasn't. If it's still not working change back to the example1 svg and yaml. Copy the yaml into the panel and change one of the cells in that example yaml to use your data. Always with these kind of things start with a working example and just change 1 thing, then the next.

Its worth setting things up so your svg and yaml are available in a proper editor like vscode.

That way youll either solve it or have a minimal example to post as the problem.

[NielsGangster]

Okay i tried some and found out this, when i switch the color of the treshold from red to green and green to red, the bottom color is always the color no matter what level it is. i'm adding my svg here:

when i try ur examplesvg it doesnt work either, so i dont really know what to do.

[andymchugh]

You need to change 1 thing at a time. The example has an svg, a yaml file and incoming data ref. So start there and change say the inboxdepth label to your dataref in the yaml and go from there. You need to build up some awareness of how it hangs together and this approach should give you that.

[NielsGangster]

alr ill try to do that ill let you know how it goes ty!

[NielsGangster]

okay so i changed a little bit of ur code to match my querry. its still the same problem. the value it gives is 1 but it takes the bottom color. so im adding some more screenshots.

i hope this helps understanding.

[andymchugh]

The threshold order matters. Levels should increase not decrease. Can you give that a go. Also not sure capitalised red is a grafana color so that may fall through and yse html colors that wouldn't work with hue as the code can't get the ribs to interpolate.

Anyway change to increasing levels and lower case red

[NielsGangster]

But the weird part is, it works in your panel config but not in mine for some reason. so could it be it has something to do with my svg?

[andymchugh]

Change your thresholds so level 0 is first in the array. Then level 1. Change red to not be capitalised. You should then have example svg plus example yaml driven from your data source.

Next Change to your svg but with the data source and yaml exactly as they are and add a label with the celled in the yaml. Then continue to operate changing just one thing at a time until you get where you want to be.

[NielsGangster]

okay, i tried that but it still doesnt work my image just dissapears. and when i try inspect element or look in the console nothing shows up.

[andymchugh]

Keep persevering. Maybe go through the getting started docs to get a better understanding

[NielsGangster]

i read the getting started docs. but it didnt change a thing. i am starting to think this is a bug or has something to do with my svg. any other idea's on how to fix this issue?

[andymchugh]

OK. If I've followed you correctly:

• the initial example svg and yaml work correctly.
• you've edited that yaml to use your dataref and that works correctly.
• but when you put your svg into the panel it displays correctly with no yaml, but disappears with yaml.

If you reduce your svg down to the single widget you are trying to drive and post that svg and the yaml here I can have a look over the weekend. I don't have access to a computer till then.

[andymchugh]

The svg you posted above is just a thin wrapper around an image from what I can tell, so there's no controllable elements. If you post the actual svg and yaml I can have a look, but otherwise let's close this out.

[NielsGangster]

svg.txt Yaml code.txt

oh and the cell-id is cell-SW1

[NielsGangster]

those are the files im using atm.

[andymchugh]

Thanks. The image is quite complex isn't it, as in an svg inside an svg... Anyway, here's what I found.

• Pressing Debug Mappings showed that cell-7dT28qd2XVk11ckKEJr5-9 in the yaml isn't in the SVG but cell-SW1 is in the SVG but not in the yaml.
• Driving cell-SW1 fixes the background color drive but it also drives the arrow color making the arrows disappear. That's because the background rect and the arrow path are both part of the cell-SW1 tree.
• Adding a dataRef to the Pijltjes tells the panel to drive the arrow color. Without a dataRef as you had it it doesn't drive anything because it has no input. This works, but only if Pijltjes is defined in the yaml after cell-SW1. Again that's because the drives are applied sequentially and the outer cell-SW1 is driving both the rect and the path whilst the inner Pijltjes is just driving the path.

So with this yaml

---

cells:
  cell-SW1:
    dataRef: "test-data-small-cos"
    fillColor:
      thresholds:
        - {color: "green", level: 100}
        - {color: "red", level: 200}
  Pijltjes:
    dataRef: "test-data-small-sin"
    fillColor:
      thresholds:
        - {color: "yellow", level: 0}

it works but its gonna be really brittle because of the way the IDs are assigned. If you put an id on the rect and drove that for the background the yaml wouldn't be cell order dependent.

Does this explain it for you?

[NielsGangster]

so ur saying its better to change the svg's? In my main design im trying to test this on. i indeed cee that my svg has like 4 id's. and a data-label-id. could that be a issue aswel?

[andymchugh]

You have overlapping svg element trees. cell-SW1 contains Pijltjes. So you either list cell-SW1 first in yaml, then Pijltjes or you separate the trees in the SVG.

[andymchugh]

To summarize, the svg contains an inner svg. When you load that into draw.io the inner svg gets converted into an image so becomes uncontrollable. But if you don't load it into draw.io and you format it you can see:

• g element id=cell-SW1
  • rect element - no id
  • path element - id = 'Pijltjes'

The drives work on element trees so when you drive cell-SW1 you apply color to both the rect and the path. When you drive Pijltjes you apply color to the path.

So with this svg, you have to list cell-SW1 first as that drives both, then list Pijltjes to drive the path.

If you edit the svg to put an id on the rect, then you just drive the rect id and the path id.

Either way works, it's up to you.