Rotate object using Javascript without it resetting to original position first

[TVP_C5944]

Hi,

I've created an interaction which invites the user to guess a percentage but rather than simply have them enter a number, I wanted it to have them press and hold buttons to adjust the displayed percentage up or down - I found some code on another thread which does this job perfectly.

Now I'd like to add a graphical representation of the percentage level - a meter that fills up or empties according to the percentage (see below). I've created an image to represent this and need to animate it to simulate the meter filling up/emptying.

There seems to be a couple of ways of achieving this as far as I can tell - either some sort of WAAPI/CSS/jQuery animation or by triggering an advanced action as part of my existing code.

I haven't been able to get the first options to work - whether that is down to my own ignorance, inability to understand or organisational restrictions I don't know. The second option of triggering and Advanced Action does work, but only to a point.

The problem occurs when I go from increasing the percentage to reducing it (or vice versa). When I switch from one action to the other, the image resets to it's original starting point before then rotating as it is supposed to do.

So, using the above image as an example, I can hold the down the Up arrow button and the percentage will increase to the displayed 51% and the arc bar grows at the same by rotating clockwise through about 100 degrees. If I then hold down the Down arrow button, the % figure starts decreasing, but the arc bar resets to the 0% position before rotating anti-clockwise when clearly I need it to start at 100 degrees and rotate from there.

It doesn't appear to be the Javascript that is causing it, because I mapped the same actions to buttons on the slide and the same thing happens.

Why is this happening and is there some sort of work around?

I thought it might be possible for the script to identify the 'current' rotation and instantly apply that rotation before the animation starts, but I haven't been able to find how to do that.

If it's relevant, I'm using Captivate 2019 (11.5.1.499)...

Thanks for any help offered!

[Lilybiri]

Can you insert a Preview of the advanced action used?

[TVP_C5944]

Of course, although as it's a single action Standard Action, it's not very exciting! 🙂

The parameters are:

Effect Start - 0 sec

Effect Duration - 0.1 sec

Rotation - 2

The other action (for reducing the % figure) is identical except the Rotation parameter is set to -2

[Lilybiri]

But you were talking about JS? 

[TVP_C5944]

That's right - I've tried the solely JS approach to achieving the animation I need and I can't get that to work.

Instead, I've created the advanced actions to do it in Captivate and then use JS code to activate a click box that triggers them... it's inelegant, but in the absence of a successful alternative I don't know what else I can do.

That code seems to be working just fine - if I click on those click boxes manually, the same problem occurs

[Stagprime · Accepted solution]

I imagine there are a number of ways you might have crafted this.

I think I would try to tackle this with CSS transforms and a variable.

++rotVal;

$("#barc").css({transform: "rotate("+(rotVal)+"deg)"});

Where  "bar" is the name of my progress bar that is animating (keep the "c" at the end) and  "rotVal" is the rotation value.

If I apply the above script to an up button, it should rotate clockwise by 1 degree and if I apply the same to a down button but change the ++rotVal;  to become  --rotVal;  it should rotate counter clockwise by 1 degree.

Hopefully this will help provide the insight you need in some way.

[Stagprime]

I tried to do a quick mockup of this working.

I just used two images for the effect.

The first is a mask set the same as my background - though that is not necessary.
The mask has an arc shaped cutout. (Made with PowerPoint)
The second image is just a wedge set behind the mask with the same radius as the arc.

As the wedge rotates - it fills or empties the arc-shaped cutout.

 

[TVP_C5944]

Thanks Stagprime - your code was similar to some other posts I've read.

I couldn't get your code to work as is - the best I was initially able to manage was by declaring the rotVal variable with a value of 0 first - which of course reset the value to zero each time the button was pressed so it was effectively doing the same rotation repeatedly.

However, I have used your code as the basis of a rather Heath Robinson-esque solution which seems to be working, so thank you!

Just to expand on this though, if I were to set up a similar thing with a straight, horizontal bar, is there an equivalent function to the Rotate function I can use (like the equivalent of a motion path that causes the bar to slide to the right by a fixed distance)?

[Stagprime]

Sure -

One thought on the other issue - did you create the  rotVal  variable in Captivate or only declare it in your code?

I have much better success defining them through Captivate and then addressing them with the code... anyway...

As for the horizontal bar... Two approaches.

1. Similar to the rotation using a fixed bar size and a mask,  move the bar by a set amount each time. (Top ex.)

$("#barc").animate({left: "+=10px"});

2. You can start with a small box and no mask and then expand the width by a certain amount. (Bottom ex.)

$("#barc").animate({width: "+=10px"});

Again - bar is the name of the object - (keep the c) - adjust the pixel size to fit your project.

 

[TVP_C5944]

This is great, but slow...

I have the button triggering at an interval of 50 milliseconds, but this animation is slower, so if I click and hold the button all the way up to 100%, the animated bar takes several seconds to catch up.

I read elsewhere that the .animate() functionality can have a number of additional options attached, including duration.

I tried putting this in, which I think follows the correct syntax:

$("#S3_Pc_Meter_3c").animate({left: "+=6px"}, {duration: "50"});

but it has no apparent impact - have I got the syntax wrong or is duration not applicable to this particular animation?

Thanks for your continued assistance!

[Stagprime]

If no duration is specified - the default is 500 ms or a half second.

If you need it to be snappier...

$("#S3_Pc_Meter_3c").animate({left: "+=6px"},50);

Just add a duration value between the curly brace and closing parenthesis.

Much faster.

[Dirlo]

(Big thanks for all these Js contibutions !...)

[TVP_C5944]

Perfect - thank you so much for your help!

[Allen28212764xy03]

I have created a slider that dynamically changes a variable. I have used it to vary a number of things such as a gauge indication, change colors of a shape, move objects across the slide, etc.  This is done iusing JavaScript in Captivate.