mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-11-25 10:37:56 +01:00
Thermometer class plus the changes necessary to implement it
This commit is contained in:
Adriaan Wormgoor
parent
3a11106535
commit
95bedd09f1
@ -152,7 +152,7 @@ img {
|
||||
.btn {
|
||||
position: absolute;
|
||||
-webkit-user-select: none;
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
#displayTemp {
|
||||
position: absolute;
|
||||
|
||||
@ -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 {
|
||||
|
||||
BIN
img/thermometer_fg_overlay.png
Normal file
BIN
img/thermometer_fg_overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
20
index.html
20
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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
270
js/Thermometer.js
Normal file
270
js/Thermometer.js
Normal file
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -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,6 +37,8 @@ $(function() {
|
||||
initPreviewRendering();
|
||||
initButtonBehavior();
|
||||
|
||||
thermometer.init($("#thermometerCanvas"));
|
||||
|
||||
printer.init();
|
||||
$(document).on(Printer.UPDATE,update);
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user