/SLAcer.js

Permalink
Browse files

split sidebar item styles

  • Loading branch information...
1 parent 5877461 commit d2437cd2a1f8722176f6d9671979232c7a8e2224 @lautr3k committed Mar 18, 2016
Unified Split
Showing with 107 additions and 27 deletions.
  1. +6 −2 css/main.css
  2. +30 −3 index.html
  3. +67 −22 js/main.js
  4. +4 −0 js/slacer/mesh.js
View
8 css/main.css
@@ -47,10 +47,14 @@
}
#sidebar label,
-#sidebar .info-label,
+#sidebar .info-label {
+ width: 60%;
+ float: left;
+}
+
#sidebar .info-value,
#sidebar .form-control {
- width: 50%;
+ width: 40%;
float: left;
}
View
33 index.html
@@ -62,6 +62,18 @@ <h3 class="panel-title">Mesh</h3>
<span class="info-label">Faces</span>
<span class="info-value" id="mesh-faces">0</span>
</div>
+ <div class="info">
+ <span class="info-label">Width <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+ <span class="info-value" id="mesh-size-x">0</span>
+ </div>
+ <div class="info">
+ <span class="info-label">Depth <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+ <span class="info-value" id="mesh-size-y">0</span>
+ </div>
+ <div class="info">
+ <span class="info-label">Height <small>(<span class="mesh-size-unit">mm</span>)</small></span>
+ <span class="info-value" id="mesh-size-z">0</span>
+ </div>
<div class="info">
<span class="info-label">Volume <small>(ml)</small></span>
<span class="info-value" id="mesh-volume">0</span>
@@ -73,6 +85,21 @@ <h3 class="panel-title">Mesh</h3>
</div>
</div><!-- #mesh -->
+ <div id="slicer" class="panel panel-default">
+ <div class="panel-heading">
+ <button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#slicer-body">
+ <span class="glyphicon glyphicon-menu-down"></span>
+ </button>
+ <h3 class="panel-title">Slicer</h3>
+ </div>
+ <div id="slicer-body" class="panel-body collapse in">
+ <div class="form-group">
+ <label for="layers-height">Layers height <small>(μm)</small></label>
+ <input type="number" id="layers-height" class="form-control input-sm" placeholder="100" min="1" />
+ </div>
+ </div>
+ </div><!-- #slicer -->
+
<div id="build-volume" class="panel panel-default">
<div class="panel-heading">
<button class="panel-toggle btn btn-default btn-xs pull-right" type="button" data-toggle="collapse" data-target="#build-volume-body">
@@ -82,15 +109,15 @@ <h3 class="panel-title">Build volume</h3>
</div>
<div id="build-volume-body" class="panel-body collapse in">
<div class="form-group">
- <label for="build-volume-x">X</label>
+ <label for="build-volume-x">X <small>(width)</small></label>
<input type="number" id="build-volume-x" class="form-control input-sm" placeholder="100" min="0" />
</div>
<div class="form-group">
- <label for="build-volume-y">Y</label>
+ <label for="build-volume-y">Y <small>(depth)</small></label>
<input type="number" id="build-volume-y" class="form-control input-sm" placeholder="100" min="0" />
</div>
<div class="form-group">
- <label for="build-volume-z">Z</label>
+ <label for="build-volume-z">Z <small>(height)</small></label>
<input type="number" id="build-volume-z" class="form-control input-sm" placeholder="100" min="0" />
</div>
<div class="form-group">
View
89 js/main.js
@@ -3,29 +3,44 @@
// -----------------------------------------------------------------------------
//window.localStorage.clear();
var settings = new SLAcer.Settings({
+ file: {
+ panel: {
+ collapsed: false,
+ position : 0
+ }
+ },
+ mesh: {
+ color: 0x333333,
+ panel: {
+ collapsed: false,
+ position : 1
+ }
+ },
+ slicer: {
+ layers: {
+ height: 100 // μm
+ },
+ panel: {
+ collapsed: false,
+ position : 2
+ }
+ },
buildVolume: {
size : { x: 100, y: 100, z: 100 }, // mm
unit : 'mm', // mm or in
color : 0xcccccc,
opacity : 0.1,
panel : {
collapsed: false,
- position : 2
+ position : 3
}
},
resin: {
density : 1.1, // g/cm3
price : 50, // $
panel : {
collapsed: false,
- position : 3
- }
- },
- mesh: {
- color: 0x333333,
- panel: {
- collapsed: false,
- position : 1
+ position : 4
}
},
screen: {
@@ -34,13 +49,7 @@ var settings = new SLAcer.Settings({
diagonal : { size: 22, unit: 'in' },
panel : {
collapsed: false,
- position : 4
- }
- },
- file: {
- panel: {
- collapsed: false,
- position : 0
+ position : 5
}
},
viewer3d: {
@@ -60,6 +69,15 @@ function errorHandler(error) {
// -----------------------------------------------------------------------------
var slicer = new SLAcer.Slicer();
+function slice(layerNumber) {
+ // get slice
+ var layerHeight = settings.get('slicer.layers.height') / 1000;
+ var zPosition = layerNumber * layerHeight;
+ var slice = slicer.getFaces(zPosition);
+ console.log('layer number:', layerNumber);
+ console.log('z position :', zPosition);
+}
+
// -----------------------------------------------------------------------------
// UI
// -----------------------------------------------------------------------------
@@ -78,7 +96,7 @@ var viewer3d = new SLAcer.Viewer3D({
var $sliderInput = $('#slider input');
$sliderInput.slider({ reversed : true }).on('change', function(e) {
- console.log('slice:', e.value.newValue);
+ slice(e.value.newValue);
});
var $sliderElement = $('#slider .slider');
@@ -145,17 +163,39 @@ function parseUnit(value, unit) {
var $fileBody = initPanel('file');
// Mesh panel
-var $meshBody = initPanel('mesh');
-var $meshFaces = $meshBody.find('#mesh-faces');
-var $meshVolume = $meshBody.find('#mesh-volume');
-var $meshWeight = $meshBody.find('#mesh-weight');
+var $meshBody = initPanel('mesh');
+var $meshFaces = $meshBody.find('#mesh-faces');
+var $meshVolume = $meshBody.find('#mesh-volume');
+var $meshWeight = $meshBody.find('#mesh-weight');
+var $meshSizeX = $meshBody.find('#mesh-size-x');
+var $meshSizeY = $meshBody.find('#mesh-size-y');
+var $meshSizeZ = $meshBody.find('#mesh-size-z');
+var $meshSizeUnit = $meshBody.find('.mesh-size-unit');
function updateMeshInfoUI(mesh) {
+ var size = mesh.getSize();
+ var unit = settings.get('buildVolume.unit');
+
+ $meshSizeUnit.html(unit);
+
+ if (unit == 'in') {
+ size.x = parseUnit(size.x, 'in');
+ size.y = parseUnit(size.y, 'in');
+ size.z = parseUnit(size.z, 'in');
+ }
+
+ $meshSizeX.html(size.x.toFixed(2));
+ $meshSizeY.html(size.y.toFixed(2));
+ $meshSizeZ.html(size.z.toFixed(2));
+
$meshFaces.html(mesh.geometry.faces.length);
$meshVolume.html(parseInt(mesh.getVolume() / 1000)); // cm3/ml
$meshWeight.html(0);
}
+// Slicer panel
+var $slicerBody = initPanel('slicer');
+
// Build volume panel
var $buildVolumeBody = initPanel('buildVolume');
var $buildVolumeX = $buildVolumeBody.find('#build-volume-x');
@@ -174,6 +214,7 @@ function updateBuildVolumeSettings() {
if (unit != settings.get('buildVolume.diagonal.unit')) {
var size = settings.get('buildVolume.size');
+
$buildVolumeX.val(parseUnit(size.x, unit));
$buildVolumeY.val(parseUnit(size.y, unit));
$buildVolumeZ.val(parseUnit(size.z, unit));
@@ -187,6 +228,10 @@ function updateBuildVolumeSettings() {
},
unit: unit
});
+
+ if (size) {
+ updateMeshInfoUI(slicer.mesh);
+ }
}
$('#build-volume-unit-' + settings.get('buildVolume.unit')).prop('checked', true);
@@ -289,7 +334,7 @@ loader.onGeometry = function(geometry) {
updateMeshInfoUI(slicer.mesh);
// get first slice
- //slice(0);
+ //slice(1);
}
catch(e) {
errorHandler(e);
View
4 js/slacer/mesh.js
@@ -32,6 +32,10 @@ var SLAcer = SLAcer || {};
// -------------------------------------------------------------------------
+ Mesh.prototype.getSize = function() {
+ return this.geometry.boundingBox.size();
+ };
+
// http://stackoverflow.com/questions/23279521
Mesh.prototype.getVolume = function(update) {
if (! update && this.userData.volume !== undefined) {

0 comments on commit d2437cd

Please sign in to comment.