mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-22 01:07:56 +01:00
updated Thermometer code (should be final for now)
This commit is contained in:
Adriaan Wormgoor
parent
ebf84cad42
commit
84ee0c259a
@ -1,270 +1,115 @@
|
|||||||
var $printProgressContainer = $("#printProgressContainer");
|
function Thermometer() {
|
||||||
var $progressbar = $("#progressbar");
|
this.currentTemperature = 0; // default val
|
||||||
var $progressAmount = $(".progressAmount");
|
this.targetTemperature = 180; // default val
|
||||||
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;
|
this.thermoOverlayImg = new Image();
|
||||||
var thermocounter = 0;
|
this.thermoOverlayImgSrc = "img/thermometer_fg_overlay.png"; // ../img/thermometer_fg_overlay.png
|
||||||
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 + "%");
|
this.thermoWidth= 40;
|
||||||
// $thermometer.css("background-position", -val*100 + "%");
|
this.thermoHeight = 100;
|
||||||
$(".thermoAmount").text(curr+"/"+targ);
|
|
||||||
}
|
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;
|
var self = this;
|
||||||
if (communicateWithWifibox) {
|
this.thermoOverlayImg.onload = function() {
|
||||||
$.ajax({
|
console.log("canvasThermoOverlay img loaded");
|
||||||
url: this.wifiboxURL + "/printer/heatup",
|
self.isInitted = true;
|
||||||
type: "POST",
|
self.update(self.currentTemperature, self.targetTemperature);
|
||||||
data: postData,
|
};
|
||||||
dataType: 'json',
|
this.thermoOverlayImg.src = this.thermoOverlayImgSrc;
|
||||||
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);
|
this.update = function(curr, targ) {
|
||||||
}
|
// console.log("Thermometer.update(" + curr + "," + targ + ")");
|
||||||
}).fail(function() {
|
|
||||||
console.log("Printer:checkTemperature: failed");
|
if (this.isInitted) {
|
||||||
clearTimeout(self.retryCheckTemperatureDelay);
|
if (curr == undefined) curr = 0;
|
||||||
self.retryCheckTemperatureDelay = setTimeout(function() { self.checkTemperature() },self.retryDelay); // retry after delay
|
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 {
|
} 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");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user