Change color dynamically?

I’m trying to make it so that a shape gets darker each time you click on a button. I see how to make it change color from say, light blue to dark blue specifically. But what I really want to do is, say, increment it 10 units of blue each time button x is clicked, until it hits a maximum amount.

I tried setting up a rule to say take Shape A’s color value + …but it won’t let me do that.

Any suggestions?


If it is something that is rather fixed (ie not based on a color wheel), you could create a lookup table of sorts in the database (10 shades of red, blue, green, etc) that stores incremental shades of Hex values and an incremental count. And each time the shape is clicked, it updates the reference the Hex value for that database number based on the incremental count.

I will try this! Thanks!

Be sure to post back with what you implement. I think others have wondered the same before and would be curious to see your solution.

1 Like

If you want to change the transparency (opacity) of an element, it’s easy with javascript.

First, you need to go to settings and enable the option that exposes the attributes in HTML.

Now edit the element you want to change the transparency and give the element an ID. It can be any combination of letters and numbers but must begin with a letter. I would give it a very unique name so it won’t conflict with other elements on the page.

Now you can trigger a workflow from a button press or any other event. In the workflow add the action to run Javascript. Add the following:

document.getElementById("The ID Assigned to the Element").style.opacity = "The Transparency Value from 0 to 1.0";

The opacity value must be between 0 and 1.0 with 0 being completely transparent and 1.0 having no transparency. With a little code, this range can be changed.

The following example uses an input to set the transparency on a shape and a button when the input value changes.

Hope this helps.

One more thing, the Toolbox plugin adds the Javascript capabilities.

1 Like

Thank you!