Interactive drag

#1

Hi,

First of all: great news that Antetype is back. I have been using Origami for my last prototypes because I was sure Antetype was dead. Welcome back to my desktop, guys! :slight_smile:

One question: I have been trying to create a resizable object whose edges I can drag to resize like a palette or floating window. I don’t think it is within the scope of what Antetype does but is there a method I might not be aware of that I could use as a workaround? Any pointers?

Thanks, keep up the good work!

–Stephan

#2

Hi Stephan,

welcome back :slight_smile: The easiest way is to use the CSS resize-property.

A minimal example in Antetype: resizable.zip (919.2 KB)

But if you need a more real “window-behaviour”, I guess you have to use either a JavaScript-Library or write the some custom Javascript.

Does this help?

#3

Hi Felix,
Thanks! Very elegant.
It is just what I need for designing good old desktop palettes.
I hope I may follow up with two more questions (You have probably answered them already by mentioning Java but just to be sure:)

  • Is it possible to make the whole rectangle draggable (e.g. via a title bar)?
  • Is it possible to get all four edges to respond to dragging?
    Thanks!
#4

I added another screen to the minimal-example using a title-bar. You can drag the “window” with it:

resizable movable.zip (1.3 MB)

It is done using two scripts on the titlebar-cell. Resizing on all sides is a little bit more effort (but definitely doable). Do you have visual “handles”, or like macOS only a cursor-change?

#5

Ah, that works. Thanks! I might have to learn some JavaScript basics after all. I have attached what I am trying to do. The example was done in Origami and took way too long. I had to work out the nesting behaviour (Origami does not have any means to nest elements) and resizing the palettes meant I had to work backwards from the enclosing container’s position. All doable without a single line of code but just not very efficient.
I would not need any visible handles, just a change of cursor, like macOS.

#6

Using the CSS property you can only resize the bottom right corner. Changing the cursor can be done with custom CSS, but you have to put an invisible cell, where the cursor should change and add a mouse over state. By default, it doesn’t change if you use CSS resizing.

#7

Thanks Tim, got that. It wouldn’t allow me to drag the edges though, right?

#8

Correct. It only works in Firefox, but there, the cursor is shown by default anyway.

#9

I tried with Felixs example but it won’t let me drag-resize anything but the bottom right corner, regardless of the browser. It’s no problem for now though. At least it works partially.

#10

Yes, the browser only lets you resize the bottom right corner.

#11

BTW most of the prototyping apps out there are geared towards web design or mobile app design. Things like dragging and resizing windows or floating palettes, let alone dragging a divider to resize panes of a palette or dialog is sorely missing from most. Antetypes greatest feature (for me) is its superior nesting. If there was an easy way to add draggable elements that other elements could bind to, it would be the only app out there that had support for this combination.

#12

Ok, here another one, resizable on all sides (the various handle-cells define the area where the resize is possible). Still not perfect (I defined a minimum size, but do not check it in the resize scripts, etc. ).

resizable movable an all sides.zip (458.1 KB)

Cheers,

felix

#13

That’s quite brilliant. Thank you! Actually, my comment wasn’t meant to create more work for you. I could have lived with just the bottom right corner :slight_smile:
I was simply trying to say, if Antetype could do these things without the need for scripting, it would have an edge over its competitors. Anyway, this is great. Thanks again!

#14

yes, scripting is not for everyone. So far we are collecting useful snippets and (if time permits) make it easier to use them. Therefor another one: a split-pane:

split.zip (271.0 KB)

just copy the “vertical handle”-cell in your prototype and set the resizable-cell in the interaction inspector (needs manual-width to work):

image
image3494Ă—2278 597 KB

Cheers,

felix

#15

You rock! I have just started my first serious prototype in Antetype. This will come in handy. I’ll keep you posted :slight_smile:

#16

Trying to get my head round the script but I am failing miserably. So this is working fine but I need a three-way split whereby the middle element is set to “stretch” and the outer elements are resizable by the splitter. I have had success by nesting these elements but when I resize the browser window, the prototype will not shrink. Any pointers would be most welcome.

#17

If I understand you, this should do it:

image
image2734Ă—1716 308 KB

split 2.zip (379.5 KB)

1 Like
#18

Yes, that’s what I wanted - thanks so much. I tried for about an hour before I gave up and asked. If I had the time to learn JS I could do this myself…
BTW this only works in Chrome and FF. In Safari, the splitter lags behind mouse movement but I guess that’s a known issue anyway. Just mentioning it in case it is not.

#19

my fault, I did not try it in Safari or inside Antetype. This should work across the three browsers:

split 3.zip (380.0 KB)

1 Like
#20

Perfect. And thanks for the comments. It’s still all gobbledygook to me but at least I am starting to get an idea what is going on :slight_smile: