Recommended Posts

Thanks DK!  Deltakosh burns yet another bug with his giant sun-powered magnifying glass.

Ok, so, in another part of the forum... we've been talking about virtual joysticks and "drag-pucks".

I recently "found" another "round" custom GUI control.  It's only the 2nd round GUI control we have ever seen.  ColorPicker was the first, I think.  They are REALLY square-shaped... but they have round stuff drawn on them, and that is cool.  :)

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

Click on left box, and this "control" turns-on... not too bad at all!  It allows puck-drag outside of its ring, and seems to use MANY "containers"... but... NICELY CODED!!!  Ain't it pretty?

I wish I knew who coded this.  It's nice.  I hope I can code that pretty... when I grow up.  Another custom GUI control... YAY!  You guys are all geniuses!  Someday... I'm gonna make my own custom GUI control... and then I'll be somebody.  Our meterControl is close-to production-ready... but... SO many "flesh-out" questions still un-answered. 

There's really no "best practices" for writing custom GUI controls... other than... follow the rules for observers and containment/measuring.  In general, it's a wide-open oppor-tuna-fish... full freedom... IF you know how to do a little 2D canvas drawing (draw the widget parts).

Ever thought about a "universal scene-controller dashboard"?  4 sliders, 4 switches, two drag-pucks (trackballs), 4 digital readouts, a couple of "orbiters"... etc.  None of it is wired-up to ANYTHING in the scene... they are just un-observed controls.  Turn it on in any scene... it uses just a little bottom-of-screen space.  Then... user can quickly "bind" control values... to in-scene properties and method-calls.  Much like DatGUI I guess.  hmm.  Universal dashboard would be MUCH PRETTIER than datGUI, though. 

Hell... Deltakosh's Grid-Underlayed, Real-Time Particle System Playground... is WAY WAY prettier than ANY datGUI I have ever seen.  We GOT some beefy dashboard-making powers... if we want-to do that.

Share this post


Link to post
Share on other sites

Following on from your post in New GUI control: The Grid - I thought I would help you learn more about matrices. The term matrix in Latin meant a womb or female breeding animal. In printing the rows and columns of letters were  safely contained as a matrix before giving birth to the printed page. Now all the numbers you need to reproduce a mesh at the right position, rotation and scale are stored in the WorldMatrix. 

Hopefully you will now be able to find matrices all warm,  cuddly and motherly, they are after all, literally, the matriarchs of mathematics 👵😀

A source

Share this post


Link to post
Share on other sites

hahaha... ah JohnnyKakes... you sure write good posts.  :) Love it!   Thanks for your interest, too.

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

Here's my start (to the Learn Matrices "thing")... but I can't even get the GUI operational.  What's new.  Usually Deltakosh rescues me at this point, showing me where/how I have been incompetent.

Line 68 calls my new makeGrid() function @ line 16.  gridrect surrounds the entire grid.... it has a gold border with null background.  It is displayed fine.

Lines 38-46 - row/column definers.

Lines 51-61 - adds the cellrects.  ('stocks' the grid)

Line 68... mygrid is actually the master gridrect.... and is added to ADT in line 69.

The ACTUAL gridControl is added-to gridrect... at line 62.

Lines 63/64 console dumps look good. 

But, where are my cells?  I seem to have lost them somewhere in worldspace.  Or maybe screenspace.  Maybe OUTER space. 

I'm finding it difficult to function... without my cells.  ;)   A little note:  The purple background is from scene.clearColor, and NOT from gridrect.background.  (yawn)

It has to be some stupid Wingnut mistake... it just HAS TO BE!  hmm.  Who has good eyes?   Thx for any assistance... from anyone.

Sunday update:  Currently, working-with PG #16+.  Here's a screengrab from Magnum PI (PI = Playground Inspector).   ;)

GridControl background set to seagreen.  It exists... but I still have broken cellrects.  Cellrects display fine when added to ADT or gridrect.  hmm.

When I ask for 1x1 grid...  var mygrid = makeGrid("mygrid", "full", 1, 1, 5, "red")  - line 84--> all is well.  Go fig.  [Wingnut calls Magnum PI to see if he has any leads, yet].

Share this post


Link to post
Share on other sites

Aw, thx DK!  Soon I will start practicing... answering CORRECTLY.  heh

Ok... a little more back-story on my mistake, here.

I DID try a toFixed() test over the weekend... using Number().

grid.addColumnDefinition(Number(1/cols).toFixed(4));

But notice... I used Number() incorrectly (above).  I did not provide it with wide parentheses.

grid.addColumnDefinition(Number((1/cols).toFixed(4)));

That... is the correct usage.  Wingnut... you silly ding-dong.

Deltakosh apparently thinks that a column width of .249487277253427e12 (an example) ...is an ok number to feed-to .addColumnDefinition(), so that's cool with me, too. 

The only reason I used toFixed(4)... was because I was worried about .addColumnDefinition() swallowing a big mouthful of number.  :)

Ahh, I think it is time for Wingnut to go on-line, now.  Fishing line, that is.... casting various dataTypes... attempting P2P handshaking.  :) 

Update:  Back from fishing! (So what, wingy?  Nobody cares.) 

Wanna see off-topic pictures?  I knew ya did.   http://urbanproductions.com/wingy/flowage/viewer.htm

Share this post


Link to post
Share on other sites

Ok, moving on.  I did some early morning reading about basic 4x4 matrix stuff... mainly learning terminology... such as "homogenous" and "affine", etc. 

(touring-around in a 3js-based tutorial... here.)

My brain started hurting, so I went back to playing with GUI/Grid.

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

I put an engine resizer on-board, to keep the grid solid, no matter the dev-tools-window/editor-window size-dragging.

Also trying an animated scaler func... lines 3-8.  It is called from line 87... currently disabled.

Enable it, and I get... t.getScene is not a function

Ok fine, I'll make my own .getScene() for BABYLON.GUI.Control...

https://www.babylonjs-playground.com/#KX33X8#23  (lines 10-12)

Then I activated the call (now at line 99), and boom... animated, eased, GUI control-scaler.  Fun!  Pretty flickering.  :)

Phew... a success!  And I didn't even need a rescue!  (but almost).  :) Thank goodness I celebrate the little things.  I wish the girls I date... would do the same.  :o

Update:  [#26] - Wingnut trying to put the row/column definers... inside the grid-stocking for-loops.  (lines 66 and 68).  I disabled the "early definers" in lines 52-60.  I got some problems. I think I need to learn JS.  (oh no!)  :)

Update:  [#27] -  Added a little IF check at line 68... now working goooooood.   YAY!

Update:  [#29] - created a "quadgrid" 2x2 grid (line 94)... and created four 4x4 mygrids (lines 96-99).  I am now trying to put these rect-wrapped 4x4's into each cell of the 2x2 quadgrid (lines 120-123).  The scaling done in lines 101-108 will likely NOT be needed... once I get the nested grid-of-grids working.  The 'mygrids' SHOULD auto-scale to "fit" the quadgrid cells.  Lines 110-118 are just some temporary offsetters, so I can see each mygrid.  There are already rects in the quadgrid.  I think I need to add the mygrids to those quadgrid cellrects... and then it will work.  Still thinking about how-best to do that.

Update: [#31] - Modified line 71 of makeGrid() ... so that 2x2 quad-grids get no default cell content.  I figged that would make the 120-123 quadgrid addControl code... work better.  Nope.  I got SOMETHING wrong, yet.  Good fun, though.

Update: [#32] - YAY!  The quadgrid, like ALL grids created by makeGrid()... returns with a grid with a GUI Rectangle wrapping it.  Well, dummy me was trying to make those wrapper-rects... understand .addControl(mygrid1, 0, 0).  But THAT only works on a Grid control, and not on GUI rectangles.  So, notice the new lines 120-123, using children[0].

This is all caused by Wingnut putting a rectangle around all grids created-by makeGrid().  Dumb move, Wingy.  I should code a separate wrapInRect(anyControl) method.  Wiser.

Did you know I once PUSHED HARD to get HTML borders to be a separate element... thus making the padding and margins (measurings) of HTML boxModels... easier to cope-with?  HTML borders would then be a "layer" above normal HTML.  This over-layer would also be used for "annotations"... especially for teachers who do "grading" of electronic documents.  Teachers/graders could then easily circle things, draw arrows, write notes in margins, etc... things needed to "grade" a student e-paper.  None of that "teacher chicken-scratch" would be part of the actual, original HTML document.  They are on their own layer.

I proposed it YEARS ago, but I don't think anyone at the W3C cared what I said, or even read my proposal.  Kind of sad.

Although GUI Rectangles are also a 'generic container', they seem to be used MOST... as border-making devices.  WHAT IF... we had a "borderControl" that was NOT a container?  It could, instead... "overlay" ANY control... and thus easily turn on/off... no measurement affects on any children... and OH what a sweet feature for playground-based tutorials.  It's background could also be semi-transparent and used as a control highlighter/selector/flasher.  (like a cursor to move-around 'cell focus' within a grid of controls).

But, you know Wingnut... more dream than horse-sense.  Perhaps some demented experimenter... would like to TRY the "overlayedBorderControl" someday... see if it is useful.  It would be put onto another control... like control.borderManager = new BABYLON.GUI.Control.overlayedBorder().  :) Something like that.  During its rendering... it gets its need measurements... from the control(s) that it is border-managing.  Weird idea, huh?  *nod*.

What's that you say?  You want some animation on #32?  Ok, here we go

Share this post


Link to post
Share on other sites

Hi gang.  Sometimes I get confused by simple/odd things.  Here is such:

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

Just a simple playground, making a box's corner... aim directly at the camera.

An average idiot like myself... would say... "Hey, two 45-degree rotations, and we're done."

Yet, look at line 28:  Math.PI/5.1 ?

I think @JohnK tried to explain this to me, one time.  I didn't understand.  I still don't.  This just makes no sense to me.

Using .rotation or .rotate()... same results... weirdness.  Am I going insane?  I bet so.  Comments welcome - thx.

Share this post


Link to post
Share on other sites
9 hours ago, Wingnut said:

I think @JohnK tried to explain this to me, one time.  I didn't understand.  I still don't.  This just makes no sense to me.

Here is an explanation which I know was not me originally. This is because if I had I would remember and I pride myself on my memory. Why I can tell you all sorts of things about my childhood and teenage years. Only the other day I was saying to, emm thingy, you know he used to .... Well I am sure you do not want to know about that and I had something important to tell you. It couldn't have been that important or I would have remembered what it was. Bye for now, good chatting.

Share this post


Link to post
Share on other sites

Though I would give you an explanation.

Here is your box with a diagonal plane added.

wn1.jpg.0c4cf87aa5dc6ec7ba082fc6b5417d18.jpg

Note that the plane is a rectangle as one side lies along the edge of the box (size 10) and the other side is a diagonal of a face of the box (size 10 * sqrt(2) approx = 14.14)

wn4.jpg.f2b0fd41415342ae72d111669779df93.jpg

After rotation of PI/4 about the x axis the plane is horizontal.

wn2.jpg.b8c49c45f7ef51ec3ca0f29cfc6a07de.jpg

Now you want to rotate the box about the Y axis so that the corner of the plane indicated by the yellow arrow is on the Z axis pointed to by the red arrow.

wn3.jpg.71e1a557c79b5d4a46ddb629dcfbdf60.jpg

Looking down on the plane

wn5.jpg.2f93dad7b0d0d73ad9203e4aed885694.jpg

The yellow corner needs to be rotated about the Y axis through the angle marked in white. Since this angle is in a rectangle it cannot be PI/4.

Good old trigonometry gives the angle as atan(5/(5 * sqrt(2) ) approx = 0.615479708670387

When you want it in the form PI/a then a = PI/0.615479708670387 = 5.10429931211954 = 5.1 to 1 dec place.

So for the second rotation you need

box.rotate(BABYLON.Axis.Y, Math.PI/5.10429931211954, BABYLON.Space.WORLD);

or in approximation

box.rotate(BABYLON.Axis.Y, Math.PI/5.1, BABYLON.Space.WORLD);

Here is a PG https://www.babylonjs-playground.com/#M3AQS#3

You can take out the comments to see the effects and the animation.

Mmmmm keep thinking I was going to tell you something earlier - couldn't have been important.

image.png

Share this post


Link to post
Share on other sites

Thanks, @JohnK  Yep, that makes sense.  Excellent illustrations and explanations (hugs).  I don't think my Voxel School professor covered this AT ALL.  :)

Seeing that 14.14 PI-like number... that is fascinating, too.  Cool.  I bet that didn't happen by-accident.  There's some mathemagic in that value, too.

You're just THE BEST, JK!  Now HOW do I keep from forgetting this?  I'm thinkin'... tattoos.  :)

I put the URL to your great post... inside the #4 PG, and bookmarked it into my PG bookmarks folder... as "Why 5.1?"  :) That MIGHT work.

Share this post


Link to post
Share on other sites

“If you can't explain it simply, you don't understand it well enough.”

                                                                                                     —Albert Einstein.

@JohnK You do!!!

Share this post


Link to post
Share on other sites

https://www.babylonjs-playground.com/#1AVEYO#49

(yawn)  I'm mean... YAY!  errr...  I dunno.  Things sure are bumpy at 242.  :D

I tried to position the wiggly flag... behind the camera, and use reflection probes to put the wiggly flag reflection in the textMesh... but... I bailed.  Too lazy today.  :)

https://www.babylonjs-playground.com/#XWVXN9#61

The wiggly ground needs to be a cubeMap or something, I dunno, scary.  :)  Just pretend there's a reflection of a waving flag in the text.  heh

Share this post


Link to post
Share on other sites

Sorry Arte, and thx for being a supporter of my concern, recently.  I took a stance on something I believe-in, and it blew up in my face.  A fruitless effort on my part.  It makes me sad.  Sometimes I don't understand some things.

I hope you're doin' ok.  :)

Share this post


Link to post
Share on other sites

Wingnut, there are worse things in life than a lack of tact or a short sentence on the part of people. Spend another more important thing rather than resume driving people to write in the right ways. No one was insulting, no one died, everyone should survive. Keep your spirits up, do not hurt yourself for that. 

Share this post


Link to post
Share on other sites

*nod*  You are right.  Thx.  Other emotions could be affecting me.  The nation I am part-of... is not being very nice to others, right now.  Not sure.

I don't bitch about things I perceive as unkind... very often.  But the first reply (to a new user) is rather important... to me, to the new user, to the image of the forum.

I cannot assume or expect that the first reply is similarly important for other forum helpers.  I can only hope.

Share this post


Link to post
Share on other sites

 

8 hours ago, Wingnut said:

I hope you're doin' ok.  :)

I'm fine, thank you for asking. :)

8 hours ago, Dad72 said:

Keep your spirits up, do not hurt yourself for that.

I agree 100% 👍

 

All our life consists of a little basic things. But first reply to a new user is like "a good reception area in hotel". This is just my opinion.

Guys we are here to help each other, but not to fight. ;)

Share this post


Link to post
Share on other sites
10 hours ago, Wingnut said:

But the first reply (to a new user) is rather important... to me, to the new user, to the image of the forum.

Yes, I agree with that. I did not even watch it was a first post from the user. I do not pay attention to that, the number of post of users does not interest me necessarily. But you have reasons, the first users must be welcomed so that he feels the urge to return. After I do not think I said something unpleasant, I was just direct, tactless as you say, but hey, me and the tact it is two, I'm not always very comfortable in communication with Others, but I never think of evil, just direct, because I do not like to beat around the bush.

Have a good day.

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.