Having trouble with GUI Progress Bar (CastorGUI)

Questions
1

Hello,

Im trying to reproduce a progress bar with the CastorGUI using my canvas but its not linking properly.

The progressbar is showing after the canvas is loaded with the mesh. With value = 0.

Is the progressbar attached to the scene or the canvas itself?

	let canvas = document.getElementById('canvas');
	var engine = new BABYLON.Engine(canvas, true,{ preserveDrawingBuffer: true, stencil: true });
	
	var guimanager = new GUIManager(canvas);
	var guiprogress = new GUIProgress(1, {w:40,h:20,x:300, y:300}, guimanager);

babylon1
babylon1.png1313×741 85.1 KB

Thanks in advance

2

Pinging @Dad72 who is the mastermind behind CastorGUI

3

It is attached to the canvas as if you were using html5. CastorGUI is HTML5 on top of the canvas.

To change the value of the bar, you must use:
guiprogress.updateValue(value);

you must create your own function to change this value.

To get the value current you can use:
guiprogress.getValue();

You can alos use BabylonGUI which is attached to the scene 3D Babylon. But BabylonGUI does not have a progress bar yet. Maybe one is planned soon. @Deltakosh

1 Like
4

We do have the slider that can be used to reproduce a progress bar
https://www.babylonjs-playground.com/#HATGQZ

2 Likes
5

flexbox helped us with hybrid 2D+3D, substantially. We are not superfans of display:flex- just trying it out.

Like CastorGUI our hybrid overlay (2DTXT) was prior to BJS.GUI and flexbox. TIP: We migrated to flexbox, and it helped massively with custom-control-layouts. We have to write a shim to fix the heights in vertical scrolling (today).

FINDING: flexbox layouts are nice for spacing things evenly. It results in good cross-browser professional looking layouts. No weird anomalies on infinite edge-cases. As still exist in flexbox. For example in overlays and scroll height. Two edge-cases left open. Not often mentioned - but flexbox doesnt play with z-index. Probably because it opens a predictable → infinite edge-case. Related, we found flexbox to have height confusion in flexbox overflow scroll layouts. Both fixed with a shim on resize.

Hope that helps someone, someday, somewhere, somehow. : )

1 Like