adjusted css and htmls

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;
 }
 
 

css/fixedPosInterface.css

@@ -8,30 +8,30 @@ body {
 	display: table;
 }
 
-.big {
+/*.big {*/
-	background: #a6e19c;
+	/*background: #a6e19c;*/
-	border: 1px solid #222;
+	/*border: 1px solid #222;*/
-	height: 64px;
+	/*height: 64px;*/
-	width: 64px;
+	/*width: 64px;*/
-	display: table-cell;
+	/*display: table-cell;*/
-	vertical-align: middle;
+	/*vertical-align: middle;*/
-	text-align: center;
+	/*text-align: center;*/
-	border-radius: 32px;
+	/*border-radius: 32px;*/
-	-moz-border-radius: 32px;
+	/*-moz-border-radius: 32px;*/
-	-webkit-border-radius: 32px;
+	/*-webkit-border-radius: 32px;*/
-}
+/*}*/
-.small {
+/*.small {*/
-	background: #a3d5f7;
+	/*background: #a3d5f7;*/
-	border: 1px solid #222;
+	/*border: 1px solid #222;*/
-	height: 40px;
+	/*height: 40px;*/
-	width: 40px;
+	/*width: 40px;*/
-	display: table-cell;
+	/*display: table-cell;*/
-	vertical-align: middle;
+	/*vertical-align: middle;*/
-	text-align: center;
+	/*text-align: center;*/
-	border-radius: 20px;
+	/*border-radius: 20px;*/
-	-moz-border-radius: 20px;
+	/*-moz-border-radius: 20px;*/
-	-webkit-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;
+    -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 {
+  #btnPrevious, #btnNext {
-    top: 200px;
+    /*top: 200px;*/
+    -moz-transform: translate(-5px,-10px);
   }
 
   #drawAreaContainer {

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");

js/buttonbehaviors.js

@@ -171,11 +171,23 @@ function initButtonBehavior() {
   btnTwistRight.on('touchstart', function(e) { startTwistRight(e) });
   btnTwistRight.on('touchend', function(e) { stopTwistRight(e) });
 
-  btnSettings.mouseup(function(e) {
+  function openSettings() {
-    e.preventDefault();
+    console.log("f:openSettings()");
-    console.log("btnSettings mouse up");
+    $("#contentOverlay").fadeIn(1000, function() {
+      loadSettings();
     });
 
+  }
+  btnSettings.click(function(e) {
+    e.preventDefault();
+    console.log("btnSettings clicked");
+    showSettings();
+  });
+//  btnSettings.on('touchend', function(e) {
+//    e.preventDefault();
+//    console.log("btnSettings touchend");
+//  });
+
   btnInfo.mouseup(function(e) {
     e.preventDefault();
     console.log("btnInfo mouse up");
@@ -210,8 +222,6 @@ function print(e) {
      var gencode = generate_gcode();
     startPrint();
 
-
-
 //     console.log("");
 //     console.log("");
 //     console.log("-------------------------------------------------");

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);
@@ -234,6 +234,10 @@ function adjustPreviewTransformation() {
  * * * * * * * * * */
 function onCanvasMouseDown(e) {
 //  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]);
+  var x, y;
-  adjustBounds(e.offsetX,e.offsetY);
+  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
   /*

js/doodlePrintCode.js

@@ -13,6 +13,8 @@ function startPrint() {
 //  sendLength = 2000; // 2000 regels
 //  sendGCodeSlice(sendIndex, sendLength);
 
+  // 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);
@@ -21,6 +23,7 @@ function startPrint() {
    //    console.log("    status: " + data["status"]);
    //    btnPrint.disabled = false;
    });
+   //*/
 
   //http://192.168.10.1/cgi-bin/d3dapi/write
 }

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());