Thermometer class plus the changes necessary to implement it

css/d3d_btns.css

@@ -152,7 +152,7 @@ img {
 .btn {
 	position: absolute;
 	-webkit-user-select: none;
-	cursor: hand;
+	cursor: pointer;
 }
 #displayTemp {
 	position: absolute;

css/fixedPosInterface.css

@@ -90,7 +90,10 @@ body {
 	position: absolute;
 	top:  15px;
 	left: 31%;
-  content:url("../img/logo_full.png");
+  width: 399px;
+  height: 139px;
+  background-image: url('../img/logo_full.png');
+  cursor: pointer;
 }
 
 #svg {
@@ -168,6 +171,55 @@ body {
 	z-index: -5;
 }
 
+/* PRINT PROGRESS DISPLAY */
+#printProgressContainer {
+  position: absolute;
+  right: 30px;
+  top: 370px;
+  width: 110px;
+  margin: 5px 0px;
+  font-weight: bold;
+  display:none;
+}
+#progressbarContainer {
+  margin: 3px 0px;
+  width: inherit;
+  height: 20px;
+  background-color: #fff;
+  border: 2px solid #333;
+  border-radius: 5px;
+  -o-border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+}
+.progressAmount {
+  margin: 0px 5px;
+}
+#progressbar {
+  position: relative;
+  /*margin-bottom: -20px;*/
+  width: 0%;
+  height: 100%;
+  background-color: #4c4;
+  border: 0px solid #f0f;
+  border-radius: 3px;
+  -o-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+}
+
+/* THERMOMETER */
+#thermometerContainer {
+  position: absolute;
+  right: 30px;
+  top: 410px;
+}
+#thermometerCanvas {
+  /*background: #59b2b8;*/
+  /*zoom: 2;*/
+}
+
+
 /* The code below is for resizing UI elements as the viewport becomes less high (suitable for tablets & smartphones) */
 
 @media screen and (max-height: 675px) {
@@ -176,8 +228,10 @@ body {
 	}
 
 	#d3dlogo {
-    content:url("../img/logo_small.png");
+    width: 399px;
-    margin-top:  7px;
+    height: 74px;
+    background-image: url('../img/logo_small.png');
+    margin-top:  9px;
   }
 
   #btnsUpDown, #btnsTurnLeftRight {
@@ -215,10 +269,14 @@ body {
 
 @media screen and (max-height: 560px) {
 	#d3dlogo {
-		zoom: 0.8;
+    width: 399px;
-    -moz-transform: translate(-20px,-15px) scale(.8);
+    height: 57px;
+    background-image: url('../img/logo_smaller_wide.png');
+    margin-top:  14px;
+		/*zoom: 0.8;*/
+    /*-moz-transform: translate(-20px,-15px) scale(.8);*/
     /*-moz-transform: ;*/
-    left: 34%;
+    /*left: 34%;*/
   }
 
   #btnsUpDown, #btnsTurnLeftRight {

index.html

@@ -10,8 +10,6 @@
   <link rel="icon" type="image/ico" href="favicon.ico"/>
   <meta id="Viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=yes">
 
-  <!-- Bootstrap -->
-  <!--<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">-->
   <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">
@@ -30,9 +28,8 @@
     <img class="bgMiddle" src="img/bg_middle.png" />
     <img class="bgBottom" src="img/bg_bottom.png" />
     <div class="buttons">
-      <img id="d3dlogo" src="img/logo_full.png" onclick="location.reload()">
+      <div id="d3dlogo" onclick="location.reload()"></div>
       <div class="btn" id="btnNew"></div>
-      <!--<img class="btn" id="btnNew" src="img/buttons/btnNew.png">-->
       <img class="btn" id="btnPrevious" src="img/buttons/btnLeft.png">
       <img class="btn" id="btnNext" src="img/buttons/btnRight.png">
       <img class="btn" id="btnSave" src="img/buttons/btnSave.png">
@@ -42,7 +39,17 @@
       <img class="btn" id="btnInfo" src="img/buttons/btnInfo.png">
       <img class="btn" id="btnSettings" src="img/buttons/btnSettings.png">
     </div>
-    <div id="displayTemp"></div>
+    <!-- not now
+    <div id="printProgressContainer">
+      <label for="progressbarContainer">Progress:</label><span class="progressAmount">0%</span>
+      <div id="progressbarContainer">
+        <div id="progressbar"></div>
+      </div>
+    </div>
+    -->
+    <div id="thermometerContainer">
+      <canvas id="thermometerCanvas" width="100" height="125"></canvas>
+    </div>
   </div>
   <div id="drawAreaContainer">
     <canvas id="mycanvas"></canvas>
@@ -83,7 +90,6 @@
   <img class="vertImage" src="img/bg_vertical2.png"/>
 </div>
 <script src="js/libs/jquery-1.8.3.min.js"></script>
-<!--<script src="js/libs/bootstrap.min.js"></script>-->
 <script src="js/SettingsWindow.js"></script>
 <script src="js/d3dServerInterfacing.js"></script>
 <script src="js/buttonbehaviors.js"></script>
@@ -92,7 +98,7 @@
 <script src="js/gcodeGenerating_v01.js"></script>
 <script src="js/init_layout.js"></script>
 <script src="js/Printer.js"></script>
-<!--<script src="js/draw_logic.js"></script>-->
+<script src="js/Thermometer.js"></script>
 <script src="js/utils.js"></script>
 <script src="js/main.js"></script>
 

js/Printer.js

@@ -1,3 +1,4 @@
+/* not using this now
 var $printProgressContainer = $("#printProgressContainer");
 var $progressbar = $("#progressbar");
 var $progressAmount = $(".progressAmount");
@@ -7,21 +8,7 @@ function setPrintprogress(val) {
   $progressbar.css("width", val*100 + "%");
   $progressAmount.text(Math.floor(val*100) + "%");
 }
-
+//*/
-var thermoVal = 0;
-var thermocounter = 0;
-var $displayThermometer = $("#thermometerContainer");
-var $thermometer = $("#thermometer");
-//var thermoInterval;
-function updateThermometer(curr, targ) {
-  console.log("f:updateThermometer() >> curr temp " + curr + ", targ temp " + targ);
-  if (isNaN(curr) || isNaN(targ)) return;
-
-  $thermometer.css("height", (curr/targ)*100 + "%");
-  //    $thermometer.css("background-position", -val*100 + "%");
-  $(".thermoAmount").text(curr+"/"+targ);
-}
-
 
 function Printer() {
 	this.temperature = 0;

js/Thermometer.js

@@ -0,0 +1,270 @@
+var $printProgressContainer = $("#printProgressContainer");
+var $progressbar = $("#progressbar");
+var $progressAmount = $(".progressAmount");
+function setPrintprogress(val) {
+  if (isNaN(val)) return;
+//  console.log("f:setPrintprogress() >> val " + val);
+  $progressbar.css("width", val*100 + "%");
+  $progressAmount.text(Math.floor(val*100) + "%");
+}
+
+var thermoVal = 0;
+var thermocounter = 0;
+var $displayThermometer = $("#thermometerContainer");
+var $thermometer = $("#thermometer");
+//var thermoInterval;
+function updateThermometer(curr, targ) {
+  console.log("f:updateThermometer() >> curr temp " + curr + ", targ temp " + targ);
+  if (isNaN(curr) || isNaN(targ)) return;
+
+  $thermometer.css("height", (curr/targ)*100 + "%");
+  //    $thermometer.css("background-position", -val*100 + "%");
+  $(".thermoAmount").text(curr+"/"+targ);
+}
+
+
+function Printer() {
+	this.temperature = 0;
+	this.targetTemperature = 0;
+	this.printing;
+	
+	this.wifiboxURL; 
+	
+	this.maxTempLastMod = 5; // max time (seconds) since the last temp info modification before the printer connection is considered lost
+		
+	this.checkTemperatureInterval = 3000;
+	this.checkTemperatureDelay;
+	this.checkProgressInterval = 3000;
+	this.checkProgressDelay;
+	this.timeoutTime = 3000;
+	
+	this.gcode; 											// gcode to be printed
+	this.sendLength = 6000; 					// max amount of gcode lines per post (limited because WiFi box can't handle to much)
+
+	this.retryDelay = 2000; 					// retry setTimout delay
+	this.retrySendPrintPartDelay; 		// retry setTimout instance
+	this.retryCheckTemperatureDelay; 	// retry setTimout instance
+	this.retryCheckProgressDelay; 		// retry setTimout instance
+	this.retryStopDelay;							// retry setTimout instance
+	this.retryPreheatDelay;						// retry setTimout instance
+
+	this.maxGCodeSize = 10;						// max size of gcode in MB's (estimation)
+	
+	this.sendStopGCodeDelay = 1000;
+	
+	// Events
+	Printer.UPDATE = "update";
+	
+	this.init = function() {
+    console.log("Printer:init");
+		//this.wifiboxURL = "http://" + window.location.host + "/cgi-bin/d3dapi";
+		//this.wifiboxURL = "http://192.168.5.1/cgi-bin/d3dapi";
+		this.wifiboxURL = wifiboxURL;
+		//this.wifiboxURL = "proxy5.php";
+    console.log("  wifiboxURL: ",this.wifiboxURL);
+    
+    if(autoUpdate) {
+	    this.checkTemperature();
+	    this.checkProgress();
+    }
+ 	}
+	
+	this.preheat = function() {
+    console.log("Printer:preheat");
+		var postData = { id: 0 };
+    var self = this;
+    if (communicateWithWifibox) {
+	    $.ajax({
+			  url: this.wifiboxURL + "/printer/heatup",
+			  type: "POST",
+			  data: postData,
+			  dataType: 'json',
+			  timeout: this.timeoutTime,
+			  success: function(data){
+			  	console.log("Printer:preheat response: ",data);
+			  	if(data.status == "error") {
+			  		clearTimeout(self.retryPreheatDelay);
+						self.retryPreheatDelay = setTimeout(function() { self.preheat() },self.retryDelay); // retry after delay
+			  	}
+				}
+			}).fail(function() { 
+				console.log("Printer:preheat: failed");
+				clearTimeout(self.retryPreheatDelay);
+				self.retryPreheatDelay = setTimeout(function() { self.preheat() },self.retryDelay); // retry after delay
+			});
+		} else {
+      console.log ("Printer >> f:preheat() >> communicateWithWifibox is false, so not executing this function");
+    }
+	}
+	
+	this.print = function(gcode) {
+    console.log("Printer:print");
+    console.log("  gcode total # of lines: " + gcode.length);
+    
+    /*for (i = 0; i < gcode.length; i++) {
+			gcode[i] += " (" + i + ")";
+		}*/
+		
+		this.sendIndex = 0;
+    this.gcode = gcode;
+    
+    //console.log("  gcode[20]: ",gcode[20]);
+    var gcodeLineSize = this.byteSize(gcode[20]);
+    //console.log("  gcodeLineSize: ",gcodeLineSize);
+    var gcodeSize = gcodeLineSize*gcode.length/1024/1024; // estimate gcode size in MB's
+    console.log("  gcodeSize: ",gcodeSize);
+    
+    if(gcodeSize > this.maxGCodeSize) {
+    	console.log("Error: Printer:print: gcode file is probably to big ("+gcodeSize+"MB) (max: "+this.maxGCodeSize+"MB)");
+    	return;
+    }
+    
+		this.sendPrintPart(this.sendIndex, this.sendLength);
+	}
+	this.byteSize = function(s){
+		return~-encodeURI(s).split(/%..|./).length;
+	}
+	this.sendPrintPart = function(sendIndex,sendLength) {
+		console.log("Printer:sendPrintPart sendIndex: " + sendIndex + "/" + this.gcode.length + ", sendLength: " + sendLength);
+		
+    var firstOne = (sendIndex == 0)? true : false;
+		var lastOne = false;
+    if (this.gcode.length < (sendIndex + sendLength)) {
+      console.log("  sending less than max sendLength (and last)");
+      sendLength = this.gcode.length - sendIndex;
+      lastOne = true;
+    }
+    var gcodePart = this.gcode.slice(sendIndex, sendIndex+sendLength);
+    
+    var postData = { id: 0, gcode: gcodePart.join("\n"), first: firstOne, last: lastOne};
+    var self = this;
+    if (communicateWithWifibox) {
+	    $.ajax({
+			  url: this.wifiboxURL + "/printer/print",
+			  type: "POST",
+			  data: postData,
+			  dataType: 'json',
+			  timeout: this.timeoutTime,
+			  success: function(data){
+			  	console.log("Printer:sendPrintPart response: ",data);
+			  	
+			  	if(data.status == "success") {
+				  	if (lastOne) {
+		          console.log("Printer:sendPrintPart:gcode sending completed");
+		          this.gcode = [];
+		        } else {
+		          self.sendPrintPart(sendIndex + sendLength, sendLength);
+		        }
+		      }
+				}
+			}).fail(function() { 
+				console.log("Printer:sendPrintPart: failed");
+				clearTimeout(self.retrySendPrintPartDelay);
+				self.retrySendPrintPartDelay = setTimeout(function() { self.sendPrintPart(sendIndex, sendLength) },self.retryDelay); // retry after delay
+			});
+		} else {
+      console.log ("Printer >> f:sendPrintPart() >> communicateWithWifibox is false, so not executing this function");
+    }
+	}
+	
+	
+	this.stop = function() {
+    console.log("Printer:stop");
+		var postData = { id: 0 }; 
+		var self = this;
+		if (communicateWithWifibox) {
+	    $.ajax({
+			  url: this.wifiboxURL + "/printer/stop",
+			  type: "POST",
+			  data: postData,
+			  dataType: 'json',
+			  timeout: this.timeoutTime,
+			  success: function(data){
+				  console.log("Printer:stop response: ", data);
+				  
+				  setTimeout(function() { console.log("send: ",gcodeEnd); self.print(gcodeEnd) },self.sendStopGCodeDelay);
+			  }
+			}).fail(function() { 
+				console.log("Printer:stop: failed");
+				clearTimeout(self.retryStopDelay);
+				self.retryStopDelay = setTimeout(function() { self.stop() },self.retryDelay); // retry after delay
+			});
+		} else {
+      console.log ("Printer >> f:communicateWithWifibox() >> communicateWithWifibox is false, so not executing this function");
+    }
+	}
+	
+	this.checkTemperature = function() {
+		//console.log("Printer:checkTemperature");
+    var getData = { id: 0 };
+    var self = this;
+    if (communicateWithWifibox) {
+      $.ajax({
+        url: this.wifiboxURL + "/printer/temperature",
+        data: getData,
+        dataType: 'json',
+        timeout: this.timeoutTime,
+        success: function(data){
+          //console.log("Printer:temperature response: ",data);
+          if(data.status == "success") {
+            //console.log("temp: ",response.data.hotend+"/"+response.data.hotend_target+" ("+response.data.last_mod+")");
+            self.temperature = data.data.hotend;
+            if(data.data.hotend_target != undefined) {
+              self.targetTemperature = data.data.hotend_target;
+            }
+            self.alive = (data.data.last_mod < self.maxTempLastMod);
+          } else {
+            self.alive = false;
+          }
+          //console.log("  this.alive: ",self.alive);
+          $(document).trigger(Printer.UPDATE);
+
+          self.checkTemperatureDelay = setTimeout(function() { self.checkTemperature() }, self.checkTemperatureInterval);
+        }
+      }).fail(function() {
+          console.log("Printer:checkTemperature: failed");
+          clearTimeout(self.retryCheckTemperatureDelay);
+          self.retryCheckTemperatureDelay = setTimeout(function() { self.checkTemperature() },self.retryDelay); // retry after delay
+        });
+    } else {
+      console.log ("Printer >> f:checkTemperature() >> communicateWithWifibox is false, so not executing this function");
+    }
+	}
+	this.checkProgress = function() {
+		//console.log("Printer:checkProgress");
+    var getData = { id: 0 };
+		var self = this;
+    if (communicateWithWifibox) {
+      $.ajax({
+        url: this.wifiboxURL + "/printer/progress",
+        data: getData,
+        dataType: 'json',
+        timeout: this.timeoutTime,
+        success: function(data){
+          if(data.status == "success") {
+
+            self.printing = data.data.printing;
+            self.currentLine = data.data.current_line;
+            self.num_lines = data.data.num_lines;
+
+            if(self.printing) {
+              console.log("progress: ",data.data.current_line+"/"+data.data.num_lines+" ("+data.data.last_mod+")");
+            }
+          } else {
+          	self.printing = false;
+          }
+          //console.log("  this.alive: ",self.alive);
+          $(document).trigger(Printer.UPDATE);
+
+          self.checkProgressDelay = setTimeout(function() { self.checkProgress() },self.checkProgressInterval);
+        }
+      }).fail(function() {
+          console.log("Printer:checkProgress: failed");
+          clearTimeout(self.retryCheckProgressDelay);
+          self.retryCheckProgressDelay = setTimeout(function() { self.checkProgress() },self.retryDelay); // retry after delay
+        });
+    } else {
+      console.log ("Printer >> f:checkProgress() >> communicateWithWifibox is false, so not executing this function");
+    }
+	}
+}

js/buttonbehaviors.js

@@ -253,11 +253,17 @@ function clearMainView() {
   ctx.clearRect(0,0,canvas.width, canvas.height);
   ctx.restore();
 }
-function clearPreview() {
+function resetPreview() {
-  //    console.log("f:clearPreview()");
+  //    console.log("f:resetPreview()");
+
+  // clear preview canvas
   previewCtx.save();
   previewCtx.clearRect(0,0,canvas.width, canvas.height);
   previewCtx.restore();
+
+  // reset height and rotation to default values
+  numLayers 	= previewDefaults.numLayers;     // current number of preview layers
+  rStep 			= previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
 }
 
 function oopsUndo() {
@@ -285,17 +291,13 @@ function previewDown(redrawLess) {
 function previewTwistLeft(redrawLess) {
   if (redrawLess == undefined) redrawLess = false;
   //    console.log("f:previewTwistLeft()");
-  //        if (rStep < Math.PI) {
+  if (rStep > -previewRotationLimit) rStep -= twistIncrement;
-  rStep -= twistIncrement;
-  //        }
   //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
 }
 function previewTwistRight(redrawLess) {
   //    console.log("f:previewTwistRight()");
-  //        if (rStep < Math.PI) {
+  if (rStep < previewRotationLimit) rStep += twistIncrement;
-  rStep += twistIncrement;
-  //        }
   //  redrawPreview(redrawLess);
   redrawRenderedPreview(redrawLess);
 }
@@ -315,7 +317,7 @@ function update() {
 	
 	if(displayTempEnabled) {
 		displayTemp.text(printer.temperature+"/"+printer.targetTemperature);
-    updateThermometer(printer.temperature, printer.targetTemperature);
+    thermometer.update(printer.temperature, printer.targetTemperature);
 	}
 
   setPrintprogress(printer.currentLine/printer.num_lines);

js/main.js

@@ -5,7 +5,9 @@ var wifiboxIsRemote = false;        // when you want to run the client on a comp
 var autoUpdate = true; 							// auto retrieve updates about temperature and progress from printer
 
 var printer =  new Printer();
+var thermometer = new Thermometer();
 var settingsWindow = new SettingsWindow();
+
 $(function() {
   console.log("ready");
 
@@ -35,7 +37,9 @@ $(function() {
   initPreviewRendering();
   initButtonBehavior();
 
-	printer.init();
+	thermometer.init($("#thermometerCanvas"));
+
+  printer.init();
 	$(document).on(Printer.UPDATE,update);
 	
 	settingsWindow.init(wifiboxURL);