Select Area Option

[Savrin]

Hi Everyone !!

I got a real challenge from my client. I need do design an app where you can “Select an area”
Basically there is a software where you have to select area of X and Y and send it to database.
So the client want a working prototype where he can select something. Is there such an option in Axure RP?

Never heard about it.

I dont even need to do anything with selection, its like the client wants to draw a box on the propotype. To imagine how it will work in future. Not sure if you all understand me

Any help appriciated.

[skb]

Hi @Savrin,

Is this what you’re trying to do?

draw.rp (50.5 KB)

You can set up drag interactions on dynamic panels, so I used a dynamic panel that is the size of the entire browser, and a hidden rectangle behind it.

On drag start, the gray rectangle will show, and the size will be set to 0, 0. Also, the box will be moved to the user’s current cursor location.

Then, as the user drags, if they are dragging up or to the left, you have to move the rectangle so that the top left corner of the rectangle stays in the right place (that’s what those 3 conditional cases at the top are for). The last case, (the If True case) is setting the size of the rectangle to the absolute value of [[TotalDragX]] and [[TotalDragY]]. (The absolute value part handles the cases where the user is dragging up or to the left instead of down and to the right.)

Is this what you were trying to accomplish?

-skb

[Savrin]

@skb Pure genius !!! Thanks very much, that’s exatcly what I was looking for.

One more thing, any way to draw up to 3 boxes? First then second and then third? But still Thank You !!

[skb]

Hi @Savrin,

Yes, that would definitely be possible. There would be different ways to do it, depending on what you want to have happen when the user tries to draw box #4…

One way to do this would be to add two more copies of the panels and boxes, put the 2nd and 3rd canvas on top of the first one, and then start off with the 2nd and 3rd canvas hidden.

Then, when the user draws the first box, OnDragDrop, show canvas #2 (which would mean that the next time they try to draw a box, the second canvas will be showing, and it will draw box #2).

Do the same thing for canvas #2… when the user draws box #2, show canvas #3, etc etc.

But then, after they draw box #3, canvas #3 will always be showing, so it will keep re-drawing box #3 over and over again. Is that what you need? Or do you need it to behave differently?

There would be many other ways to do this as well, depending on what you want.

Here’s the file: draw_three.rp (61.6 KB)

[skb]

Also: You’re welcome! This is a fun one.