How to use CASTORGUI::GUIColor

[Ingo Chou]

Hello,

 

I create CASTORGUI::GUIColor() by this code:

 

        var clr = new CASTORGUI.GUIColor("color", { x: 5, y: 5, w: 50, h: 50 }, guisys,  { alert('change color'); }, false);

 

        mypanel.add(clr);

 

But there is no color selecting UI, instead, there is a "red" string in a text edit box, it just looks like CASTORGUI::GUITextfield().

 

How can I use the control CASTORGUI::GUIColor() to select color?

 

Thanks for your help.

[Dad72]

It works on my test demo:

var clr = new CASTORGUI.GUIColor("color", { x: 5, y: 5, w: 50, h: 50 }, guisystem,  function(){ alert('change color'); });

 

Perhaps your browser is not compatible or that you made a mistake.

However, looking, I made a small fix on the event oninput.

 

 

 

[Ingo Chou]

Yes, It works on Chrome, Firefox,  but not on IE, EDGE.

 

Thanks.

[Dad72]

It seems that Microsoft is often browser compatibility issues at level  html1 to html5, css1 to css3. each browser uses its own standard instead of to have a universal standard that would help the thing for developers. 

[dbawel]

Hi Dad72,

 

Did you build the color selection pallette tool in the above screenshot? If so, I'd like to look at the code. Is this in the Castor Gui demo?

 

Cheers,

 

DB

[Dad72]

Hi,

 

it is not in the demo, but you can see it here:

https://github.com/dad72/CastorGUI/blob/master/src/GUIColor.js

 

The doc: https://github.com/dad72/CastorGUI/blob/master/doc/GUIColor.md

 

it is a simple <input type=color> of html5

 

CastorGUI uses HTML5 to create the element as progress, spinner, color ... The Elements can be different depending on the browser.

 

@York I add a class that can take charge GUIColor with IE and Edge. Using GUIColor is as usual. I have not tested, but it should work.

[dbawel]

Hi Dad72,

 

As I'm not yet familiar with CastorGui, I'm having difficulty in calling the color selection dialoge box in a simple babylon.js scene to return an RGB (R, G,  value to first test and get working, and then I will be able to integrate into my drawing app which V1 is due for beta testing the first week of January. So fr, I have not yet been able to get the dialogue box seen in your screenchot to draw in a very simple BJS scene. So if it's not allot of trouble and time, would you or anyone reading this with the knowledge to do so - be able to post a code example of how to call and draw this color pallette dialuge box in a simple BJS scene, as well as to return the RGB values to a variable - global or otherwise? I don't necessarily require someone to build a working playground scene, but just a code example to show the proper usage that will allow me to call this dialogue box to be drawn without using the CastorGui extension calls for now.

 

This would allow me to dramatically simplify my current GUI if I am able to open and close this color pallette selection box in my current scene - or to begin with - any simple BJS scene. I'll keep trying to create this in a simple scene - with no other elements than what is required to draw this dialogue box - but thus far, have not been successful in drawing this color selection dialogue box.

 

As always, I truly appriciate any help, and to Dad72, thank you for posting what you have already, as this was something I would have attempted to integrate (add) into my drawing app in the next version. But since you are discussing this now, if I am able to understand the usage required to add this feature now, it would be a very valuable addition to my app for version 1.0, as users will be able to use accurate color in drawing on video, but most importantly on 2D illustrations and 3D models directly on their UV textures.

 

Thanks,

 

DB

[Dad72]

I create a sample here with CastorGUI

 

http://www.babylonjs-playground.com/#1SC3HR#2

 

I add the possibility of a return value in HEX or RGB (by default, RGB)

[dbawel]

Dad72,

 

I'm very grateful that you put in the time to build a playground scene - and in such short time. I will begin working to integrate this into my scene. However, for this app, I chose the bGUI extension, and am too far in to change to CastorGui. As far as I can see, I will need to use the CastorGui extension in order to call this dialogue box, although I believe it is an element available on it's own, but I'm not certain how to call it in javascript without using your extension. I will try and integrate your extension in my current application, and believe I should be able to do this - although I don't know if calling an additional "script" document will either display correctly or potentially cause a conflict with existing elements and the various canvas'.

 

If you have any additional  thoughts on this or experience with any similar case, your insight is always invaluable. Again I wil try and integrate CastorGui in addition to the other extentions I'm calling, and will let you know if I'm successful. If so, I believe this will be a first, so wish me luck.

 

Thanks again,

 

DB

 

EDIT: It appears that you are calling the Monaco editor dialogue box from the CastorGUI extension. Could you possible share how I might access this directly in a babylon.js script without using the CastorGUI extention at this time. Again, I will try and reference your CastorGUI extension and place on an existing or new canvas in my scene. But if I run into any problems, I might need to call the color dialogue box independantly in my script. If you can assist with the usage directly, please let me know. But for now, I'm attempting to reference and display the CastorGUI extension in addition to the MANY canvas' and elements i'm required to use for my app to function. Again, thank you.

[dbawel]

Hi Dad72,

 

I've tried every possible method and format I know to integrate CastorGUI and to create a button through the CastorGUI extension to open the color picker dialogue box. I stopped trying to be creative in the integration, and ended up using your following code from your example playground scene:

 

http://www.babylonjs...d.com/#1SC3HR#2

var scriptGUI = document.createElement("script");

scriptGUI.id ="scriptGUI";

scriptGUI.src = "http://www.castorengine.com/babylon/demoCastorGUI/castorGUI.min.js"; // V 1.5 of CastorGUI

document.body.appendChild(scriptGUI);

scriptGUI.onload = function () {

var canvasGUI = document.getElementById("canvasZone");

var guisystem = new CASTORGUI.GUIManager(canvasGUI);

var callback = function () { alert(" R:" + dialogColor.getColor().r + "\n G:" + dialogColor.getColor().g + "\n B:" + dialogColor.getColor().b; };

var dialogColor = new CASTORGUI.GUIColor("color", { x: 20, y: 20, w: 30, h: 30 }, guisystem, callback);

};

 

 

No matter where I place this code, how I format my main script, or how I reference the castorGUI.min.js script (I also reference castorGUI.min.js in my index.html), I receive the following error in the JS console :

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null        -        www.castorengine.com/babylon/demoCastorGUI/castorGUI.min.js:1

 

I consistantly receive this error and the castorGUI button does not display, although the rest of my scene loads fine and functions perfectly in all aspects. So in trying to troubleshoot what the problem may be, I added a console.log() function which prints the numbers 1 - 9 following every line of the code I'm using from your playground example scene quoted above.

 

Every number prints following every line in your code, except for the console message following:

var dialogColor = new CASTORGUI.GUIColor("color", { x: 20, y: 20, w: 30, h: 30 }, guisystem, callback);

So I have placed console.log("9")  following the line above and before the closing "};" bracket - completing the scriptGUI.onload function.

 

This is as far as I know to proceed and to troubleshoot. I hope this might provide you with enough information to possibly determine the cause for the reported console error in the castorGUI.min.js master file. Again, the rest of my scene loads and functions correctly without any affect from this error.

 

I know it's 11pm at night in France now, so I hope you will have gotten a good sleep by the time you might read this. Thank you for your help, and I hope we can possibly solve this without too much time and effort on your part. Otherwise, I can see that the CastorGUI extension has and is evolving rapidly, and I look forward to thoroughly testing on my next app. As I mentioned, I've spent considerable time testing the bGUI extension, and now appear to know it quite well - and am very happy with using it. So I truly look forward to familiarizing myself with the CastorGUI on my next project, and in reviewing your source for the CastorGUI extension, know that there at least 2 very efficient choices for quickly and easily creating functional GUIs in babylon.js - and I and the BJS community certainly thank you and Temechon for all of the hard work and countless hours you have spent building these GUI extensions so that we don't need to spend those hours ourselve building GUIs that don't have the aesthetics and functionality we are now provided from all of your efforts.

 

Thank you,

 

DB

[dbawel]

Hi Again - Dad72,

 

It's now obvious to me that I must not be referencing every file and script required from my "main" .html file and my primary .css file; or I may not be referencing these correctly. As there are so many references and files required, I'm not certain that you would be able to assist much more than you have already, however, if you have time to place all of the required external files into a single directory as well as the .html and .css files I need to build the example playground scene on a webpage out of the playgound environment, this might actually help me a great deal - as I certainly must be missing the correct references and perhaps some required files resulting in the console error I'm receiving - as well as looking at all of the new files and references I've added to my scene. My apologies that I didn't realize this initially, but it's obvious now that I must be overlooking files and references to required scripts.

 

Please let me know how I might be more certain that I have all of the correct files and scripts referenced and located on my server - as well as the correct .html and .css file(s).

 

Thank you,

 

DB

[Dad72]

I will read all this has head rest tomorrow.

[dbawel]

Hello Dad72,

 

I hope you have some time to rest your mind tomorrow and relax a bit. I'll certainly wait until you rest more and find time to take a look at my posts - as I always appriciate your help. Please have a good remainder of the weekend and try and forget about all of the scenes floating around in your head. I know these never leave my thoughts, and I can almost never clear my mind for better thoughts. So please try and forget about life for a short while, and if you can find the time to spend with your family, that's where you should be. I look forward to speaking with you next week.

 

Cheers,

 

David

[Dad72]

double post....

[Dad72]

Hi Dbawel,
 

Again I wil try and integrate CastorGui in addition to the other extentions I'm calling

 
There is no problem to add this extension to complement of other extension as bGUI
 

I've tried every possible method and format I know to integrate CastorGUI and to create a button through the CastorGUI extension to open the color picker dialogue box. I stopped trying to be creative in the integration, and ended up using your following code from your example playground scene:

 
Your mistake is that by copying you leave good canvas here (with the id of the canvas, line 1):

var canvasGUI = document.getElementById("you_ canvas_id");var guisystem = new CASTORGUI.GUIManager(canvasGUI);

You only need to file a single reference. This file is in the dist/ og GitHub folder and called castorGUI.min.js. (It should also themeGUI the folder that contains the CSS themes (you can create your own theme))
 
This file CastorGUI should be called in your page of your project as bGUI.

<script src="./js/castorGUI.min.js"></script>

then you must create the parameter guistsystem giving the canvas you use. (error you made when you tested and did not change the id of your canvas for your project)

var canvasGUI = document.getElementById("you_ canvas_id");var guisystem = new CASTORGUI.GUIManager(canvasGUI);

Then you simply use the GUIColor:

var callback = function() { alert(" R:" + dialogColor.getColor().r + "\n G:" + dialogColor.getColor().g + "\n B:" + dialogColor.getColor().b; };var dialogColor = new CASTORGUI.GUIColor("color", { x: 20, y: 20, w: 30, h: 30 }, guisystem, callback);

and that's it, you should see a red carrer. by clicking this boutton, you open the color selection dialog. when you change the color and you click OK, the callback function is triggered and shows in the alert values ​​RGB.

 

EDIT: I have updated the demo: http://www.castorengine.com/babylon/demoCastorGUI/ (The button can be changed with the color picker.)
 
If you do not understand something for CastorGUI, I would love to help you further.

[dbawel]

Hi Dad72,

 

The information above is much more clear to me to try and integrate the colorpicker dialoge box. However, how does the "default.css" file come into consideration, and how do I reference this - or is it necessary to reference the "default.css" file at all? 

 

Also, in the last example you provided, the Monaco editor was referenced and called - which is not called in this latest demo. I'm not certain why this was being called previously in you .html file as well as referenced a great deal in your .css files.

 

So I'll continue to work based only upon your latest demo and info, however, I am certainly confused by the large differences in the scene you are providing today as it is so very different from the scene provided yesterday - which when I read through all files, they appeared neccessary to call the color picker dialogue box. Obviously, this is not the case, but my mind is now a mush of grey matter and cluttered with all of the additional references from yesterday.

 

Thank you for all of your help, and I hope to return the favor some day in the near future.

 

Cheers,

 

DB

[Dad72]

For default.css, you simply need to enter the path or folder is themeGUI

var optionsTheme= {themeRoot: "../style/"};var guisystem = new CASTORGUI.GUIManager(canvasGUI, null, optionsTheme);

This is because CastorGUI now use themes you can add. So I created this theme 'default' today

 

You have nothing to do more. you copy the GUI theme file and give directions or what it is and the default theme is automatically used.

 

If the theme suits you, not add another css file with your own name and specify the theme to use as:

var optionsTheme= {themeRoot: "../style/", themeGUI: "my_theme"};var guisystem = new CASTORGUI.GUIManager(canvasGUI, null, optionsTheme);

There is not much dependence have. just:

 

castorGUI.min.js and root folder themeGUI/ 

 

I can not get any easier.

[aciva]

@Dad72 I have been reading through this topic and while what I am trying to achieve is different the problems I am facing are the same as @dbawel. However, I was trying to access the links you mentioned above and this one http://www.castorengine.com/babylon/demoCastorGUI/  does not seem to open up anything. Has the location changed? Appreciate your help and time.