JCPalmer Posted March 9, 2017 Share Posted March 9, 2017 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. Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted March 9, 2017 Author Share Posted March 9, 2017 <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. Quote Link to comment Share on other sites More sharing options...
ozRocker Posted March 9, 2017 Share Posted March 9, 2017 You're using blendshapes?? I didn't realise babylon.js could support blendshapes Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 10, 2017 Share Posted March 10, 2017 What about flexbox? I like it as it is really easy to use JCPalmer 1 Quote Link to comment Share on other sites More sharing options...
gryff Posted March 10, 2017 Share Posted March 10, 2017 @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 1 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted March 10, 2017 Author Share Posted March 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted March 15, 2017 Author Share Posted March 15, 2017 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). Quote Link to comment Share on other sites More sharing options...
boyofgreen Posted March 19, 2017 Share Posted March 19, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted March 20, 2017 Author Share Posted March 20, 2017 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. Quote Link to comment Share on other sites More sharing options...
boyofgreen Posted March 24, 2017 Share Posted March 24, 2017 oh, I am the wrong person then. I love flexbox, start around 6 min. to see my flexbox masterpiece: Wingnut and JCPalmer 2 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted March 27, 2017 Author Share Posted March 27, 2017 @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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.