commit of current state of this branch. It's a work-in-progress (comitting because I need to change to other branch)

css/fixedPosInterface.css

@@ -45,6 +45,8 @@ body {
   width: 100%;
   height: 100%;
   max-width: 1024px;
+  min-width: 900px;
+  min-height: 500px;
   max-height: 768px;
   margin: 0px auto;
 }
@@ -76,13 +78,16 @@ body {
   left: 50%;
   background-color: #fff;
   width: 65%;
-  min-width: 150px;
+  min-width: 500px;
   max-width: 650px;
   height: 60%;
   min-height: 150px;
   max-height: 450px;
   border: 4px solid #000;
   border-radius: 15px;
+  /*overflow: hidden;*/
+  z-index: 15;
+  display: none;
 }
 
 #canvasContainers {

css/settingsPopup.css

@@ -1,6 +1,6 @@
 #contentOverlay {
   background-color: rgba(255, 255, 255, 0.65);
-  z-index: 10;
+  z-index: 20;
   position: absolute;
   top: 0px;
   left: 0px;

fixedPosInterface01_v02.html

@@ -50,7 +50,7 @@
   <div class="agentInfo"></div>
 </div>
 <div id="landscape">
-  <div class="container">
+  <div class="uiButtonsContainer">
     <img class="bgTop" src="img/bg_top.png" />
     <img class="bgMiddle" src="img/bg_middle.png" />
     <img class="bgBottom" src="img/bg_bottom.png" />

js/init_layout.js

@@ -4,13 +4,18 @@ function doOnResize() {
   //    console.log("doOnResize() >> " + new Date().getTime());
 //  $(".container").css("height", window.innerHeight);
 
-  $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
+  $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
+  $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
+//  $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
 
   canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
   canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
 
   preview.width = 150;
   preview.height = $drawAreaContainer.height();
+  calcPreviewCanvasProperties();
+//  layerOffsetY = preview.height - 1.75 * layerCY;
+//  yStep = preview.height / 150;
 //  preview.width = parseInt($preview.css("width"), 10);
 //  preview.height = parseInt($preview.css("height"), 10);
 
@@ -22,6 +27,9 @@ function doOnResize() {
 //  drawCanvasTopLeftCoords[0] = drawCanvas[0].offsetParent.offsetLeft;
 //  drawCanvasTopLeftCoords[1] = drawCanvas[0].offsetParent.offsetTop;
 
+//  preview.height = $("#previewContainer").height();
+//  console.log("f:doOnResize() >> preview.height: " + preview.height);
+
   redrawDoodle();
   redrawPreview();
 
@@ -69,8 +77,8 @@ function initLayouting() {
 
   $drawAreaContainer = $("#drawAreaContainer");
   $drawAreaContainer.css("margin", 0);
-  $drawAreaContainer.css("marginLeft", -parseInt($drawAreaContainer.css("width"))/2);
+  $drawAreaContainer.css("marginLeft", -$drawAreaContainer.width()/2);
-  $drawAreaContainer.css("marginTop", -parseInt($drawAreaContainer.css("height")) * 0.45);
+  $drawAreaContainer.css("marginTop", -$drawAreaContainer.height() *.45);
 
   canvas.width = $drawAreaContainer.width() - 150; // canvas.clientWidth;
   canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
@@ -81,6 +89,8 @@ function initLayouting() {
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
 
+  $drawAreaContainer.show();
+
   // window.innerHeight
   console.log("window.innerHeight: " + window.innerHeight);
   console.log("window.innerWidth: " + window.innerWidth);

js/previewRendering_v02.js

@@ -34,12 +34,19 @@ function initPreviewRendering() {
 
   previewCtx_tmp = preview_tmp.getContext('2d');
 
+  calcPreviewCanvasProperties();
+  redrawPreview();
+}
+
+function calcPreviewCanvasProperties() {
+  console.log("f:calcPreviewCanvasProperties()");
+
   layerCX			= (canvasWidth / 2) * globalScale;  // defined in canvasDrawing_v01.js
   layerCY			= (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
   layerOffsetY = preview.height - 1.75 * layerCY;
-  yStep 			= preview.height / 150;
+  yStep 			= (preview.height * (2 * previewVerticalPadding)) / maxNumLayers;
 
-  redrawPreview();
+//  previewVerticalPadding
 }
 
 // TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
@@ -52,6 +59,7 @@ var globalScale = 0.3;		// global scale of preview (width preview / width canvas
 var globalAlpha = 0.20;   // global alpha of preview
 var scaleY 			= 0.4; 		// additional vertical scale per path for 3d effect
 var viewerScale = 0.65;   // additional scale to fit into preview nicely (otherwise is fills out totally)
+var previewVerticalPadding = .15; // %
 var strokeWidth = 2;      //4;
 //var rStep 			= Math.PI/40; //Math.PI/40; //
 var rStep 			= previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //