Search the Community

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.

Hi Having some difficulty getting CastorGUI to work when my Babylon.js app is embedded in a Drupal (it works when all in a single html file). It fails with a 404 as cannot find the file mysite:8083/node/themesGUI/default.css. Clearly that is because that location doesn't exist. The /node/ notation is the Drupal URL for the current content, not the location of the CSS file. The file is actually at mysite:8083/themes/mytheme/themesGUI/default.css. I did some tracing in Chrome Dev Tools and found the following: - I kick things off with gui = createGUI(); - createGUI function looks like this: var createGUI = function() { var css = "button{cursor:pointer;}"; var guiSystem = new CASTORGUI.GUIManager(canvas, css, { themeRoot: "themes/uconstruct/", themeGUI: "default", pixel: true }); var form = new CASTORGUI.GUIWindow("form", { x: 0, y: 0, w: 300, h: 80, textTitle:"Scene Menu ", closeButton: false, heightTitle:"10px", overflow: "hidden", backgroundColor: "rgba(60, 60, 60, 0.6)", colorTitle: "rgba(90,90,90,0.3)", borderWindow: "0px" }, guiSystem); ... }; When I trace with Chrome I can see the guiSystem object created and the line in CASTORGUI.GUIManager.prototype.addStyle() where it reads the themeRoot and theme variables that were passed and uses it to populate the href for the CSS file: CASTORGUI.GUIManager.prototype.addStyle = function(css, theme) { ... this.GUItheme = document.createElement('link'); this.GUItheme.type = 'text/css'; this.GUItheme.rel = 'stylesheet'; this.GUItheme.media = 'screen'; this.GUItheme.id = "themeGUI"; this.GUItheme.href = this.themeRoot+"themesGUI/"+theme+".css"; this.head.appendChild(this.GUItheme); }; This results in the correct file path being constructed ... themes/mytheme/themesGUI/default.css ... all good so far. Then the next statement in my createGUI() function is to create the form object (ie form = new CASTORGUI.GUIWindow) as you can see above, I pass the guiSystem object (which contains the correct themeRoot and theme values) as the third argument. I can follow the trace and see that this is picked up as guimanager in the CASTORGUI.GUIWindow() function: CASTORGUI.GUIWindow = function (id, options, guimanager) { CASTORGUI.GUIManager.call(this, guimanager.canvas, guimanager.canvasCss); this.id = id; this.html = document.body || document.getElementsByTagName('body')[0]; ... }; This is where it seemed to go a bit odd (to my eyes anyway). The first statement in this function is to call the GUIManager function. It passes 3 arguments. However the first argument (this) is undefined at this stage and the second 2 arguments are a reference to sub-elements of guimanager but they do not include the themeRoot or theme variables. So then when GUIManager calls .addStyle() again, this time it doesn't have any value for themeRoot or theme (although it defaults theme variable to 'default' if it is empty). As I trace through from that point onward, all references to themeRoot are "". There is probably a good explanation for all of this, but this is the only thing I could find. However I am not sure this explains the issue as even if this did work it doesn't fully explain what is happening. It seems that somewhere (although I cannot find it) the current page base URL (mysite:8083/node/) then has the constructed theme path appended to it. With the issue above (ie the empty themeRoot value), this results in a 404 looking for: mysite:8083/node/themesGUI/default.css However even if the correct themeRoot value was being pulled through, this would presumably appear as: mysite:8083/node/themes/mytheme/themesGUI/default.css (ie with the erroneous 'node') This would not work as the correct path (I think) is without the "node": mysite:8083/themes/mytheme/themesGUI/default.css So a long-winded way of getting to 2 questions really : why does the themeRoot value not get passed through from GUIWindow > GUIManager > GUIManager.addStyle? Is this supposed to work this way? How is mysite:8083/node being prepended to the themeRoot value when it should be mysite:8083/ (ie without the 'node/')? Thanks Rich

Hi (for Dad72 or anyone with Castor skills) I'm using Castor for simple UI elements for my app. My UI will have a window for scene/world buttons, a window for current mesh buttons and a window for status/MI. I am having difficulty adding buttons into a window: var form = new CASTORGUI.GUIWindow("form", { x: 0, y: 0, w: 300, h: 200, overflow: "hidden" }, guiSystem); var sceneButton_toggleAxis = new CASTORGUI.GUIButton("sceneButton_toggleAxis", { x:10, y: 10, w:40, h:40, borderRadiusButton:"20px", borderButton:"8px solid gray", value:" ", backgroundImage:"./assets/icon_axis.png" }, guiSystem, toggleSceneAxis); form.add(sceneButton_toggleAxis); form.setVisible(true) When I run this it appears correct. However if I move the window to a new position there is an instance of the button in the window AND a duplicate instance of the button left behind in its original position. Both buttons appear functional. How can I avoid this duplicate button being created? Second question - is it possible to remove the title border from the window object or reposition it (e.g. to the bottom of the window). Many thanks Richard

Hi, Would you please add *.d.ts files for CASTORGUI Library like BABYLONJS? I want to use CASTORGUI in TypeScript (VS2015) project. Thanks.

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.

Hello, I may not be able to solve my current dilemma, however I thought I might ask if anyone has had a similar issue and was able to resolve it. The problem I have is that I have an interface for an application in which I need to display color information through the GUI. So I have a pallatte, a color picker, and a simple mesh plane which I use to display the currently selected color by the user - and I do this by changing the material color value of the plane to represent any color the user has selected. This works great on my laptops or a single device, however, when the device resolution is different such as viewing on a mobile device, the position of the mesh plane is changed since the display of the plane object's position is relative to the resolution of the display in which it is rendered. So the result is that all of my GUI elements are always relatively the same in their position - relative to each other - so my GUI works and looks good on every device I've tested. But since I need to display an object as an element of my GUI which represents the current color the user has selected to draw with, this mesh object's position is different on most all mobile displays - since the display resolution is different on each device. I wouldn't begin to know how to lock the (X, Y) position of a scene mesh to the (X, Y) position of a GUI element or it's canvas, even though the camera is always in a fixed position. So unless someone in the BJS community has been able to do this, then I need to find a method to display the current color using either the CasterGUI or bGUI extensions - which I am using both for my application's interface. I had previously been doing this by displaying the textures from the color pallette using bGUI, but had to find another method to display the current color when I added a color picker using the CastorGUI extension, since the color picker allows any color value to be selected. I'm certain that Dad72 will take a look at this post, and I believe there is a solution using the CastorGUI extension, but not certain how to build this yet. What I require is a GUI element such as a rectangle which can change to display any RGB value. I think that CastorGUI can do this since I'm currently calling a color picker element which accurately displays the color from the color picker. But I haven't yet been able to dynamically change the color of a different GUI element. I hope this makes sense, and I appriciate anyone reading this who might try and help with my dilemma. Thank you, DB

I have a portion of my GUI created using the CastorGui extension. I've been trying to pass an object property from the colorSelector.getColor(); (r,g,b) values to another script (my main BJS script), as I have to keep the extension calls and functions in a seperate script. As a quick fix, I also tried to pass a global variable holding the parseFloat() (r.g.b) values, but I haven't had any luck passing these values using either method. What is the best method to pass these values - as well as to pass a CASTORGUI.GUISlider() value to a seperate script to use as a video slider control. I will also need to pass values back to my CasterGui script as well. Thanks for your help, DB

Hello, I suppose this question goes out to Dad72, but if anyone has the answer, please chime in on this post. I'm using a color picker object (button and function) in the CastorGUI extension. Currently, it appropriately displays the color which is set in the color picker dialog box. However, I need to also change the color of this button to represent other color input controls when needed. Below is the following code example: var create_color_GUI = function() { // GUI manager var callback = function() { var pick_color = colorSelector.getColor(); }; colorSelector = new CASTORGUI.GUIColor("pick_color", { x: 1085, y: 510, w: 40, h: 40 }, guisystem, callback); }; Is there any way to set the rgba value for the button to be different from the color picked using the color picker dialog box? I tried setting this, but I couldn't get this to change color so I assume it isn't supported. If not, how might I set up a seperate CasorGUI button to call the color picker? I haven't spent much time on this yet, but haven't had any success in the time I spent working on it this evening. Also, if someone can provide a code example of a CastorGUI slider control with most of the properties and options shown, as well as the "get value" usage, this would save me considerable time experimenting with what I need for my GUI sliders - which I primarily need for video playback controls. Thanks! DB EDIT: Just to be clear on calling the color picker with a seperate GUI button, I need to call the color picker dialog box without displaying and/or having to click on the color picker GUI button. So either this - or the ability to set and change the color of the color picker button seperate from the last color pick is what is required. Also, I do have a good example from a post by ConnorsFan, but I am missing how to extract the value of the slider, and how to take advantage of all of the options available for the slider control, such as color, style, and added image file representing the slider control elements - Thanks.

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

Hello, CASTORGUI::GUICheckbox.setChecked(true) does not work. It seems like "checked" is undefined in function: CASTORGUI::GUICheckbox.setChecked() Thanks for your help.

Hello, How to set a item as the current selected item for CASTORGUI::GUISelect ? In addition, I also need to use these operator: find item, remove item, change item value and so on. Would you please add these functions? Thanks for your help.

Hello, CASTORGUI::GUISelect works well in web client , but does not work if it is added in a panel of a window. var myselect = new CASTORGUI::GUISelect("myselect", {x:5, y:5, w:100, h:40}, guisys, function(){alert("changed")}, true); myselect.addOptions("a","a"); myselect.addOptions("b","b"); This code works. But the following code does not run. var mywindow = new CASTORGUI::GUIWindow("mywindow",null,{x:0,y:0,w:400,h:600},guisys); var mypanel_1 = new CASTORGUI::GUIPanel("mypanel_1",{x:0,y:50,w:400,h:550},guisys,false); mypanel_1.setVisible(true); mywindow.add(mypanel_1); var mypanel_2 = new CASTORGUI::GUIPanel("mypanel_2",{x:80,y:0,w:300,h:500},guisys,false); mypanel_2.setVisible(true); mypanel_1.add(mypanel_2); var myselect = new CASTORGUI::GUISelect("myselect", {x:5, y:5, w:100, h:40}, guisys, function(){alert("changed")}, false); myselect.addOptions("a","a"); myselect.addOptions("b","b"); mypanel_2.add(myselect); The GUISelect can not be displayed. Thanks for your help.

Hello, I add a CASTORGUI::GUITextfield in a window, and I click in the GUITextfield control, then I drag mouse and want to select all string in the GUITextfield. However, I can not select the string , instead, the window is moved . It is not easy to enter characters because of this bug. Thanks for your help!

I am using the castor gui radio buttons to pick color choices by placing the radio buttons over a panel background of the color choice. Picking the radio button does not seem to fire the callback shown in bold below: for (var i = 0; i <= 16; i++){ShedColorPanel = new CASTORGUI.GUIPanel( "colorpanel"+i ,{ x:currentx, y:50, w:50, h:50, backgroundColor:"#"+ShedColorValues}, guisystem );ShedColorRadio = new CASTORGUI.GUIRadio( "siding"+i,{ x:currentx+20, y:70, name:"siding"}, guisystem , ShowColorPage); ShedColorRadio.setVisible(false);currentx += 60;} I put the same callback routine on a normal button and it did work there. ThanksJeff

Hi, I am using the excellent CastorGUI extension but am having a small problem. It seems like the step size is being ignored in CASTORGUI.GUISpinner when set to 2 instead of 1. In the code below I am creating two spinners (one for width of shed and one for length). var WidthSpinner = function() { shedWidth = guiSpinnerW.value * 12;scene.dispose();scene=createScene(); }; var LengthSpinner = function() { shedLength = guiSpinnerL.value * 12;scene.dispose();scene=createScene(); }; var css = "button{cursor:pointer;} #textDialog{margin:6px;}"; var guisystem = new CASTORGUI.GUIManager(canvas, css); var guiTexture = new CASTORGUI.GUITexture("life", "data/image.png", {w:50,h:50,x:100,y:3}, guisystem, null); var guiSpinnerW = new CASTORGUI.GUISpinner( "spinW",{value:8,stip:2,w:30,h:25,x:10,y:3,min:8,max:12}, guisystem, WidthSpinner); var guiSpinnerL = new CASTORGUI.GUISpinner( "spinL",{value:16,stip:2,w:30,h:25,x:50,y:3,min:8,max:40}, guisystem, LengthSpinner); In my tests, the spinners function properly but increments by ones, not by twos as I was trying for. I tried spelling "stip" as "step" with no evident change in behavior. Can anyone point me to a fix here. I looked at the source online and did not see where the counter associated with the spinner control was being incremented. Reference doc: https://github.com/dad72/CastorGUI/blob/master/doc/GUISpinner.md Thanks a lot. Jeff

Hello, The GUI API: CASTORGUI::GUIRadio::setChecked(true), CASTORGUI::GUIRadio::setChecked(false) is not work. In addition, would you please set a group for some related radio buttons? So, there is one and only one radio button be checked at any time in this group. e.g. var myPanel = new CASTORGUI.GUIPanel(); var myRadio_1 = new CASTORGUI.GUIRadio(); myRadio_1.group = 0; // or string name var myRadio_2 = new CASTORGUI.GUIRadio(); myRadio_2.group = 0; var myRadio_3 = new CASTORGUI.GUIRadio(); myRadio_3.group = 0; myPanel.add(myRadio_1); myPanel.add(myRadio_2); myPanel.add(myRadio_3); myPanel.setVisible(true); Thanks for your reply and help.

Hello, I create a CASTORGUI::GUIWindow, but it can not be moved on pad. Thanks for your help!

Hi, I want to set a group for CASTORGUI.GUIRadio, so that it will auto keeping only one radio button is been checked at any time. How to do that? In addition, how to get check state (been checked or not ) of CASTORGUI.GUIRadio? Thanks for your help?

Hi, I use CASTORGUI.GUISelect.addOptions() with this code: var sel = new CASTORGUI.GUISelect("testSel", { x: 5, y: 10, w: 200, h: 40 }, gui, { alert("click") }, false); for (var i = 0; i < 10; i++) { sel.addOptions("value", "text"); // ???? } mywin.add(sel); But it seems not work. However, it works without sel.addOptions("value", "text"); How can I use this GUI control method? Thanks for your help!

Hi, Can I add panel into a dialog or window in CASTORGUI?​ Thanks!

Hi, Are these bugs of CASTORGUI? 1. Color property "rgba()" in many controls option is not work. 2. Dialog / window can be moved if drag it's button or textfield. Thanks for your help.

Hi, How can I set new position for button, textfield, panel, dialog,window in CASTORGUI dynamically?​ mywin.windowPosition.x / y , myBtn.buttonPosition.x / y seems can not change control position. Thanks for your help!

Hi, Can I use tree-view control or list control in CASTORGUI​? Thanks for your help.

Hi, How to hide "Close Button" in CASTORGUI::GUIWindow​. And I do not want to use GUIPanel because it can not move. Thanks for your help.

Hi, How to open a CASTORGUI::GUIWindow again after I closed it?​ It works well if I use mywindow.setVisible(false) / mywindow.setVisible(true). But it can not be displayed if I closed it with the "Close Button". How can I show it again? Thanks.