Set Fill Color using Javascript

[Seb]

I would like to dynamically change the fill color of a shape using Javascript. For example, setting the color of the below ellipse to red:

When pressing the button, I am calling the following function:
javascript:void($('[data-label=MyShape]').css('background','#FF0000'))

However, since Axure renders shapes as images, I can only change the rectangular background of the image, NOT the fill color:

I am not an expert in JS, but I was wondering if there is any way in Axure to dynamically change the color of a shape (other than using Selected/Disabled states)?

Thanks,
Seb

[jlhelmers]

There are a few things going on here and it looks like you’ve identified them:
1.) With circles, Axure likes to make them image files… and you can’t dynamically update an image.
2.) Axure is setting the background color inline.

Instead of using a circle, try using a rectangle with 50% border radius. Technically it will still be a DIV so you’ll be able to jQuery it 6-ways from sunday

[Seb]

Hi jlhelmers, thanks for your response!
I tried converting it to a rectangle, unfortunately the result is the same…

Technically it will still be a DIV so you’ll be able to jQuery it 6-ways from sunday

Sorry I’m not quite sure what you mean by this

[jlhelmers]

If you look at it in the inspector, you’ll see that the circle element I used (right) is an img tag in the DOM, and the normal Box element (left) renders as a div tag. This means the Box (with tons of border radius) is still an actual malleable DOM element.

Web inspector is the handiest of tools when writing js/jquery/axQuery stuff like this

[Seb]

Great, I found a way to make it work!
You were right with your suggestion that a normal rectangle is rendered as a div. However, if the shape already has a fill colour when placed in Axure, for some reason this color cannot be overwritten through Javascript. Moreover, the rounded corners that were set in Axure are not recognised when setting the JS background color, hence the result was the same as using an image shape.
(Looking at the inspector, the CSS that comes from Axure appears to be in a higher ranked class, which overwrites any handwritten JS.)

So what I did is placing my shape with a transparent background, and use another line of code that is triggered OnLoad to add the initial fill colour and draw the rounded corners:

javascript:void($('[data-label=MyShape]').css({'background': '#FF0000', 'border-radius': '100%'}))

Now I can add any other colour using my original JS code
Many thanks jlhelmers for pushing me into the right direction, this will save me a lot of time in the future!

PS: Sorry, I guess I wasn’t familiar with the phrase “6-ways from Sunday”

[jlhelmers]

Yeeeeah… sometimes Axure does inline styling which then requires jQuery to overcome. I wrote a plugin that converts prototype colors into predefined CSS Variables, and in order to do that I had to figure out waaaaay more about how Axure actually renders a page than I ever cared to know. Scary scary stuff of nightmares.

Basically, you can still style everything like normal in Axure, but you then have to iterate over the DOM setting the inline styles accordingly.

I would strip out the jQuery workhorses here, but I have some prototypes to knock out by morning HA! But here’s the the function I’m running in Axure to find specific inline styles then replaces with whatever I want. In this case, its CSS Variables. Its not the prettiest code so don’t judge

javascript:
var lib = [  ['var(--primary-text)', 'rgb(87, 86, 89)', 'rgb(55, 55, 55)'],  ['var(--white)', 'rgb(255, 255, 255)'],  ['var(--primary)', 'rgb(0, 114, 207)'],  ['var(--chroma-2)', 'rgb(229, 229, 229)', 'rgb(248, 248, 248)']];
var lookOut = ['color', 'background-color'];
for(i = 0; i < lib.length; i++){  
  for(j = 0; j < lookOut.length; j++){
    $('*').css(lookOut[j], function(index, value) {
      for(x = 1; x < lib[i].length; x++){

        if(value.includes(lib[i][x])) {
          $(this).css(lookOut[j], lib[i][0]);
        }

      }
    }
);
}
}