Screen management recommendations

[JCPalmer]

I am building complicated pages with BJS built-in.  Was trying to use a Table with width & height = 100%.  It only really looks acceptable in FireFox, below.  MS Edge reduces everything, because of this very large Font Size and margins.  Chrome is complete crap, since there are 3 rows, and each take a third.  The scene is scrunched down to a bottom third.

Div tags have there own set of problems, especially with Chrome.

Given I have all this stuff, is there a hand code-able way to collapse all the Custom expressions controls, or put on some kind of dock?  HTML is geared to pages which can be bigger than the screen while BJS is all about the screen.

[JCPalmer]

<iframes> looks like a mess at best.  Having the controls on a different page than the scene going to be a problem.

Something like the playground would be ok.  All the Models (not sure I am going to keep the Old White Man showing), are taller than they are wide.  Could put the general controls across the top.  In the left splitbox could be the Custom expression controls listed vertically. The right be the canvas.  Do not need a bottom.

See this is implemented using a custom tag:

    <x-splitbox>
        <div id="jsEditor"></div>
        <div splitter></div>
        <div id="canvasZone">
            <canvas touch-action="none" id="renderCanvas"></canvas>
        </div>
    </x-splitbox>

Is this splitbox.js & splitbox.css usable by others? Can anything be in the left side.

[ozRocker]

You're using blendshapes??  I didn't realise babylon.js could support blendshapes

[GameMonetize]

What about flexbox? I like it as it is really easy to use

[gryff]

@JCPalmer, Jeff, I believe the newest CSS "toy" for subdividing screens is CSS Grid.

Supposedly it will be supported automatically by most browsers by the end of March - currently it has to be enabled.

CSS Grid

Looks easier to use than playing around with tables and div tags.

cheers, gryff

[JCPalmer]

Thanks.  Still in the process of getting the controls hooked up beyond just displaying the settings used of the selected expression (operational by end of day).  I only need a better layout to publish this for others, not myself.  As soon as this is fully operational, I can use it to bootstrap common expressions like anger, crying, happy, fear, disgust, etc.  I have found if I do not ask questions ahead of what I am currently working on, I always end up solving myself.  This is fine, but a waste of time asking.

@ozRocker, yes but only in QueuedInterpolation extension.  In QI, 1.1 I have reorganized how shapekeys are represented in generated source code in 3 ways that makes them much smaller.  This kind of representation is not easily done in JSON (JSON cannot even skip leading zeros).

1.1, is not done, and  1.0 has no documentation.  The saga continues, but it is getting fairly impressive.  Definitely not for 1.1, but starting to think about implementing "Particle or Stranded" hair as in Blender for 1.2.  It is the weakest area to believable characters.

[JCPalmer]

Epilogue:  After getting operational, decided to try CSS Grid.  Flexbox is just horizontal without more complicated work.  Where as CSS Grid is 2D.  I have this as style in header:

<style>
     #renderCanvas{ width: 100%; height: 100%; }
     
     body { margin: 0px; }
     input.text { width:20px; }
     input:disabled { background:#dddddd; }
     input:disabled+label { color:#ccc; }
     input[type=text]+label { float: left; } 

     .wrapper {
         width: 100%;
         height: 100%;
         display: grid;
         grid-template-columns: 25% 75%;
     }

         .mainheader {
            grid-column: 1 / 3;
            grid-row: 1 / 2;
         }
         .controls {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
         }
         .canvas {
            grid-column: 2 / 3;
            grid-row: 2 / 3;
         }    		
</style>

The body is:

<div class="wrapper">
   <div class="mainheader">
       <form id="mainform">
           <table>
           </table>
       </form>
   </div>
<!-- ======================================================= -->
   <div class="controls" style="overflow-y: scroll;">
       <form id="controlsform">
           <table>
           </table>
       </form>
   </div>
<!-- ======================================================= -->
   <div class="canvas">
       <canvas id="renderCanvas" touch-action="none"></canvas>
   </div>
</div>  

Does not work with Edge currently.  Not publishing just yet.  Kept a much simpler set of tables for now.  Probably could do it all in CSS Grid.  Looks like this (clear color of canvas is pink to show extent).

[boyofgreen]

it wll be a while before the new grid spec is in edge.  I would also recommend flex box, which you can set for vertical (column) or horizontal (row) layouts.  however if grid is the way you want to go, there is an old implementation in edge / ie https://msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspx

 

[JCPalmer]

Thanks, as this is a developer tool / QA scene, not a scene for the casual user nor a client, I opted for the easiest way for me to figure out.  Speech / expression is a rather lengthy workflow.  I want to spend as much time on that as possible.  When I speak of publishing, it is only to my Github Blog site. Spending time with flexbox at this point seems to have a low payback.

[boyofgreen]

oh, I am the wrong person then.  I love flexbox, start around 6 min. to see my flexbox masterpiece: 

 

[JCPalmer]

@boyofgreen, did switch over to Flexbox.  See it now in Edge below.  Knew it would take a few hours on playing vids, searching, & plugging in stuff.  Was to the point where getting Edge to get work helped my development (will not confuse the thread to say why).  As I am still using 2 tables for all the control layout, the change was manageable.  Here is snap.  I colored canvas differently for clarity.