Change the fill color of an element with Javascript

[iamt_ps]

Hello,

i want to ask if there is a way to change the fill color of an iq-shape Element with the setProperty Command in Javascript. I have tried it with this code but unfortunately it doesn't work:

        const cancelable = shmi.onReady( {

            controls: {

                Kreis: ".Kreis"

            }

        }, function (resolved) {

            resolved.controls.Kreis.shape-svg.setProperty("fill", "#ff0000", "important");

        } );

I know, that I could use a Stylesheet to do this but in my project I need to change the color of multiple elements frequently and I don't want to create Stylesheets for all of them if there is a way to do it like this.

Thanks for Helping

[webiq-sk]

It looks like you assumed something which you probably didn't validate. Your assumptions were:
1. onReady gives you HTML elements
2. the Shape widget is just a pure SVG

Both is not true - onReady returns the widget instance, because otherwise you could not interact with scripts with the widget. You have to access the element property to get the HTML element. The widget HTML is not the SVG, because WebIQ has some standards for how widgets are built in HTML:

It's always recommended to use the browser development tools (F12) to see the structure of the HTML element.

Here is some working code:

        //Place your Code here
        const cancelable = shmi.onReady( {
            controls: {
                circle: ".my-shape"
            }
        }, function (resolved) {
            const svg = resolved.controls.circle.element.getElementsByTagName('svg')[0];
            svg.style.fill = '#ff0000';
        } );

        /* called when this local-script is disabled */
        self.onDisable = function () {
            self.run = false; /* from original .onDisable function of LocalScript control */
            cancelable.cancel();
        };

[iamt_ps]

I have tried your example but it doesn't work for me. I know, that the script is executed because there are other functions that work fine but these lines seem to do nothing:

const svg = resolved.controls.circle.element.getElementsByTagName('svg')[0];
svg.style.fill = '#ff0000';

What can I do to get this to work?

[webiq-sk]

Sorry, I can't help you without you providing the HMI that has the issue. I tested it before and it worked in my HMI. Please note that my element is called "circle" and not Kreis, so you cannot simply copy & paste it and it will work.

[iamt_ps]

Unfortunately I am not allowed to provide the full project but I have created a test project, where I copied the element and the script with the color change. I added a command to move the element a bit to the right side, to see if the script is executed, but the command to change the color still does nothing. Thanks for helping!

[webiq-sk · Accepted solution]

Thank you, it cannot work the way you did, because you used instance styling which always overrides any custom styling:

It always must override any other styling because it cannot "know" what the user wants (there can only be one winner). If you remove this, then it works as intended.
I also recommend to familiarize yourself with the browser's developer tools as this makes it easy to find out why it doesn't work:

There is no difference here between writing JavaScript in WebIQ or any other website - it's exactly the same here - this explains CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The information on the instance styling was omitted from the original description so I couldn't provide a sufficient explanation - in the future please always provide all information available - that will make it a lot easier.

You can however override this without removing the instance styling in WebIQ Designer, but this can only be done by setProperty:

//svg.style.fill = '#ff0000';
svg.style.setProperty('fill', '#ff0000', 'important');

Then this will work, because of the "important" added.

Also, there's no need to use long objects paths like resolved.controls.circle.element as I already assigned this to the svg variable.

[iamt_ps]

Alright thank you very much it now works for me. Also thanks for the other tipps since it is my first Web HMI project I appreciate all informations that may help in this project.