Camera screen, in middle, prblm : displays mini image of all scene's textures (??)

[Dad72]

Or delete : controlPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

Your controlPanel is 100%, so it does not need to be horizontally aligned. But vertically yes

[Thierry Mil]

Hello Sebavan,

thanks you for your answer.

 

I believe, if you look at your instruction (for placement of controlPanel) is allready there in my code.

 

But the error is here with the instruction for the placement of the button btSoundIsOff (on contromPanel) :

btSoundIsOff_GUI.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;

For me the button should go on the rioght side of the green-bar.

Thank you for your help

Thierry

[Sebavan]

Oh I see sorry, I will look into it ASAP.

[dbawel]

@Thierry Mil-

I personally rely heavily on .css style sheets (as most devs should). I highly recommend using style sheets for all styling for a UI, as this will provide you with the highest degree of flexibility across all OS and browsers. I find it hard to believe how many posts on this forum are related to styling GUIs, but without any .css files referenced - unless they are built by a third party and used blindly by the developer posting questions. Honestly, without a working knowledge of .css files for styling, I'm not even certain how anyone can even begin to consider developing an application for client side browser. CSS files are so very simple to learn and fully comprehend, and are the ONLY way to create a workable user experience. Otherwise, you can only go so far in designing a user experience which provides any degree of interactivity. If you're not fully experienced in .css styling, then you'll never build a GUI worth using as you'll be extremely constrained by relying on others to build a work space which reflects the full capacity for tools, appearance, and functionality for the user.

Please limit the use of any JavaScript styling wrapped into functions by other developers, as this only constrains your ability to build both simple and rich user UIs. Just one hour of online tutorials will provide practically anyone with skills in the intermediate level of styling. And trust me, CSS is just as important as knowing HTML since CSS is the only reasonable and certainly the most powerful set of structures to achieve the user experience necessary to deliver the content in any scene. And if you don't fully comprehend CSS, then you'll never be a good Web or WebGL developer. I'm still baffled when I see questions concerning the style and behavior of UIs and scenes - when learning CSS is such a simple task - especially when the question asks how to make use of a styling function using JavaScript. 

So please just take one hour and study CSS, and you'll find how essential CSS is to any Web project - regardless of the content. I'm not saying that you're not familiar with CSS as I don't know your background, however I all too often find that developers new to this forum often come into this with little or no knowledge of CSS classes and attributes. Make your life and your work much easier and far better - just learn CSS styling - it's beyond essential and so very easy to grasp fully in a very short time.

And if there are any specific questions in this area, you'll get an answer immediately, as CSS is very simple to master and essential to master. GUI extensions are fine, however you're limiting yourself to whatever set of style types the developer of the extension has time to provide - whereas if you style yourself, it's much faster, far more versatile, and holds key advantages such as memory management and extensive animate-able attributes - not to mention the issues with maintenance in many browsers and OS, as you'll quickly learn that there are many HTML elements which are not compatible with all browsers - especially when it comes to media.and elements such as progress bars. So if you use a GUI extension, eventually, it will lose compatibility as new browser versions are released.

DB

[Sebavan]

@dbawel The questions are usually not related to html styling but the integrated babylon GUI system: https://doc.babylonjs.com/how_to/gui

This is an embedded Gui working inside of your 3d space built in house by the awesome @Deltakosh enabling not only Gui in the 3d apps but as well in WebVR where html GUI would not work so far.

@Thierry Mil I am currently tentatively adding a flag to allow filling stack panel in both directions.

[Sebavan]

Actually during the fix, you can use this: https://www.babylonjs-playground.com/#XCPP9Y#330

Maybe this could be enough as well, let s check with @Deltakosh when he is back (I do not want to break his baby).

[dbawel]

@Sebavan-

DK (@Deltakosh)knows how much I respect the work he's doing in this area, so that practically anyone can build a decent GUI with reasonable functionality. However, my point is that it is so very simple to build a rich GUI which is not limited by the functionality provided by the developer (DK) who built the extension or in this case the BJS GUI functions. I make mention of this as there is far more flexibility in creating a unique user UI with very little effort involved (often less time than learning the functions, parameters, and limitations to the BJS GUI). Thus I simply recommend building your own GUI from scratch as it is so simple to do and everyone should know how to tackle such a fundamental task. If they don't know, then they have a large gap in their knowledge of Web development and are overlooking their ability to break from the limitations of using someone else's tools.

I choose babylon.js over three.js and other frameworks because it is well organized and provides most every tool required to render high quality interactive animation and media. However, it's all too easy to fall into the trap of expecting the framework to be everything to everyone - when something as simple as creating a GUI is far better to develop on your own. I love BJS, but try not to allow myself to be limited by functionality which is far more flexible and so simple to integrate outside of the framework.

DB

[Sebavan]

@dbawel Any pointers to what you are using to allow full css gui in Webgl ? (still being fully interactive)

Actually aside of the svg hack (not interactible) and the new WebGL effort to integrate iframe elements in webgl: https://docs.google.com/presentation/d/1VcHu0DSaDZmIHFKXw7ket9IOOI7umLP2w5Nmn6_onxE/edit#slide=id.g23501fb8e5_0_0 I did never find something nice and easy to use.

I am really interested in your solution this could have saved quite some trouble a while back.

[dbawel]

Hi @Sebavan-

As I've been using PHP in addition to my WebGL render canvas, this is a good (good often means "painful") way to discover how creative you can (and must) be in creating rich GUIs using CSS and CSS3. However, if you want to learn how to build rich GUIs with WebGL as an element among many other parts of your online application/content, I highly recommend using the CastorGui extension by @Dad72. His extension clearly demonstrates the power of HTML GUI elements, and his extension allows me to customize any way I choose which is endless. 

Now that I've done the work to learn the ENORMOUS GUI controls available to me as well as being able to build any control I need from scratch; I no longer use CastorGui - as there are so many native HTML elements available which CastorGUI doesn't natively support. However, the extension is so very easy to modify, I believe it is the easiest way to become a master at building HTML GUIs. And @Dad72 is very receptive to questions, and has helped me grow my HTML canvas element skill set far beyond what it was just a year ago. So I no longer use it as I now build whatever I need from scratch extremely fast, but if you want to learn how to build rich HTML GUIs, then his extension will shine a huge light on the basics of how to structure most every common GUI element.

But there's also an ENORMOUS repository of jsfiddle GUI elements with all source code for whatever you require in your GUI. So these days, if there is an element that I'm not fully familiar with, I just do a search for the element - such as a progress bar, timer, rich image buttons, color pickers, etc.(anything) and add "jsfiddle" to the search string, and you'll find every GUI element and some you never even considered before. This is why I highly recommend creating GUIs independent of your JS files and framework, as I'm no longer limited to any constraints and then easily have available hundreds of parameters to beautifully customize my GUIs beyond my imagination. 

 you begin dedicating an HTML canvas to you GUI, it will enrich your game/application and remove any limitations which you invariably run into working exclusively in the WebGL renderer. This will also begin to reveal a whole new way of structuring your scenes where WebGL isn't necessarily the core element of your content; and opens up far more versatility and opportunity to expand the functionality of your application and/or game into various areas to provide more features and functionality overall.

And for me, the main advantage is that when you begin looking at the huge list of native HTML GUI elements, we're talking thousands of these with immense functionality and options which can be styled any way you wish. This removes all limitations to your GUI built with any GUI extension. And as these are native HTML elements, they only require HTML and CSS, and image files, icons, and other elements to create the very richest and most artistic GUI one might imagine. And in addition, for each HTML GUI element, most of these work in every OS, device, and browser, however there are pages of master lists which outline compatibility for each device, browser. OS etc. so that you know what you're building before you commit to any element for compatibility across the board - as there are often differences in appearance and functionality between various devices and OS. So HTML GUIs are much richer and can be more artistic, as well as providing a knowledge base which ensures your design and functionality enabling you to design a beautiful, functional, and reliable UI which can quickly be designed and built with complete confidence.

I would build something quick using CastorGUI, and then look at the extension as the code is easy to read and to modify. Also, I would open the CSS file for the extension, and make changes to quickly become familiar with all of the parameters available to make unique in appearance and functionality - whatever your mind can possibly imagine.

So my hat is off to @Deltakosh, @Dad72, @Temechon, @Pryme8, and all others who have spent the time providing extensions to build nice functional GUIs. However, I would spend the time learning the "how to" yourself, as then you can break away and build custom GUIs on your own with very little effort.

There are tons of jsfiddle examples, so I'm not pointing at the following link as exceptional, but there are a few very interesting examples of HTML and CSS - as well as Javascript for some animation. But there are LOADS of examples online. I used to despise working in CSS, but now that I am able to build more creative UIs, I find working in CSS real fun and look forward to this part of the development process.

https://davidwalsh.name/canvas-demos

Cheers,

DB

Oh - and in addition, I was often using both the CastorGUI and bGUI extensions together in the same scene before I fully grasp the power of HTML and CSS and JavaScript independent of WebGL. Truly, the possibilities are endless and really, really fun to build. But for the short term, if you want practically any GUI element now prior to mastering canvas elements and CSS, then a combination of bGUI and CastorGUI will provide you with all the tools and functionality to create truly original and awesome looking GUIs.

[Sebavan]

I see, you are only speaking about the main HUD and overlay part for css.

This does not address webvr or elements embedded inside of your 3d space where It think the GUI extensions despsite being less rich are still the best approach today.

[dbawel]

@Sebavan-

I'm actually covering GUI elements and interaction on both the HTML canvas and on the rendercanvas. What I was pointing to is that there are far fewer limitations in building much of your GUI on an HTML canvas; as this provides far more flexibility and allows me to integrate any widgets I need to also use on my WebGL canvas for the GUI. I point this out as I find most users on this forum rely entirely on the WebGL canvas and extensions created to build GUI elements and behaviors in the WebGL render loop - which by itself is extremely limiting and causes many potential problems. 

This is why I highly recommend building all that you can in native HTML and CSS if you want beautiful rich GUIs - and can also use JavaScript for unique animations on the HTML canvas. However, this does not limit you from simultaneously adding GUI controls onto your WebGL canvas as they work together in harmony extremely well. I constantly read questions where so many people are trying to make the WebGL canvas handle all GUI elements - whereas using HTML canvas and CSS GUI elements permit you to also integrate WebGL canvas elements for your GUI - and together these combine extremely well and create far less issues than trying to do everything in WebGL. I'm simply trying to ask developers to look at their architecture differently, as I find that many of the problems devs face on this forum are derived from the expectation that WebGL is the only framework needed to accomplish everything from soup to nuts - where I've learned that it's far better to use WebGL for it's core strengths - without tasking the GPU in pushing the render loop to calculate tasks better handled through the HTML canvas. This is why scene often have problems - due to over tasking the renderer when it's often asked to handle far more than necessary.

DB

[brianzinn]

@dbawel Although I do agree that BabylonJS.GUI is not a silver bullet, it has come a long way and is a supported extension. I built my entire game using html/css for my GUI and now I want it to work in VR, so I am having to redo the entire GUI... so, building on HTML canvas is generally faster and easier, but does not provide that flexibility!    Also, if people want to deploy on mobile then they may choose to not have DOM (ie: Canvas+ for Cocoon).  There are pros and cons of each method - I can't say I would recommend one or the other, because it depends on the project.  I think any recommendation to not use GUI should at least include a caveat about VR.

[Dad72]

10 hours ago, Thierry Mil said:

But the error is here with the instruction for the placement of the button btSoundIsOff (on contromPanel) :

btSoundIsOff_GUI.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;

For me the button should go on the rioght side of the green-bar.

As I explained above your controlPanel is aligned on the left, so all the elements that will be in this control panel will be aligned on the left. So the alignment of btSoundIsOff will be ignored.

Try to delete the line I spoke to you, I think it can solve your problem (I already had this problem myself).

[adam]

@dbawel it would be helpful if you provided examples of GUI”s you have created.  Thanks

edit:

simple pg examples would be best.

a few lines of code can be worth a thousand words and avoid a lot of back and forth.

if you need to use css, maybe jsfiddle would be better than the pg.

[brianzinn]

@adam - there is a lot you can do in CSS like even pong: https://www.sitepoint.com/examples/css3pong/step3-a.html and there are many, many menus/navigation bars.

I played an interactive pong game more like air hockey built on matter.js (2d physics engine) and CSS at an indi-game event a couple of days ago - it was really well done and fun.  I must admit it is probably going to take me 10x longer to build using GUI - and without mixed font families/style in wrapped text, rich controls, etc.  - I will persevere with GUI for VR, but it is easier in css/html (and faster workflow with HMR autoloading)   I think there's room for both to be considered good options. Anyway, this is way off topic of original question!

[adam]

It is important that we have simple examples using BJS so that users can decide which is best for them.  This is much more helpful than just someone telling you which is best.

[davrous]

I haven't read the full thread but regarding BABYLON.GUI, I think it's a masterpiece and @Deltakosh has once again done a fantastic job. Test this sample: https://www.babylonjs-playground.com/#RVZ28K#7 if you've got a VR headset (HTC Vive, Oculus or Windows Mixed Reality) or watch the result in this video: https://twitter.com/davrous/status/936278478487543808

Simple to use and impossible to build without the GUI layer of BABYLON. You can't do that using CSS & HTML as only the canvas element is projected in VR. 

[dbawel]

I do not believe there is anything wrong with using the BABYLON.GUI, as it functions extremely well. So please don't think that I have ever said anything negative against its usage. I simply point out that it is often a bit much when it's often so very simple to create rich HTML GUI controls natively from within the DOM. Thus I completely agree that the BABYLON.GUI is a fantastic tool to use and I highly recommend it. I only point out that I prefer devs look outside the babylon.js framework from time to time in order to expand their toolset  - as opposed to the expectation that babylon.js is the best solution for all scene and canvas elements.

DB

[Thierry Mil]

On 01/12/2017 at 11:07 AM, Dad72 said:

As I explained above your controlPanel is aligned on the left, so all the elements that will be in this control panel will be aligned on the left. So the alignment of btSoundIsOff will be ignored.

Try to delete the line I spoke to you, I think it can solve your problem (I already had this problem myself).

@dad72

Very sorry Dad72, I did not see you sais 'delete' the line. Stay tune. I will try to do it.

 

[Sebavan]

Just in case it was lost: https://www.babylonjs-playground.com/#XCPP9Y#330

[Thierry Mil]

On 30/11/2017 at 2:58 AM, Sebavan said:

Can you try controlPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT; ?

 

[Thierry Mil]

Quote

 

On 30/11/2017 at 2:58 AM, Sebavan said:

Sorry for the last post it was a mistake.

@sebavan  Thank you for your answer. The link waw very usefull. What I did wrong all the way was to give an horyzontal alignment to each Button I put on the stackPanel..

Now I understand thath the only gui 'element' to give the alignment is the container (ie. the stack Panel).

To resume for future reader :

If you wan to put inside a stack paneltwo buttons ligned horyzontaly  do this :

// 1) Place Stack Panel (container) and give it the 'horizontal alignment' :from left to right :
 controlPanel = new BABYLON.GUI.StackPanel()
 controlPanel.isVertical = false;
 controlPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
 controlPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
 controlPanel.width = 1.0;
 advancedTexture.addControl(controlPanel);

// 2) Just add the buttons (nothing more : they know where to go) :
 btSoundIsOff_GUI =  BABYLON.GUI.Button.CreateImageOnlyButton("btSoundIsOff_GUI", fvAssetsDirectory+"/icBtSoundOff_32x32.png");
 btSoundIsOff_GUI.thickness = 0;
 btSoundIsOff_GUI.width = "32px";
 btSoundIsOff_GUI.height = "32px";
controlPanel.addControl(btSoundIsOff_GUI);

 btSoundIsOn_GUI =  BABYLON.GUI.Button.CreateImageOnlyButton("btSoundIsOn_GUI",fvAssetsDirectory+"/icBtSoundOn_32x32.png");
 btSoundIsOn_GUI.thickness = 0;
 btSoundIsOn_GUI.width = "32px";
 btSoundIsOn_GUI.height = "32px";
controlPanel.addControl(btSoundIsOn_GUI);

Thank you alll for the answer in the last two weeks. It helped.

Thierry

 

 

[Thierry Mil]

Hello BabylonJs collegues and friends.

Since the last post on this "2d buttons on top of the 3D frame" issue and will say three things :

1) Go for  Babylon GUI :

It is right, whenever you want to and some 2D control elements over the 3D panel,  do NOT use bgui api anymore (not maintaned, buggy, etc), but rather use the recent built-in GUI API made by babylonJs people. Here is the wonderfull starting point : https://doc.babylonjs.com/how_to/gui

It works great, I can't see any bugs....

 

2) Smartphone, go for pep and latest babylonJs api :

My main goal was to use the touch interactions of Smartphones  because touch is coded inside babylonJs.

Now, i fyou want the touch elements to work without a glitch or bug, on Smartpone devices wether it is Android or Iphone, I would say this :

Avoid using Hand.js but rather use the latest pep.js ( made by JQuery team but independent from it... see  https://github.com/jquery/PEP  )

I first used hand.js but on iphones, and Apple's Mac I had some quite big issues on the detection of the end of swipe (after a few swipes It was behaving as if I would swipe for ever.. no termination of the swipe action... big issue).

 

So now my 3D player works on any os or navigator. It is reaaly so great to have a single code for a quick, responsive 3D player.

I even (almost) successfully coded a "fullscreen" button. Almost because Apple did not implemented it on ios (really a pitty.....).

 

Cheers. 

Thierry

 

 

[GameMonetize]

Thanks a lot for this feedback;)