Canvas2D, StackPanel, and alignment troubles

[jSnake04]

I'm trying to wrap my head around the Canvas2D functionality and StackPanel. I'm having trouble figuring out how the layouts work.

I modified a playground based on the stack panel example to use a vertical stack panel, but I can't seem to re-position it the way I want.

My goal is to get the entire stack panel to center horizontally, and move to the top of the viewport so that the children list downward from the top with the first child at the top (green rectangle).

http://babylonjs-playground.com/#CMZLC#17

Is the marginAlignment the wrong property to use altogether? I'm sure it is something simple that i'm doing wrong.

[webGLmmk]

1 hour ago, jSnake04 said:

I'm trying to wrap my head around the Canvas2D functionality and StackPanel. I'm having trouble figuring out how the layouts work.

I modified a playground based on the stack panel example to use a vertical stack panel, but I can't seem to re-position it the way I want.

My goal is to get the entire stack panel to center horizontally, and move to the top of the viewport so that the children list downward from the top with the first child at the top (green rectangle).

http://babylonjs-playground.com/#CMZLC#17

Is the marginAlignment the wrong property to use altogether? I'm sure it is something simple that i'm doing wrong.

 

I was looking at this myself, and I'm still trying to understand how this dat.GUI figures in...only place i can find where it came from is in this procedural textures library..    https://github.com/BabylonJS/Babylon.js/blob/125af00fbe0c80dc0b12f05af21afd484cc42b9a/proceduralTexturesLibrary/test/refs/dat.gui.min.js

Basically, the colored rectangles are produced using Canvas2D, but the stack panel is not, its using this other dat-gui library... (technical debt I think. Doesn't exist yet just using Canvas2D.? someone correct me if I'm wrong)

To adjust the stack, we'd have to understand that "dat" interface...and I'm not sure I want to.

Aware that's not overly helpful - clarifying the questions and the needs involved is always a good thing tho. These may be features that are still forthcoming

 

I can show you something I just put together...  http://www.babylonjs-playground.com/#LYEU3#8

You'll notice that within the lengthy "createButtonControls" function that comes after CreateScene,  I have a main group, with child groups, such as this:

	var grpLeft = new BABYLON.Group2D(
		{ 
			parent: grpMain, 
			id: "grpLeft", 
			size: new BABYLON.Size(75, 200),
			layoutEngine:"VerticalStackPanel"
		}
	);

This "subgroup" is in turn parent to rectangles that are vertically stacked thanks to "layoutEngine:"VerticalStackPanel"

I'm not sure what kind of GUI elements you need for whatever you are designing...but you can make things stack vertically this way. As far as centering, I'm still not sure myself how to get groups to center, with the marginAlignment...didn't have success with that....yet

 

[jSnake04]

@webGLmmk

Thanks for the reply.

I'm not sure where the "dat.GUI" stuff is coming from, but it is using straight HTML elements to manipulate the properties of the canvas2d objects. 

I commented out the GUI stuff, it just creates the little control panel on the side.

http://babylonjs-playground.com/#CMZLC#19

The stack panel seems to be working, I just need to figure out how to move things around properly and all the demo playgrounds have things absolutely positioned from the bottom left corner of the screen. I assume there is an easy way to move it center-top with its children flowing downward.

I'm betting I am using it wrong. lol 

[jSnake04]

It Seems I can get a Text2D object to position at the top, but my rectangle won't go there with the same positioning properties

var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, { 
    id: "ScreenCanvas",
    backgroundFill: "#C0C0C040",
    backgroundRoundRadius: 50,
    children: [
        new BABYLON.Text2D("Hello World!", {
            id: "text",
            marginAlignment: "h: center, v:top",
            marginTop: 10,
            fontName: "20pt Impact",
        }),
        new BABYLON.Rectangle2D({ 
            id: "frame", 
            fill: '#000000FF', 
            marginAligment: 'h: center, v: top',
            marginTop: 10,
            children: [
                new BABYLON.Group2D({
                    id: "group",
                    layoutEngine: "VerticalStackPanel",
                    children: [
                            new BABYLON.Rectangle2D({ id: "rect1", width: 100, height: 100, fill: "#30D040FF", 
                                marginTop: 10 }),
                            new BABYLON.Rectangle2D({ id: "rect2", width: 100, height: 100, fill: "#D04040FF", 
                                marginTop: 10 }),
                            new BABYLON.Rectangle2D({ id: "rect3", width: 100, height: 100, fill: "#4040D0FF", 
                                marginTop: 10 }),
                    ]
                }),
                new BABYLON.Text2D("Hello World!", {
                    id: "text",
                    marginAlignment: "h: center, v:top",
                    fontName: "20pt Impact",
                })
            ]
        })
    ]
});

http://babylonjs-playground.com/#CMZLC#20

[Nockawa]

guys, I take a look asap, but I can't right now, hopefully tonight.

[jSnake04]

Hi @Nockawa , I figured out a bit of a workaround--not ideal, but it seems to work.

http://babylonjs-playground.com/#CMZLC#22

For some reason, if I add an extra rectangle2d as the parent of the rectangle2d containing the stackpanel then the marginAlignment property starts working

I have to also manually calculate its height with the total height of the stackpanel's children, then reverse the order of the stackpanel items, then I can get what I'm trying to achieve.

Seems like this would be a pretty common use case, maybe there would be an easy way to integrate this into the canvas positioning/alignment system to make it a bit more intuitive?

Anyway, I've been following your posts about the gui controls library that you are building on top of canvas2d, I was wondering if there is a repository on github or something for the current development in progress? I might be able to help out with it if so. I've kind of already started the same concept with a few simple control types, but I don't want to go all out with it if you are coding that same wheel. I suppose the worst case scenario would be to decline my pull requests. lol. You won't hurt my feelings if so. . Even if I can just help out with the documentation to free up some of your time.

I'm pretty new to the game development world, but I have been working on business type web applications for quite some time now. I think I could help out, but I'm pretty new to OpenGL/WebGL still.

 

[Nockawa]

@jSnake04 let me summarize what you want to achieve: you want a vertical StackPanel which is centered horizontally and aligned to the top border of the canvas, then having a list of children rect, displayed from the top to the bottom.

I think this Layout Engine doesn't work with alignment, this is not a surprise for me, because, well, you're the first to do that, and things never work the first time... Somehow I think the size takes all the space and the alignment become irrelevant.

One thing I shouldn't be able to fix though is the order: you said you'd like the first child to be on the top, unfortunately (and believe me, I've tried countless hours), WebGL reference of Frame is bottom/left corner, so everything is relative from the bottom. But well, I think it's not the biggest issue for you, right?

I'll create a repro locally and debug to fix the issue, I'll start right away but I'm not sure to be able to finish tonight and I have a busy day tomorrow.

[Nockawa]

4 minutes ago, jSnake04 said:

Hi @Nockawa , I figured out a bit of a workaround--not ideal, but it seems to work.

http://babylonjs-playground.com/#CMZLC#22

For some reason, if I add an extra rectangle2d as the parent of the rectangle2d containing the stackpanel then the marginAlignment property starts working

I have to also manually calculate its height with the total height of the stackpanel's children, then reverse the order of the stackpanel items, then I can get what I'm trying to achieve.

Seems like this would be a pretty common use case, maybe there would be an easy way to integrate this into the canvas positioning/alignment system to make it a bit more intuitive?

Anyway, I've been following your posts about the gui controls library that you are building on top of canvas2d, I was wondering if there is a repository on github or something for the current development in progress? I might be able to help out with it if so. I've kind of already started the same concept with a few simple control types, but I don't want to go all out with it if you are coding that same wheel. I suppose the worst case scenario would be to decline my pull requests. lol. You won't hurt my feelings if so. . Even if I can just help out with the documentation to free up some of your time.

I'm pretty new to the game development world, but I have been working on business type web applications for quite some time now. I think I could help out, but I'm pretty new to OpenGL/WebGL still.

 

It's definitely a bug, and I'm definitely going to fix it, don't worry!

Concerning the GUI, as of today, I only have things locally, I know i'm kind of crazy, but I trust my SSD. I should commit/sync to my git repo more often, but I wait to have something structured correctly to do it.

Today I've worked on integrating unit test with Jasmine and Chutzpah because I think feature such as Data Binding would typically benefit from this. I think I'll do a commit as soon as I have the structure right.

Concerning contributions, I'd love to have more people on-board, if you're willing to help we can have a chat by IM about it and figure what the best things to do.

[jSnake04]

@Nockawa Sounds good,

I can always sort the children on my end. I might dig in to canvas2d and play around a bit, even if just to get more familiar with the internals.

I've lost a lot of good stuff over the years, and still haven't learned my lesson either. lol.

I don't think I've ever worked for a company that actually did proper automated unit tests, but I do feel it is worth it. Definitely lots of pros to it with a small upfront dev time con that pays off in the long term.

[Nockawa]

Hey, some updates: I'm almost there, I've fixed the bug, but I tried to push the feature further, for instance I want the Group2D alignment to be Stretch on horiz and set some rectangle also in Stretch and have the expected result.

This use case is way more complicated than it sounds but I almost have it. Once it's done I really have to check all the tests again to make sure there's no regression.

[Nockawa]

@jSnake04 ok, I believe the bug is fixed, DK will update the PG soon I'll let you know.

[webGLmmk]

On 9/24/2016 at 4:04 AM, Nockawa said:

Hey, some updates: I'm almost there, I've fixed the bug, but I tried to push the feature further, for instance I want the Group2D alignment to be Stretch on horiz and set some rectangle also in Stretch and have the expected result.

This use case is way more complicated than it sounds but I almost have it. Once it's done I really have to check all the tests again to make sure there's no regression.

Ok i was just about to post when I found this topic... @Nockawa

I'm having trouble making sense of what the margins are doing between these Canvas2D buttons.

http://www.babylonjs-playground.com/#LYEU3#15

Right now I'm trying to vertically space the buttons in grpCenter: U,F,B,D  to have a margin of 5 in between, so they're closer. Cam-U and Cam-D i want a bit further away from the center buttons

I set marginTop: 5 on F,B, & D.  But its putting about 10 in between, if I were to change it to 1 or 2, it still looks like its about 10, like they're all being stretched out or something

**edit**

ok so its a little better and I'm not sure how. It changed when I adjusted the downCamButton button margins.

http://www.babylonjs-playground.com/#LYEU3#16

Now I can't seem to increase the top margin though, and if i put a buttom margin on downButton, it pushes it up into one above it.

Anyway I'm going to settle for what I have...thought I would throw this out there because it's a little tough to lay things out #wip

[Nockawa]

@webGLmmk can you study this PG http://babylonjs-playground.com/#CMZLC#23 and tell me if you can solve your issue the same way?

btw, I've just noticed that if you change the height of a rect it should trigger a recomputation of the StackPanel engine...one more bug to solve...