Feature request: control opacity of SVG elements

[yo8192]

Thanks for the great work on this. I like the YAML config, time bar, and debugging options!

I have a feature request: it would be great if the opacity of elements could be set based on data. In particular, it could be set to partially hide an arrow / link when it is not active by making it partially transparent, and show it fully when active by setting its opacity to 100%.

(This is a feature that was offered by the FlowCharting panel)

[netforce]

Cant this be achieved by using Fill Color with thresholds?

[yo8192]

@netforce fillColor doesn't do what I need. If I had a lineColor I could make something work.

For context, the chart I have under FlowCharting (which is Angular-based, and Grafana is deprecating Angular) is:

As you may see the grid icon side, I have one arrow going one way in one color (e.g. green to who 'good', e.g. exporting energy to the grid) and one arrow going the other way in a different color (e.g. 'red' to show the less-desirable state of importing energy from the grid). I have something similar for the battery: in this case it is mostly transparent because the battery is not in use (neither being charged nor discharged). The way it's implemented is by changing the opacity of all the arrows to show the active one (if any).

fillColor doesn't work in this case as it fills some awkward surface with color, e.g.:

If I had a 'lineColor' to change the color of the line arrow, combined with flowAnimation with unidirectional: false, then this would work too. Ideally I'd also be able to change the line ends on the arrows, to show the direction (i.e. have it point in one direction or the other direction depending on the flow direction, or no end at all if there is no flow, e.g. when my battery is neither charging nor discharging).

[andymchugh]

Thanks for the feedback. There's a few points in here to talk about:

• 'lineColor' is coming. It's been requested in https://github.com/andymchugh/andrewbmchugh-flow-panel/issues/47
• switching arrow head position does sound lovely but I don't think that will ever be possible. If you look in the svg this is just a collection of lines defined in two 'path' elements. Interestingly the 'awkward' surface you show above does become something of a feature with the upcoming fillLevel drive. Yours looks odd because of its asymmetry, but symmetrical path elements are quite a nice way to draw and fill interestingly shaped containers.
• alpha (opacity) isn't currently supported in the threshold drives. Even if you add it into your rgba/hsla color definitions it will get stripped off with todays code.

I'll get alpha added to the feature set.

[yo8192]

Great news for 'lineColor', and thank you for the alpha.

Out of scope for this particular ticket, but about the arrow head: the arrow that Draw.io generated looks like:

            <g>
                <path d="M 80 45 L 254 45 L 254 112.42" fill="none" stroke="#50d100"
                    stroke-opacity="0.2" stroke-width="7" stroke-miterlimit="10"
                    pointer-events="stroke" stroke-dasharray="8"
                    style="animation: 500ms linear 0s infinite normal none running ge-flow-animation-AOVl7o-Q2AFzvnxeDgj5; stroke-dashoffset: 16px;" />
                <path d="M 254 122.17 L 247.5 109.17 L 254 112.42 L 260.5 109.17 Z"
                    fill-opacity="0.2" fill="#50d100" stroke="#50d100" stroke-opacity="0.2"
                    stroke-width="7" stroke-miterlimit="10" pointer-events="all" />
            </g>

So one 'path' will fill="none", which would be the line, and one 'path' with some fill which would be the arrow. In Draw.io, if I add another head on the other side of the line, then I end up with a third 'path'.

I did a little test and changing the fill color of the arrow head with cell PvPowerArrow@flowrpt2 does work.

So when the opacity (alpha) can be driven from data, then we should be able to make arrow heads on each side appear/disappear as wanted. However I am not sure if that would work for all types of arrows and other SVG editors, it would be a bit manual, and we'd probably be at risk of things breaking (e.g. if the SVG get edited again and Draw.io changes the order of the 'path's ?). So unless there is something more deterministic in SVG, the trick of having two arrows, one in each direction, and only showing the right one via the opacity may be safer.

[andymchugh]

Version 1.16.1 got published today and that includes a bespoke attribute drive with which you can drive the path visibility attribute as you suggested above.

If you pull up example 5 using: https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/ver_1.16.1/examples/darkThemeSvg5.svg https://raw.githubusercontent.com/andymchugh/andrewbmchugh-flow-panel/ver_1.16.1/examples/panelConfig5.yaml

You'll see the example connectors changing direction as you move the time-slider back and forth.

Given this, do you still need to drive opacity? I'm open to still doing it but if this bespoke drive feature meets your usecase I'd rather close this issue out until we have a definitive opacity need...

[yo8192]

Great! Yes I think I should be able to make it work with the visibility attribute only. e.g. I could have 2 versions of my arrows, one with full opacity and one statically transparent, then make the right one visible based on data. I'll give this a try, hopefully this weekend.

So visibility is likely to unblock me, with controllable opacity becoming a nice-to-have.

[yo8192]

I can confirm it all works nicely for me.

It's actually nicer that I can have a single arrow object, and define which arrow head to display. I also wanted to display something, but 'dimmed' when nothing is flowing either direction. I ended up making the line color grey and displaying no arrow head in that case, which does the trick.

Thanks again for your help on this aspect, and for the plugin generally speaking!

[andymchugh]

great :), thanks for confirming.