Progress Bar Helper

Feature requests
1

Hello,

Here is an helper I made to do a progress bar some times ago: http://www.html5gamedevs.com/topic/40142-can-we-customize-the-look-of-babylonjsgui/?do=findComment&comment=235200 .

It is working a bit better than just a slider. It probably can be improved to used ninepath images. For now, I am using two rectangles, a container and a text block.

demo-progressbar.gif.a301269753f2ef32ff005083e89f104a.gif

You can find the code to run it just here: Babylon.js Playground

EDIT: I updated the link as it was not working for some reason.

3 Likes
2

Thanks a lot!

3

I mean, it still can be improved.
For instance, I don’t remember if in this version the feature is present, but one could add a “unit” to be shown after the text “100 / 150”. That would look like “100 / 150 words”. You may also allow for a prefix I guess.

4

I see you moved my post in Demos and Project, but it was a feature request. I would like to add my progress bar helper to BabylonJS GUI, so that we can make progress bars more easily.

5

Oh ok in this case you can make a PR directly :wink:

6

I thought the purpose of this new category was to discuss whether something was useful / cool, before to try open a PR. It is also the opportunity for people to discuss how to make a PR ^^ cause maybe some people don’t know how :wink:

For instance, you always prefer that members of the community start with reporting a bug in the forum instead of opening directly an issue on Github. I thought that this new category was going to do the same for PRs.

Anyway, could you move my feature request back to feature request? :smiley:

7

You are absolutely right:). Let me move you back

8

So … do you think this helper could be added to BabylonJS, and if not, what does it miss? what should be changed? if yes, where? how to start?

9

https://github.com/BabylonJS/Babylon.js/tree/master/gui

https://doc.babylonjs.com/how_to/how_to_start

10

Thank you :slight_smile:
I know how to use Git/Github, I am rather waiting for information on where to add my code in the source code, and whether my current implementation is ok or could be improved…

11

Should have worked that out as your PG is in Typescript :slightly_smiling_face:

By the way I think your progress bar makes a great contribution to the GUI.

The github link was an indication of the area to place the code, more precisely I would suggest as a new control within https://github.com/BabylonJS/Babylon.js/tree/master/gui/src/2D/controls

I would also suggest you submit a PR at this stage, when I have done so Deltakosh has often made suggestions for changes and improvements at that stage.

Anyway up to you if you prefer for a reply here.

12

Sounds great :slight_smile: I will do a PR asap then.

@Deltakosh by the way, what do you think of the option interface I am using :

interface ProgressBarOptions {
        showText?:boolean,
        fontSize?:number|string,
        fontFamily?:string,
        width?:number|string,
        height?:number|string,
        cornerRadiusProgressBar?:number,
        cornerRadiusBackgroundBar?:number,
        colorProgressBar?:string,
        colorBackgroundBar?:string,
        borderProgressBar?:number,
        borderBackgroundBar?:number,
        vAlignment?:number,
        hAlignment?:number,
        hMargin?:number,
        vMargin?:number
}

class ProgressBar {
...
        constructor(name:string, ... , options:ProgressBarOptions)
...
}

It is not perfect yet, but the idea is that you could store your styles in json files (or even in the .babylon file) and reuse them; I basically wrote such an interface for almost all the BABYLON.GUI controllers during my recent game project. If you think it could be integrated to BABYLON.GUI, let me know.

1 Like
13

I think it is a good addition. I just want to make sure it feels integrated. So the best idea to start the discussion is to do a PR and so we can discuss over the code itself

The interface looks good for me as long as all properties are also available on the ProgressBar itself