Dialog Extension finally released

[JCPalmer]

The dialog extension I have been working on for a long time is now in the Extensions repository. https://github.com/BabylonJS/Extensions/tree/master/Dialog

 

There is a tester scene, which you may have already seen.  Here is the url again:https://googledrive.com/host/0B6-s6ZjHyEwUfjlzYXJKMC1zLXdIaV81REJhbjdfRmczQTJFOEpjWWg2SUIwZVRRS0VsR28  and as text before redirection:

googledrive.com/host/0B6-s6ZjHyEwUfjlzYXJKMC1zLXdIaV81REJhbjdfRmczQTJFOEpjWWg2SUIwZVRRS0VsR28

 

The tester scene is also used to describe its features, since it is a dialog after all.  Looking at the dialog_common.js file, https://github.com/BabylonJS/Extensions/blob/master/Dialog/testing/dialog_common.js you can see the working source code illustrating everything.

 

There are a couple of things never seen before.  First is the "Fit to Window" feature.  This is also really good for Tablets / CocoonJS.  There has also been a lot of mesh merging, and performance is now very good.  I would not expect that anyone would use everything inside a single game, so the tester is really more of a torture test.

 

 

 

[GameMonetize]

OMFG, this is freaking good man!! You did an INCREDIBLE work!

 

I'll tweet about it right now!

[Kilombo]

can't see it chrome in my android smartphone. is it normal? I usually see most of the things with it. it says that browser doesn't support webgl..

[JCPalmer]

if you are seeing this alert then nothing will work, not just this:

alert("WebGL not supported in this browser.\n\n" +       "If in Safari browser, check 'Show Develop menu in menu bar' on the Advanced tab of Preferences.  " +      "On the 'Develop' menu, check the 'Enable WebGL' menu item.");

That said, perhaps you could upgrade to a newer version of Android (carrier & phone dependent).  Have Samsung Galaxy S3.  Have never tried running scenes from Browser, only CocoonJS appLauncher.  Is chrome different from the browser that comes with Android, or that just what you are calling it?

[dbawel]

I've been looking at the dialogue extension for a few days now, and am eager to build something with it.  I'm working on an app I need to finish in the next 2 weeks, but will use the dialgue extension for the next test I have to do.

 

Thanks for all of your hard work, and please keep functions like this coming if you are able.

 

Cheers,

 

DB

[JCPalmer]

DB,

Make sure before you build something, you get again from repository.  I had a minor bug where a LCD digit object was not being disposed of properly, causing a memory leak.  Changed the version reported in console to 1.0.1.

 

I will be using this to replace the css I had in my pages.  First is one of the morph test scenes.  Want to put a docked panel either across the top or left side to control running with or without SIMD, & LCDs to display the differences. 

 

Jeff

[Kilombo]

Hey mate, you where right, my mobile chrome just updated and cleared my definitions. But I'm posting for diferent reasons. Do you think it's possible to make it work a bit more faster ? It's still a bit slow, when you press a button it takes a while to answer to the "click".

 

Thanks in advance.

[JCPalmer]

The short answer is probably yes.  There is a switch that can be changed from the default of false.  That is DIALOG.Label.NO_MERGING. 

 

When NO_MERGING is false (default):

• Before the first time display of a Panel, or sub-panel, all of the cloned Letters of each Label are merged into a single "Big" letter.
• This dramatically increases the FPS.  It also increases CPU / GPU memory, because cloning cannot be used.
• The other side effect is the merging takes a lot of CPU.  The button actions in this demo display new Panels, so this is much of what you are experiencing.

When NO_MERGING is true:

• Lower memory use & quicker first time display.
• Very poor FPS (but remember even 4 FPS, would give you .25 sec response time.  Doable for buttons, but not games.)

You need to keep in mind this is a tester / demo scene, that also describes every feature using a lot of text.  This not representative of an actual use in a game.

 

The fact that you needed to update your system is a good indicator that if your phone can still be bought today, that it is in the bargain bin.  Apple's A8 (with NEON!) makes short work this.  I imagine that in actual use of a game this is a non-issue for the future.  I only skate to where the puck is going to be.

[Kilombo]

eheheheh, i tested it on my laptop... Anyway, it's a hell of a good work there. I'm going to try and implement it in my game to do something near a GUI, justo to choose locations, fleets, etc.. So the frame rate is not really important, but the response time is one issue. But i'll try to do a draft implementation to see how it works out and I let you know.

 

Thanks for the good hard work.

[JCPalmer]

Ok, I think it might be a good idea to quantify what I am seeing, in case you do not see the same.  Put in console log messages for the menu clicks. 

This is what I get on a:

• 7 year old, Intel Core 2 Extreme CPU @ 3.00GHz x 4
• Geforce GTX 480

BJS - [12:50:57]: Babylon.js engine (v2.1.0 beta) launchedBJS - [12:50:57]: Dialog system (1.0.1) initializedBJS - [12:50:57]: Font3D loadedBJS - [12:50:57]: Font2D loadedBJS - [12:50:57]: Font2D_EXT loadedclick response for LayoutDetails: 0.3549576990000005 secclick response for FontDetails: 0.9659303880000006 secclick response for PanelDetails: 0.549479217 secclick response for LCD: 0.1326782489999987 secclick response for LimitationsDetails: 0.320464496999999 secclick response for ModalStackDetails: 0.8502063960000014 secclick response for LAFDetails: 0.8646341549999997 sec

On IPad Air 2 times are less than double.

[dbawel]

Hi Kilombo,

 

Can you post your GUI script if it is functioning soon.  It will be a week or more before I can begin building an app to test Dialog Extension, and I'm sure I can learn from your efforts as well. Thanks to Jeff for supporting this on the forum, and not simply posting and walking away.

[JCPalmer]

I am starting to use this as well in scenes, not just a massive demo with every feature.  I got frustrated (of course I know enough about the source code to make changes). Was trying to make a docked panel.  Have overcome issues, but here are some of my observations.

 

Do not worry it is taking up too much screen.  When you are using the orthographic system camera, I am sizing the panel similar to the way a picture is to fit into an arbitrary space without distortion.  For most situations, whatever dimension of your panel larger, the panel will occupy the entire window in that dimension.  Here is an example:

 

Changing font sizes ends up doing very little .  This is because font size is a relative value (implemented using scaling).  It is only for making some text a different size from other text.  The overall font size is based on the panel's shape.

 

If you want to make a Panel smaller, add space in the dimension that it is longest.  Not really obvious, but works perfectly.  You made it even more lopsided, so the only way to fit it in without distortion is to make it display smaller.  I have added a new Spacer class to make it easier (not published yet).  With horizontal space added in the middle it looks like this:

 

This particular panel is not perfect yet, but if I add / remove stuff, then I just adjust my Spacer to give the overall size wanted.

 

I am noticing LCD is not scaling to well.  DK, a while back you said I should write a shader for an LCD http://www.html5gamedevs.com/topic/12504-performancedraw-calls/?p=73780.  I was not ready at the time.  Can you elaborate a little more now, please.

[JCPalmer]

Ah,  by shader you must have meant procedural texture, right? http://www.html5gamedevs.com/topic/11022-procedural-textures/?hl=procedural

[Boz]

Hi there,

I would know if there is a way to change the 3D position of the mainPanel

I looked up in the code but it's not easy to understand to me, I do not even know if you have planned to adjust position

Thanks in advance!

Pouet

[JCPalmer]

If you use the System Camera, yes.  You can see the options on the Modal Stack Menu.  Since this dialog takes up the entire width, the horizontal buttons do not do anything, but the top / center / bottom buttons do.  Sorry, but I never made documentation for this.  I was so over time budget just coming out with it.

 

[alphaShash]

Hallo to everyone here,

I am completely new to Babylon JS and im working on a small project and im stuck at one particular point in my project. It would really be helpful for me, if anyone could help me in this project.

I have created a Simple GUI button in which on click of that button I would like a dialog Modal or a Popup to be shown with text field.

Thanks in advance.

[MarianG]

Hi @alphaShash

If you didn't do it yet, please post your question here

https://forum.babylonjs.com