<!DOCTYPE HTML> <html lang='en'> <head> <script src='library/jquery.js'></script> <script src='library/three.js'></script> <script src='three.js-master/examples/js/loaders/STLLoader.js'></script> <script src='src/utils.js'></script> <script src='src/box.js'></script> <script src='src/printer.js'></script> <script src='src/slicerworker.js'></script> <title>Doedel Drie Dee || Webworker Test</title> <style> canvas {border: 1px solid black;} #progress {height: 20px; width: 200px; border: 1px solid black; overflow: hidden;} #progress_bar {height: 20px; background-color: lightblue; width: 0%; transition: width 0.5s;} .block {border: 1px solid black; width: 400px; height: 400px; display: inline-block;} #start_print, #download {display: none;} </style> </head> <body> <canvas id='3d-preview' height='400' width='400'></canvas> <div class='block'> <p>State: <span id='state'></span></p> <p>Bed Temp: <span id='bed_temp'></span></p> <p>Bed Target Temp: <span id='bed_target_temp'></span></p> <p>Nozzle Temp: <span id='nozzle_temp'></span></p> <p>Nozzle Target Temp: <span id='nozzle_target_temp'></span></p> <p>Current Line: <span id='current_line'></span></p> <p>Buffered Lines: <span id='buffered_lines'></span></p> <p>Total Lines: <span id='total_lines'></span></p> <p>Batches To Send: <span id='print_batches'></span></p> <div id='progress'><div id='progress_bar'></div></div> <button id="stop_print">Stop Print</button> <button id="start_print">Start Print</button> <button id="download">Download Gcode</button> </div> <script> var USER_SETTINGS, PRINTER_SETTINGS, doodleBox, gcode, slicerWorker, printer; function init () { 'use strict'; var scene = createScene(); var localIp = location.hash.substring(1); /*doodleBox = new D3D.Box(localIp).init(); doodleBox.onupdate = function (data) { document.getElementById('state').innerHTML = data.state; document.getElementById('bed_temp').innerHTML = data.bed; document.getElementById('bed_target_temp').innerHTML = data.bed_target; document.getElementById('nozzle_temp').innerHTML = data.hotend; document.getElementById('nozzle_target_temp').innerHTML = data.hotend_target; document.getElementById('current_line').innerHTML = data.current_line; document.getElementById('buffered_lines').innerHTML = data.buffered_lines; document.getElementById('total_lines').innerHTML = data.total_lines; document.getElementById('print_batches').innerHTML = doodleBox._printBatches.length; };*/ printer = new D3D.Printer().updateConfig(USER_SETTINGS).updateConfig(PRINTER_SETTINGS['ultimaker2go']); document.getElementById('stop_print').onclick = function () { doodleBox.stopPrint(printer); }; var slicer = new D3D.SlicerWorker(); slicer.setSettings(USER_SETTINGS, PRINTER_SETTINGS['ultimaker2go']); var progressBar = document.getElementById('progress_bar'); slicer.onprogress = function (progress) { progressBar.style.width = progress.procent * 100 + '%'; }; slicer.onfinish = function (_gcode) { gcode = _gcode; var startPrintButton = document.getElementById('start_print'); var downloadButton = document.getElementById('download'); startPrintButton.style.display = 'initial'; startPrintButton.onclick = function () { doodleBox.print(gcode); }; downloadButton.style.display = 'initial'; downloadButton.onclick = function () { downloadFile("gcode.gcode", gcode); }; }; var loader = new THREE.STLLoader(); loader.load('models/dom.stl', function (geometry) { //var geometry = new THREE.TorusGeometry(20, 10, 30, 30).clone(); //var geometry = new THREE.TorusKnotGeometry( 100, 43, 64, 8 ); var material = new THREE.MeshPhongMaterial({color: 0x00ff00, wireframe: false}); //var material = new THREE.MeshBasicMaterial({color: 0x000000, wireframe: true}); var mesh = new THREE.Mesh(geometry, material); mesh.rotation.x = -Math.PI/2; //mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.7; mesh.position.x = 60; mesh.position.z = 60; scene.add(mesh); slicer.setMesh(mesh); slicer.slice(); slicer.close(); }); } function createScene () { 'use strict'; var scene = new THREE.Scene(); var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('3d-preview'), antialias: true}); renderer.setClearColor(0xffffff, 1); var camera = new THREE.PerspectiveCamera(75, renderer.domElement.width/renderer.domElement.height, 1, 10000); scene.add(camera); var light = new THREE.AmbientLight(0x404040); scene.add(light); var directionalLight = new THREE.PointLight(0xffffff, 0.5); camera.add(directionalLight); applyMouseControls(renderer, camera, new THREE.Vector3(50, 0, 50), 1000); function applyMouseControls (renderer, camera, center, maxDistance) { var distance = 20; var rotX = 0; var rotY = 0; var moveCamera = false; function updateCamera () { camera.position.set( Math.cos(rotY)*Math.sin(rotX)*distance, Math.sin(rotY)*distance, Math.cos(rotY)*Math.cos(rotX)*distance ).add(center); camera.lookAt(center); } $(renderer.domElement).on('mousedown', function (e) { moveCamera = true; }).on('wheel', function (e) { var event = e.originalEvent; event.preventDefault(); distance = THREE.Math.clamp(distance - event.wheelDelta, 1, maxDistance); updateCamera(); }); $(window).on('mouseup', function (e) { moveCamera = false; }).on('mousemove', function (e) { var event = e.originalEvent; if (moveCamera === true) { rotX = (rotX - event.webkitMovementX/100) % (2*Math.PI); rotY = THREE.Math.clamp(rotY + event.webkitMovementY/100, -Math.PI/2, Math.PI/2); updateCamera(); } }); updateCamera(); } (function animate () { requestAnimationFrame(animate); renderer.render(scene, camera); })(); return scene; } (function () { 'use strict'; var loadedItems = 0; function loaded () { loadedItems ++; if (loadedItems === 2) { init(); } } $.ajax({ url: 'settings/user_settings.json', dataType: 'json', success: function (response) { USER_SETTINGS = response; loaded(); } }); $.ajax({ url: 'settings/printer_settings.json', dataType: 'json', success: function (response) { PRINTER_SETTINGS = response; loaded(); } }); })(); </script> </body> </html>