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

Captivate 2019 - Javascript - Change a Smart Shape color

Contributor ,
Sep 12, 2018 Sep 12, 2018

Copy link to clipboard

Copied

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

Views

782

Likes

Translate

Translate

Report

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

Community Expert , 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);

Likes

Translate

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

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

 

Thanks!

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

How about something like this?

 

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

 

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

 

Likes

Translate

Translate

Report

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 ,
Aug 17, 2021 Aug 17, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

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

Copy link to clipboard

Copied

LATEST

OK, that's very helpful. Thanks!


Likes

Translate

Translate

Report

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