GUI text input window object

[dbawel]

Hello,

Does anyone have any experience using bGUI or CastorGUI to create a text input window object? I am using both GUI extensions for my current app development, and they work together beautifully (I had help from Dad72 to impliment them both together in one scene.) I've reviewed the documentation for both GUI extensions, and have not been able to properly input the parameters for either extension to create a simple GUI object by which the user can type into and the text can be used in the app. In bGUI, I know how to use the text once it's in a GUI object (as the documentation is clear), but I have not been able to generate a GUI text window in either extension as I am not providing the necessary parameters and/or not using the correct syntax. I haven't looked closely enough at the CastorGUI documentation for using the text in my app, but I'm sure it's just as clear once I can actually create a text input window object.

So if anyone has experience with creating text fields to type text using either the CastorGUI or bGUI extensions, could you please provide a working line of code for either extension as and example? Of course, I welcome Temechon and Dad72 to reply to this post.  And if you know the command to use the text from a CastorGUI text input object, this would be valuable as well. The documentation for both extensions appear clear, but I've yet to be able to get either to create a text input window object.

By the way, as I previously mentioned, you don't need to choose between the two GUI extensions, as they can easily be used together - and they both offer fantastic tools to easily create GUI objects and functions for those objects - so I highly recommend both CastorGUI and bGUI so you can focus on your scene, and not waste a bunch of time integrating your own GUI.

Thank you,

DB

[Dad72]

Hi,

Something like this:

var textfield = new CASTORGUI.GUITextfield("mytextfield ", { x: 20, y: 20, placeholder:"Your text here" }, guisystem);

Documentation here:

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

[dbawel]

Hi Dad72,

Thanks for the fast reply. I tried using your example in every way I could think of, and I wasn't doing anything different in my past attempts than your example, so the issue appears to be related to something in the castorGUI.min.js file or usage thereof. The following errors are the very same errors I was receiving in my attempts before I posted this question. So in the JS console, the same error message I was receiving before and now appears to point to an issue with the castorGUI.min.js file:

Uncaught TypeError: Cannot read property 'canvas' of undefined.... castorGUI.min.js:1

And the following line is identified from the castorGUI.min.js file which contains the property that cannot be read - which is the .canvas property I've underlined from the following line identified in the castorGUI.min.js file reported in the JS console:

(function(){CASTORGUI.GUITextfield=function(id,options,guimanager,callback,append){CASTORGUI.GUIManager.call(this,guimanager.canvas,guimanager.canvasCss);

 

So it appears the problem was most likely not in my usage of properties or synrtax, but another issue which hopefully you can identify. Please let me know what the problem might be based upon the JS console error. This is the only error I'm receiving in the JS console now and prior.

Thank you,

DB

 

 

 

[Dad72]

I test my demo and it works correctly. you are sure to use the latest version of castorGUI.min.js.
I put you in the attached file here:

Also make sure that the variable 'guisystem' corresponds to your GUIManager.

castorGUI.min.js

[dbawel]

Hi Dad72,

I was using the latest castorGUI.min.js file. So I must be identifying the GUIManager incorrectly. The script I'm using is below:

Quote

 

var cp_canvas = document.getElementById("game");

var guisystem, colorSelector;

var create_color_GUI = function() {
    // GUI manager
    guisystem = new CASTORGUI.GUIManager(cp_canvas);
    var callback = function() {
        var pick_color = colorSelector.getColor(); // return color RGB
        // use: pick_color.r, pick_color.g, pick_color.b
    };

    colorSelector = new CASTORGUI.GUIColor("pick_color", { x: 20, y: 140, w: 40, h: 40 }, guisystem, callback);
};

//var textfield = new CASTORGUI.GUITextfield("mytextfield ", { x: 20, y: 20, placeholder:"Your text here" }, guisystem);

create_color_GUI();

 

The above script was built for a color picker (as you know), and I'm simply trying to add a text input object into the script and GUI. So if you can see any problems with my usage, please let me know. And thank you for all of your help, as today I feel like my skillset is much weaker than ever since I can't seem to navigate the castorGUI extension very well - and there's still much I don't understand in it's usage. Hopefully as I continue to build more apps using castorGUI, I'll finally get a grasp of precisely what I'm missing in any aspects of the integration and event actions within my scripts. And not to take your time assisting me with the integration of a tool which already saves so much time in my development. I thought that since I've been able to build what many developers consider to be complicated applications such as animatronic control systems, real time speech applications using audio waveform analysis, and even existing tools within Motionbuilder which all ship with each license sold - that I wouldn't have much trouble in the integration of a BJS extension. However, this is not the case, and I really need to work on better understanding WebGL development in it's entirety - which I will be studying far more in the near future.

In the meantime, thank you for all of your help, as I would have still been building my own GUIs from scratch, which would not have been as stylized or functional as I've been able to build using your extension. Also, what is the property to call when I need to use the text which the user will be typing into the text input object? It appars to be .value, or using the getValue() function, but I'm not certain how to use these correctly without a code example to view. As always, I can spend the time experimenting, but if you can provide a usage example, this would save me a great deal of time.

Also, do I ever need any of the scripts on GitHub from the CastorGUI/src directory? I haven't found any examples of any user making use any of these scripts. And I ask as similar files are required to reference in using the bGUI extension - so I wanted to ask if I might be required to reference any of these in building GUIs using the castorGUI extension.

Thanks,

DB

[Dad72]

Hi,

Your error is that you initialize the guisystem in create_color_GUI function. so the textfield had no access to guisystem.

Here is the correction and I get and set complete with Value.

var cp_canvas = document.getElementById("game");

var guisystem, colorSelector;

guisystem = new CASTORGUI.GUIManager(cp_canvas);

var create_color_GUI = function() {
    // GUI manager    
    var callback = function() {
        var pick_color = colorSelector.getColor(); // return color RGB
        // use: pick_color.r, pick_color.g, pick_color.b
    };

    colorSelector = new CASTORGUI.GUIColor("pick_color", { x: 20, y: 140, w: 40, h: 40 }, guisystem, callback);
};

var textfield = new CASTORGUI.GUITextfield("mytextfield ", { x: 20, y: 20, placeholder:"Your text here" }, guisystem);
textfield.setValue("My new text");// set new text
var value = textfield.getValue();//return value
console.log(value); // result in console

create_color_GUI();

 

[dbawel]

Hi,

I see what I was doing wrong. My isue now is in setting the size of the GUITextfield as well as the zIndex value. I have tried to use every possible sytax I can think of for setting the size of the GUITextfield, and of course I first tried:

var textfield = new CASTORGUI.GUITextfield("mytextfield ", { x: 20, y: 100, size: 100, placeholder:"Your text here" }, guisystem);

This doesn't return any errors in the JS console but also doesn't affect the size of the GUITextfield. What is the proper syntax and usage for setting both the x and y size of the GUITextfield, as I need an object which is not a simple one line of text input. Also, I'm able to change the color of the text, but don't know what colors I am able to choose from. I simply used "color: blue," and the text was then blue. But I would also like the GUITextfield to be a different color than a white background - is this possible? 

And if I set the "zIndex = 5," or any other int value, I receive the console error "Uncaught SyntaxError: Unexpected token ="

But most importantly, I need to set the x and y size of the GUITextfield. Please let me know what the proper usage and syntax is for these properties - the x and y size of the GUITextfield.

Thanks,

DB

[Dad72]

Do not put = the options:

For the length and width that is 'w' and 'h' (I forget to put it in the doc w and h)

var textfield = new CASTORGUI.GUITextfield("mytextfield ", { x: 20, y: 100, zIndex: 5, w:100, h:25, placeholder:"Your text here" }, guisystem);

 

 

[dbawel]

Thank you - this is exactly what I needed.

DB

[dbawel]

Hi Dad72,

I can certainly set the x width and y height of the textfield, however it only allows the user to type a single line of text in the center (y height) of the text box - and the text which is typed is exceeding the width with no carrige return to allow multi line text to be typed on each available line. The useage I require for my app is to only allow the user to type within the text box, with automatic return at the end of each line which will add to the next line below once the user types beyond the width (x) of the text box. 

If I only had to build a multiline textbox in HTML, I would use textBox.Lines.add(); or textBox.Lines.Append(); however, I wasn't able to get all of the functions to work on all mobile devices, so this is why your textBox object is so valuable to completing my app. I wasted a whole lot of time trying to build my own in HTML, but I'm so much closer now using the CastorGUI extension. So if I can get the multiline fuctions working, I'll have my entire GUI finished - with the exception of all of the functions the app requires in using the text which the users will be typing, but this is a completely different issue, and I have most of these functions written already. So if I can get your textBox woking as a multiline textBox, I'll FINALLY be able to finish my app in the next week. 

Again, thank you for all of the help with your GUI extension, as it has saved me allot of time and trouble.

DB

[Dad72]

Hello,

You have to use GUITextarea in place of GUITexfield.

var textarea = new CASTORGUI.GUITextarea("mytextarea", { x: 20, y: 100, zIndex: 5, w:100, h:25, placeholder:"Your text multi-lines here", color:"blue" }, guisystem);

I am delighted that my extension helps you.

[dbawel]

Hi Dad72,

Thank you for your fast response, as everything now works perfectly with your guidance on the CastorGUI extension. I can't say that I definately won't require any further help with the current app I'm finishing, but hopefully the next post or message you recieve from me will be the real time multi-user app working online - which now requires allot of work on the server integration. Of course, I need to add all functionality for the user to the GUI itself, but the user interface is working well and really looks great. So thanks again for all of your help, and I look forward to using the CastorGUI again soon, as well as reviewing your future updates to the CastorGUI extension.

Thanks again,

DB

EDIT: I will be adding a couple of sliders using your GUI extension, however, I believe there's enough info in the documentation as well as your posts to others on this forum for me to integrate into my current GUI and can hopefully avoid further posts and assistance - but I'll certainly let you know and as always appriciate all of your time assisting myself and others, as well as all of the time you've spent building these tools for the community to use. Again, thank you.