solved GUI 2d shapes

[DylanD]

Hi everyone, I was wondering if I a image in Babylon's GUI could is there someway to slowly colour it?

Like a progress bar, where as the player completes something or as time goes on a bar goes form outlined in green to slowly being filled with green to filled with green.

Heres a playground I made with objects that illustrates what I want, however I'm hoping I could do this in the GUI and with just one object the slowly changes colour from one side to the other.

http://www.babylonjs-playground.com/#F84J26

Any ideas?

Thanks, have a good Day

[Pryme8]

As a gradient or solid, i was picturing solid but then you said “from one side to the other”? 

*looks at your pg*

Oh I got you, yeas that’s super easy.

make two GUI blocks one as your background color and then add a second rectangle inside it or on top of it does not matter.  Set your zindexs and then adjust the size/position off the top one as appropriate.

[Wingnut]

(Wingy playfully thwocks P8).  You know what is wanted.  A progress bar.  No gradients.  Leading edge/trailing edge moves one side to other.

Only Microsoft would use gradients on progress bars.    And they just animate side to side... to look cool.  It has nothing to do with the actual progress line.

Girls liked it, so they kept the effect on some Windows systems.... mostly the girly ones.  heh.

I think we can make a GUI progress meter... using GUI stuff.  I think there could be two "ways".  First, by making an "official" progress meter which is a single GUI control and has a proper-working getValue, setValue, and onValueChangeObservable. 

The other... a "back-alley" dirty mix-breed thing... made from assorted controls glued'n'screwed together, and needing custom jury-rigged getValue, setValue, and observers.

I heard that @Deltakosh, primary author of the BJS GUI system... was a little bored lately, so perhaps he wants to make an official one FOR US.    I think he really likes writing new controls.  That's what I heard.

I suspect that it is a slider control... without a slider block... and without onPointerDown/Move Observerables.  Slider controls have/can-have a different color on each side of the slider button/block... so that's already coded.  So if you can make the slider-button invisible or micro-narrow... you should have a working progress bar... using it's setValue.

[Wingnut]

https://www.babylonjs-playground.com/#FK4J1H#2

Kicked its butt.  heh.

[brianzinn]

I do realize you said 2D, but here is a 3D that I was working on:
https://www.babylonjs-playground.com/#AVXVIQ#2
Would be easy to make appear 2D just flatten out what's there.  The interesting part of the code and what would fix your PG is here:

let pivotMatrix = BABYLON.Matrix.Translation(progressBarLength, 0, 0);
colouredProgressBar.setPivotMatrix(pivotMatrix);
let preTransformMatrix = BABYLON.Matrix.Translation(progressBarLength / 2, 0, 0);
colouredProgressBar.setPreTransformMatrix(preTransformMatrix);

Here is your 2D playground perhaps more what you're after in 2D (scaling.x = % complete):
http://www.babylonjs-playground.com/#F84J26#1

[Pryme8]

12 minutes ago, brianzinn said:

I do realize you said 2D, but here is a 3D that I was working on:
https://www.babylonjs-playground.com/#AVXVIQ#2
Would be easy to make appear 2D just flatten out what's there.  The interesting part of the code and what would fix your PG is here:

let pivotMatrix = BABYLON.Matrix.Translation(progressBarLength, 0, 0);
colouredProgressBar.setPivotMatrix(pivotMatrix);
let preTransformMatrix = BABYLON.Matrix.Translation(progressBarLength / 2, 0, 0);
colouredProgressBar.setPreTransformMatrix(preTransformMatrix);

Here is your 2D playground perhaps more what you're after in 2D (scaling.x = % complete):
http://www.babylonjs-playground.com/#F84J26#1

ground2.renderingGroupId = 1; is needed.
http://www.babylonjs-playground.com/#F84J26#2

[Sebavan]

In case you do not want separate render group you could also rely on zOffset which has been added to prevent z-fighting: 

http://www.babylonjs-playground.com/#F84J26#4

[DylanD]

Wow, thanks everyone for a lot of great responses!

I'm going to be trying these out, except I'm going to try and do it with circles, and make a circle progress "bar".  

I will return.

Thanks again!

[DylanD]

16 hours ago, Wingnut said:

(Wingy playfully thwocks P8).  You know what is wanted.  A progress bar.  No gradients.  Leading edge/trailing edge moves one side to other.

Only Microsoft would use gradients on progress bars.    And they just animate side to side... to look cool.  It has nothing to do with the actual progress line.

Girls liked it, so they kept the effect on some Windows systems.... mostly the girly ones.  heh.

I think we can make a GUI progress meter... using GUI stuff.  I think there could be two "ways".  First, by making an "official" progress meter which is a single GUI control and has a proper-working getValue, setValue, and onValueChangeObservable. 

The other... a "back-alley" dirty mix-breed thing... made from assorted controls glued'n'screwed together, and needing custom jury-rigged getValue, setValue, and observers.

I heard that @Deltakosh, primary author of the BJS GUI system... was a little bored lately, so perhaps he wants to make an official one FOR US.    I think he really likes writing new controls.  That's what I heard.

I suspect that it is a slider control... without a slider block... and without onPointerDown/Move Observerables.  Slider controls have/can-have a different color on each side of the slider button/block... so that's already coded.  So if you can make the slider-button invisible or micro-narrow... you should have a working progress bar... using it's setValue.

Could he also add some way to bend the slider, so, it could resemble a circle cause that would be really cool.

[DylanD]

I am trying to make a circle with multi line that slowly goes from 0,y to 0,y.  Not sure what I'm doing wrong but I think this should work, heres my playground.

https://www.babylonjs-playground.com/#XCPP9Y#553

So I have a gui ellipse and them I have some points to make a square which I will smooth out later to be a circle, but I can't seem to get the multiline Gui feature to add specific points, any idea what I'm doing wrong?

[DylanD]

so I figured out you need to label each x and y, but I want to be able to do math with them.  I guess I could do int to string conversion but if someone had a better idea that would be great!

https://www.babylonjs-playground.com/#XCPP9Y#554

Any ideas?

[Wingnut]

Oh, all of a sudden, Dylan goes demented. 

18 hours ago, DylanD said:

slowly changes colour from one side to the other

Now it's... "slowly changes color from one radian of the circle... to the other." 

I'm just having some fun with you, Dylan.

A few of us have done SOME work... on a new thing we call a meterControl.

https://www.babylonjs-playground.com/#91I2RE#81

@adam is the hands-off lead programmer on that, because he created the colorPicker GUI control... and I "hacked" his colorpicker source... to start the meterControl project/testing.

Aside:  You can "dig" pure JS for use in playgrounds... here:  https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/dist/babylon.max.js

Most of it is way over my head, but... I dive-in anyway... cuz that's how a person eventually becomes a fine GUI control-maker.

I really like YOUR spirit and bravery, Dylan.  You're not scared at all to use the currently available widgets... to assemble what you need/want.  THAT... is cool.  Lines and ellipses... genius inventing!

Anyway, I don't have any advice, but I thought I would show you where the meterControl project is at... let you stare at its code and drool, like I do.

A red circle/arc COULD be drawn atop the blue circle... with red-arc stopping point based-upon control.value setting.   (disable line 429 to stop the GUI control.rotation stuff.)

This is about as-close-to a bent slider control... as we currently have, I think.  So there is another idea... but probably not "an inviting idea".   

The entire #91I2RE series of playgrounds... has various meterControl tests/experiments.  It once was an "ipod controller"...  https://www.babylonjs-playground.com/#91I2RE#65  and then it became something else... https://www.babylonjs-playground.com/#91I2RE#55 and then became something else... https://www.babylonjs-playground.com/#91I2RE#84

Piles of various demented experiments.    A special thanks to @JohnK for the graduation-marks/hash-marks drawing funcs... they totally rock.

[DylanD]

10 minutes ago, Wingnut said:

Oh, all of a sudden, Dylan goes demented. 

Now it's... "slowly changes color from one radian of the circle... to the other." 

I'm just having some fun with you, Dylan.

A few of us have done SOME work... on a new thing we call a meterControl.

https://www.babylonjs-playground.com/#91I2RE#81

@adam is the hands-off lead programmer on that, because he created the colorPicker GUI control... and I "hacked" his colorpicker source... to start the meterControl project/testing.

Most of it is way over my head, but... I dive-in anyway... cuz that's how a person eventually becomes a fine GUI control-maker.

I really like YOUR spirit and bravery, Dylan.  You're not scared at all to use the currently available widgets... to assemble what you need/want.  THAT... is cool.  Lines and ellipses... genius inventing!

Anyway, I don't have any advice, but I thought I would show you where the meterControl project is at... let you stare at its code and drool, like I do.

A red circle/arc COULD be drawn atop the blue circle... with red-arc stopping point based-upon control.value setting.   (disable line 429 to stop the GUI control.rotation stuff.)

This is about as-close-to a bent slider control... as we currently have, I think.  So there is another idea... but probably not "an inviting idea". 

Hahaha yea no worries.  I enjoy using Babylon what can I say.

Well yea thats just how I learned to code I guess, if its not there and I want it I'm going to try to build it once I can grasp the smaller pieces need to put it all together.

Well if I make that playground an extra class(in typescript) I might be able to do it in my code, il try some stuff out.

Thanks!

[DylanD]

@Wingnut how would I go about looking through all of them.. I mean how would I navigate to new ones? playground search the #91I2RE series or maybe just keep adding to the number on the end.

[Wingnut]

hehe.  Good question.  I suggested adding + and - button in the playground... about two years ago... but nobody agreed that it was wanted, so I dropped the idea.

I don't think there is anything you are missing, though.  I think I have showed you the "best of".

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/colorpicker.ts

There's Adam's colorPicker TS source.  Really, you can strip it down until you ONLY have the ring drawer.  Then you would make ANOTHER (red) ring-drawer... but IT only draws partial circles... arcs... whose stopping point is based upon control.value.  Then, start feeding varying values to control.value, and see if you can re-draw the red arc-circle for every onValueChange... making it "live" and reactive.

Maybe a helper note:  The 0/6.28 radians point on the colorpicker circle... faces to the right (compass east).  ie. The "origin" of the circle... is on the right.  SO, maybe, a control.rotation or in-code adjustement is a wise first step... to make the circle's origin == compass north.  Or perhaps, make the circle's origin be the 0-value point of your red arc (the 0 mph "peg" on most speedometers... is lower left)

Actually, you could teach the BLUE RING drawing function... to draw in red color... for PART of its circle, and then you wouldn't need a 2nd ring-drawer.  Just make the current one... smarter.

*shrug*

[DylanD]

28 minutes ago, Wingnut said:

hehe.  Good question.  I suggested adding + and - button in the playground... about two years ago... but nobody agreed that it was wanted, so I dropped the idea.

I don't think there is anything you are missing, though.  I think I have showed you the "best of".

https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/colorpicker.ts

There's Adam's colorPicker TS source.  Really, you can strip it down until you ONLY have the ring drawer.  Then you would make ANOTHER (red) ring-drawer... but IT only draws partial circles... arcs... whose stopping point is based upon control.value.  Then, start feeding varying values to control.value, and see if you can re-draw the red arc-circle for every onValueChange... making it "live" and reactive.

Maybe a helper note:  The 0/6.28 radians point on the colorpicker circle... faces to the right (compass east).  ie. The "origin" of the circle... is on the right.  SO, maybe, a control.rotation or in-code adjustement is a wise first step... to make the circle's origin == compass north.  Or perhaps, make the circle's origin be the 0-value point of your red arc (the 0 mph "peg" on most speedometers... is lower left)

Actually, you could teach the BLUE RING drawing function... to draw in red color... for PART of its circle, and then you wouldn't need a 2nd ring-drawer.  Just make the current one... smarter.

*shrug*

Alright um yea I have no clue how to change the blue ring mid function... but I did figure out some better stuff but I am stuck again.

this is what I have:

https://www.babylonjs-playground.com/#91I2RE#85

Problems:

 I don't think I'm supposed to touch "._" things like one lines :(71,83,251,252) but I don't know how else to make those variables.

Also I don't know how to make it update every time a value changes. Except for just at the start of the render loop and not each loop? Even so thats with the if value update part of the code line 254, I think that should be intrinsic to the ring... if that makes sense haha

https://www.babylonjs-playground.com/#91I2RE#86

Any ideas on how to make this better? 

[DylanD]

Also how am I going to turn this all into typescript to add to my code.  Sure it works in the playground but I'm way not good enough with this stuff yet to turn it into typescript.  Any ideas on how I could get around that, maybe add it to my current Babylon.js file, except that sounds like it could screw a lot up.

 

[Wingnut]

Wow, fast!  It took me a week to do what you just did in 10 minutes.  Nice.  To be frank, I don't know how to make it "live"... except... lines 38/39...

this._value = value;
this._markAsDirty();

Don't be afraid to use the _underscore properties/methods... just have a good time... you're playing/experimenting... anything goes.  Worry about etiquette... much later. 

What does _markAsDirty DO, and HOW?   Dunno.  Probably a re-create.  That's WAY over my head... and I'm starting to think that YOU are much GUI-smarter than I, or WILL be in about an hour. 

[brianzinn]

12 minutes ago, DylanD said:

I don't think I'm supposed to touch "._" things like one lines :(71,83,251,252)

Anything with an underscore prefix is OK to use, I believe there are no guarantees it will be in a future versions.  One of the great things about BabylonJS is that the team strives for backwards compatibility, but I'm pretty sure that does not include "._".  So, like wingnut said - use them and have fun.  If you want to do something and need to use "._" then maybe something is missing that needs to be added, so feel free to ask.

 

15 minutes ago, DylanD said:

maybe add it to my current Babylon.js file, except that sounds like it could screw a lot up.

Don't add it to current Babylon.js file, because then when you get a newer version of BabylonJS it will be overwritten.  Add a new script tag or inline script to your page and include all of your code   When you're ready to make your own page outside of the playground check this out.  You don't need to use TypeScript at all for your own pages:
https://doc.babylonjs.com/babylon101/first

[DylanD]

2 minutes ago, brianzinn said:

Anything with an underscore prefix is OK to use, I believe there are no guarantees it will be in a future versions.  One of the great things about BabylonJS is that the team strives for backwards compatibility, but I'm pretty sure that does not include "._".  So, like wingnut said - use them and have fun.  If you want to do something and need to use "._" then maybe something is missing that needs to be added, so feel free to ask.

 

Don't add it to current Babylon.js file, because then when you get a newer version of BabylonJS it will be overwritten.  Add a new script tag or inline script to your page and include all of your code   When you're ready to make your own page outside of the playground check this out.  You don't need to use TypeScript at all for your own pages:
https://doc.babylonjs.com/babylon101/first

I want to put it into typescript because I'm building in Babylonjs / typescript already and am somewhat far in, so if I put it into all of my scripts/pages it will error out.  I guess I could add it to the html5 part of it? Il have to test that, not really sure.

thanks though!

[brianzinn]

If you're already building in TypeScript then just add a .ts file to your project and you can reference it.  It should build and bundle into your page automatically.

[DylanD]

4 minutes ago, Wingnut said:

Wow, fast!  It took me a week to do what you just did in 10 minutes.  Nice.  To be frank, I don't know how to make it "live"... except... lines 38/39...

this._value = value;
this._markAsDirty();

Don't be afraid to use the _underscore properties/methods... just have a good time... you're playing/experimenting... anything goes.  Worry about etiquette... much later. 

What/how does _markAsDirty DO?  Probably a re-create.  That's WAY over my head... and I'm starting to think that YOU are much GUI-smarter than I, or WILL be in about an hour. 

(press "x" to doubt meme). **presses x**

"Yea but what/how does _markAsDirty DO???", sorry all I could think of here was the Pete Holmes Ex-men: wolverine video (on youtube) hahaha  .  If you haven't seen it go watch it so you know how I feel when I say that.

Seriously I don't know what it does, but it doesn't hurt to figure it out.

Alright so I think it is supposed to update when I call it(markAsDirty I mean), but it doesn't seem to update every render loop not sure what I'm doing wrong there.

You don't know what I should do about getting it into typescript or into something I could work with?  

Is there someone else who would know?  You said GUI is @Deltakosh 's thing maybe he knows?  And the @adam made what I built off of..

Maybe one of them could help?

Any ideas?

 

[DylanD]

Just now, brianzinn said:

If you're already building in TypeScript then just add a .ts file to your project and you can reference it.  It should build and bundle into your page automatically.

Wont that just make it a typescript file and then it will give me errors?  

Did you mean .js file since it would still be js?

idk il try it out... how would I reference it just like a class?

[brianzinn]

4 minutes ago, DylanD said:

dk il try it out... how would I reference it just like a class

Yes, except import as a local file instead of module.  ie:

import ProgressBar from './ProgressBar';

 

[DylanD]

@brianzinn

Seems like putting it into a typescript file won't work but I think putting it into a js file will, I'm trying right now for that.