Adv. Dynamic Texture Sizing

Questions
1

Hi all,

New to babylon.js and right now trying to create a menu using Advance Dynamic Texture (using createFromMesh). My objective would be to have a sort of grid like layout that I can easily interchange the buttons or any input inside.

Currently did it by adding in a grid inside the texture that will hold the buttons. It shows the buttons and all BUT I can’t seem to resize the width of the texture or plane at all. Would like to make it a bit more larger. Tried increasing the button size also but the containers doesn’t adapt to it.

Here’s the playground:
https://www.babylonjs-playground.com/#XCPP9Y#1213

I don’t know what I’m missing or if I’m doing this correctly. Any help would be appreciated!

Many Thanks!

2

Hi PD, welcome to the BabylonJS forum.

https://www.babylonjs-playground.com/#CFL148

In THAT playground, I didn’t adjust many things… I just removed button width/height settings (42/43), and added a height on the GRID control (17). I am letting the grid-cell sizes… “naturally” (and automatically) adjust button widths and heights.

Now for something more challenging…

https://www.babylonjs-playground.com/#CFL148#2

In that PG, I’m doing more adjustments - learning and testing WITH you. :slight_smile:

  • Here, setting 3 by 3 grid… so I added some row definitions. Preparing for 9-button panel.
  • I removed button sizes (lines 43-44). Better to let the grid cells define button size.
  • I changed createBtn from function createBtn() {} to var createBtn = function() {}
    – (That might be called de-anonymous-ing the function, or something like that… not sure.)
  • I moved that function upward… so it is declared BEFORE the 9 createBtn calls.
  • I removed the grid.height again, and let the natural size of the plane… be the width/height boss.

Notice line 53… strange colIndex-1 and rowIndex-1… needed to prepare-for a “modulo” (check for remainder after math division)… in line 58. Essentially, line 58 section checks if it is time to go to next row (and back-to first column).

Generally, I think the problem you HAD… was because you set a width/height on buttons. When using grids, probably best-practice to use grid’s row/column definitions, and grid width/height (and plane width/height) to adjust button sizes.

If you need a little gap between buttons… https://www.babylonjs-playground.com/#CFL148#3 (see lines 46-49 and adjust at-will.)

Ok, maybe something I have done here, will help. I hope so. Ask more things, if wanted, and/or wait for more/better comments. Or, mark as solved if you are rolling, now. It takes a little time to become pro at BJS GUI… but not too long… and kind-of fun, while learning. It is a VERY powerful system, but… it works differently than HTML GUI/forms-controls… so it needs different thinking.

You are doing quite well. Maybe later, you will want to use FULL-screen GUI, but then use GUI “tracking” to link the grid… to the mesh. This will place the grid directly “over” the sphere, and then you can use linkOffsetY to raise-up the grid until it sits “above” the sphere.

When using fullscreen and linkWithMesh, you don’t need any planes, so you WILL want to set a grid width and height… or else the grid will be HUGE. :slight_smile: Have fun experimenting… we’re here to help-out.

1 Like
3

More fun… pointer event handling…

https://www.babylonjs-playground.com/#CFL148#6

(I wonder if that border-flicker when camera pan, is normal. I should know… I’ve been here forever.)

Anyway, I added the name that is sent to createBtn()… to the button.name property. (line 76)

Lines 95-98… added a onPointerDownObservable to each button. No matter which button was pressed, anyButtonPressed() is called.

Lots of people label thing1 and thing2… as ‘d’ and ‘s’… two objects that arrive in observables… sent by the BJS observer system. Both objects have various good properties on them. We most-want thing2.currentTarget.name. Let’s look WHY…

Lines 39-71… there’s our pointer-down event handler for ALL buttons. Look how we use thing2.currentTarget.name… for LOTS of things… like knowing WHICH button was pressed. Pretty easy.

Remember that btn.thickness can be used to set fatter borders on your rectangles, or NO border.

Also, there is a CreateSimpleButton() that is useful… sort of a text button that is already in a rectangle (it has a .thickness setting available)… and it has “animations” already set on it. The 4 current animations set-by-default on simpleButtons…

  1. Down-scale the button slightly when clicked.
  2. Return to full-scale when click is released.
  3. Make button slightly transparent when mouse-over.
  4. Return to no-transparency when mouse-out.

BECAUSE you are sort-of making your own simpleButtons from rectangles and textBlocks… I think you have NONE of those animations available. Only “button controls” have those animations. You… are essentially making labels, not buttons. The difference between a clickable label… and a button… not very much.

Animation examples: Button goes red-background on pointer down, back to green on pointer up. Maybe .thickness increases a little when mouse-over, and goes back to normal when mouse-out. I think you can even change the pointer to a “finger pointer”… when moused-over, and back to standard pointer when moused-out.

Aww heck, let’s try it:

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

Line 75 - I’m using the handy CreateSimpleButton() method, but you could use JUST a new Button, too. I set name as both the name of the button, and the text of its label.

Line 88, there’s our 4 handy button-animations… customized to non-default… for full hacking power. I defined them to do what I mentioned earlier… playing with border thickness and background colors.

We’re using the same click-handler system as last-time… watch console as buttons are clicked. Things are looking pretty good, huh? Fun with BJS GUI.

The Button class is nice. Simple buttons can be used as bordered un-clickable LABELS too, because you can set btn.isHitTestVisible = false. After that, the button ignores all mouse pointer stuff (ups, downs, overs, outs, clicks). Handy, huh? Great way to disable/enable click-ability of any button.

Party on!

1 Like
4

Hi @Wingnut !

First of all, thanks for the multiple examples and explanations!

Okay, I think that clears up most of the questions I had w/ the layout and stuff (even up to the button animation and click events).

I don’t think I can use the linkWithMesh as fullscreen doesn’t work on WebVR? Anyway, I’ll play around w/ the CreateSimpleButton and others you’ve mentioned a bit more and see what works for me.

Thanks again!

1 Like
5

:slight_smile: Sometimes, GUI button panels just CAN’T handle the power of a click… like here.

https://playground.babylonjs.com/#CFL148#11

Ahh, good fun!

3 Likes
6

I can’t stop. :slight_smile: https://playground.babylonjs.com/#CFL148#24

This one is broken. Years ago, I made some buttons that hung FROM each other… vertically, by hinges/chains. Two chains between each button/sign. See little diagram at 228 area, and all work is happening AFTER that point in the code. I am ONLY working with btn0 and btn3… trying to hook-up their two hinge-joints.

Lines:

  • 240-259 - joint creation
  • 267-268 - joint adding
  • 277+ Time-sequenced tests

Times:

  • 3 seconds - add mass to all buttons except 0 and 3. Cya down there, my friends.
  • 6 seconds - add mass to btn 3. It shouldn’t fall far… IF its chains to btn 0 are attached.
  • 9 seconds - chains attached or not, whack btn 3 from behind… with an impulse/bullet-hit.

I just cannot get my darned chains attached between btn 0 and btn 3. Does anyone see how/where I am screwing this up?

I HOPE hinge-attaching is allowed, when either/both shape have 0 mass. But maybe not. hmm.

Perhaps I should be adjusting scene.gravity instead of shape masses. Early tests show promise, but late-setting scene.gravity.y (line 283) is not being sent to physics world. Probably needs a setGravity().

I’m not going to ping anyone about this, because… this isn’t an “official” Q/A issue. It’s just Wingnut screwing-around off-topic in someone else’ solved thread. :slight_smile: (and also trying to rejuvenate the old buttons-on-chains demo and promote other physics usage with BJS GUI.)

Back in pre-historic computing days, they didn’t have mouse pointers, and would need to throw rocks/spears at GUI buttons… to click them. :smiley:

7

Yeah, it seems that if EITHER shape on the ends of a joint… goes to mass = 0, the joint/constraint de-activates. Here’s a PG where ALL buttons have mass = 1 but scene gravity is turned off… so they don’t fall.

https://playground.babylonjs.com/#CFL148#26

I attach joints, and at 4 seconds, I restore gravity (line 280). The joints are fine, though the buttons fall. If I activate line 281, to immediately STOP btn 0 from falling, j1 and j2 can’t maintain a hand-hold, and allow btn 3 to fall to its gruesome death. :slight_smile:

Does that mean … we never get to set a joint on a 0-mass shape (in ammo only?)? hmm. Then what will the chains hang-from? The top “hanging pole” needs to be 0 mass. Oh no.

Update: Yeah, same test in Cannon… WITH line 281 activated (de-massify btn0)… j1 and j2 maintain grip… after 4-secs gravity-return. Everything working fine. Ammo/Cannon “incongruity” found. (I just wanted to type that word.) :slight_smile:

I’m thinkin’… when using AmmoJS, we need to use ropeImpostors for the whole shebang. Here’s a barely-started test scene… pretty slow. The rope demo from-which I borrowed the code… runs faster, possibly because it has gravity activated.