Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Captivate 2019 - Javascript - Change a Smart Shape color

Contributor ,
Sep 12, 2018 Sep 12, 2018

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

1.4K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

People's Champ , Sep 12, 2018 Sep 12, 2018

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);

Translate
Community Expert ,
Sep 12, 2018 Sep 12, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Sep 12, 2018 Sep 12, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Sep 12, 2018 Sep 12, 2018

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 12, 2018 Sep 12, 2018

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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Sep 12, 2018 Sep 12, 2018

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);

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2021 Aug 16, 2021

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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 16, 2021 Aug 16, 2021

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

 

Thanks!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Aug 17, 2021 Aug 17, 2021

How about something like this?

 

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

 

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

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
People's Champ ,
Aug 17, 2021 Aug 17, 2021

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";

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 17, 2021 Aug 17, 2021

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!

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advisor ,
Aug 17, 2021 Aug 17, 2021

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

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Aug 17, 2021 Aug 17, 2021
LATEST

OK, that's very helpful. Thanks!


Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Help resources