Skip to content

/M3rlin_SLAcer.js forked from lautr3k/SLAcer.js

Permalink
Branch: gh-pages
Find file Copy path

M3rlin_SLAcer.js/index.html

Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
798 lines (766 sloc) 27.8 KB
Raw Blame History
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SLAcer.js</title>
<link
rel="stylesheet"
type="text/css"
href="vendor/jquery-ui/jquery-ui.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="vendor/bootstrap/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="vendor/bootstrap-slider/css/bootstrap-slider.min.css"
/>
<link
rel="stylesheet"
type="text/css"
href="vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css"
/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/m3rlin.css" />
</head>
<body>
<div id="hide">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button
type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false"
aria-controls="navbar"
>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">M3rlin SLAcer.js (bêta)</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="https://github.com/lautr3k/SLAcer.js">GitHub</a></li>
</ul>
</div>
</div>
</nav>
<!-- .navbar -->
<div class="body container-fluid">
<div id="sidebar">
<div class="form-group">
<button id="open-viewer-2d" class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-picture"></span> 2D viewer
</button>
<button id="slice-button" class="btn btn-success" type="button">
<span class="glyphicon glyphicon-align-center"></span> Slice
</button>
<button
id="abort-button"
class="btn btn-danger hidden"
type="button"
>
<span class="glyphicon glyphicon-off"></span> Abort
</button>
<button
id="zip-button"
class="btn btn-info"
type="button"
disabled="disabled"
>
<span class="glyphicon glyphicon-compressed"></span> ZIP
</button>
</div>
<div id="transform" 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="#transform-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Transformations</h3>
</div>
<div id="transform-body" class="panel-body collapse in">
<div class="form-group" id="transform-mirror">
<label for="transform-mirror">Mirror</label>
<input
type="radio"
name="transform-mirror"
id="transform-mirror-yes"
value="yes"
/>
yes
<input
type="radio"
name="transform-mirror"
id="transform-mirror-no"
value="no"
checked="checked"
/>
no
</div>
<hr />
<div class="form-group">
<label for="transform-action">Action</label>
<select id="transform-action" class="form-control input-sm">
<option>scale</option>
<option>rotate</option>
<option>translate</option>
</select>
</div>
<div class="form-group" id="transform-uniform">
<label for="transform-uniform">Uniform</label>
<input
type="radio"
name="transform-uniform"
id="transform-uniform-yes"
value="yes"
checked="checked"
/>
yes
<input
type="radio"
name="transform-uniform"
id="transform-uniform-no"
value="no"
/>
no
</div>
<div class="form-group">
<label for="transform-x">X</label>
<input
type="number"
id="transform-x"
class="form-control input-sm"
placeholder="0"
/>
</div>
<div class="form-group">
<label for="transform-y">Y</label>
<input
type="number"
id="transform-y"
class="form-control input-sm"
placeholder="0"
/>
</div>
<div class="form-group">
<label for="transform-z">Z</label>
<input
type="number"
id="transform-z"
class="form-control input-sm"
placeholder="0"
/>
</div>
</div>
</div>
<!-- #transform -->
<div id="file" 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="#file-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">File</h3>
</div>
<div id="file-body" class="panel-body collapse in">
<div class="form-group">
<span class="btn btn-default btn-file btn-xs">
Browse
<input
type="file"
name="file"
id="file-input"
accept=".stl"
/>
</span>
<small>Or drop an STL file anywhere.</small>
</div>
</div>
</div>
<!-- #file -->
<div id="mesh" 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="#mesh-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Mesh</h3>
</div>
<div id="mesh-body" class="panel-body collapse in">
<div class="info">
<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>
</div>
<div class="info">
<span class="info-label">Weight <small>(g)</small></span>
<span class="info-value" id="mesh-weight">0</span>
</div>
<div class="info">
<span class="info-label">Cost <small>($)</small></span>
<span class="info-value" id="mesh-cost">0</span>
</div>
</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="info">
<span class="info-label"
>Layers <small>(current / total)</small></span
>
<span class="info-value">
<span id="slicer-layer-value">0</span> /
<span id="slicer-layers-value">0</span>
</span>
</div>
<hr />
<div class="form-group">
<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"
/>
</div>
<div class="form-group">
<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"
/>
</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">
<label for="slicer-image-extension">Output type</label>
<input
type="radio"
name="slicer-image-extension"
id="slicer-image-extension-png"
value="png"
checked="checked"
/>
png
<input
type="radio"
name="slicer-image-extension"
id="slicer-image-extension-svg"
value="svg"
/>
svg
</div>
<hr />
<div class="form-group hidden">
<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"
/>
</div>
<div class="form-group">
<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-no"
value="no"
checked="checked"
/>
no
</div>
<div class="form-group">
<label for="slicer-speed">Speed mode</label>
<input
type="radio"
name="slicer-speed"
id="slicer-speed-yes"
value="yes"
/>
yes
<input
type="radio"
name="slicer-speed"
id="slicer-speed-no"
value="no"
checked="checked"
/>
no
</div>
<div class="form-group">
<label for="slicer-speed-delay"
>Speed mode<br />delay <small>(ms)</small></label
>
<input
type="number"
id="slicer-speed-delay"
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"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<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 <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 <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 <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">
<label for="build-volume-unit">unit</label>
<input
type="radio"
name="build-volume-unit"
id="build-volume-unit-in"
value="in"
/>
in
<input
type="radio"
name="build-volume-unit"
id="build-volume-unit-mm"
value="mm"
checked="checked"
/>
mm
</div>
</div>
</div>
<!-- #build-volume -->
<div id="resin" 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="#resin-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Resin</h3>
</div>
<div id="resin-body" class="panel-body collapse in">
<div class="form-group">
<label for="resin-density"
>Density <small>(g / cm³)</small></label
>
<input
type="number"
id="resin-density"
class="form-control input-sm"
placeholder="1.1"
min="0"
step="0.1"
/>
</div>
<div class="form-group">
<label for="resin-price">Price <small>($ / l)</small></label>
<input
type="number"
id="resin-price"
class="form-control input-sm"
placeholder="50"
min="0"
/>
</div>
</div>
</div>
<!-- #resin -->
<div id="screen" 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="#screen-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Screen</h3>
</div>
<div id="screen-body" class="panel-body collapse in">
<div class="info">
<span class="info-label">Dot pitch <small>(mm)</small></span>
<span class="info-value" id="screen-dot-pitch">0</span>
</div>
<div class="form-group">
<label for="screen-width">Width <small>(px)</small></label>
<input
type="number"
id="screen-width"
class="form-control input-sm"
placeholder="1680"
min="0"
/>
</div>
<div class="form-group">
<label for="screen-height">Height <small>(px)</small></label>
<input
type="number"
id="screen-height"
class="form-control input-sm"
placeholder="1050"
min="0"
/>
</div>
<div class="form-group">
<label for="screen-diagonal-size">Diagonal size</label>
<input
type="number"
id="screen-diagonal-size"
class="form-control input-sm"
placeholder="22"
min="0"
/>
</div>
<div class="form-group">
<label for="screen-diagonal-unit">Diagonal unit</label>
<input
type="radio"
name="screen-diagonal-unit"
id="screen-diagonal-unit-in"
value="in"
checked="checked"
/>
in
<input
type="radio"
name="screen-diagonal-unit"
id="screen-diagonal-unit-mm"
value="mm"
/>
mm
</div>
</div>
</div>
<!-- #screen -->
<div id="colors" 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="#colors-body"
>
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<h3 class="panel-title">Colors</h3>
</div>
<div id="colors-body" class="panel-body collapse in">
<div class="form-group">
<label for="mesh-color">Mesh</label>
<input
type="text"
id="mesh-color"
class="form-control input-sm"
placeholder="#555555"
/>
</div>
<div class="form-group">
<label for="slice-color">Slice</label>
<input
type="text"
id="slice-color"
class="form-control input-sm"
placeholder="#550000"
/>
</div>
</div>
</div>
<!-- #colors -->
</div>
<!-- #sidebar -->
<div id="main">
<div id="viewer3d" class="box fl">loading...</div>
</div>
<!-- #main -->
<div id="slider">
<span class="max">100</span>
<input
id="ex4"
type="text"
data-slider-min="0"
data-slider-max="100"
data-slider-step="1"
data-slider-value="0"
data-slider-tooltip="always"
data-slider-tooltip-position="left"
data-slider-orientation="vertical"
/>
<span class="min">0</span>
</div>
<!-- #main -->
</div>
<!-- .body -->
<div id="alert" class="alert alert-warning hidden" role="alert">
<!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
<p class="message">Alert message empty...</p>
</div>
</div>
<!-- MODAL START MODAL START MODAL START-->
<!-- Button trigger modal -->
<!-- Modal -->
<div
class="modal fade"
id="m3rlinModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog full_modal-dialog" role="document">
<div class="modal-content full_modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLabel">
M3rlin 3D
</h1>
<h4>
Prototyped with
<a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a>
</h4>
<!-- <button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button> -->
</div>
<div class="modal-body">
</div>
<div class="m3rlin-options">
<div id="greeter">
<div class="col">
<div class="row">
<h2 class="centered">
Welcome to M3rlin Prototype
</h2>
</div>
<div class="row">
<h4 class="padded centered">
Select one of the options below
</h4>
<h4 class="centered">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
</h4>
</div>
</div>
</div>
<div id="quick-confirm">
<div class="col">
<div class="row">
<h2 class="centered">
Quick Start
</h2>
</div>
<div class="row">
<h4 class="padded centered">
To print test image using default settings:
</h4>
<h4 class="centered">
Please ensure printer is connected and ready to receive
printer data, then press Continue.
</h4>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class=" centerer m3rlin-main-menu-btns">
<button class="m3rlin-btn" id="quick">Quick Start</button>
<button class="m3rlin-btn" id="settings">Settings</button>
<button class="m3rlin-btn">About</button>
</div>
<div class="centerer m3rlin-quickstart-btns">
<button class="m3rlin-btn" id="m3rlin-back">Back</button>
<button class="m3rlin-btn" id="m3rlin-continue">Continue</button>
<button class="m3rlin-btn">Help</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- MODAL END MODAL END MODAL END -->
<script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
<script
src="vendor/jquery-ui/jquery-ui.min.js"
type="text/javascript"
></script>
<script
src="vendor/bootstrap/js/bootstrap.min.js"
type="text/javascript"
></script>
<script
src="vendor/bootstrap-slider/bootstrap-slider.min.js"
type="text/javascript"
></script>
<script
src="vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"
type="text/javascript"
></script>
<script src="vendor/lodash.min.js" type="text/javascript"></script>
<script src="vendor/three.min.js" type="text/javascript"></script>
<script src="vendor/earcut.js" type="text/javascript"></script>
<script src="vendor/triangulation.js" type="text/javascript"></script>
<script src="js/slacer/settings.js" type="text/javascript"></script>
<script src="js/slacer/mesh.js" type="text/javascript"></script>
<script src="js/slacer/viewer.js" type="text/javascript"></script>
<script src="vendor/OrbitControls.js" type="text/javascript"></script>
<script src="js/slacer/viewcontrols.js" type="text/javascript"></script>
<script src="js/slacer/viewer3d.js" type="text/javascript"></script>
<script src="js/slacer/viewer2d.js" type="text/javascript"></script>
<script src="js/slacer/slicer.js" type="text/javascript"></script>
<script src="js/loader/stl.js" type="text/javascript"></script>
<script src="vendor/FileSaver.min.js" type="text/javascript"></script>
<script src="vendor/jszip.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/m3rlin.js" type="text/javascript"></script>
</body>
</html>
You can’t perform that action at this time.