.color property on GUI controls should accept Color3 (or at least warn)

earthendev · April 5, 2020, 2:53pm

Another issue with the GUI I recently encountered was trying to give a Color3 as the .color property to a Button, which then set the text to black but left the border white (in the following example anyway, my setup was a little different):

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

I did not get anything in the console, which is why I first thought the real bug was that it was not setting the border (wrong!).

The whole problem showed up because I had put all colors in constants, so I expected to be able to use them for the GUI too. Could we add support for that to the GUI? It doesn’t seem too hard to implement and it would be really helpful for code reuse. I am not very familar with TypeScript, so I hope it’s not a limitation from that side.

brianzinn · April 6, 2020, 6:00am

For the GUI just use the hex string:
button.color = '#fff'

Note that Color3.FromHexString() you have in your PG (that has 3 hex codes) will always return black unless you pass in 6 hex codes (total length 7):

github.com

BabylonJS/Babylon.js/blob/master/src/Maths/math.color.ts#L439


    var m = value - chroma;

    result.set((r + m), (g + m), (b + m));

}



/**

 * Creates a new Color3 from the string containing valid hexadecimal values

 * @param hex defines a string containing valid hexadecimal values

 * @returns a new Color3 object

 */

public static FromHexString(hex: string): Color3 {

    if (hex.substring(0, 1) !== "#" || hex.length !== 7) {

        return new Color3(0, 0, 0);

    }



    var r = parseInt(hex.substring(1, 3), 16);

    var g = parseInt(hex.substring(3, 5), 16);

    var b = parseInt(hex.substring(5, 7), 16);



    return Color3.FromInts(r, g, b);

}

If you want to use Color3 objects then consider toHexString().
BABYLON.Color3.FromHexString("#ffaf00").toHexString();

To be fair perhaps the library should support both of your requests, but currently doesn’t.

earthendev · April 6, 2020, 9:15am

Oh thanks, so it’s in fact two bugs rolled into one. Now I remember, I have had that problem before. I’m a sucker for those CSS shorthand codes no-one else seems to use. This problem was however not present in my current project, I used a full color code there.

Yes, I think so too. At least it should say so in the docs. I posted it into the bugs forum rather than feature requests because it is somewhat counterintuitive. Babylon.js has a very rich API in general, so of course you get accustomed to that and expect it everywhere

I would even do a quick PR, but right now I’m too busy to deal with setting everything up. Maybe in a few weeks.

Deltakosh · April 6, 2020, 3:58pm

Please All help will be appreciated

Topic		Replies	Views
Border & Foreground Color Questions gui	12	1443	April 7, 2022
Color3.FromHexString is not a constructor Questions	3	475	February 1, 2023
Simple tool to convert Hexadecimal colors to BABYLON color code Demos and projects	6	7143	June 27, 2023
GUI Animation: createAndStartAnimation + hex string values Questions gui	4	576	November 5, 2021
Grid questions in the GUI Questions gui	7	735	June 11, 2021

.color property on GUI controls should accept Color3 (or at least warn)

Related topics