Merge branch 'feature/printerdriver' of github.com:Doodle3D/doodle3d-client into feature/printerdriver

js_src/buttonbehaviors.js

@@ -68,7 +68,8 @@ function initButtonBehavior() {
     e.preventDefault();
     clearInterval(btnOopsInterval);
     redrawDoodle(true);
-    redrawPreview();
+    renderToImageDataPreview();
+//    redrawPreview();
   }
   btnOops.on('touchstart', function(e) { startOops(e); });
   btnOops.on('touchend', function(e) { stopOops(e); });
@@ -78,17 +79,19 @@ function initButtonBehavior() {
   function startMoveUp(e) {
     e.preventDefault();
     //      console.log("btnMoveUp mouse down");
+    if (_points.length > 1) {
       previewUp(true);
       clearInterval(btnMoveUpInterval);
       btnMoveUpInterval = setInterval( function() {
         previewUp(true);
       }, 1000/30);
     }
+  }
   function stopMoveUp(e) {
     e.preventDefault();
-    console.log("btnMoveUp mouse up");
+//    console.log("btnMoveUp mouse up");
     clearInterval(btnMoveUpInterval);
-    previewUp();
+    if (_points.length > 1) previewUp();
   }
   btnMoveUp.mousedown(function(e) { startMoveUp(e) });
   btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
@@ -98,17 +101,19 @@ function initButtonBehavior() {
   function startMoveDown(e) {
     e.preventDefault();
     //      console.log("btnMoveDown mouse down");
+    if (_points.length > 1) {
       previewDown(true);
       clearInterval(btnMoveDownInterval);
       btnMoveDownInterval = setInterval( function() {
         previewDown(true);
       }, 1000/30);
     }
+  }
   function stopMoveDown(e) {
     e.preventDefault();
-    console.log("btnMoveDown mouse up");
+//    console.log("btnMoveDown mouse up");
     clearInterval(btnMoveDownInterval);
-    previewDown();
+    if (_points.length > 1) previewDown();
   }
   btnMoveDown.mousedown(function(e) { startMoveDown(e) });
   btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
@@ -118,17 +123,19 @@ function initButtonBehavior() {
   function startTwistLeft(e) {
     e.preventDefault();
     //      console.log("btnTwistLeft mouse down");
+    if (_points.length > 1) {
       previewTwistLeft(true);
       clearInterval(btnTwistLeftInterval);
       btnTwistLeftInterval = setInterval( function() {
         previewTwistLeft(true);
       }, 1000/30);
     }
+  }
   function stopTwistLeft(e) {
     e.preventDefault();
     //      console.log("btnTwistLeft mouse up");
     clearInterval(btnTwistLeftInterval);
-    previewTwistLeft();
+    if (_points.length > 1) previewTwistLeft();
   }
   btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
   btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
@@ -138,17 +145,19 @@ function initButtonBehavior() {
   function startTwistRight(e) {
     e.preventDefault();
     //      console.log("btnTwistRight mouse down");
+    if (_points.length > 1) {
       previewTwistRight(true);
       clearInterval(btnTwistRightInterval);
       btnTwistRightInterval = setInterval( function() {
         previewTwistRight(true);
       }, 1000/30);
     }
+  }
   function stopTwistRight(e) {
     e.preventDefault();
     //      console.log("btnTwistRight mouse up");
     clearInterval(btnTwistRightInterval);
-    previewTwistRight();
+    if (_points.length > 1) previewTwistRight();
   }
   btnTwistRight.mousedown(function(e) { startTwistRight(e) });
   btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
@@ -168,11 +177,16 @@ function initButtonBehavior() {
 //    console.log("btnSettings touchend");
 //  });
 
+  // 29-okt-2013 - we're not doing help for smartphones at the moment
+  if (clientInfo.isSmartphone) {
+    btnInfo.addClass("disabled");
+  } else {
     btnInfo.mouseup(function(e) {
       e.preventDefault();
       console.log("btnInfo mouse up");
-    if (!clientInfo.isSmartphone) helpTours.startTour(helpTours.WELCOMETOUR);
+      helpTours.startTour(helpTours.WELCOMETOUR);
     });
+  }
 
   // DEBUG
   /*
@@ -266,6 +280,9 @@ function resetPreview() {
   previewCtx.clearRect(0,0,canvas.width, canvas.height);
   previewCtx.restore();
 
+  // also make new Image, otherwise the previously cached preview can be redrawn with move up/down or twist left/right
+  doodleImageCapture = new Image();
+
   // reset height and rotation to default values
   numLayers 	= previewDefaults.numLayers;     // current number of preview layers
   rStep 			= previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //

js_src/canvasDrawing.js

@@ -172,7 +172,7 @@ function clearDoodle() {
 
 function redrawDoodle(recalcBoundsAndTransforms) {
   if (recalcBoundsAndTransforms == undefined) recalcBoundsAndTransforms = false;
-  console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
+//  console.log("f:redrawDoodle() >> recalcBoundsAndTransforms = " + recalcBoundsAndTransforms);
 
   if (recalcBoundsAndTransforms == true) {
     doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom

js_src/init_layout.js

@@ -13,7 +13,7 @@ function doOnResize() {
   canvasWidth = canvas.width;
   canvasHeight = canvas.height;
 
-  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
+//  console.log("   preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
 
   calcPreviewCanvasProperties();
 
@@ -22,7 +22,6 @@ function doOnResize() {
 
   redrawDoodle();
   redrawPreview();
-
 }
 
 function initLayouting() {

js_src/libs/jquery-joyride-2-1.js

@@ -353,6 +353,8 @@
 
       // detect phones with media queries if supported.
       is_phone : function () {
+        return false; // 2013-10-29 Adriaan Wormgoor - hard-falsed this
+
         if (Modernizr) {
           return Modernizr.mq('only screen and (max-width: 767px)');
         }

js_src/previewRendering.js

@@ -33,12 +33,17 @@ function initPreviewRendering() {
 
   previewCtx_tmp = preview_tmp.getContext('2d');
 
+//  doodleImageCapture = new Image();
+
   calcPreviewCanvasProperties();
   redrawPreview();
+
+  // needed to
+//  doodleImageCapture = new Image();
 }
 
 function calcPreviewCanvasProperties() {
-  console.log("f:calcPreviewCanvasProperties()");
+//  console.log("f:calcPreviewCanvasProperties()");
 
   globalScale = preview.width / canvasWidth;
   layerCX			= (canvasWidth / 2) * globalScale;  // defined in canvasDrawing_v01.js
@@ -226,7 +231,7 @@ function renderToImageDataPreview() {
 // it is assumed that the preview has been rendered to an Image object, which will be used to draw the preview with (much better performance)
 function redrawRenderedPreview(redrawLess) {
   if (redrawLess == undefined) redrawLess = false;
-  console.log("f:redrawRenderedPreview()");
+//  console.log("f:redrawRenderedPreview()");
 
   previewCtx.clearRect(0, 0, preview.width, preview.height);
   previewCtx.lineWidth = strokeWidth;

less/base.less

@@ -3,6 +3,8 @@
   GLOBAL CONTAINER
 
 */
+
+
 body {
   background-color: #fcfcfc;
   user-select: none; /* disable cut copy paste */
@@ -110,6 +112,13 @@ img {
 }
 
 
+// http://blogs.msdn.com/b/askie/archive/2013/01/06/how-to-implement-the-ms-touch-action-none-property-to-disable-double-tap-zoom-on-touch-devices.aspx
+//a, input, button {
+//  -ms-touch-action: none !important;
+//}
+
+
+
 
 /*
 

less/base_rightpanel.less

@@ -80,7 +80,7 @@
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
 
   transition: right .40s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  right: -60%;
+  right: -70%;
   margin: 5% 0%;
 }
 
@@ -126,7 +126,7 @@
   box-shadow: 0 2px 5px rgba(37, 37, 37, 0.35);
 
   transition: right .50s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  right: -55%;
+  right: -65%;
 }
 
 #thermometerCanvas {

less/help_joyride-2.1.less

@@ -31,20 +31,6 @@
   padding: 10px 10px 15px 15px;
 }
 
-// Mobile
-//@media only screen and (max-width: 767px) {
-//  .joyride-tip-guide {
-//    width: 95% !important;
-//    -moz-border-radius: 0;
-//    -webkit-border-radius: 0;
-//    border-radius: 0;
-//    left: 2.5% !important;
-//  }
-//  .joyride-tip-guide-wrapper {
-//    width: 100%;
-//  }
-//}
-
 
 /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
 .joyride-tip-guide span.joyride-nub {
@@ -144,7 +130,7 @@
 
 .joyride-tip-guide {
   h1, h2, h3, h4, h5, h6 {
-    line-height: 1.25;
+    line-height: 1.25em;
     margin: 0;
     font-weight: bold;
 //    color: #2DDF34;
@@ -153,20 +139,20 @@
   }
 }
 
-.joyride-tip-guide h1 { font-size: 30px; }
-.joyride-tip-guide h2 { font-size: 26px; }
-.joyride-tip-guide h3 { font-size: 22px; }
-.joyride-tip-guide h4 { font-size: 18px; }
-.joyride-tip-guide h5 { font-size: 16px; }
-.joyride-tip-guide h6 { font-size: 14px; }
+.joyride-tip-guide h1 { font-size: 1.85em; }
+.joyride-tip-guide h2 { font-size: 1.7em; }
+.joyride-tip-guide h3 { font-size: 1.55em; }
+.joyride-tip-guide h4 { font-size: 1.4em; }
+.joyride-tip-guide h5 { font-size: 1.25em; }
+.joyride-tip-guide h6 { font-size: 1.1em; }
 
 
 .joyride-tip-guide {
   p {
   //  margin: 0 0 18px 0;
     margin: 5px 0 25px;
-    font-size: 14px;
-    line-height: 18px;
+    font-size: 1.1em;
+    line-height: 1.3em;
   }
 
   a {
@@ -318,3 +304,33 @@
   left: 0;
   border-radius: 5px;
 }
+
+// Mobile
+@media only screen and (max-width: 767px) {
+  .joyride-tip-guide {
+  //    width: 75% !important;
+//    border-radius: 0;
+    p {
+      margin: 5px 0 18px;
+      font-size: 1.0em;
+    }
+
+    .joyride-next-tip {
+//      width: auto;
+//      padding: 6px 18px 4px;
+      font-size: 1.0em;
+    }
+
+    h1 { font-size: 1.60em; }
+    h2 { font-size: 1.48em; }
+    h3 { font-size: 1.36em; }
+    h4 { font-size: 1.24em; }
+    h5 { font-size: 1.12em; }
+    h6 { font-size: 1.0em; }
+
+  }
+  .joyride-tip-guide-wrapper {
+    width: 80%;
+  }
+}
+

less/message.less

@@ -13,6 +13,8 @@
   color: #333;
   white-space:nowrap;
 
+  z-index: 5;
+	
   display:none;
 
   &.error {

less/mobile.less

@@ -32,17 +32,20 @@
   }
 }
 
+// sets width for both right and left panel
+@mobilePanelsWidth: 92px;
+
 /*
   LEFT
 */
 .leftpanel {
-  width: 100px;
+  width: @mobilePanelsWidth;
   background-color: #fff;
   z-index: 50;
   transition: left .3s ease-out;
 }
 .hideleft {
-  left: -101px;
+  left: -(@mobilePanelsWidth+1);
 }
 .shadowright {
 	box-shadow: 2px 0 4px rgba(42, 42, 41, 0.6);
@@ -64,13 +67,13 @@
   RIGHT
 */
 .rightpanel {
-  width: 100px;
+  width: @mobilePanelsWidth;
   background-color: #fff;
   z-index: 50;
   transition: right .3s ease-out;
 }
 .hideright {
-  right: -101px;
+  right: -(@mobilePanelsWidth+1);
 }
 .shadowleft {
 	box-shadow: -2px 0 4px rgba(42, 42, 41, 0.6);

less/portrait.less

@@ -7,8 +7,8 @@
 }
 
 .vertImage {
-  margin:  0px;
-  padding: 0px;
+  margin:  0;
+  padding: 0;
 /*border: 2px solid #f0f;*/
   max-width: 100%;
   height: auto;

less/settingsPopup.less

@@ -60,6 +60,7 @@
         margin: .5%;
         overflow-y: scroll;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
         border: 1px solid rgb(187, 187, 187);
         border-radius: 5px;
       }

www/index.html

@@ -61,9 +61,10 @@
       <img class="btnInfo btn" src="img/buttons/btnInfo.png">
     </div>
 
-    <div id="message"></div>
   </div>
   
+  <div id="message"></div>
+
   <!-- center panel -->
   <div class="centerpanel">
     <div class="logopanel">