/SLAcer.js

Permalink
Browse files

Feature : mirror output

1 parent 503f8d4 commit 6222f05a7d2af20283697fa9493cff002a613d5d @lautr3k committed Jul 22, 2016
Unified Split
Showing with 138 additions and 25 deletions.
  1. +1 −0 css/main.css
  2. +26 −1 index.html
  3. +78 −22 js/main.js
  4. +33 −2 viewer2d.html
View
1 css/main.css
@@ -3,6 +3,7 @@
margin: 0; margin: 0;
} }
+
/* Sidebar */ /* Sidebar */
#sidebar { #sidebar {
position: fixed; position: fixed;
View
27 index.html
@@ -148,24 +148,49 @@ <h3 class="panel-title">Mesh</h3>
<h3 class="panel-title">Slicer</h3> <h3 class="panel-title">Slicer</h3>
</div> </div>
<div id="slicer-body" class="panel-body collapse in"> <div id="slicer-body" class="panel-body collapse in">
+
<div class="info"> <div class="info">
<span class="info-label">Layers <small>(current / total)</small></span> <span class="info-label">Layers <small>(current / total)</small></span>
<span class="info-value"> <span class="info-value">
<span id="slicer-layer-value">0</span> / <span id="slicer-layers-value">0</span> <span id="slicer-layer-value">0</span> / <span id="slicer-layers-value">0</span>
</span> </span>
</div> </div>
+
+ <hr />
+
<div class="form-group"> <div class="form-group">
<label for="slicer-layers-height">Layers height <small>(μm)</small></label> <label for="slicer-layers-height">Layers height <small>(μm)</small></label>
<input type="number" id="slicer-layers-height" class="form-control input-sm" placeholder="100" min="1" /> <input type="number" id="slicer-layers-height" class="form-control input-sm" placeholder="100" min="1" />
</div> </div>
<div class="form-group"> <div class="form-group">
- <label for="slicer-light-on">Light on delay <small>(ms)</small></label> + <label for="slicer-light-on">Exposure time <small>(ms)</small></label>
<input type="number" id="slicer-light-on" class="form-control input-sm" placeholder="1000" min="1" /> <input type="number" id="slicer-light-on" class="form-control input-sm" placeholder="1000" min="1" />
</div> </div>
+
+ <div class="form-group clearfix">
+ <label for="slicer-lifting-height">Lifting height <small>(mm)</small></label>
+ <input type="number" id="slicer-lifting-height" class="form-control input-sm" placeholder="3" min="1" />
+ </div>
+ <div class="form-group clearfix">
+ <label for="slicer-lifting-speed">Lifting speed <small>(mm/min)</small></label>
+ <input type="number" id="slicer-lifting-speed" class="form-control input-sm" placeholder="50" min="1" />
+ </div>
+
+ <hr />
+
<div class="form-group"> <div class="form-group">
+ <label for="slicer-mirror">Mirror output</label>
+ <input type="radio" name="slicer-mirror" id="slicer-mirror-yes" value="yes" /> yes
+ <input type="radio" name="slicer-mirror" id="slicer-mirror-no" value="no" checked="checked" /> no
+ </div>
+
+ <hr />
+
+ <div class="form-group hidden">
<label for="slicer-light-off">Light off delay <small>(ms)</small></label> <label for="slicer-light-off">Light off delay <small>(ms)</small></label>
<input type="number" id="slicer-light-off" class="form-control input-sm" placeholder="500" min="1" /> <input type="number" id="slicer-light-off" class="form-control input-sm" placeholder="500" min="1" />
</div> </div>
+
<div class="form-group"> <div class="form-group">
<label for="slicer-make-zip">Make ZIP file</label> <label for="slicer-make-zip">Make ZIP file</label>
<input type="radio" name="slicer-make-zip" id="slicer-make-zip-yes" value="yes" /> yes <input type="radio" name="slicer-make-zip" id="slicer-make-zip-yes" value="yes" /> yes
View
100 js/main.js
@@ -23,6 +23,11 @@ var settings = new SLAcer.Settings({
panel: { panel: {
collapsed: false, collapsed: false,
position : 1 position : 1
+ },
+ mirror: false,
+ lifting: {
+ speed : 50, // mm/min
+ height: 3, // mm
} }
}, },
mesh: { mesh: {
@@ -105,13 +110,18 @@ function removeSlices() {
} }
} }
- viewer2dWin && (viewer2dWin.document.body.style.backgroundImage = 'none'); + sliceImage('none');
} }
function hexToDec(hex) { function hexToDec(hex) {
return parseInt(hex.toString().replace('#', ''), 16); return parseInt(hex.toString().replace('#', ''), 16);
} }
+function sliceImage(dataURL, mirror) {
+ settings.set('slice.dataURL', dataURL || 'none');
+ settings.set('slice.mirror' , mirror ? 'mirror' : '');
+}
+
function getSlice(layerNumber) { function getSlice(layerNumber) {
// remove old shapes // remove old shapes
removeSlices(); removeSlices();
@@ -130,10 +140,12 @@ function getSlice(layerNumber) {
throw 'transformations not applyed...'; throw 'transformations not applyed...';
} }
+ // get position
+ layerHeight = settings.get('slicer.layers.height') / 1000;
+ zPosition = layerNumber * layerHeight;
+
// get faces // get faces
- var layerHeight = settings.get('slicer.layers.height') / 1000; + var faces = slicer.getFaces(zPosition);
- var zPosition = layerNumber * layerHeight;
- var faces = slicer.getFaces(zPosition);
//console.log('layer number:', layerNumber); //console.log('layer number:', layerNumber);
//console.log('z position :', zPosition); //console.log('z position :', zPosition);
@@ -167,18 +179,15 @@ function getSlice(layerNumber) {
viewer3d.render(); viewer3d.render();
// render 2D view // render 2D view
- if (zipFolder || viewer2dWin) { + viewer2d.screenshot(function(dataURL) {
- viewer2d.screenshot(function(dataURL) { + sliceImage(dataURL, settings.get('slicer.mirror'));
- if (viewer2dWin) { +
- viewer2dWin.document.body.style.backgroundImage = 'url(' + dataURL + ')'; + if (zipFolder) {
- } + var fileName = layerNumber + '.png';
- if (zipFolder) { + var imgData = dataURL.substr(dataURL.indexOf(',') + 1);
- var fileName = layerNumber + '.png'; + zipFolder.file(fileName, imgData, { base64: true });
- var imgData = dataURL.substr(dataURL.indexOf(',') + 1); + }
- zipFolder.file(fileName, imgData, { base64: true }); + });
- }
- });
- }
} }
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
@@ -218,11 +227,12 @@ var viewer2d = new SLAcer.Viewer2D({
}); });
$openViewer2D.click(function(e) { $openViewer2D.click(function(e) {
- if (! viewer2dWin) { + if (viewer2dWin == null || viewer2dWin.closed) {
var screen = settings.get('screen'); var screen = settings.get('screen');
var size = 'width=' + screen.width + ', height=' + screen.height; var size = 'width=' + screen.width + ', height=' + screen.height;
var opts = 'menubar=0, toolbar=0, location=0, directories=0, personalbar=0, status=0, resizable=1, dependent=0' var opts = 'menubar=0, toolbar=0, location=0, directories=0, personalbar=0, status=0, resizable=1, dependent=0'
- viewer2dWin = window.open('viewer2d.html', 'SLAcer.viewer2d', size + ', ' + opts); +
+ viewer2dWin = window.open('viewer2d.html', 'SLAcerViewer2D', size + ', ' + opts);
$(viewer2dWin).on('beforeunload', function(e) { $(viewer2dWin).on('beforeunload', function(e) {
viewer2dWin = null; viewer2dWin = null;
@@ -231,8 +241,10 @@ $openViewer2D.click(function(e) {
getSlice($sliderInput.slider('getValue')); getSlice($sliderInput.slider('getValue'));
}); });
} }
+ else {
+ viewer2dWin.focus();
+ }
- viewer2dWin.focus();
return false; return false;
}); });
@@ -368,6 +380,13 @@ var $slicerLayersValue = $slicerBody.find('#slicer-layers-value');
var $slicerLayerValue = $slicerBody.find('#slicer-layer-value'); var $slicerLayerValue = $slicerBody.find('#slicer-layer-value');
var $slicerLightOff = $slicerBody.find('#slicer-light-off'); var $slicerLightOff = $slicerBody.find('#slicer-light-off');
var $slicerLightOn = $slicerBody.find('#slicer-light-on'); var $slicerLightOn = $slicerBody.find('#slicer-light-on');
+
+var $slicerLiftingSpeed = $slicerBody.find('#slicer-lifting-speed');
+var $slicerLiftingHeight = $slicerBody.find('#slicer-lifting-height');
+
+var $slicerMirrorYes = $slicerBody.find('#slicer-mirror-yes');
+var $slicerMirrorNo = $slicerBody.find('#slicer-mirror-no');
+
var $slicerSpeedYes = $slicerBody.find('#slicer-speed-yes'); var $slicerSpeedYes = $slicerBody.find('#slicer-speed-yes');
var $slicerSpeedNo = $slicerBody.find('#slicer-speed-no'); var $slicerSpeedNo = $slicerBody.find('#slicer-speed-no');
var $slicerSpeedDelay = $slicerBody.find('#slicer-speed-delay'); var $slicerSpeedDelay = $slicerBody.find('#slicer-speed-delay');
@@ -379,21 +398,32 @@ var $zipButton = $sidebar.find('#zip-button');
function updateSlicerUI() { function updateSlicerUI() {
var slicer = settings.get('slicer'); var slicer = settings.get('slicer');
+
$slicerSpeedDelay.val(slicer.speedDelay); $slicerSpeedDelay.val(slicer.speedDelay);
$slicerLayerHeight.val(slicer.layers.height); $slicerLayerHeight.val(slicer.layers.height);
$slicerLightOff.val(slicer.light.off); $slicerLightOff.val(slicer.light.off);
$slicerLightOn.val(slicer.light.on); $slicerLightOn.val(slicer.light.on);
+
+ $slicerLiftingSpeed.val(slicer.lifting.speed);
+ $slicerLiftingHeight.val(slicer.lifting.height);
} }
function updateSlicerSettings() { function updateSlicerSettings() {
settings.set('slicer.layers.height', $slicerLayerHeight.val()); settings.set('slicer.layers.height', $slicerLayerHeight.val());
settings.set('slicer.light.off', $slicerLightOff.val()); settings.set('slicer.light.off', $slicerLightOff.val());
settings.set('slicer.light.on', $slicerLightOn.val()); settings.set('slicer.light.on', $slicerLightOn.val());
+ settings.set('slicer.lifting.speed', $slicerLiftingSpeed.val());
+ settings.set('slicer.lifting.height', $slicerLiftingHeight.val());
+
+ settings.set('slicer.mirror', $slicerMirrorYes[0].checked);
+
settings.set('slicer.zip', $slicerMakeZipYes[0].checked); settings.set('slicer.zip', $slicerMakeZipYes[0].checked);
settings.set('slicer.speed', $slicerSpeedYes[0].checked); settings.set('slicer.speed', $slicerSpeedYes[0].checked);
settings.set('slicer.speedDelay', $slicerSpeedDelay.val()); settings.set('slicer.speedDelay', $slicerSpeedDelay.val());
+ getSlice($sliderInput.slider('getValue'));
+
updateSliderUI(); updateSliderUI();
} }
@@ -404,6 +434,15 @@ var slicesNumber;
var zipFile; var zipFile;
var zipFolder; var zipFolder;
+var layerHeight;
+var zPosition;
+
+var exposureTime;
+var liftingSpeed;
+var liftingHeight;
+var liftingTime;
+var estimatedTime;
+
function slice() { function slice() {
currentSliceNumber++; currentSliceNumber++;
@@ -418,15 +457,15 @@ function slice() {
var diff = time - expectedSliceInterval; var diff = time - expectedSliceInterval;
!settings.get('slicer.speed') && viewer2dWin && setTimeout(function() { !settings.get('slicer.speed') && viewer2dWin && setTimeout(function() {
- viewer2dWin && (viewer2dWin.document.body.style.backgroundImage = 'none'); + sliceImage('none');
}, settings.get('slicer.light.on')); }, settings.get('slicer.light.on'));
expectedSliceInterval += sliceInterval; expectedSliceInterval += sliceInterval;
setTimeout(slice, Math.max(0, sliceInterval - diff)); setTimeout(slice, Math.max(0, sliceInterval - diff));
} }
function endSlicing() { function endSlicing() {
- viewer2dWin && (viewer2dWin.document.body.style.backgroundImage = 'none'); + sliceImage('none');
$sidebar.find('input, button').prop('disabled', false); $sidebar.find('input, button').prop('disabled', false);
$sliderInput.slider('enable'); $sliderInput.slider('enable');
$abortButton.addClass('hidden'); $abortButton.addClass('hidden');
@@ -455,6 +494,19 @@ function startSlicing() {
zipFile = new JSZip(); zipFile = new JSZip();
zipFolder = zipFile.folder('slices'); zipFolder = zipFile.folder('slices');
zipFile.file("README.txt", 'Generated by SLAcer.js\r\nhttp://lautr3k.github.io/SLAcer.js/\r\n'); zipFile.file("README.txt", 'Generated by SLAcer.js\r\nhttp://lautr3k.github.io/SLAcer.js/\r\n');
+ // zipFile.file("slacer.json", JSON.stringify({
+ // imageExtension: '.png',
+ // imageDirectory: 'slices',
+ // screenWidth : settings.get('screen.width'),
+ // screenHeight : settings.get('screen.height'),
+ // screenSize : settings.get('screen.diagonal.size'),
+ // screenUnit : settings.get('screen.diagonal.unit'),
+ // layersNumber : slicesNumber,
+ // layersHeight : settings.get('slicer.layers.height') / 1000, // mm
+ // exposureTime : parseInt(settings.get('slicer.light.on')), // ms
+ // liftingSpeed : parseInt(settings.get('slicer.lifting.speed')), // mm/min
+ // liftingHeight : parseInt(settings.get('slicer.lifting.height')) // mm
+ // }, null, 2));
} }
slicesNumber && slice(); slicesNumber && slice();
@@ -482,6 +534,7 @@ $abortButton.on('click', function(e) {
endSlicing(); endSlicing();
}); });
+$('#slicer-mirror-' + (settings.get('slicer.mirror') ? 'yes' : 'no')).prop('checked', true);
$('#slicer-make-zip-' + (settings.get('slicer.zip') ? 'yes' : 'no')).prop('checked', true); $('#slicer-make-zip-' + (settings.get('slicer.zip') ? 'yes' : 'no')).prop('checked', true);
$('#slicer-speed-' + (settings.get('slicer.speed') ? 'yes' : 'no')).prop('checked', true); $('#slicer-speed-' + (settings.get('slicer.speed') ? 'yes' : 'no')).prop('checked', true);
$('#slicer input').on('input, change', updateSlicerSettings); $('#slicer input').on('input, change', updateSlicerSettings);
@@ -605,6 +658,8 @@ function updateScreenSettings() {
viewer2d.setScreenResolution(settings.get('screen')); viewer2d.setScreenResolution(settings.get('screen'));
$screenDotPitch.html(viewer2d.dotPitch.toFixed(2)); $screenDotPitch.html(viewer2d.dotPitch.toFixed(2));
+
+ getSlice($sliderInput.slider('getValue'));
} }
$('#screen-diagonal-unit-' + settings.get('screen.diagonal.unit')).prop('checked', true); $('#screen-diagonal-unit-' + settings.get('screen.diagonal.unit')).prop('checked', true);
@@ -795,7 +850,7 @@ $transformButtons.on('click', function(e) {
}); });
$('#transform select').on('change', updateTransformAction); $('#transform select').on('change', updateTransformAction);
-$('#transform input').on('input', updateTransformValues); +$('#transform input').on('change', updateTransformValues);
resetTransformValues(); resetTransformValues();
// UI resize // UI resize
@@ -873,6 +928,7 @@ loader.onError = errorHandler;
// example STL file // example STL file
//var stl = 'stl/Octocat-v2.stl'; //var stl = 'stl/Octocat-v2.stl';
var stl = 'stl/StressTest.stl'; var stl = 'stl/StressTest.stl';
+//var stl = 'stl/SLAcer.stl';
// File url // File url
var url = 'http://' + window.location.hostname + window.location.pathname + stl; var url = 'http://' + window.location.hostname + window.location.pathname + stl;
View
35 viewer2d.html
@@ -6,17 +6,48 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Viewer 2D - SLAcer.js (bêta)</title> <title>Viewer 2D - SLAcer.js (bêta)</title>
<style> <style>
- html, body { + html, body, #slice {
+ border: 0;
+ margin: 0;
+ padding: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
} }
body { body {
background-color: #000000; background-color: #000000;
+ }
+ #slice {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
+ .mirror {
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+ }
</style> </style>
</head> </head>
- <body id="slice"></body> + <body>
+ <div id="slice"></div>
+ <script src="vendor/lodash.min.js" type="text/javascript"></script>
+ <script src="js/slacer/settings.js" type="text/javascript"></script>
+ <script>
+ function storageListener() {
+ var settings = new SLAcer.Settings();
+ var mirror = settings.get('slice.mirror', false);
+ var dataURL = settings.get('slice.dataURL', 'none');
+ var image = dataURL !== 'none' ? 'url(' + dataURL + ')' : 'none';
+ var slice = document.getElementById('slice');
+
+ slice.style.backgroundImage = image;
+ slice.className = mirror ? 'mirror' : '';
+ }
+
+ window.addEventListener('storage', storageListener, false);
+ </script>
+ </body>
</html> </html>

0 comments on commit 6222f05

Please sign in to comment.