CastorGUI - add GUIButton to GUIWindow (Resolved)

[touslecoq]

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

 

[touslecoq]

Fixed it - I was missing the "false" attribute at the end of the creation statement to inhibit it from being appended to document body.

[touslecoq]

Also I removed the title border by setting the Text to " " and the heightTitle to "0px".  Would be great to have more configuration over the positioning of title though.  

Great extension though!

[dbawel]

@touslecoq -

Glad you solved this, although I was hoping to assist. @Dad72 wrote a great extension, and I find it saves me loads of time and effort when I require HTML objects - and especialy when I need to quickly and easily create great looking forms for my GUIs. I rely heavily upon CastorGUI in addition to using some of the WebGL GUI extensions now available - as CastorGUI is unique in handling HTML elements. Obviously, I'm a huge fan.  And I highly recomend checking out the library of GUI elements he's already built - which are entirely customizable using CSS in addition to the extension. I'm glad there's someone else out there using it, as allot of work went into creating the extension, and @Dad72 is always there to assist.

Cheers,

DB

[Dad72]

Hello,

Delighted that you find the solution to your problems. For repositioning the title, there are options: titleTextAlign: center | left | Right. For window 

What do you look for as an additional option for example? A repositioning in pixel? I am ready to add the option that is missing for you

[touslecoq]

Love this place!!  Thanks both for your replies.

@Dad72I haven't checked out your suggestions above yet, but the effect I was trying to achieve was a control group (ie. like a toolbar) with the title section at the bottom of the group rather than the top.  The group would be positioned at the top of the screen with only the title element visible (ie the remainder with the buttons in the group would be off the top of the screen).  Upon moving the mouse over the visible portion (ie the group title) would then trigger the whole group to move down into view, creating the effect of drop-down toolbar in order to maximise scene view when not pressing buttons.  Mouseclick may be better than mouseover.  I am sure there are far more elegant ways to achieve this but that was my initial thought.

[Dad72]

The headlines are on top of the windows, but maybe with CSS and Jquery you could get to that result. I will not have much time, I had some problem with a software that does not start anymore and I will have to reinstall my PC, which does not please me.  All that I will have to reinstall to be operational... 

Good luck

[dbawel]

@touslecoq -

As I mentioned previously, @Dad72 is a fantastic resource, and also as mentioned, I'm very surprised that more users aren't taking advantage of the CastorGUI extension. It seems like most developers believe they must choose only one extension for their GUI, and make everything work within that choice of extension. However, what you're describing is EXACTLY what I generally use CastorGUI to do - which is to create forms for my GUI which are not necessary to have visible and available on screen at all times.

As @Dad72 mentioned he is very busy right now (and almost always busy on projects or contributing to the babylon framework), so if you need any assistance with your GUI function, I highly recommend creating a simple playground scene with whatever GUI elements and/or additional functions you might need help with; then I (and others) can easily assist you. Unfortunately, I don't know many users who are familiar with CastorGUI, but everyone will be able to look at whatever you build on the PG. And assisting with building custom GUIs is generally a very simple task for anyone who has built GUIs for production, but due to limited documentation, the first time using any extension is never simple. I'm also currently on a project and a heavy deadline, but I have enough code for CastorGUI (and other GUI extensions and functions) that whatever you might need help with, I'm almost certain I have something similar already built, and it's all too easy to copy and paste existing code. That is if you still require help. And if so, put together a PG scene, and someone will review in a timely fashion.

I personally love building GUIs, and especially working with CastorGUI and integrating this extension with the various WebGL based GUI extensions - which are all a bit different, and have their unique features - so choosing which one is best for your needs can only come from experience.

But as CastorGUI functions more closely to how you might natively build GUI elements in HTML, it holds unique value for me personally in building almost every GUI when working in WebGL. And based upon the description of your GUI needs, it sounds as though CastorGUI will help you create exactly what you want - and I advise to also consider using in addition to a widget/WebGL based GUI extension - as they are able to function together in harmony. 

Build a PG scene if you need additional assistance, and you'll receive many responses - as you said yourself: "Love this place!!" and I'll guarantee that your appriciation for this forum will only become greater, as the users of babylon.js are unique to the open source and WebGL communities. And FYI - I wouldn't currently have any work right now if it weren't for this forum. So welcome!

Cheers,

DB