Deltakosh

Announcing Babylon.GUI

Recommended Posts

So, Delta_kosher_pickle... how many hours did it take you... to code .GUI?  (if I may ask)

What an amazing system.  WIDE OPEN expansion opportunities in that puppy.

I was thinking about "event zones" for compound/complex controls/widgets.  Essentially, area-Maps/image-maps ...for context2d fills/images (cool).  Event zones.  Click lower left for THIS to happen, lower right for THAT to happen, etc.

ISmaps.  Remember those?

I think we would need to stay ONLY square/rectangular event sub-zones, right now.  Could probably do it with code...

IF (clickXY within button.subArea(start[vec2], endAt[vec2]) then action1
IF (clickXY within button.subArea(anotherStart[vec2], anotherEnd[vec2]) then action2

Maybe that is the best way.  MouseOver and mouseOut might be needed by users, too.

The point is... when "event zones" can be defined in arbitrary sub-areas of an advancedDynamicTexture (an ADT)... then some more power happens.  This is true for both fullscreen and as-a-texture ADT modes.

We can check scene.pointerX and .pointerY whenever a .GUI controller generates an event... no problems.

BUT... IF we could get values for where is pointer located at event-time... measured from button origin...  that would be interesting.  :)

In other words, where is pointer within current button or button's container (when event happened)?  Did I say that already?

Having those values... might make it easier for programmers to discriminate/mask "zones".  (like html area-mapping).  Perhaps, those pointer values are already available... I haven't studied the system well, yet.

The bigger point is... complex/compound controls (cool).  We could... essentially, use a PICTURE of a vehicle dashboard or controlPanel-of-buttons... either as a fullscreen ADT or a textured-onto-a-mesh ADT.   THEN... divide up that picture into "areas" or "zones"... one zone for each button on the dashboard/controlPanel image.

Time needed to make controlPanel ADT/imageButton... 20 seconds.  Time needed for programmer to define zones for complex controlPanel image... 2 years.  haha!  I think we might need a... .showAllDefinedZonesUsingLinesMesh = true;  :D

EasyControlPanel v1.0.  :)  Probably, it wouldn't take much coding... to modify a .GUI.imageOnlybutton... into being a .zonedImageOnlyButton.   Or, I could be completely wrong.  heh.  Comments welcome from everyone... but stay-on Babylon.GUI topic, please.  thx.

Share this post


Link to post
Share on other sites

:)  Sorry, Dad... but your PG has quite a few problems.  You should visit our PG drag'n'drop demo and study this func...

    var onPointerMove = function (evt) {
        if (!startingPoint) {
            return;
        }

        var current = getGroundPosition(evt);

        if (!current) {
            return;
        }

        var diff = current.subtract(startingPoint);
        currentMesh.position.addInPlace(diff);

        startingPoint = current;
    }

You need a startingPoint (when pointerDown first happens), and then you need to constantly subtract current pointer coordinates from startingPoint.  And notice at end of func, set starting point == current (this updates startingPoint, of course). 

Each diff should be a tiny amount (and then added to button.left and button.top, I think).  No help can be gotten from getLocalCoordinates, I don't think.  I think you have bad diff in your PG.  Actually, you have NO diff. :)  No subtraction is done... to determine difference between current pointer position, and last-used startingPoint.

Console.log everything.... until you see tiny little diffs.  Again... diff is difference between startingPoint, and current (your coordinates param).

I dunno if that helps.  console.log everything (or use button.text to report values), and you will see bad numbers going to button.top and .left.

Interesting note:  button.top and button.left appear to be STRINGS by default - 0px  0px... yet they accept floats just fine.

Share this post


Link to post
Share on other sites

In fact this depends on where the point of origin is located on a GUI element. My PG works almost, but I have not the point of origin (pivot point) button for example.

Yes there is a no diff to my story, but this diff, I do not know from what point I take it. On a mesh we have the pivot point, but a button, I do not know if it starts from the angle at the top left or bottom left or center...?

Share this post


Link to post
Share on other sites

Do you plan on developing helpers for Sprites ? If I am using only a screenSpaceCanvas2d in my app do you think I should use GUI instead ? A lot of what I am building relies on Canvas2d, but I am spending a lot of time trying to make things work... Maybe this would be more appropriate ?

Share this post


Link to post
Share on other sites
On 6/3/2017 at 8:52 PM, Deltakosh said:

Just added support for sliders:

https://www.babylonjs-playground.com/#U9AC0N#1

Great work @Deltakosh!

Thank you for your time and effort.

How could be done a customization of the graphical aspect of the "background", "thumb" and "track" parts of the slider?

Best regards.

Share this post


Link to post
Share on other sites

Hi, just want to chime in and say that its great to have this html functionality in babylon. Well done, I must say that TextBlock now takes over from console.log for me and seeing debug stuff on fullscreen w/o F12 is sweet !

That said, I was browsing the doc and I saw the moveToVector3 functionality and did a quick test in PG: https://www.babylonjs-playground.com/#XCPP9Y#173

But it doesn't seem to be working ? Do I need to call it in a register before render func ? or or ... ?? I'd love to be able to mouse-over face meshes in my scene and have it show stuff in a single dynamic label.

Share this post


Link to post
Share on other sites
15 hours ago, Deltakosh said:

Hello you cannot have a control linked to a mesh AND moved to a position.

They are mutually exclusive: https://www.babylonjs-playground.com/#XCPP9Y#176

 

Ah I see, understood, tyvm DK! :) So I managed to mouse-over faces on the skull mesh like this: https://www.babylonjs-playground.com/#FBKE1P

I observed a few issues:

1) If you mouseover to the leftmost part of the skull and then to the rightmost, the line seems to slant ? Can't figure out why it happens and can't seem to get rid of it through the offset.

2) The scene.onPointerObservable.add function block can get very long in the importMesh callback block. Is it possible to have the event listener outside of the callback  and still have access to the imported mesh? edit: nvm this, I figured it out after posting, hehe.

3) This is more of a request. Is it possible to add in a couple of more properties for the TextBlock in the next version ? I'm looking for label.font = "Times New Roman" and label.fontsize = "11pt" functionalities. edit: I saw the control properties after the previous edit, lol.

Thanks for reading!

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

  • Recently Browsing   0 members

    No registered users viewing this page.