Make a HUD using sql data

[babaorhum]

Hello,

Sorry if the question sounds a bit dummy

I'm a very junior developper and started coding with babylonJS a couple of weeks ago

Here is my playground as an example

I looked around and didn't find out.

I would like to display several boxes on the ground linked to a panel (hud) which would display datas dynamically like on the example.

How can I get the data from an extern source to the canva

Yet I could display innerHTML from a <p> in the dom that is hidden in CSS

is there any other option?

Can I have a background to the panel which shows informations already?

I heard about GUI,  should I look deeper into it?

Kind Regards,

Jessica 

France

[JohnK]

Hi and a welcome from me to the forum and BJS. A powerful way of displaying data within BJS is using canvas2D (not the canvas element of HTML but a method within BJS to add 2D information). You can start reading about it here http://doc.babylonjs.com/overviews/canvas2d_home

Whilst I have never used it myself and could not answer questions about it there are many people on the forum who could.

Good luck with your project.

[Wingnut]

Hi guys/gals... and welcome J!

@JohnK sort-of forgot to talk about inputting external data into a scene, eh?  (I like your hidden <p>.innerHTML idea, by the way.  Cool!)

Some people like to import data from .json files (I believe a .babylon file is quite similar).   Let's look at one of our "playgrounds" where one of our forum friends was working-with some .json.   http://www.babylonjs-playground.com/index.html#X6JQZ#54

This seems to work okay, no matter Version: Latest or Version: 2.5.  There is an object being output to JS console.  (You can click on it in the console, and sometimes an object inspector will open.)  View that object, and you will see it has an .animations property containing a 31-item array.  That array... is data from the "outside world".  (Wingnut dances around a bit, but nobody knows why.) 

Let's browse the json file that is being loaded in line 45.  http://lakistein.github.io/canvas/animation.json  Wow, it's a big fat pile of ascii data!  If a server could generate a .json file like this, I bet we could get her loaded-in and parsed, now.  Thanks to Lazar Lazarevic for letting us "borrow" his playground series. 

Jessica... feel free to make edits and saves to that playground (or ANY playground scene).  Every time you make a new SAVE you will see a new URL at the top.  You can highlight that new URL, and paste it to forum posts... to share discoveries and have discussions.  (Everyone can click the URL to the playground you created/edited).  You cannot hurt anything in the playground editor/viewer... it is impossible to do any damage.  Do anything, have fun.

Playground search for 'getJson' was used to find Lazar's playground demo. 

There are other ways to retrieve outside data.  One way is to create a .babylon file, perhaps with only a .metaData property containing a (single, huge) string of data (possibly a pile of serialized json).  I think there is one .metaData on each imported mesh (the mesh can be empty, a ghost, and contain only .metaData, if you wish).  You can use that .metaData property for your own purposes, freely.  The importer will honor it, and place it in the scene for you, when you load the .babylon file.

If you have a server that can generate json-ish .babylon files and publish them within domain-reach, then you can use THAT method to haul data into a scene, too.  Scary, huh?  heh.  Nah... it's all good fun.  I think you can also append an html <script> element into the DOM, and bring-in a .js file in that way, too.  Ajax/jQuery can load .json and other things, too.  Both are automatically available in our playground, and as <script> includes in other JS projects.

JS is a blast, BabylonJS is a blast, and the people around here... well... they're great... so THAT is a blast, too.  Welcome again... hope this helps.  Party on.

[babaorhum]

Regarding the "<p>", I was doing some search and research

It works quiet well actually

Reading https://doc.babylonjs.com/extensions/bgui I wonder what they mean by

Quote

I can use HTML/CSS to do that!

 but couldn't put my finger on it

I would love to be able to do some html, angular, css and have it displayed in my canvas

I do agree with you about javascript, babylonjs, and the people around it too... though I got some hard time to understand them...often

I do know nothing about 3D, games, or very little about js but I jumped into it (got no choice abviously), enjoyed doing very quickly stuff at first but then happend to be quiet difficult.

Edited March 15, 2017 by babaorhum
orthography matter

[JohnK]

Still do not know very much about canvas2D but simplified the example  -  Track 3D Scene Nodes with WorldSpaceCanvas  -- from this tutorial

to make this PG http://babylonjs-playground.com/#29RZH7 for an HUD. Have a play around.

13 hours ago, Wingnut said:

sort-of forgot to talk about inputting external data into a scene, eh?

Not so much forgot as avoided

 

 

 

 

[Wingnut]

Yep, Canvas2D, basic widgets, attached to screen surface or tracking mesh.  Canvas2D system is being developed into a "fleshed" GUI system... but it's not quite complete, yet.  Still, a person can make a darned nice GUI... using Canvas2D "within" a BabylonJS scene.  And bGUI and castorGUI and "dialog" can do nice things, too.  (more to learn about, someday)

But, HTML/CSS works, too.  HTML elements can surround a 3D Canvas, much like you see in our playground application.  Also, when you set HTML CSS style.position = "absolute"... then you can set style.left and style.top, and place an HTML element anywhere ATOP the 3D canvas (called absolute positioning).  Generally speaking, you set the HTML x percent from the left, and y percent from the top... of the HTML page.  This will put an HTML element directly atop the 3D Canvas if you wish, and it will have full HTML events active on it... (IF the CSS z-index for the element... is a lower value than the z-index for the 3D canvas element).

You can also "model" a button, using a plane or box mesh... and then attach a Babylon "actionManager" to it.  Then IT can generate click events, etc.  SO, an HTML element can be a button, a mesh can be a button, and a Canvas 2D "primitive" can be a button... all "atop" or "within" the BabylonJS scene.  Lot's of options.

http://www.babylonjs-playground.com/#10P0IP#0

There, I used some SERIOUS dynamic (generated) HTML... for stuff.  Nothing is absolutely positioned, but elements are "appended-into" the playground webpage at certain positions... to make my simple toolbars and readouts.  It APPEARS that the HTML is atop/within the 3D Canvas, but it is really sitting adjacent (flowed-into the canvas's container... called canvasZone - see line 6)).  Hope this helps.

ok bye again. 

[babaorhum]

Txs Wingnut but absolute css isn't what I'm looking for

I explain : 

I want to do something like that  

as you can see when you zoom to the scene, the big box disappeared, showing smaller ones,

A kind of panel like here 

I'd like to attach a panel to each one, like here, that whould show some json, and would appears only from the little boxes when these are visibled

Voila

A lot of work yet in poo (I mean POO of course ) of course ...!

a long way

Jessica

Edited March 16, 2017 by babaorhum
due to misunderstanding possibilities...!

[Wingnut]

Ahhh, okay, I was on a wild goose chase (going in the wrong direction)    Sorry.  hmm.  In a way, it is a tree, then, right?  Collapsing, expanding, dependent upon camera distance.  Zoom to drill into database.    (I guess)  Interesting project.  Yeah, camera zooming on abs positioned HTML... won't have much effect, of course.

Back to Canvas2D I would suppose.  Set up some "zoom zones", ya think?  Panel changes to sub-panels at a certain camera distance, perhaps more than once?   Eventually, with enough zoom, the "information" unfolds into view?

I'm still trying to visualize the goals.  Thx for the new info.  Maybe I am on-topic, finally.