Performing an action based on width of a rectangle


On page load, I have the width of a rectangle (the progress bar) extending to a specified width, 90px. When it reaches 90x in width, I would like a new interaction to occur.

I tried building a condition of “length of widget value,” selecting the rectangle, having it equal to value of 90. But this didn’t work.




This should work if the code is associated with the rectangle

On Resized (of rectangle)
  if [[This.width]] is greater than or equals 90
    -- do whatever

However, if you are using animation to increase the size, this won’t work, because the Resized event is evaluated only after the animation ends.

How are you sizing it?


Another option, if you are using an animation, like “Set Size MyRectangle to 90 x Height linear 1000 ms” is to add a “Wait 1000 ms” then your other actions.

Or, if you’re trying to build in some intelligence to the progress bar—maybe some condition or event can interrupt or pause it—you could build a looping function to increase the width by a small amount—maybe 10 px or 5% increment, which you could then test the width at each loop iteration with a conditional case. Using a separate dynamic panel for the timer loop is the best method. It needs at least two states, set it to change states, Next, wrap, repeat N ms. Put a conditional case like Joseph shows above on the timer panel’s Panel State Changed event.