CastorGUI - rgba values don't function in GUIWindow

[dbawel]

Hello @Dad72 -

I'm certain you're already sound asleep, and if not then you should be at 6:30am. Anyway, I have rgba values working in every other GUI element I have created, however if I set any rgba values for a GUIWindow, there is no color value display at all. Only when I remove my declaration of rgba values then the default values are seen - except for a few such as borderWindow. The following is a sample of one of my GUIWindows which does not register any rgba values:

var logon_form = new CASTORGUI.GUIWindow("logon_form", {x:10, y:10 , w:200, h:100, textTitle: "Please  Log  onto  Server", borderTitle: "10px black", backgroundColor: "rgba(0.0, 0.0, 1.0, 1.0)", colorTitle: "rgba(0.0, 1.0, 1.0, 0.5)", overflow: "hidden"}, guisystem);
 

Please let me know if you have a solution, as I would like to demo my app with the windows fully drawn with all window elements. Also, I've tried setting these in your castorGUI demo scripts, and they don't set any rgba values in the demo either.

Thank you,

DB

EDIT - Also heightTitle: of any value doesn't change the default of 30, so there appears to be an issue with passing many different options and affecting the GUIWindow elements.

[dbawel]

Hi @Dad72 -

I've found 2 more possible bugs. So if you can help when you wake to read this, please let me know. I need to get to bed here in California soon, but I will be checking the forum early in the morning if you have time to address these issues.

If you view the following link below, you'll see that when I add a CASTORGUI.GUITextarea to my CASTORGUI.GUIWindow using "form.add(CASTORGUI.GUITextarea), this adds the GUITextarea to my GUIWindow, but also draws a GUITextarea at the x.y coodinates in  the canvas - where I shouldn't see these displayed:

http://qedsoft.com/DEMOS2014/designsharepro/index3.html

 The code from this scene for my CastorGUI elements is below:

Quote

 

var cp_canvas = document.getElementById("game");
var engine = new BABYLON.Engine(cp_canvas, true);

var guisystem = null, colorSelector = null, login_pressed = null, u_login = null, p_login = null, r_login = null, user_message = "Please log onto server";

CASTORGUI.GUIManager.convertPixelToPercent = true;// Convert pixel to percentage
guisystem = new CASTORGUI.GUIManager(cp_canvas, {pixel: false}); //No use pixel here  

    //Window for logon to Server
    var logon_form = new CASTORGUI.GUIWindow("logon_form", {x:200, y:200 , w:150, h:300, textTitle: "Please  Log  onto  Server", overflow: "hidden"}, guisystem);
    
    //Text for logon Window
    var logonText = {position: "relative", x: 10, y: 0, text: "Username<br /><br />Password<br /><br />Room<br />", color: "blue", size: 20 };
    var textForLogonWindow = new CASTORGUI.GUIText("textLogon", logonText, guisystem, false);

    //Textfields for logon Window
    var logonField1 = {position: "relative", x: 10, y: 55, zIndex: 1, color: "white", w:20, h:1 };
    var textFieldLogonWindow1 = new CASTORGUI.GUITextarea("textField1", logonField1 , guisystem, false);
    var logonField2 = {position: "relative", x: 10, y: 100, zIndex: 1, color: "white", w:20, h:1 };
    var textFieldLogonWindow2 = new CASTORGUI.GUITextarea("textField2", logonField2 , guisystem, false);
    var logonField3 = {position: "relative", x: 10, y: 147, zIndex: 1, color: "white", w:20, h:1 };
    var textFieldLogonWindow3 = new CASTORGUI.GUITextarea("textField3", logonField3 , guisystem, false);

    //Button for login
    var logonButton1 = {position: "relative", x: 45, y: 180, zIndex: 1, color: "white", w:50, h:30, value:"Login"};
    var buttonForLogonWindow1 = new CASTORGUI.GUIButton("logonButton", logonButton1 , guisystem, login_click, false);

    logon_form.add(textForLogonWindow);
    logon_form.add(textFieldLogonWindow1);
    logon_form.add(textFieldLogonWindow2);
    logon_form.add(textFieldLogonWindow3);
    logon_form.add(buttonForLogonWindow1);
    logon_form.setVisible(true);

//Function for login button click
var login_click = function() {
    u_login = textFieldLogonWindow1.getValue();
    p_login = textFieldLogonWindow2.getValue();
    r_login = textFieldLogonWindow3.getValue();
    login_pressed = 1;
    user_info.updateText(user_message);

console.log(u_login)
console.log(p_login)
console.log(r_login)
};

 

So everything works correctly, except that the GUITextarea(s) are drawn when they should not be drawn, and if you load the scene using the link I provided, you'll also see that pressing the "login" button also in my GUIWindow doesn't trigger the callback function which as you see in the script above, should console.log the values in each GUITextarea.

So I now have 3 potential "bugs I need to solve:

1. The options for my GUITextWindow have no effect including setting any rgba values

2. The GUITextareas are rendered on the canvas in addition to the GUIWindow which should not be occurring

3. The callback function for my GUIButton in my GUIWindow is not caling the function when the button is pressed.

If you can help me solve these issues I would be extremely grateful - as always. I hope you had a good rest, and look forward to your response. I'm so close to finishing this app, and one step closer once I solve these 3 issues.

Thank you,

DB

[Dad72]

Hi,

- Ok, for background of GUIWindow, I had made a typos: bakgroundColor backgroundColor 

- For the height of the title of GUIWindow, heightTitle did not yet exist. I add for you. 

- For the textarea, it's because you forget the callback parameter:

new CASTORGUI.GUITextarea("textField1", logonField1 , guisystem, null, false);

Fix your code:

var logonField1 = {position: "relative", x: 10, y: 55, zIndex: 1, color: "white", w:20, h:1 };
var textFieldLogonWindow1 = new CASTORGUI.GUITextarea("textField1", logonField1 , guisystem, null, false);
var logonField2 = {position: "relative", x: 10, y: 100, zIndex: 1, color: "white", w:20, h:1 };
var textFieldLogonWindow2 = new CASTORGUI.GUITextarea("textField2", logonField2 , guisystem, null, false);
var logonField3 = {position: "relative", x: 10, y: 147, zIndex: 1, color: "white", w:20, h:1 };
var textFieldLogonWindow3 = new CASTORGUI.GUITextarea("textField3", logonField3 , guisystem, null, false);

Have a good day

[dbawel]

@Dad72 - you are the man. Thank you for correcting these issues as well as my code. I thought it would be something simple. I seemed to have found other options that were'nt working, so please let me know if there are any others that are not yet implimented. I'm sooooo close to delivering an app. It's a great feeling.

DB

[dbawel]

Hi @Dad72 -

There is still no effect in adding any other options to the GUIWindow such as heightTitle and backgroundColor - please see my code example below:

var logon_form = new CASTORGUI.GUIWindow("logon_form", {x:200, y:200 , w:150, h:300, textTitle: "Please  Log  onto  Server", heightTitle: 50, backgroundColor: "rgba(0.0, 0.0, 1.0, 0.5)", overflow: "hidden"}, guisystem);

I tried most every option as I did last night, and non have any effect on the Window in my scene. I still cannot dettany backgroundColor or any other color option, no borderWindow, radiusWindow, etc. So there are most likely the same issues with other options not effecting the WGUIWindow. I appriciate your help with this.

Also, the button press still doesn't call the function I have set.

Thanks,

DB

[Dad72]

You must download the updated libraries. when I test my demo, it works. I suppose you work with the previous version.

https://github.com/dad72/CastorGUI/tree/master/dist

[dbawel]

Of course. I will download the updated files, as I should have known if my brain was at all working. Again, thank you for your support of this fantastic extension, and I'll let you know if I find any other issues.

Cheers,

DB

[Dad72]

You're welcome. delighted to have helped.

[dbawel]

Hello @Dad72 -

I updated the castorGUI.min.js file, and there is a dramatic improvement - as most of the options I checked now work for GUIWindow. However, I tried setting the rgba values for several options, and the change is primarily seen in the alpha value for opacity. However, the rgb values don't have any color effect except for variations of gray. I have not been able to change the backgroundColor or any other rgba option to any color except grey - regardless of the values between 0 and 1 that I use in any channel. Please let me know what you might find is the cause.

Also, as I posted above, can you see why my callback function when I click the button in the GUIWindow isn't being called? I've tried what I can, but perhaps am not including a variable similar to my mistake in the GUITextarea. Once I have al options working as well as the button in my GUIWindow, I should be ready to move forward to complete the beta of the app.

Thank you,

DB

[Dad72]

For rgba you use a percentage value, you must use values from 0 to 255 not 0 to 1.

For the fields of text, you use GUITextarea, why not instead use GUITextfield.

GUITextarea = text with multiple line.
GUITextfield = text with a single line.

So I review all your code and test it on the playground. you can see the result here functional (There are some small change & fixe & I add display none window after login):

http://playground.babylonjs.com/#12NLGN#17

PS: Make sure to use the latest version once again, I made some changes to the libraries:

https://github.com/dad72/CastorGUI/tree/master/dist

[dbawel]

Hi @Dad72 -

Thank you for putting this on the playground, as I can now see that there is inconsistant behavor when the button is pressed with the JS console displayed - as well as the dialogue Window oddly displayed when the JS console is visible, as often happens. However, I see now that my problem with the button press was that the console.log() was not consistantly logging the values I set for testing - so it appeared not to be working.

I will try using GUITextfield instead of GUITextarea, as this would most likely be a better choice for the GUI element as applied to my application of the Textfield specifically.

Thank you for your quick esponse, and I hope you had a great weekend. Now the weekly "grind" begins once again.

Cheers,

DB

[dbawel]

Hi @Dad72 - 

I wasn't using values greter than 1.0 as the online documentation for the extension provides examples between 0.0 and 1.0. Now that I'm using values between 0 and 255 the color pallette works fine. 

Also, I switched to using GUITextfields as I don't require multiple lines as we initially thought we might require for our login values. This is much easier to work with, of course. And my GUIButton wasn't working as I wasn't declaring the function prior to calling the function, so this is why i received no response when I clicked my GUIButton. Sometimes I baffle myself with my own actions as common sense is completely lost when I'm trying to work so fast that I overlook the simple stuff.

As of now, I'm only having issues with the size of the title of the GUI window using "heightTitle", if this is the correct method to setting the size "height" of the title inside of the GUIWindow. Please let me know if this should be working, or if I'm not calling the correct function to set the size of the title in the titlebar of the Window.

Thanks,

DB

 

EDIT - I should add that the use of HTML elements in my GUI adds tremendous functionality to my applications. Just as bGUI and the Dialogue extension, I highly recommend CastorGUI. And as I've mentioned a fe times now, there is no reason to feel the need to use one or the other, as they all offer usique functions and empower any user to quickly build practically any GUI element required, as well as the functions to access practically every aspect of HTML5 and WebGL - whereas you are limited in using only one GUI extension at a time.

[Dad72]

when I try "heightTitle" he work for me.

Sending a PG I look for if I see a problem.

[dbawel]

@Dad72 -

My error is that I thought that "heightTitle" was a property for the title text - and not the title area where the twxt is displayed. My apologies, as it was very late and I was becomming confused after long and arduous day of working. So heightTitle works for me as well. owever, can you provide any option to set the height and/or width of the title text? This is very difficult to read on small devices such as smartphones.

Thank you,

DB

[Dad72]

15 hours ago, dbawel said:

can you provide any option to set the height and/or width of the title text?

I will do it in the day, I'll keep you informed.

[Dad72]

I add option "titleFontSize:12" (12 by default) for title GUIWindow:

https://github.com/dad72/CastorGUI/tree/master/dist

[dbawel]

Hi @Dad72 -

Thank you very much for adding the ability to set the font size for the title text in your GUIWindow. This will contribute far more to the aesthetics of the scene, and make it much simpler to read. I'm curious about the work you do as your "day" job, since you are obviously more varied in your abilities to develop for games and within the WebGL framework specifically. As @Wingnut and I often mention, I hope we will one day create a babylon.js users group and be able to get together to share our stories and backgrounds - as well as to put the faces together with the posts we are all so very familiar.

Cheers,

DB

[dbawel]

Hi @Dad72 -

I tried to use titleFontSize:12 in every different format I might think of, and observed no change in the font size of the title text. Most often I didn;t receive an error, unless I user quotation marls of another syntax error. Please review the following code and let me know if I am making an error. Again, I tried every method and syntax I could think of.

//Background window for logon to Server
var logon_background = new CASTORGUI.GUIWindow("logon_bgrnd", {x:150, y:0 , w:1024, h:1024, textTitle: "WELCOME TO 3RD BRAIN TECHNOLOGIES", titleFontSize: 50, imageContent: "./textures/login_bgnd1024.png", heightTitle: 30, borderWindow: "10px solid green", colorTitle: "rgba(0,150,255,0.5)", backgroundColor: "rgba(0,155,0,1.0)", titleColor: "white", colorContent: "rgba(0,100,255,0.8)", draggable: false, closeButton: false, overflow: "hidden"}, guisystem);

Thanks as always,

DB

[Dad72]

Have you updated the library. I just tested my demo and it works.

2 hours ago, dbawel said:

I'm curious about the work you do as your "day" job, since you are obviously more varied in your abilities to develop for games

Hard to say. I do not know what to say.

[dbawel]

I updated all library elements and the castorGUI.min.js file, but perhaps I don't have the paths to the system themes correct? 

I also have a problem I'm running into due to my lack of experience in web development. In the GUIWindow I created and you added to a playground scene recently in this post - I'm trying to dispose of the GuiWindow and other GUI elements once a "login" is sucessful by returning a booleen contained in a global variable. I have no problem making the gui elements invisible using logon_form.setVisible(false); however, I then need to create my scene elements such as a skybox and mesh objects, but am not having any success creating any scene elements  once the user has logged onto the server. However, I'm certain that I'm not doing this correctly.

If you have time to modify the playground scene you created earlier in this post to generate a skybox at full screen resolution once the GUIWindow is closed, then I would be very appriciative - as I've spent the last hour attempting to do this without any success. So this woud help me greatly. If you don't have the time right now I certainly understand. Thank you for all of your help, and I'll continue to try and get the heightTitle functioning as it's obvious that I am not using correctly since this is working for you. But if you are able to generate a new scene at any resolution once the GUIWindow is closed, then this would help me move forward today and bring me much closer to comleting the app for beta release early next week.

Thank you,

DB

[Dad72]

This should help. I create a skybox and I makes it invisible when the scene  is created. Once log in, I put the visible skybox.

I add titleFontSize and titleHeight in GUIWindow options too.

http://playground.babylonjs.com/#12NLGN#24

PS: for  logon_form  it is because it does not exist as a global variable that does not work.

[dbawel]

Hi,

Thank you for looking at this and updating the playground scene to show making a skybox visible. However, I was not clear in my question. I've been able to make elements such as a skybox visible, so this is not what I need to accomplish.

I have my castorGUI elements in one JavaScript file, and my app in a seperate JavaScript file. My app is inside of a function, and both scripts work together when I initialize both scripts at the same time as you have seen in past examples I've sent.Thefollowing link is to both the castorGUI script as well as the app and other bGUI interface elements:

http://qedsoft.com/DEMOS2014/designsharepro/index3.html

Currently, when the login button is pressed, I'm sending a global variable to a condition which I expect should cause the scene in the seperate script to initialize - however, the variable is passed, but the function is not initializing my application. So if you load the link above and press the login button, the castorGUI windows become invisible, and the background remains white, but the function initializing the application does nothing. So this is my problem. I wish I could create a playground scene, however the application is far too large to consider doing this. So if you are able to view the source script "index20.js" in the JS console, you'll see what I'm doing - which is obviously wrong as it's not causing the application to initialize even though the global variable is passed correctly and I'm receiving other functions such as console.log() which tells me that the condition to initialize the function is being met correctly - however, I am not calling my function correctly or this would be working - as I'm not receiving any errors in my console.

Again, if you can see what I'm doing wrong, I'm so very clos to finishing the app. Thank you once again for helping me try to correct this and finally finish the app. Otherwise, castorGUI is working great.

Thank you,

DB

And I'm still not getting any difference in the font size of the title of any GUI window using titleFontSize: 50, or any other value.

[Dad72]

I see a difference:

titleFontSize : 15

titleFontSize : 40

By cons I see that the button is not placed in good places and I would correct it soon.

Why you venture out on the creation of a program without a basic minimum in javascript ? Maybe you need to deepen your knowledge in this area, no offense.

Try this scene:

http://playground.babylonjs.com/#12NLGN#31

[dbawel]

Hi @Dad72 - 

I never intended on creating a product. I was only using my background in other development languages and apply these in JavaScript to create an app simply to demonstrate the functions of our server technology. However, when I finished the demo version, investors we were presenting to were asking if I would further develop the app for only a "potential" release to specific design communitites, I wasn't keen on doing this, but having developed 2 applications previously and released these to Game and production companies such as THQ, Sony, and Weta, I thought it would be a valuable endeavor - especially since I am experienced in several development anguages and WebGL is  such a new framework that I might benefit from jumping in and pushing my own limits. Also, there was no one else in the company who was able to build out the demo to product release as I had found success in previously.

So this was very ambitious, and I was able to accomplish most everything I needed to build without much help, Regarless, I gave it a shot, and have been sucessfull enough to develop more than 95% of what is generally needed for release. So it appears to have been a good decision, as I am now offering valid assistance here on the forum, and the majority of what I do know is fairly high level software and a great deal of hardware engineering - as mu work with Lockheed Martin Space Systems and Virtual World Labbs has provided me with a level of knowledge and experience that few developers have ever been fortuantate enough to study and apply to real products such as the joint strike fighter.

The few stuctural aspects I may not be completely familiar with in regards to web development, have not kept me from building the tools I need, and a product which Lockheed Martin is now pushing hard for us to license the app to them. So this was never intended, but for me was a good choice, and I'm enrolling in classes this fall as the UCSB capus near me had no classes available this summer. So I need to finish the work I've currently taken on, and will make a study of web development and WegGL specifically in the very near future. I would not have ever considered mving our current app from demo to product without the assistance and guidance I found on this forum specifically, and have tried to bring my unique experience to help others on the forum as well - which I've found success in doing so this past year or more (it's been one year since I decided to take the challenge of developm th app for public consumption.

Thanks to you and to others for giving me the additional bits and advice I needed to make my application a valid and useful product, and I'll continue to assist others daily with my experience unique to me. However, without yours and others guidance, it would have taken me far too long to work out all of the details and efficiencies I required to complete my first web application. And this is expected to be very good for the community overall, since babylon.js will be receiving endorsements from Lockheed Martin, Weta, Lightstorm and Jim Cameron, and many others as they have agreed to recommend babylon.js publicly once they have the beta app in production. DK and I have been discussing this the pat few months, and we will be promoting babylon.js as the premier framework and tool by which they are able to improve their workflow, efficiency, and cut resources dramatically by utilizing the power of this framework. Also Pietro Marson who is key in production at Weta in NZ, will be working with me this summer to integrate our app and other technology into Weta Workshop an begin adopting babylon.js as a key framework proviiding them with unique content and tools keeping them on the forefront of available techology, and I began working with him last week in trying to bring him up to speed so that they may be able to take off running with BJS themselves. And Pietro (and others) have an extensive background in web development.

So I never intended to follow this path, but just as I came off of a Rock and Roll tour with nothing to do, picked up a 486 Windows PC and taught myself computer graphics; I found myself as the animation supervisor for the matrix films 2 years later. And as I always believe in myself and my potential, I expect there is something much greater ahead of me in my future. 

So again, thank you for all of your help and support, as your help has been an invaluable resource for my work. And it's been allot of work, however I did have the basics to be able to keep moving forward. And I hope I haven't been a huge pain in the butt. I'll get there one way or another - I always do.

Cheers,

DB

 

EDIT - I've tried  titleFontSize: 50,  and many other values with no result. Aside from updating the castorGUI.min.js file, where else might I be making a mistake?

[Dad72]

And this new PG, it responds to what you wanted to do?