New GUI control: The Grid

[GameMonetize]

Hey guys!!!

I'm glad to announce the availability of a new container for GUI: The grid

Doc here: http://doc.babylonjs.com/how_to/gui#grid

With this new tool, it's gonna be easier than ever to build complex UI

[Guest]

Example of a complex UI based on grids:

https://www.babylonjs-playground.com/#WZZDNR#7

[jerome]

roooooh

excellent !

[Wingnut]

Oh man, Delta... this is big big big!  Fantastic!  Thank you!

And what a fun and useful PG to go with it.  Too good!

[Wingnut]

https://www.babylonjs-playground.com/#KX33X8#4

Wingnut doing some playing, as usual.  (goes great with Saturday morning cartoons)

Lots of fun to be had with this new grid thing.  For example, we GOTTA rotate it, just cuz we CAN.  hah

I am pondering... "the drill".

console.log(grid.column.row.control.value)  coooooool!  I don't know how to do that "data drilling", or if wise/needed.  Just doing some 'imagineering'.

For adventurers... click on that non-empty empty object seen at the bottom of your JS console (to view in object inspector).  Look at the property names on that puppy.

0:0, 1:0, 0:1, 1:1, etc.  Ain't that strange?  I tried to read one with line 54... failed big-time.  Deltakosh does these fancy JS things... cuz he likes watching my dog chase its tail... round and round. 

Keep in mind... lines 44 and 45 are defining 0.5 column width, meaning... 50% of remaining horizontal space.  Lines 40-42 already used-up 30%... so...

... lines 44/45 are actually using 70% of grid horz-space (35% each)... minus the thickness of all the rect-based cell borders. 

Should we try cell drag'n'drop and grid._markAsDirty updating... next?  OMG!    (Wingy dons his safety gear - and so does his dog)

Can we feed a "live" RTT (renderTargetTexture) to a GUI Image Control?  It opens-up the possibility of seeing all 8 camera views of a scene... in little "live" images on a grid... letting user pick which camera they want to use as the main camera.  hmm.  Man, did I wander off-topic, eh?    

Here's my 4-RTT demo if someone feels like getting demented.  And yes, I DO know that it would be unnecessary to use a GUI Grid control to make 4 click-able "pick-your-cam" non-GUI buttons... using actionManagers on the 4 RTT planes - mon 1-4.  Probably easier than re-coding GUI ImageControl to accept RTT streaming.   

Still, though... animated imageControls and textBlock/button backgrounds... that's "uptown"-classy, for sure.  Think about "select-a-room" in a VR hotel.  Each cell of the grid is showing a "live view" from that scene-cam... located in each hotel room.  Click the cell, and that cam goes full-screen, and you are there.

The grid would need an update, putting the previous cam's RTT into the now-empty clicked cam-cell.  Coooool.  RTT's... BJS's closed-circuit TV system.    Anyone remember an old video game called Killed Until Dead?  Surveillance! 

[Wingnut]

Hmm... I just had another demented idea.  GUI ViewportControl.  We don't need the RTT to feed an ImageControl... when we can fill rects/grid-cells with viewports!  (viewportControls)

OMG! 

A GUI viewportControl would be SO COOL!  SO handy for mini-maps.  But... mini-maps often need "where upon the map did user click"... so we would need to ensure that the pick-position upon the viewportControl... is public/exposed.  For ImageControls (and maybe ButtonControls), it might already be so/true.

I have a funny feeling... that viewports are just an application of RTTs (render target textures)... and might suffer from the same problems.  BUT... this time... we are not asking the DOM-ish ImageControl to display something non-DOM... like an RTT.   We are creating a whole NEW control.  The viewportControl does not need to be ANY BIT DOM-ish... for it never deals-with URLs.  hmm.  Hurry, somebody build one!    I suspect that a viewportControl could also be used as an RTT control.  Coooooool!

BUT... context2d canvas IS DOM-ish, and that's what is used for Advanced Dynamic Textures (ADT's), the basis of the entire GUI system.  hmm.  RTT's and viewports might still need continuous "painting" onto a canvas... making them slow... at least as slow as sprite blitting.  (ponder ponder)

-----------------

Anyway, I'm going to use the grid control... to attempt to teach myself 4x4 matrices.  I might be switching OFTEN between full-screen-based grids, and mesh-texture grids.  Flat full-screen grids will be the "editable" grids/matrices.  Mesh-based grids/matrics will be standing-by along the sides of the scene... ready to perform multiplications with other matrices.  View matrices, projection matices... worldspace matrices, rotation, translation, scaling, we might be able to visually demonstrate ALL of it, and see it happen real-time.

I was inspired by DK's real-time particleSystem editor.  Why not a real-time matrix transformation editor, right?  Power-learning, from your friends at BJS. 

A very very visual... beginner-level matrices tutorial.  Matrices are a difficult-to-teach subject, and the new GUI GridControl opens some new doors to some new teaching attempts... including myself. 

See ya later in The Wingnut Chronicles... for more from The Great Matrices-For-Dummies Project.    Help/starters/spear-headers welcome.

[Guest]

Haha love the idea of using the grid to teach matrices!