From 84ee0c259a826f19510c26ab7a4d6b89e156c128 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Tue, 17 Sep 2013 13:10:27 +0200 Subject: [PATCH] updated Thermometer code (should be final for now) --- js/Thermometer.js | 369 ++++++++++++++-------------------------------- 1 file changed, 107 insertions(+), 262 deletions(-) diff --git a/js/Thermometer.js b/js/Thermometer.js index 0d0467e..687b94f 100644 --- a/js/Thermometer.js +++ b/js/Thermometer.js @@ -1,270 +1,115 @@ -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) + "%"); -} +function Thermometer() { + this.currentTemperature = 0; // default val + this.targetTemperature = 180; // default val -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; + this.thermoOverlayImg = new Image(); + this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png - $thermometer.css("height", (curr/targ)*100 + "%"); - // $thermometer.css("background-position", -val*100 + "%"); - $(".thermoAmount").text(curr+"/"+targ); -} + this.thermoWidth= 40; + this.thermoHeight = 100; + + this.$canvas; + this.canvas; + this.context; + + this.isInitted = false; + + this.thermoColors = [ + [50, 200, 244], // 'cold' + [244, 190, 10], // 'warming up' + [244, 50, 50] // 'ready / hot' + ]; + + this.init = function(targCanvas) { + console.log("Thermometer.init()"); + + this.$canvas = targCanvas; + this.canvas = this.$canvas[0]; + this.context = this.canvas.getContext('2d'); -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); + this.thermoOverlayImg.onload = function() { + console.log("canvasThermoOverlay img loaded"); + self.isInitted = true; + self.update(self.currentTemperature, self.targetTemperature); + }; + this.thermoOverlayImg.src = this.thermoOverlayImgSrc; + } - 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 - }); + this.update = function(curr, targ) { + // console.log("Thermometer.update(" + curr + "," + targ + ")"); + + if (this.isInitted) { + if (curr == undefined) curr = 0; + if (targ== undefined) targ = 180; // prevent divide by zero + + var progress = curr / targ; + + progress = Math.min(progress, 1.0); + progress = Math.max(progress, 0); + + var h = this.thermoHeight; // 94 // px + var paddingUnder = 15; // how far is beginpoint from bottom of thermometer + var paddingAbove = 25; // how far is endpoint from top of thermometer + var endPoint = h * .8; + var p = Math.floor((h - paddingUnder - paddingAbove) * progress); // % + // var tempHeight = + + var currColor = this.thermoColors[0]; + if (progress > 0.98) { + currColor = this.thermoColors[2]; + } else if (progress > 0.25) { + currColor = this.thermoColors[1]; + } + + // clear + this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.context.font = "10pt sans-serif"; + + // draw the thermometer clipping path + this.context.save(); + this.context.beginPath(); + this.context.arc(40, 80, 16, 0, 2 * Math.PI, false); // circle bottom of thermometer + this.context.arc(40, 10, 4, 0, 2 * Math.PI, false); // circle at top of thermometer tube + this.context.rect(36, 11, 8, 70); // thermometer tube + this.context.fillStyle = '#fff'; + this.context.fill(); + this.context.clip(); + + // draw rectangle which represents temperature + // rect will be clipped by the thermometer outlines + this.context.beginPath(); + this.context.rect(20, h - paddingUnder - p, 60, p + paddingUnder); + console.log(" currColor: " + currColor); + //todo Math.floor?? + this.context.fillStyle = "rgb(" + currColor[0] + "," + currColor[1] + "," + currColor[2] + ")"; + this.context.fill(); + this.context.restore(); + + // additional text labels + this.context.save(); + this.context.beginPath(); + this.context.moveTo(32, paddingAbove); + this.context.lineTo(52, paddingAbove); + this.context.lineWidth = 2; + this.context.strokeStyle = '#000'; + this.context.stroke(); + this.context.fillStyle = '#000'; + this.context.textAlign = "left"; + this.context.textBaseline = "middle"; + this.context.fillText(targ + "°", 55, paddingAbove); + this.context.restore(); + + // the thermometer outline png + this.context.drawImage(this.thermoOverlayImg, 20, 0); + + // text + this.context.fillStyle = '#000'; + this.context.textAlign="center"; + this.context.fillText(curr + "°", 40, h + paddingUnder); } else { - console.log ("Printer >> f:checkTemperature() >> communicateWithWifibox is false, so not executing this function"); + console.log("Thermometer.setTemperature() -> thermometer not initialized!"); } - } - 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"); - } - } -} \ No newline at end of file + } +}