Help Recover My GUI After Canvas Resize... plus MORE!

Questions
1

Hi Guys/Gals!

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

There’s my “flow chart” again, based-upon some questions that a forum friend once asked.

I removed ALL hard-coded ‘px’ from it, and instead, have tried to use percentages and/or derived line positions.

Notice that, if you (1) drag the PG vertical divider, or (2) drag the horizontal divider atop your F12 dev-tools panel, or (3) ‘restore’ the browser window (drag-sized smaller than full screen)… my diagram lines become ‘wonky’ and disconnected. Press RUN again, and they are fixed.

Can someone help me “wire-up” an onResizeObserver that… you know… fixes my lines automatically, after condition 1, 2, or 3? Thx for any help with that!

On a related topic, I am pondering a GUI-based “diagram generator/tool”… possibly related to our world famous Playground-Based Tutorials (PBT’s). We have all seen some playgrounds ‘within’ forum-posts… iframed-in.

  • Sometimes… I could use a quick diagram to help me answer a forum question.

  • Sometimes… a PBT could use the help of a GUI diagram or flow-chart.

  • Sometimes, our docs could use some dynamically-generated diagrams.

AND… dynamically-generated diagrams… CAN be self-updating or “live”, because the diagrams can be ‘derived’ from whatever version of BJS… is currently executing the diagram-generator. (resource-discovery)

So… Wingnut wants to get rectangled textBlocks, and lines to connect them… working SWEET and EASY. Chart Layout Manager, version -1.0 :smiley: Ideally, we can set it for 2D gui, or 3D gui. :open_mouth:

In lines-drawing ops, lots of things are done after scene.onReady (or at least after first GUI render)… so all line x1, y1, and x2, y2… can ‘query’ for the center or edge of a connected control/button. Currently, lines do this…

realline1.connectedControl = realFac1Rect;

I hope SOMEDAY, to allow it to be connectedControlS (an array) or at least… allow connectedControl2. I would really like this diagram generator… to leave-behind the x1/y1/x2/y2 crap. (Do that stuff internally, behind the scenes).

It would be nice if the diagram generator… could be programmed at low-level, or with a high-level “talkie” language (like SQL?)

Anyway, I’ll gladly welcome all ideas, proof of concepts, and early mock-ups/test-beds… regarding an easy-to-use flow-chart/diagram generator system. Thank you for ANY help/tests that you can contribute! Party on!

PS: Enabling “drilling” of a “branch” of a chart (collapse/uncollapse)… wins extra credit. :slight_smile: I think ADT would have a conniption fit, doing the resizing and scale-to-fit, though. ADT’s would likely need overflow/scrollbars. (erf) Perhaps possible using ADT rootContainer .top and .left, if they exist. Font-size down-sizing when text containers are down-scaled… would be nice, too (perhaps already handled nicely by current ‘toFit’ features). Border thickness reduction when rectangle is down-scaled… would be sweet, as well.

1 Like
2

It looks like a cool project @Wingnut and as usual we can help around with issues discovered during the development

I wish I had more time :slight_smile:

1 Like
3

and about the resize, you ll get the idea from https://www.babylonjs-playground.com/#AMYR5C#12

2 Likes
4

nod, thx for the dev thoughts. Yeah, you got your plate full. We’ll pick up some wandering souls, if I troll with some delicious lures. The forum is a bit sleepy right now, but it will surge, soon.

I assume you meant #13 playground? (now up-to #14). I see the resize funcs. Interesting! THANK YOU!

It is a LITTLE grumpy in my Firefox, but… it works fine. Moreover, I learned things. Cooool. thx agn, bavs. :slight_smile:

(I hope you don’t dislike me for playing with your name) :confused:

5

np just use this name as it is most of the time not taken :slight_smile:

1 Like
6

They do. https://www.babylonjs-playground.com/#AMYR5C#16

I activated all 9 of the line resizers, so my lines would stay in a-line-ment during the sliding. Target1 GUI Ellipse ( a green dot at the corner of two lines )… is acting a bit strange, though.

The green border indicates the size and location of the adt _rootContainer.

I don’t think adt rootContainer left/top… will help us… for creating a custom overflow/scrollbars-enabled AdvancedDynamicTexture.

I think we would need a SUPER-sized ADT. :slight_smile: Such a thing… would seriously-affect working-with PERCENTAGE ValueAndUnits.

But, perhaps that is good. Any control with a .top or .left > 120% (approx)… would be initially positioned in the “dark lands” of the custom super-sized ADT surface area. Take a flashlight, if you go out there. :slight_smile: Also, all the alignment properties… would “act” completely different… with a 10x-oversized ADT. :open_mouth:

Maybe I need to study the new GUI ScrollViewer a bit more, eh? Big diagrams might work inside one of those… just fine.