JCPalmer

Screen management recommendations

Recommended Posts

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.

automaton.thumb.JPG.20885650126ad62308f186ded2a14275.JPG

Share this post


Link to post
Share on other sites

<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.

Share this post


Link to post
Share on other sites

@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 :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

58c9968823a3e_Usinggrid.thumb.jpg.456328b4fb0ddbea7a8b2ef8dd8d445e.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@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.

flexbox.thumb.jpg.8e16568d30f4449d02b2ff06b292c9cf.jpg

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.