improved index page

index page now checks if doodle boxes are alive before displaying them
This commit is contained in:
casperlamboo 2015-06-11 11:08:56 +02:00
parent 81ec036973
commit 3bacee2072
6 changed files with 89 additions and 239 deletions

View File

@ -1,149 +0,0 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Doedel Drie Dee</title>
<!--<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>-->
<script src="library/jquery.js"></script>
<script src="library/three.js"></script>
<script src="src/utils.js"></script>
<script src="src/box.js"></script>
<script src="src/printer.js"></script>
<script src="src/slicer.js"></script>
<script src="gcode/testgcode.js"></script>
<script src="gcode/easterbunny.js"></script>
</head>
<body>
<script>
var localIp = location.hash.substring(1);
var doodleBox, drawing;
$(document).ready(function () {
"use strict";
doodleBox = new D3D.Box(localIp);
CAL.Scene.setCanvas(document.getElementById("canvas"));
var shape = new CAL.Shape({
shapeColor: false,
closePath: false,
points: [
new CAL.Vector(20, 180),
new CAL.Vector(180, 100),
new CAL.Vector(20, 80),
new CAL.Vector(180, 60)
]
});
CAL.Scene.add(shape);
drawing = new Drawing(shape);
CAL.Scene.add(drawing);
});
function Drawing (shape) {
this.shape = shape;
this.active = true;
this.mouse = false;
}
Drawing.prototype.mouseDown = function (mouse) {
this.mouse = mouse;
};
Drawing.prototype.mouseUp = function (mouse) {
this.mouse = false;
};
Drawing.prototype.generateGcode = function () {
var gcode = doodleBox.printer.getStartCode();
var extruder = 0.0;
var points = this.shape.points;
var normalSpeed = doodleBox.printer["printer.speed"] * 60;
var bottomSpeed = doodleBox.printer["printer.bottomLayerSpeed"] * 60;
var firstLayerSlow = doodleBox.printer["printer.firstLayerSlow"] * 60;
var bottomFlowRate = doodleBox.printer["printer.bottomFlowRate"];
var travelSpeed = doodleBox.printer["printer.travelSpeed"] * 60;
var filamentThickness = doodleBox.printer["printer.filamentThickness"];
var wallThickness = doodleBox.printer["printer.wallThickness"];
var screenToMillimeterScale = doodleBox.printer["printer.screenToMillimeterScale"];
var layerHeight = doodleBox.printer["printer.layerHeight"];
var useSubLayers = doodleBox.printer["printer.useSubLayers"];
var enableTraveling = doodleBox.printer["printer.enableTraveling"];
var retractionEnabled = doodleBox.printer["printer.retraction.enabled"];
var retractionspeed = doodleBox.printer["printer.retraction.speed"] * 60;
var retractionminDistance = doodleBox.printer["printer.retraction.minDistance"];
var retractionamount = doodleBox.printer["printer.retraction.amount"];
var speed = bottomSpeed.toFixed(3);
for (var layer = 0; layer < 10; layer ++) {
var lastPoint;
//turn on fan on layer 2
if (layer === 2) {
gcode.push("M106");
speed = normalSpeed.toFixed(3);
}
for (var i = 0; i < points.length; i ++) {
var point = points[i];
var x = point.x.toFixed(3);
var y = point.y.toFixed(3);
var z = ((layer + 1) * layerHeight).toFixed(3);
if (i === 0) {
if (layer >= 2 && retractionEnabled) {
gcode.push("G0 E" + (extruder - retractionamount).toFixed(3) + " F" + (retractionspeed * 60).toFixed(3));
}
gcode.push("G0 X" + x + " Y" + y + " Z" + z + " F" + travelSpeed);
if (layer >= 2 && retractionEnabled) {
gcode.push("G0 E" + extruder.toFixed(3) + " F" + (retractionspeed * 60).toFixed(3));
}
}
else {
var distance = point.subtract(lastPoint).length();
var flowRate = (layer < 2) ? bottomFlowRate : 1;
var filamentSurfaceArea = Math.pow((filamentThickness/2), 2) * Math.PI;
//extruder code from gcodeGenerating.js
extruder += distance * wallThickness * layerHeight / filamentSurfaceArea * flowRate;
gcode.push("G1 X" + x + " Y" + y + " Z" + z + " F" + speed + " E" + extruder.toFixed(3));
}
lastPoint = point;
}
}
gcode = gcode.concat(doodleBox.printer.getEndCode());
return gcode;
};
Drawing.prototype.step = function (dt, group) {
if (this.mouse) {
this.shape.addPoint(new CAL.Vector(this.mouse.x, this.mouse.y));
group.drawCanvas = true;
group.clearCanvas = true;
}
};
(function loop () {
requestAnimFrame(loop);
CAL.Scene.cycle();
})();
</script>
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>

View File

@ -3,10 +3,12 @@
<head> <head>
<title>Doedel Drie Dee</title> <title>Doedel Drie Dee</title>
<script src="library/jquery.js"></script> <script src="library/jquery.js"></script>
<script src="library/three.js"></script>
<script src="src/utils.js"></script> <script src="src/utils.js"></script>
<script src="src/box.js"></script> <script src="src/box.js"></script>
<script src="src/printer.js"></script>
<style>
.hidden {display: none;}
</style>
</head> </head>
<body> <body>
@ -18,66 +20,61 @@ var printers = [];
$(document).ready(function () { $(document).ready(function () {
"use strict"; "use strict";
var listDoodle = $("#printers-doodle"); var known = [];
var listSliceTest = $("#printers-slicetest"); var listSliceTest = $("#printers-slicetest");
var listSliceWebworker = $("#printers-webworker"); var listSliceWebworker = $("#printers-webworker");
listDoodle.append("<li><a href='doodle.html#192.168.5.1'>Wired Printer</a></li>"); function addPrinter (name, localip) {
listSliceTest.append("<li><a href='slice_test.html#192.168.5.1'>Wired Printer</a></li>"); known.push(localip);
listSliceWebworker.append("<li><a href='webworker_test.html#192.168.5.1'>Wired Printer</a></li>");
listDoodle.append("<li><a href='doodle.html#" + window.location.host + ":3000'>Node Server</a></li>"); var slice = $("<li class='hidden'><a href='slice_test.html#" + localip + "'>" + name + "</a></li>");
listSliceTest.append("<li><a href='slice_test.html#" + window.location.host + ":3000'>Node Server</a></li>"); var webworker = $("<li class='hidden'><a href='webworker_test.html#" + localip + "'>" + name + "</a></li>");
listSliceWebworker.append("<li><a href='webworker_test.html#" + window.location.host + ":3000'>Node Server</a></li>");
/* listSliceTest.append(slice);
printers.push({ listSliceWebworker.append(webworker);
name: "wired box",
d3dbox: new D3D.Box("192.168.5.1") var box = new D3D.Box(localip).init();
}); box.onconnect = function () {
*/ slice.removeClass('hidden');
webworker.removeClass('hidden');
};
box.ondisconnect = function () {
slice.addClass('hidden');
webworker.addClass('hidden');
};
}
function checkNewBoxes () {
getAPI(api + "list.php", function (error, boxes) {
if (error) {
console.warn('It appears that you are not connected to the internet, or the Doodle3D servers are down');
return;
}
getAPI(api + "list.php", function (boxes) {
for (var i = 0; i < boxes.length; i ++) { for (var i = 0; i < boxes.length; i ++) {
var box = boxes[i]; var box = boxes[i];
if (known.indexOf(box.localip) === -1) {
/* addPrinter(box.wifiboxid, box.localip);
printers.push({ }
name: box.wifiboxid,
d3dbox: new D3D.Box(box.localip)
});
*/
listDoodle.append("<li><a href='doodle.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
listSliceTest.append("<li><a href='slice_test.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
listSliceWebworker.append("<li><a href='webworker_test.html#" + box.localip + "'>" + box.wifiboxid + "</a></li>");
} }
}); });
}
addPrinter('Wired Printer', '192.168.5.1');
addPrinter('Node Server', window.location.host + ":3000");
setInterval(checkNewBoxes, 10000);
checkNewBoxes();
}); });
</script> </script>
<p>Doodle</p>
<ul id="printers-doodle"></ul>
<p>Slice Test</p> <p>Slice Test</p>
<ul id="printers-slicetest"></ul> <ul id="printers-slicetest"></ul>
<p>Webworkers</p> <p>Webworkers</p>
<ul id="printers-webworker"></ul> <ul id="printers-webworker"></ul>
<!--
<table>
<tr>
<th>localip</th>
<th>wifiboxid</th>
<th>date</th>
</tr>
<tr style="display: none">
<td>localip</td>
<td>wifiboxid</td>
<td>date</td>
</tr>
</table>
-->
</body> </body>
</html> </html>

View File

@ -1,6 +1,6 @@
/****************************************************** /******************************************************
* *
* Box * WiFi-Box
* Representation of de Doodle3DBox * Representation of de Doodle3DBox
* Handles all communication with the doodle box * Handles all communication with the doodle box
* JavaScript shell for api communication * JavaScript shell for api communication
@ -31,8 +31,6 @@ D3D.Box = function (localIp) {
this.currentBatch = 0; this.currentBatch = 0;
this.loaded = false; this.loaded = false;
this.init();
}; };
D3D.Box.prototype.init = function () { D3D.Box.prototype.init = function () {
"use strict"; "use strict";
@ -40,7 +38,12 @@ D3D.Box.prototype.init = function () {
this.getNetworkAlive(function (error, data) { this.getNetworkAlive(function (error, data) {
if (error) { if (error) {
if (scope.alive) {
scope.alive = false; scope.alive = false;
if (scope.ondisconnect !== undefined) {
scope.ondisconnect();
}
}
console.warn(error); console.warn(error);
setTimeout(function () { setTimeout(function () {
@ -51,6 +54,9 @@ D3D.Box.prototype.init = function () {
} }
scope.alive = true; scope.alive = true;
if (scope.onconnect !== undefined) {
scope.onconnect();
}
scope.getConfigAll(function (error, data) { scope.getConfigAll(function (error, data) {
if (error) { if (error) {

View File

@ -6,24 +6,24 @@
******************************************************/ ******************************************************/
var D3D = { var D3D = {
"version": "0.1", 'version': '0.1',
"website": "http://www.doodle3d.com/", 'website': 'http://www.doodle3d.com/',
"contact": "develop@doodle3d.com" 'contact': 'develop@doodle3d.com'
}; };
function sendAPI (url, data, callback) { function sendAPI (url, data, callback) {
"use strict"; 'use strict';
$.ajax({ $.ajax({
url: url, url: url,
type: "POST", type: 'POST',
data: data, data: data,
dataType: "json", dataType: 'json',
timeout: 10000, timeout: 10000,
success: function (response) { success: function (response) {
if (response.status === "success") { if (response.status === 'success') {
if (callback !== undefined) { if (callback !== undefined) {
callback(null, response.data); callback(null, response);
} }
} }
else { else {
@ -31,19 +31,19 @@ function sendAPI (url, data, callback) {
} }
} }
}).fail(function () { }).fail(function () {
callback("Failed connecting to " + url); callback('Failed connecting to ' + url);
}); });
} }
function getAPI (url, callback) { function getAPI (url, callback) {
"use strict"; 'use strict';
$.ajax({ $.ajax({
url: url, url: url,
dataType: "json", dataType: 'json',
timeout: 5000, timeout: 5000,
success: function (response) { success: function (response) {
if (response.status === "success") { if (response.status === 'success') {
if (callback !== undefined) { if (callback !== undefined) {
callback(null, response.data); callback(null, response.data);
} }
@ -53,37 +53,23 @@ function getAPI (url, callback) {
} }
} }
}).fail(function () { }).fail(function () {
callback("Failed connecting to " + url); callback('Failed connecting to ' + url);
});
}
function loadSettings (url, callback) {
"use strict";
$.ajax({
url: url,
dataType: "json",
success: function (response) {
if (callback !== undefined) {
callback(response);
}
}
}); });
} }
function downloadFile (file, data) { function downloadFile (file, data) {
"use strict"; 'use strict';
var blob = new Blob([data], {type:'text/plain'}); var blob = new Blob([data], {type:'text/plain'});
var button = document.createElement("a"); var button = document.createElement('a');
button.download = file; button.download = file;
button.href = window.URL.createObjectURL(blob); button.href = window.URL.createObjectURL(blob);
button.click(); button.click();
} }
Array.prototype.clone = function () { Array.prototype.clone = function () {
"use strict"; 'use strict';
var array = []; var array = [];
for (var i = 0; i < this.length; i ++) { for (var i = 0; i < this.length; i ++) {

View File

@ -42,7 +42,7 @@ self.addEventListener("message", function (event) {
case "SLICE": case "SLICE":
var gcode = slicer.getGCode(printer); var gcode = slicer.getGCode(printer);
var blob = new Blob([gcode], {type: 'text/html'}); var blob = new Blob([gcode], {type: 'text/plain'});
self.postMessage({ self.postMessage({
"cmd": "GCODE", "cmd": "GCODE",

View File

@ -47,8 +47,7 @@ function init () {
var scene = createScene(); var scene = createScene();
var localIp = location.hash.substring(1); var localIp = location.hash.substring(1);
doodleBox = new D3D.Box(localIp); doodleBox = new D3D.Box(localIp).init();
doodleBox.onupdate = function (data) { doodleBox.onupdate = function (data) {
document.getElementById('state').innerHTML = data.state; document.getElementById('state').innerHTML = data.state;
document.getElementById('bed_temp').innerHTML = data.bed; document.getElementById('bed_temp').innerHTML = data.bed;
@ -115,6 +114,8 @@ function init () {
} }
function createScene () { function createScene () {
'use strict';
var scene = new THREE.Scene(); var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('3d-preview'), antialias: true}); var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('3d-preview'), antialias: true});
@ -192,13 +193,22 @@ function createScene () {
} }
} }
loadSettings('settings/user_settings.json', function (data) { $.ajax({
USER_SETTINGS = data; url: 'settings/user_settings.json',
dataType: 'json',
success: function (response) {
USER_SETTINGS = response;
loaded(); loaded();
}
}); });
loadSettings('settings/printer_settings.json', function (data) {
PRINTER_SETTINGS = data; $.ajax({
url: 'settings/printer_settings.json',
dataType: 'json',
success: function (response) {
PRINTER_SETTINGS = response;
loaded(); loaded();
}
}); });
})(); })();
</script> </script>