From 95bedd09f19d4ccdf1ef5a7801b85c067a92d9e9 Mon Sep 17 00:00:00 2001 From: Adriaan Wormgoor Date: Tue, 17 Sep 2013 13:08:52 +0200 Subject: [PATCH] Thermometer class plus the changes necessary to implement it --- css/d3d_btns.css | 4 +- css/fixedPosInterface.css | 70 ++++++++- img/thermometer_fg_overlay.png | Bin 0 -> 1195 bytes index.html | 20 ++- js/Printer.js | 17 +-- js/Thermometer.js | 270 +++++++++++++++++++++++++++++++++ js/buttonbehaviors.js | 20 +-- js/main.js | 8 +- 8 files changed, 368 insertions(+), 41 deletions(-) create mode 100644 img/thermometer_fg_overlay.png create mode 100644 js/Thermometer.js diff --git a/css/d3d_btns.css b/css/d3d_btns.css index a750422..da0f5a1 100644 --- a/css/d3d_btns.css +++ b/css/d3d_btns.css @@ -152,7 +152,7 @@ img { .btn { position: absolute; -webkit-user-select: none; - cursor: hand; + cursor: pointer; } #displayTemp { position: absolute; @@ -163,7 +163,7 @@ img { display:none; } -.disabled { +.disabled { opacity: 0.3; cursor: default; } diff --git a/css/fixedPosInterface.css b/css/fixedPosInterface.css index 75dcdd6..49c43f9 100644 --- a/css/fixedPosInterface.css +++ b/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"); - margin-top: 7px; + width: 399px; + 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; - -moz-transform: translate(-20px,-15px) scale(.8); + width: 399px; + 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 { diff --git a/img/thermometer_fg_overlay.png b/img/thermometer_fg_overlay.png new file mode 100644 index 0000000000000000000000000000000000000000..398b4fa6318fbdb53a8c64b0573f74b516ca34e1 GIT binary patch literal 1195 zcmV;c1XTNpP)2r>k#v=*h%lF zjc>pRyd%7@>M}ZO__rQy0tNIlHLRcj{j~G7Dg5_aUBv>L0kzRXtN}Hk2GoEWPy=c} z4X6P%pa#@{8c+jjKn%ZR-QUR26PUHYCqwz?o;TYryY%IfO{+zS{tRhXK;Z(Wc7~~XeO~SS# zpd8vOXs{)IRRDk;u$6)B+@V$gW5z*FYO36D3^HXLpDO`iGxK6A z_oAgNjy{xUso}Q(w_9QB8H#;8M&QAMpzf7`A%q3eX0O5W6D{^vq;Musej5Uyw3z^l zr4F&6?n3!f2!PUNm)jg{KzTI;Kxwmq->_A{N(!X&0EN;h$3uXUHq$&-RK4~Yf4f5f z>{b|ZRHwnopgpY#yWd)$b-9B5RX}ZW3bT^vRNk=h>FOY7NP6OV{B_KXv zcm?23Bl}j_I%(4h&J9q7jKQ1rfNH?72ydRlB#+?Xkhs2JHxL{DJJM@Rku+e};k9iy zxI%zDPK;mz$KcUgthgG?oftnyz~Bx5w&0}=KyBjlKWs~Le#BM)&|s6+0;u$8j6p|@ z+_%2=V0?$cY%`DTqK@GP=M~TnRKjxc6_{a=Tzg)@p80RTQu1Qb=;DwzNP002ov JPDHLkV1mu34>kY* literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 8cf1756..9e234f4 100755 --- a/index.html +++ b/index.html @@ -10,8 +10,6 @@ - - @@ -30,9 +28,8 @@
- +
- @@ -42,7 +39,17 @@
-
+ +
+ +
@@ -83,7 +90,6 @@
- @@ -92,7 +98,7 @@ - + diff --git a/js/Printer.js b/js/Printer.js index 0d0467e..8a089d1 100644 --- a/js/Printer.js +++ b/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; diff --git a/js/Thermometer.js b/js/Thermometer.js new file mode 100644 index 0000000..0d0467e --- /dev/null +++ b/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"); + } + } +} \ No newline at end of file diff --git a/js/buttonbehaviors.js b/js/buttonbehaviors.js index 45fb102..b8a1ee9 100644 --- a/js/buttonbehaviors.js +++ b/js/buttonbehaviors.js @@ -253,11 +253,17 @@ function clearMainView() { ctx.clearRect(0,0,canvas.width, canvas.height); ctx.restore(); } -function clearPreview() { - // console.log("f:clearPreview()"); +function resetPreview() { + // 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) { - rStep -= twistIncrement; - // } + if (rStep > -previewRotationLimit) rStep -= twistIncrement; // redrawPreview(redrawLess); redrawRenderedPreview(redrawLess); } function previewTwistRight(redrawLess) { // console.log("f:previewTwistRight()"); - // if (rStep < Math.PI) { - rStep += twistIncrement; - // } + if (rStep < previewRotationLimit) 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); diff --git a/js/main.js b/js/main.js index c49aa73..4d5ca0d 100644 --- a/js/main.js +++ b/js/main.js @@ -4,8 +4,10 @@ var communicateWithWifibox = true; // if Doodle3d should try interfacing with t var wifiboxIsRemote = false; // when you want to run the client on a computer and have it remotely connect to the wifibox var autoUpdate = true; // auto retrieve updates about temperature and progress from printer -var printer = new 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);