Having trouble with GUI Progress Bar (CastorGUI)

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);

Thanks in advance

Pinging @Dad72 who is the mastermind behind CastorGUI

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

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

2 Likes

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