Allowing a user to resize a dynamic panel with drag control

rp-7
newbie-question
#1

Hi,

I’ve tried all manner of things to allow a user to resize a dynamic panel using drag but to no avail. How do you make a dynamic panel resizable? I need it to be possible for the user to make the panel any size by dragging.

Thanks in advance.

Moveable Window Frame Borders
#2

you need an object to drag around and a little bit of math.

resizeDPbyDrag.rp (55.9 KB)

#3

Looks like this will do the job, thank you!

#4

But is there a setting somewhere which will just make a dynamic panel resizable?

#5

you have the option “fit to content”.

#6

I’m sure there is something simple that I am missing but I cannot seem to get this to work, the small square doesn’t stay attached to the larger, and it will resize smaller but not larger - here is my file, tried to copy exactly what Gregor did but clearly I’m missing something somewhere. draghelp.rp (57.6 KB)

#7

No, its all right.
The size of the dynamic layer does change. You only cannot see it because the content of the panel does not fill it up. in my example i used the background color to avoid this problem. you can also use larger content. the panel will crop it.

#8

Thank you! I get it now, I saw the green and blue in yours and assumed they were shapes converted to dynamic panels, I didn’t realize you could change the background color of a panel state. Thanks!!!

#9

Hi, thank you for sharing! I found it very helpfull! Could you please tell me if there is a way to do the same thing and maintain aspect ratio?

#10

Hi Gregor,

I hope you will forgive me for having disturb you. I tried to send you a private message but the following error occured: “Gregor has exceeded their stored private messages quota and cannot accept further messages until they clear some space”.

I found tour post very useful. I need to do basicly the same thing but with images, so I need to mantain aspect ratio. Could you please tell me if you know a way to do it?

I put the image as “back image” of the DP (where you used green) (with the option “stretch to contain”), when I drag the “handle” everything works and the image is resized as I want, but the handle (blu rectangle) leaves the image’s corner and shows the green “back color” of the DP. Green appears to the right side of the image if I drag in this direction or to the bottom size if in drag downward. I think that if I’ll:bow: use your method maintaining proportions it will work.
I’m so sorry I wrote you a private message but I really need to do this for my thesis. :bow:

Thank you very much,
all the best

#11

sure. you need a case to determin the smaller “direction”, set the smaller value horizontally or vertically… however the smaller direction is and use the height/ width multiplied with ratio to have the other direction.

#12

Hi,
thank you very much for your kind answer. Indeed, I imagined that the solution to my problem would be to set the direction of the blue handle (smaller). Unfortunately I am not very good at using the axure-variables, so I am not sure that I understood correctly how to do what you suggest.
I don’t think that I understand how to set the value of Smaller in a given direction (horizontal or vertical).
I also don’t know where/how I have to use the value of the first direction (multiplied by ratio) in order to get the other direction. I guess I have to create another variable for this, but I don’t know which.
And finally, should I use this in the drag event and in the action “move by”? or in “move to”?
I attach also the file in which I am doing some attempts, if it can be useful.
Thank you again for your help!
resizeDrag.rp (209 KB)

#13

Hi Lenovo2902,

I took a look at your .rp file and made a few changes, and I think it’s generally working how you want it to now. First, I changed the size of your img dynamic panel to just fit the shape of the background image. Then, I ended up using some variables in the “Move to” action for the “smaller” dynamic panel (the drag handle).

By changing the move action from “with drag” to the specific variables, I limited where the drag handle could go, which in turn affects the size of the img panel (since it’s partially based on the x and y values of the drag handle). The result ended up being "move to ([This.x + (DragY * (20/13))]]), ([[This.y + DragY]]). Since the height was the smaller value, the y value is more straightforward. Meanwhile, the x value uses the ratio (200 px x 130 px) to balance out the width.

It isn’t quite perfect–the handle does move a few pixels from the bottom right corner while dragging, but hopefully this will work for your needs. Also, if you don’t want to see any slivers of green, you can go into State1 of the img panel and change the back color under the Panel State Style pane!
resizeDrag_EDIT.rp (207 KB)

#14

Hi Julie,
thanks so much!I did as you suggest and it seems to work. :thumbup: :slight_smile:

#15

Ok in the same vain I am creating sliders that have a fill bar. I have seen the simple slider that is just a box and a line but that will not serve what I need to do. I am attaching the basic file and if someone could get the first example going for me I should be able to expand that to the other two that I need. I cant get the fill bar to resize correctly based on the movement of the slide marker.SlidersThatFill.rp (63.7 KB)

#16

Hi RMCockburn ,
Just try to change the width to [[fillSizeChange.x ]] (remove this.x)
Thanks,
Vikram

#17

how about the ability to resize all four corners?

#18

I hope you will forgive me for having disturb you. I tried to send you a private message but the following error occured: "Gregor has exceeded their stored private messages quota and cannot accept further messages until they clear some space

>>>>DeMO HERe

#19

Hi Chris,

Try this out:

Resize_EXAMPLE.rp (70.1 KB) | See it live!

Each resize handle has an OnDrag case that moves itself with the drag. It also moves the two adjacent handles either “with drag x” or “with drag y” as appropriate.

The “Set Size” action uses one of two expression patterns in the “Width” and “Height” fields depending on the resize anchor location. This is because the resize values are ultimately determined by the X and Y values of the resize handles’ sides.

  • If the anchor is at ‘top’ or left’, that side of the resizable widget won’t move with the resize, making its X and Y values constants that can be used as starting points. To do this, I simply subtract the widget’s X or Y value from the handle’s ‘.right’ or ‘.bottom’ value:
    Width: [[This.right-Target.x]]
    Height: [[This.bottom-Target.y]]

  • If the anchor is at ‘bottom’ or ‘right’, the top or left edges of the resizable widget will move with the resize, so its X and Y values are no longer constant. As such, the ‘height’ or ‘width’ increase values must be determined based on how many pixels up or to the left the drag handles is being moved:
    Width: [[Target.width+(Target.x-This.x)]]
    Height: [[Target.height+(Target.y-This.y)]]

Note: ‘Target’ refers to the widget being targeted by the action, the resizable widget, and ‘This’ refers to the widget whose event is firing, the resize handle.

I hope that all of this is clear. Take a look at the RP file and let me know if you have any questions.

#20

please help…
If I want one left window to grow and the right one to decrease respectively
image resizeDPbyDragtwo.rp (56.8 KB)