From f439592faf15bd714b6a19725d8d0d350f6eb4de Mon Sep 17 00:00:00 2001
From: Adriaan Wormgoor <bombarie@gmail.com>
Date: Sun, 28 Jul 2013 02:46:32 +0200
Subject: [PATCH] adjusted css and htmls

---
 css/d3d_btns.css          |  8 ++--
 css/fixedPosInterface.css | 84 ++++++++++++++++++++++++++-------------
 index.html                | 26 +++++++++++-
 js/buttonbehaviors.js     | 18 +++++++--
 js/canvasDrawing_v01.js   | 40 +++++++++++++++----
 js/doodlePrintCode.js     | 19 +++++----
 js/init_layout.js         |  3 +-
 7 files changed, 145 insertions(+), 53 deletions(-)

diff --git a/css/d3d_btns.css b/css/d3d_btns.css
index 49efe72..e29816b 100644
--- a/css/d3d_btns.css
+++ b/css/d3d_btns.css
@@ -36,7 +36,7 @@ img {
 	top: 10px;
   width: 194px;
   height: 170px;
-  background: url('../img/buttons/btnNew.png');
+  background: url('../img/buttons/btnNew.png') no-repeat;
 }
 
 #btnPrevious {
@@ -62,7 +62,7 @@ img {
 /*	bottom: 150px;*/
   width: 146px;
   height: 144px;
-  background: url('../img/buttons/btnOops.png');
+  background: url('../img/buttons/btnOops.png') no-repeat;
 }
 
 #btnPrint {
@@ -77,12 +77,12 @@ img {
 
 #btnInfo {
 	right: 25px;
-	bottom: 20px;
+  bottom: 90px;
 }
 
 #btnSettings {
 	right: 25px;
-	bottom: 90px;
+  bottom: 20px;
 }
 
 
diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css
index 521c9e6..222bca7 100644
--- a/css/fixedPosInterface.css
+++ b/css/fixedPosInterface.css
@@ -8,30 +8,30 @@ body {
 	display: table;
 }
 
-.big {
-	background: #a6e19c;
-	border: 1px solid #222;
-	height: 64px;
-	width: 64px;
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-	border-radius: 32px;
-	-moz-border-radius: 32px;
-	-webkit-border-radius: 32px;
-}
-.small {
-	background: #a3d5f7;
-	border: 1px solid #222;
-	height: 40px;
-	width: 40px;
-	display: table-cell;
-	vertical-align: middle;
-	text-align: center;
-	border-radius: 20px;
-	-moz-border-radius: 20px;
-	-webkit-border-radius: 20px;
-}
+/*.big {*/
+	/*background: #a6e19c;*/
+	/*border: 1px solid #222;*/
+	/*height: 64px;*/
+	/*width: 64px;*/
+	/*display: table-cell;*/
+	/*vertical-align: middle;*/
+	/*text-align: center;*/
+	/*border-radius: 32px;*/
+	/*-moz-border-radius: 32px;*/
+	/*-webkit-border-radius: 32px;*/
+/*}*/
+/*.small {*/
+	/*background: #a3d5f7;*/
+	/*border: 1px solid #222;*/
+	/*height: 40px;*/
+	/*width: 40px;*/
+	/*display: table-cell;*/
+	/*vertical-align: middle;*/
+	/*text-align: center;*/
+	/*border-radius: 20px;*/
+	/*-moz-border-radius: 20px;*/
+	/*-webkit-border-radius: 20px;*/
+/*}*/
 
 #logo {
 	position: absolute;
@@ -173,15 +173,29 @@ body {
 
   #btnsUpDown, #btnsTurnLeftRight {
   	zoom: 0.94;
+    -moz-transform: translate(0px,-5px) scale(.94);
   }
 
+	#btnNew {
+    zoom: 0.94;
+    -moz-transform: translate(-5px,-5px) scale(.94);
+    /*-moz-transform: translate(-3px,-3px);*/
+	}
+	#btnOops {
+    zoom: 0.94;
+    -moz-transform: translate(-5px,-10px) scale(0.94);
+	}
+
 	#btnPrint {
 		right: 10px;
 		top:  10px;
+    -moz-transform: translate(5px,-5px);
 	}
 
+
 	.btn {
 		zoom: 0.94;
+    -moz-transform: scale(.94);
 	}
 
 	#drawAreaContainer {
@@ -193,27 +207,43 @@ body {
 @media screen and (max-height: 560px) {
 	#d3dlogo {
 		zoom: 0.8;
-		left: 34%;
+    -moz-transform: translate(-20px,-15px) scale(.8);
+    /*-moz-transform: ;*/
+    left: 34%;
   }
 
   #btnsUpDown, #btnsTurnLeftRight {
   	zoom: 0.86;
+    -moz-transform: translate(0px,-7px) scale(0.86);
   }
 
 	#btnPrint {
 		right: 6px;
+    -moz-transform: translate(10px,-10px);
+	}
+
+	#btnNew {
+    zoom: 0.86;
+    -moz-transform: translate(-10px,-10px) scale(.86);
 	}
 
 	.btn {
 		zoom: 0.86;
+    -moz-transform: scale(.86);
 	}
 
   #btnOops {
     top: 350px;
+    zoom: 0.86;
+    -moz-transform: translate(-10px,-25px) scale(.86);
+  }
+  #btnSave {
+    -moz-transform: translate(-5px,-13px);
   }
 
-  #btnSave {
-    top: 200px;
+  #btnPrevious, #btnNext {
+    /*top: 200px;*/
+    -moz-transform: translate(-5px,-10px);
   }
 
   #drawAreaContainer {
diff --git a/index.html b/index.html
index 9477b1d..8c36b4c 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
   <link href="css/normalize.css" rel="stylesheet" media="screen">
   <link href="css/fixedPosInterface.css" rel="stylesheet" media="screen">
   <link href="css/d3d_btns.css" rel="stylesheet" media="screen">
+  <link href="css/settingsPopup.css" rel="stylesheet" media="screen">
   <style type="text/css">
 
     .debugContainer {
@@ -94,6 +95,22 @@
   <div id="debug_textArea" style="position:absolute; bottom: -600px; width: 800px; height: 600px;">
     <textarea rows="5" cols="115" id="textdump"></textarea>
   </div>
+  <div id="contentOverlay">
+    <div id="settingsContainer">
+      <div id="settings">
+        <header>
+          <img src="img/settings_lable.png" alt="settings"/>
+        </header>
+        <div class="content">
+          <div class="settings">henk</div>
+          <div class="buttons">
+            <div class="btnOK"></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
 </div>
 <div id="portrait">
   <img class="vertImage" src="img/bg_vertical2.png"/>
@@ -117,7 +134,7 @@
   $("#btnNext").css("opacity", "0.3");
   $("#btnSave").css("opacity", "0.3");
   $("#btnInfo").css("opacity", "0.3");
-  $("#btnSettings").css("opacity", "0.3");
+//  $("#btnSettings").css("opacity", "0.3");
 
 //  var debug = true;
 
@@ -131,6 +148,13 @@
 
     initButtonBehavior();
 
+    initSettingsPopup();
+
+    $("#settings .settings").load("settings.html", function() {
+      console.log("finished loading settings.html, now loading settings...");
+      loadSettings();
+    });
+
     if(debug) {
       console.log("debug mode");
       $("body").css("overflow", "auto");
diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js
index 84bf56e..d7a461f 100644
--- a/js/buttonbehaviors.js
+++ b/js/buttonbehaviors.js
@@ -171,10 +171,22 @@ function initButtonBehavior() {
   btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
   btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
 
-  btnSettings.mouseup(function(e) {
+  function openSettings() {
+    console.log("f:openSettings()");
+    $("#contentOverlay").fadeIn(1000, function() {
+      loadSettings();
+    });
+
+  }
+  btnSettings.click(function(e) {
     e.preventDefault();
-    console.log("btnSettings mouse up");
+    console.log("btnSettings clicked");
+    showSettings();
   });
+//  btnSettings.on('touchend', function(e) {
+//    e.preventDefault();
+//    console.log("btnSettings touchend");
+//  });
 
   btnInfo.mouseup(function(e) {
     e.preventDefault();
@@ -210,8 +222,6 @@ function print(e) {
      var gencode = generate_gcode();
     startPrint();
 
-
-
 //     console.log("");
 //     console.log("");
 //     console.log("-------------------------------------------------");
diff --git a/js/canvasDrawing_v01.js b/js/canvasDrawing_v01.js
index 32e3234..db0a1e7 100644
--- a/js/canvasDrawing_v01.js
+++ b/js/canvasDrawing_v01.js
@@ -210,7 +210,7 @@ function adjustPreviewTransformation() {
 
   var sclX, sclY, finalScl;
   if (_points.length < 2) {
-    console.log(_points);
+//    console.log(_points);
     sclX = 1.0;
     sclY = 1.0;
     finalScl = Math.min(sclX, sclY);
@@ -233,7 +233,11 @@ function adjustPreviewTransformation() {
  *
  * * * * * * * * * */
 function onCanvasMouseDown(e) {
-  //    console.log("onmousedown");
+//  console.log("onmousedown");
+//  console.log("onmousedown >> e.offsetX,e.offsetY = " + e.offsetX+","+e.offsetY);
+//  console.log("onmousedown >> e.layerX,e.layerY= " + e.layerX+","+e.layerY);
+//  console.log("onmousedown >> e: " + e);
+//  console.log(e);
   dragging = true;
 
   prevCountingTime = new Date().getTime();
@@ -243,10 +247,21 @@ function onCanvasMouseDown(e) {
 //  adjustBounds(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
 //  adjustPreviewTransformation();
 //  draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, 0.5);
-  _points.push([e.offsetX,e.offsetY, true]);
-  adjustBounds(e.offsetX,e.offsetY);
+
+  var x, y;
+  if (e.offsetX != undefined) {
+    x = e.offsetX;
+    y = e.offsetY;
+  } else {
+    x = e.layerX;
+    y = e.layerY;
+  }
+//  console.log("     x: " + x + ", y: " + y);
+
+  _points.push([x, y, true]);
+  adjustBounds(x, y);
   adjustPreviewTransformation();
-  draw(e.offsetX,e.offsetY, 0.5);
+  draw(x, y, 0.5);
 }
 
 function onCanvasMouseMove(e) {
@@ -258,10 +273,19 @@ function onCanvasMouseMove(e) {
 //  adjustPreviewTransformation();
 //  draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
 
-  _points.push([e.offsetX,e.offsetY, false]);
-  adjustBounds(e.offsetX,e.offsetY);
+  var x, y;
+  if (e.offsetX != undefined) {
+    x = e.offsetX;
+    y = e.offsetY;
+  } else {
+    x = e.layerX;
+    y = e.layerY;
+  }
+
+  _points.push([x, y, false]);
+  adjustBounds(x, y);
   adjustPreviewTransformation();
-  draw(e.offsetX,e.offsetY);
+  draw(x, y);
 
   // update counter -> this was for getting a handle on how often the Canvas fires a move-event
   /*
diff --git a/js/doodlePrintCode.js b/js/doodlePrintCode.js
index 8d0e8ba..bbd9708 100644
--- a/js/doodlePrintCode.js
+++ b/js/doodlePrintCode.js
@@ -13,14 +13,17 @@ function startPrint() {
 //  sendLength = 2000; // 2000 regels
 //  sendGCodeSlice(sendIndex, sendLength);
 
-  $.post(kastjeURL + "test/" + "write/", { data: "test"}, function(data) {
-    console.log("returned data: " + JSON.stringify(data));
-    data = JSON.parse(data);
-    console.log("    data.msg: " + data.msg);
-    console.log("    data.status: " + data.status);
-//    console.log("    status: " + data["status"]);
-//    btnPrint.disabled = false;
-  });
+  // 2013-07-28 tot hier en niet verder... de GCODE kan al wel worden gegenereerd, maar we sturen het nu niet naar het kastje.
+  /*
+   $.post(kastjeURL + "test/" + "write/", { data: "test"}, function(data) {
+   console.log("returned data: " + JSON.stringify(data));
+   data = JSON.parse(data);
+   console.log("    data.msg: " + data.msg);
+   console.log("    data.status: " + data.status);
+   //    console.log("    status: " + data["status"]);
+   //    btnPrint.disabled = false;
+   });
+   //*/
 
   //http://192.168.10.1/cgi-bin/d3dapi/write
 }
diff --git a/js/init_layout.js b/js/init_layout.js
index fa7c353..547b0f9 100644
--- a/js/init_layout.js
+++ b/js/init_layout.js
@@ -101,7 +101,7 @@ function doOnResize() {
   //    console.log("doOnResize() >> " + new Date().getTime());
 //  $(".container").css("height", window.innerHeight);
 
-//  doClientAndOrientationStuff() // <-- is this necessary in this method?
+  doClientAndOrientationStuff() // <-- is this necessary in this method?
 
 //  console.log("f:doOnResize() >> $('#canvascontainer').innerHeight: " + window.innerHeight);
   if (window.innerHeight < 768) {
@@ -178,6 +178,7 @@ function initLayouting() {
   doOnResize();
   //    doOnOrientationChange();
 
+
   // window.innerHeight
   console.log("window.innerHeight: " + window.innerHeight);
   console.log("$('#drawAreaContainer').innerHeight(): " + $("#drawAreaContainer").innerHeight());