Sign in to follow this  
Followers 0
Dad72

GUI drag drop element, image...

25 posts in this topic

Hello,

Is it possible with BABYLON.GUI to move containers (drag drop).

For example I would like to be able to move an image of a container and add it to another container. (To move an item from an inventory to an actionbar for example)

I would also like to move a rectangle inside the canvas.

Is this something possible now or is this something that can be added? I try to completely rewrite my SDK using BABYLON.GUI instead of appendChild()

Thank you

Share this post


Link to post
Share on other sites

Hi Dad.  Sorry to interrupt... but... during drag... would it be OK if dragged item... changed into little abs-position html element?  Then, when dropped... re-creates advancedDynamicTexture (ADT) in new container (placed upon a mesh.material there).

Would that work for you?  During drag, dragged item is "tokenized" into something else... and stays that way until the drop is complete.  *shrug*  kbye again.

Share this post


Link to post
Share on other sites

I'm not sure I understood your approach. Do you have an example on PG?

Share this post


Link to post
Share on other sites

No, I have no PG of that.

I will try to explain better.

You pointer-down on GUI item. When dragging starts...

1. Collect information about dragged item.  Collect enough information to create a NEW item... exactly the same as dragged item.
2. Create absolute positioned html element at mouse pointer, and wire its CSS top/left... to mouse pointerX/Y.  You will drag IT, and not GUI item.
3. Make dragged GUI item invisible.  Don't drag it... just prepare it to be disposed if drop is successful.
4. When user drops the HTML element in the new location/container... RE-CREATE an exact copy of old invisible GUI item... in the new container.
5. Make the new created GUI item visible (it will be, by default). Make it flow/fit into new container properly.  Then dispose old invisible GUI item from old location.
6. Delete HTML token at pointer.  Drop was successful.

See, you never dragged the GUI item.  You faked it.  You showed the user a "token" of the dragged item, but the actual GUI item... is not really dragged.  Just a "token" of it, is dragged.  It is a common practice in many things.  For example, when you drag an image into Wordpad... you don't see the actual image... until the drop is done.  Before the drop, while dragging... it is a white box (a token/proxy), I think.  When dropped... boom, it becomes a picture again.

Sorry. I should learn the correct terminology for these things.  I'm too noob for the things I try to talk about.  :)

Share this post


Link to post
Share on other sites

There's some idea. I will try to see in the days that come what I can do with this idea.

Thank you Wingnut

Deltakosh and Wingnut like this

Share this post


Link to post
Share on other sites

My pleasure.  You don't need to use HTML element for token/proxy.  There are mouse pointer shapes (CSS cursor: stylerule) already designed-for dragging and OK-TO-DROP-HERE... and NO-DROP-ALLOWED-HERE... etc.  Perhaps you could change pointer during drag... indicating that something is being "held".  *shrug*

And... you can use your own image.... for a mouse pointer.  So you could make a pointer that is an image... a hand carrying a mesh in a basket... you know... something to tell the user that an item is being moved.  And you could spray particles from the pointer arrow... when dragging an item.  Pretty.  Pretty ridiculous.  :) 

Using a mesh as a token?  Even an animated one?  Can do... but you can't drag the token onto HTML areas.  Mesh won't travel off-canvas. 

Abs-positioned html can travel anywhere on the page, including atop flash players and Windows Media Player embeds.  (huh?)  :)

I think the "make your own pointer image"-method would work real nice... for your drag system, Dad.  No need for abs-pos html.

Just change pointer to be YOUR pointer image... when dragging something.  :)  You can change to a different pointer-picture... for NO-DROP-ALLOWED-HERE, too.  Pretty easy.

Dad72 likes this

Share this post


Link to post
Share on other sites

That seems good to me.  I just saw that we have the event move, which will help me a lot.

Share this post


Link to post
Share on other sites

Wingnut continues a conversation from another thread...  talking about dragging GUI stuff.  Here's my latest failure:

http://www.babylonjs-playground.com/#XCPP9Y#127

Still testing.

My 'diff' looks good at console, now.  But... button won't update position... when pointer is down. (it seems)

I try lines 60-61... trying to set button dirty, so framework will update.  Nope.

I try 34... no change.

It seems... line 55/56 fails... while button is down.  And it NEEDS to be down... for dragging.  Goofy.

No updating of button.left and button.top... when mouse button pressed.  Crap.  So close.  :) 

Surely Wingnut mistake.  Fun experimenting, though.

I hope I'm not in-the-way, Dad.  Maybe if Wingnut shuddup, DK would talk more, eh?  Sorry.

Share this post


Link to post
Share on other sites

COOL!!!  You got it!  Yep... just some minor tweaks, remain.  (Wingnut shakes your hand and pours raspberry koolaid for everyone.)

Share this post


Link to post
Share on other sites

Interesting.  Perhaps we are setting .top and .left too fast.  isDirty checker cannot keep-up.  :)

Update: Nope, both isDirty lines aren't needed.  hmm.

Update2: Button seems to think it didn't move, after dropping.  So NEXT drag... snaps to 0,0 again, or something like that.

Update3:  Wingy needs lunch.  Too much playing... forgot to eat.  :)

Share this post


Link to post
Share on other sites

I think this is a bug or not. "coordinates" is not updated. Whenever you move a first time, it's ok, but the next time, the center starts, so the button returns to the center.

http://www.babylonjs-playground.com/#XCPP9Y#131

In this PG, I position the button higher and as one moves it, it returns to the center. It always leaves the center. I do not know why

http://www.babylonjs-playground.com/#XCPP9Y#132

good meal Wingnut

Share this post


Link to post
Share on other sites

Thanks Adam. It was almost there. It's cool, you can drag drop items BABYLON.GUI :)

Wingnut likes this

Share this post


Link to post
Share on other sites

Notice how important diff became?  When Deltakosh first used diff (in the drag'n'drop demo), he actually set a precedent (a standard) for all future onPointerMove handlers.

But it actually started centuries ago, in the ancient lands of Differencia... based upon parchments written-by old Differencian scholars.  Their civilization spent MOST of their waking hours... subtracting yesterday from today... trying to determine the diff between the two.

Of course, the Differencian civilization died-out, due to extreme boredom.  Yet, we owe them... for our new, cool, Babylon.GUI drag'n'drop.  :)    Hooray for Differencia!  Long live diff !  heh.   (Geez, my own goofy story nearly bored me to death)  :)

Share this post


Link to post
Share on other sites

I made another PG which allows to move a rectangle with a picture inside. Even if you click on the image to move the rectangle, everything is moving inside the rectangle.

This is useful for moving windows with elements inside (window of options, inventory ...)

http://www.babylonjs-playground.com/#CNT1E0#1

I therefore use isHitTestVisible = false; On the layers that are in the Control to moved for its events to be taken into account.

In short, a more concrete PG of Drag drop

Share this post


Link to post
Share on other sites

@Deltakosh: Would it be possible to have two new event:

  onPointerDragStartObservable

  onPointerDragEndObservable

This would be very useful for the drag drop to know when an item is moving then stoping.

Thanks DK

Share this post


Link to post
Share on other sites

I'm not sure what that's all about? Not that it should not be useful, but in what cases can it be used?

Share this post


Link to post
Share on other sites

Ok, I see. I know what that is, except term. :D  I have look on google to understand better

Deltakosh likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.