Announcing Babylon.GUI

[GameMonetize]

Already supported:

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

 

[inteja]

Awesome sauce. Thanks @Deltakosh!

[jerome]

feature de bestiasse !

[Wingnut]

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; 

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.

[GameMonetize]

Actually this is already doable

when a control register for onPointerMove it will receive the pointer coordinate. You can then call getLocalCoordinates.

Check this PG: http://www.babylonjs-playground.com/#XCPP9Y#121 (line #53)

[Dad72]

I thought it might be useful for the drag drop, but I do not know if I get a bug or not. Or I do not take it properly.

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

[GameMonetize]

It is not a bug in GUI

[Dad72]

I am not far from a result. An idea of what I do wrong?

[Wingnut]

  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.

[Dad72]

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...?

[Wingnut]

Wingnut heads-off to Dad72's better thread.  Cya there.    This is an announcements thread... not really a "Let's Go Hacking With Dad and Wingy" -thread.  heh.  I'm MUCH too yappy for these important Announcement topics.

[Dad72]

effectively...

[AlbertTJames]

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 ?

[GameMonetize]

I think so

If you can describe what could be missing from GUI I'll add it to our backlog:)

[uraani]

Hi, I've so far enjoyed using the new GUI system. 
But one thing has somewhat bothered me:
Highlight layer renders on top of the GUI, is there some way to avoid this?
Correct me if i'm wrong but the highlight layer seems to be always the topmost layer? https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.scene.ts#L2763

[GameMonetize]

You can use layerMask for that.

See this demo: UI is on a second camera with a different layermask:

https://www.babylonjs-playground.com/#Y3C0HQ#0

[Wingnut]

Oops, I posted in wrong thread.  delete this post at will. 

[paleRider]

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.

[GameMonetize]

You can override the draw function:

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/controls/slider.ts#L127

[AlbertTJames]

Did you stop support for canvas 2d ?? I cant see any examples in the sandbox anymore...  Please do not delete support, I have thousands of hours of development building a middleware based on it.

 

https://www.babylonjs-playground.com/#15C96V#5

https://www.babylonjs-playground.com/#OWCCR#8

...

[GameMonetize]

No wrry this is a simple fix to apply:

https://www.babylonjs-playground.com/#15C96V#33 (see first line)

 

That being said, I would highly recommend moving to Babylon.GUI if you can

[phaselock]

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.

[GameMonetize]

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

 

[phaselock]

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!

[GameMonetize]

What do you mean by slant ?