Compare vertical position of dragged widget

#1

I’m trying to create a dynamic timeline where different phases (or blocks) are enabled or disabled depending on the position of the “now” line. The “now” line can be dragged vertically over a stack of blocks. If the Y value of the “now” line (sMarker.Y) is greater than the Y value of the block (This.Y), the block should disable and vice versa. However, the case logic variable only gets the initial value of the sMarker.Y, not the dragged value so the comparison to This .Y doesn’t work. If I create a label and set its text value to sMarker.Y OnMove, it updates while dragging. Why doesn’t the the case logic get the same updated sMarker.Y value?

screenshot-34

screenshot-35
screenshot-35.png1136×435 10.2 KB

#2

I’m a little confused between your description and your screenshot… Uploading your .rp file here would be a big help… You may have a small and/or unintended bug in your interaction code, or you may have some bigger issues going on …hard to tell without seeing the .rp file itself.

You say the “now” line can be dragged, and presumably the Dragged event moves “This” --itself, the “now” line. I would expect as it moves it would enable/disable the blocks behind it. But your screenshot does not indicate which widget is selected–the line or one of the blocks. I would imagine it is the “now” line because that is what would move when it gets dragged, and you don’t mention anything about the blocks moving. However, it appears it is one of the blocks because of the “Disable This” action–and you don’t mention anything about disabling the marker line. So how does this work? …Maybe the Dragged event “fake moves” the blocks by (0, 0) …or fires their Moved event–, then each block tests itself against the y-location of the line? That approach should work, but may get buggy if you have a lot of blocks as it could kind of overwhelm the processor. Keep in mind, the Dragged and Moved events would get fired every time the Marker line moves–even one pixel. (Try viewing the Trace in the Interaction Console [click the lightning bolt icon in the upper-right of the prototype player in the browser] and drag the line just a little bit–see how many times the Dragged event gets fired!) …How many blocks is too many depends on your system resources.

It does–or at least it should–and it does so for me. I’ve done similar things many times, and properties of a dynamic panel, like it’s y-position, are available in real-time in conditional cases. I demonstrate this in the prototype below. If your setup is different, or I’ve misunderstood your issue, please reply, explain further, and upload your .rp file, please.

dragged widget position.rp (58.8 KB)

#3

I’ve uploaded my .rp file below. When you launch the project, you will see the blue “now” line (called Marker in the outline) that goes across the three stacked timelines. When you drag it down, the first two blocks in the left column will disable when the Marker is below their top edge. (Only the first two blocks have interaction code so far.) There is also a label that shows the y-position of the Marker as you drag. I can’t seem to get that value (sMarker.y) to update in the interaction code as the Marker is dragged.

BTW, “This” here refers to the blocks. OnMove, I’m trying to compare the sMarker.y to This.y.

Thanks in advance.

Timeline.rp (84.5 KB)

#4

Your prototype works for me on Win 11 with latest Chrome browser. To test this out further, I duplicated your page, simplified the Move scheme, and applied to all blocks, and it works fine–all blocks disable/enable as the Marker widget is dragged.

Here is the updated .rp file and a GIF recording showing that it works…
Timeline.rp (155.8 KB)

Timeline-demo
Timeline-demo.gif574×514 298 KB

Do you see the same effects as I do in your test environment? I’m wondering if there is an OS or browser difference …or maybe I’m still not understanding your issue correctly. I think this proves the [[sMarker.y]] expression is available and properly evaluated in the conditional cases as well as the Moved event of the MarkerPosition widget so its value is constantly available in real time.

On the Timeline (1) page, here are my changes. This is only for easier duplication and control of things–it doesn’t change how this all works from what you did.

  • I copied the Moved event from the C01-AS widget and pasted to each block, in all three Cycle groups.
  • I added a Moved event to each Cycle group which moves each block in that group. This is a kind of object oriented approach in which each group takes care of its own children. So, firing the Moved event of the group triggers a chain reaction to automatically fire the Moved event of each block in the group. If you add or remove blocks in a group, you only have to edit that group’s Moved event.
  • I changed the Dragged event for Marker so it only needs to move each Cycle group instead of each and every block. Again, this is just to make the code simpler; I could have made 28 separate Move actions, one per block, and it would work the same.
  • I made a dynamic panel for the MarkerPosition widget and pinned it to the browser, so it can be seen even if you need to scroll the window down to see all the content and test all the blocks.
  • In the Marker line’s Dragged event, I also simplified your “Move This…” action to be just Move This with drag Y so it will only move vertically. (Your boundaries didn’t make logical sense, but I guess they worked…this is just an easier, quicker way to limit the movement to the y-axis only.)
#5

Well, you’re right. My solution did work from the server. Locally, it doesn’t work. Very odd.

Also, I tried putting the Move on the groups, but again, locally, it didn’t work.

Thanks for the help!

#6

I’d send an email to support@axure.com …they can help troubleshoot this

#7

Done! Thanks for the suggestion!

#8

As an update, this issue seems to have been present in an older version of Axure RP. The current release (10.0.0.3905) will not experience this issue locally. A Prototype published to Axure Cloud will be generated online using the most recent version of Axure RP, which is why this issue was not occurring on Cloud.

Please feel free to write into support@axure.com with any further questions about this!

closed #9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.