Html menu inside babylon.js

[zied sellami]

Is it possible to insert a html code inside babylon.js to show a menu ?
If it is true ; can anyone give me an example

[RaananW]

That's a very developer-structured question  

if(isPossibleToImplementHtmlMenu()) giveExample();

to isPossibleToImplementHtmlMenu() :

Check CastorGUI (https://github.com/dad72/CastorGUI), bGui (https://github.com/Temechon/bGUI), Dialog System (https://github.com/BabylonJS/Extensions/tree/master/Dialog)

to giveExample() - check the respected linkes above. I am sure you will find what you need.

 

Of course, never forget that an html canvas object is an HTML(!) object, so it can be integrated in a website exactly like a div element. You can always create a menu like you are used to and simply put the canvas on that page.

[jerome]

If you want to know it it's possible to insert some classical HTML nodes within the canvas (WebGL) element, the answer is no.

But it's not BJS, it's the HTML5 syntax.

[dbawel]

@jerome is correct, not that I need to mention this since he is one of the key contributers to the babylon.js framework - and a genious. But you can utilize HTML functions by building an extension and calling this from within your babylon.js script such as the GUI extensions @RaananW (also a genious) lists in his post. If you povide the HTML function(s) you are specifically looking to call, you will most likely receive the info you're looking for as you may find some of the same functions available in babylon.js, or one of the existing extensions which I personally use all 3 of the extensions @RaananW lists regularly. There are also methods to set up multiple canvas' to execute various functions that you might be seeking to accomplish. So as it was previously mentioned, it is difficult to answer your question with anything of value given such little information.

[Wingnut]

Hi guys!  Maybe this?

http://playground.babylonjs.com/#1HLSBC#7

FIRST, push -Editor button.

Click on box, html menu opens there.  Click again, it closes.  Raanan's (and others') suggestions for using extensions... is wiser.  But the above demo is more "gruesome".

[RaananW]

I think you are the best resource for playgrounds-that-should-be-listed-somewhere-but-aren't

[Temechon]

You also have this page you can contribute to : http://doc.babylonjs.com/generals/playgrounds

[Wingnut]

Hey, welcome to the forum, Zied!  Good to have you with us.  I hope we are giving you the answers you want.

@temechon - Wow, that even has an "author" column.  I know-of some playgrounds that have over 10 authors.  First it was this, then it became that, then something else, then... etc. etc.    Fun!  Mega-collaborations.  Gotta love it!

I use precision laser-guided playground search.  I'm one of only a few who build HTML dynamically inside playground demos, so precision searches for certain keywords... usually finds my chicken-scratch playgrounds.  I usually search for 'kludge' or 'yech' or 'mess', and all my playgrounds appear.    (Zied, I'm trying to be a comedian, and failing nicely.  YOU might want to search our playgrounds for terms like 'appendChild' and 'createElement', and of course, bGUI, castorGui, and Dialog) 

I've been collecting URL's to great playgrounds made by everyone.  I rename them appropriately in a bookmarks folder.  I would be glad to add my pile to that list (most would be author unknown).  I think playgrounds are the #1 teaching system that we have.  I highly-cherish them.

Anyhoo... back on topic (Wingy looks left and right suspiciously, in fear of TP's).  Studying dat.GUI is a decent way to learn about doing HTML near webGL, too.

I would like to convert what SOME (Jerome) have said... to puppy-talk.  (I like puppy-talk.)  Umm, you can't launch a fully-operational web browser on a BabylonJS plane or box.  Our in-scene player-characters REALLY want to use web browsers on the computer screens (planes) in their virtual worlds, but we have not yet been able to provide that for them.    WebGL avatars (Little Computer People) are somewhat oppressed.  Their food isn't very nourishing, either.  Pixels are their primary food staple.  heh

[Temechon]

Feel free to share your bookmarks with the community

[dbawel]

@zied sellami - personally, I have sved myself many, many hours in using the extensions developed by Temechon, JCPalmer, and Dad72 which have provided me with every single GUI element I have ever needed to create fully functional and aesthetic interfaces for apps primarily - but for games as well. Using the bGUI, CasterGui, and Dialog extensions will save you countless hours and provide you with quality GUIs beyond what you will be able to develop yourself - and I use all 3 together in a single scene as they all offer different approaches and functions to GUI development. So I personally cannot recommend these 3 extensions any higher than i already have, as these are all essential to practicaly every application I build these days - and each one of these have fully supported by their authors so that I have not had any delays in my own development as the usage of each of these extensions require a small amount of trial to fully utilize. But each of the authors of these extensions have responded in record time with answering support issues.

So for GUI elements and functions, I have come to rely upon these 3 extensions for all of my interfaces. And for other HTML functions, as I previously mentioned, I have discovered babylon.js functions within the BJS framework to cover most HTML operations such as full support of HTML video functions within videoTexture and material functios as well as some support for most any necessary HTML function you might require witin a scene. and if it isn't yet supported, the babylon.js master file is so easy to understand (for the most part), that you can either find a way to modify it to your specific needs, or build an extension of your own to take advantage of most any HTML function - and you can find excellent examples of this by reviewing the GUI extensions previously mentioned, as well as the Castor Engine created by Dad72 and available on Github for download.

I began using three.js as it was recommended to me by a collegue David Allan Smith at Lockheed Martin Virtual Labs; and it was a sufficient choice for my needs at the time. However, once I discovered babylon.js in 2014, I found it far more versatile in the many ways to accomplish similar tasks, and far more optimized and efficient compared to three.js - especially in working with character animation, cameras and control systems, but in so many other areas that there are very dramatic differences between three.js and babylon.js - not to mention the legacy issues with three.js limiting the developer to far more lengthy processes in building simple scenes requiring user and camera controls. As most everyone discovers quite quickly, you'll most likely become addicted to the power which babylon.js provides developers with considerable experience, as well as newbies who happen to stumble upon this framework by chance, and never look back once they get a taste of this rapidly evolving framework and the many extensions and tools available online daily with far more rapid growth and an expanding user base far beyond any other WebGL framework.

And @Wingnut - thanks for always trying your very best to help the newbies and the experienced alike - as you are truly the Playground Aficionado in the babylon.js community, with more Playground scenes than anyone I'm aware of. I know you've saved me countles hours posting examples of practically every type of function available in BJS. I just don't know where you find the time. I can only imagine a desk and chair with a toilet built in so you don't have to get up as this might take time away from your coding. And this is backed up by your sense of humor - which you truly outdid yourself in your last post on this thread - as I could only follow about 5% of what you were saying - which either means that I'm not on the same intellectual plane as you are, or perhaps you loose you mind from time to time - perhaps both are true. But it's always entertaining, I have to say. Keep it coming, my friend.

DB

[DJousto]

@zied sellami to go back to you initial question

Quote

Is it possible to insert a html code inside babylon.js

don't forget that you're in a web page, you can display html elements over your canvas (you can buid a menu and affect a static position), and interact with those elements inside you JS,  to you initial question there are many solutions, can you be more precise on your needs ?

here is a very basic example (menu on the left top corner) http://boobiz.fr/webgl/babylon/index.html

for the moment i didn't implement interaction with js

[Wingnut]

  I'd add a LIKE to that, but I have reached my 10-LIKES-per-day limit, and it's only 6:45 AM here in the USA.  I really need my LIKES limit raised to 50 per day. 

Thanks for the nice words.  Your posts help lots of people, too.  And, they are interesting to read.  I love it when advanced programmers and pro idea-guys like yourself... talk.  And yes, I don't have much of a life other than BJS, but I am proud of that.  BJS is wonderful, and it starts to open doors that VRML never could.  I'm not into games as much as SOME are, but I love VR worlds, and I love the "art" of 3D graphics, and the abilities for 3D to help visualize.. great for learning and data analysis.  To date, we have NEVER had easier VR than we do with Babylon.js.

What part of my last post did you not understand?  Was it the part about using web browsers running on computer monitors in our scenes?  It gets worse.  A computer monitor in a BJS scene... could render the same scene that the computer monitor resides-within.  And in THAT BJS scene, another monitor... with a BJS scene rendered on it... that has a monitor running a BJS scene... ad infinitum.    Goofy, huh?  And, you are correct, I am not what most folks would call "normal".  I have strange priorities.  To SOME degree, I reverted to childhood ways. 

But YOU... are no less unique.  I find you very fascinating to follow.  If I had YOUR brainpower, I'd be truly dangerous.  heh.  You're a good guy, DB... I like hanging around with you.

@DJousto  Yep, absolutely correct.  The undefined word to Zied's question... "inside".  All of our replies are based-upon varying versions of the definition of "inside", eh?  That's why I took it to the weirdest version... running browsers and other apps... on a VR computer screen that is a BJS plane or the side of a BJS box.  That version of "inside" is the most unusual.  All the other replies are actually "inside" the browser, not inside BJS.  And even if we ever DO get a browser running on a BJS plane, technically, we'll be "inside" a browser again... and not really inside BJS.

Let's face it.  It was a weird, discussion/thought-provoking question... mega-vague... and we should probably shake Zied's hand for blowing our minds. 

[dbawel]

@Wingnut - I think you began to loose me at the somewhat oppressed little computer people.who don't have very nourishing food with their primary food staple as pixels. But as I've mentioned previously, I believe you exist on a much higher celestrial plane than I do, and only so often - I'm able to cross into your realm of existance - if only for a short time. Just remember to empty your chair, as cleanliness is next to Godliness, and we need you to keep the faith for us all - of course, with a little help from our friends.

[JCPalmer]

FYI, I wrote the Dialog extension, but I use html elements for pages where the controls are taking up a permanent dedicated screen area where the scene must never display, and non-game scenes.  I use html tables to contain things, since I found it handles resize the best.

If you set the background color of the page == the scene background color, it has a really good look.  This is also good for:

• slider controls
• text input
• drop downs

[zied sellami]

thanks guys for the the solutions and the ideas that you provide. 

[Pryme8]

On 3/23/2016 at 1:46 PM, JCPalmer said:

FYI, I wrote the Dialog extension, but I use html elements for pages where the controls are taking up a permanent dedicated screen area where the scene must never display, and non-game scenes.  I use html tables to contain things, since I found it handles resize the best.

If you set the background color of the page == the scene background color, it has a really good look.  This is also good for:

• slider controls
• text input
• drop downs

I am so interested in this for so many different reasons...  I really have been mulling over an auto talking animator forever based off text input and timings or inflection settings.  I think it would be priceless for all sort of animation deployments.  Do you have this open source?

As far as HTML menus go. just do a wrapping Div over your canvas, set pointer-events to null, except for on the elements you want to be able to interact with.
 

I should upload my new version of TERIABLE, it has some really dynamic html menus and would give you some ideas i bet.
http://pryme8.github.io/TERIABLE/
here is the old one, not as intense of menu html menu stuff, but yea at least its an example for you.

Also you could just append Items with javascript or jquery to the body and have the z-index  higher then your canvas honestly there are a ton of ways to accomplish this.

as far as actually creating HTML elements in the canvas without some sort of scripting or library that would handle all of that for you in a manor similar to regular DOM creation is not valid option.

[JCPalmer]

No, at some point it will be though.