Captivate 2019 - Javascript - Change a Smart Shape color

[Pkoel]

Hello Friends,

   I am new to JavaScript. When I press a button, I want to change the color of a smart shape I have named ss_Monster. How do I access the color property using code?

I appreciate any guidance.

Cheers!

Peter

[Lilybiri]

Why do you need JS for something that is already available in Captivate? Each button can have 4 InBuilt states, 3 of them are already available in the Object style, the 4th can be created:

1. Normal state
2. Rollover state
3. Down state
4. Visited state

Moreover you can add as many custom states as wanted. Have a look at this blog post:

1 action = 5 Toggle Buttons - Captivate blog

[TLCMediaDesign]

I think it would be easier to just change the state of the smartshape to a different color.

[Pkoel]

Hello,

Thank you for the quick replies! I am just working on my own skills in JavaScript and thought this would be an easy start. Can you tell me how to change the state of an object using JavaScript? I know how to do it in an Advanced Action.

Sincerely,

Peter

[Lilybiri]

For pressing you don't neeed even an advanced action, state will automatically change. 

Try to use JS for workflows that cannot be done in Captivate. One very simple example is explained in these blog posts:

Playing with Numbers - part 1 - Captivate blog

Playing with Numbers - part 2 - Captivate blog

TLCMediaDesign will certainly help with real JS use cases, but you see that he agrees with my viewpoint about Inbuilt button states.

[TLCMediaDesign · Accepted solution]

This JavaScript will change a rectangle to be filled Black. The SS is named SmartShape_1:

var ss = document.getElementById("SmartShape_1");

var ctx = ss.getContext("2d");

var a = ctx.canvas.clientLeft;

var b = ctx.canvas.clientTop;

var c = ctx.canvas.clientWidth;

var d = ctx.canvas.clientHeight;

ctx.fillStyle = "#000000";

ctx.fillRect(a,b,c,d);

[charliem82825372]

This code would really help me if I could get it to work. I'm working on changing a smart shape's width based on a variable value. I think I could achive that with this code but I can't get it to work as it's written, so I'm missing something. 

I'm setting an Action on a button that Executes Javascript, and am using this code:

var ss = document.getElementById("ss_bar_01");
var ctx = ss.getContext("2d");
var a = ctx.canvas.clientLeft;
var b = ctx.canvas.clientTop;
var c = ctx.canvas.clientWidth;
var d = ctx.canvas.clientHeight;
ctx.fillStyle = "#000000";
ctx.fillRect(a,b,c,d);

Assuming my ss is named ss_bar_01, shouldn't the shape be filled with black upon clicking the button?

Thanks!

[charliem82825372]

Oh, I think I need to reference the API. I'll investigate while await any feed back you can offer.

Thanks!

[Stagprime]

How about something like this?

$("#ss_bar_01c").width(100);

This should take your shape and set the width to 100.

[TLCMediaDesign]

This script will change the width based on the variable in Captivate called "myVar", change it to the name of your variable.

var w = window.myVar;
var sc= document.getElementById("ss_bar_01c");
sc.style.width = w + "px";

[charliem82825372]

That worked great! I thought the "c" at the end of my shape name was a typo, but I see that it's necessary. Can you explain that sytax, or point me to a resource that will?

Thanks so much!

[Stagprime]

Best way I could say it is that on the Captivate side, this is how you access the  canvas  object.

[charliem82825372]

OK, that's very helpful. Thanks!