From d609f492ffe7b869a3698b415bd03b6e81743c3c Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 12:53:51 +0200
Subject: [PATCH 01/14] Init Merlin build of SLAcer.js with m3rlin.js jquery
 test file.

---
 index.html   | 1 +
 js/m3rlin.js | 6 ++++++
 2 files changed, 7 insertions(+)
 create mode 100644 js/m3rlin.js

diff --git a/index.html b/index.html
index 76c8219..82414a7 100644
--- a/index.html
+++ b/index.html
@@ -360,5 +360,6 @@ <h3 class="panel-title">Colors</h3>
         <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>
diff --git a/js/m3rlin.js b/js/m3rlin.js
new file mode 100644
index 0000000..8a98b74
--- /dev/null
+++ b/js/m3rlin.js
@@ -0,0 +1,6 @@
+$(document).ready(function() {
+  alert('hi from m3rlin.js');
+  //   if ($slicerLayerHeight.val() > 100) {
+  //     alert('Wait - are you sure??');
+  //   }
+});

From 7e82d7361f6e202a475671d6480481c59eee6073 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 13:32:38 +0200
Subject: [PATCH 02/14] Add a m3rlin.css which sets all original SLAcer index
 elements to display:none.

---
 css/m3rlin.css |    4 +
 css/main.css   |  159 ++++----
 index.html     | 1010 ++++++++++++++++++++++++++++++++----------------
 js/m3rlin.js   |    2 +-
 4 files changed, 756 insertions(+), 419 deletions(-)
 create mode 100644 css/m3rlin.css

diff --git a/css/m3rlin.css b/css/m3rlin.css
new file mode 100644
index 0000000..8692750
--- /dev/null
+++ b/css/m3rlin.css
@@ -0,0 +1,4 @@
+#hide {
+  opacity: 0.3;
+  display: none;
+}
diff --git a/css/main.css b/css/main.css
index ee1457a..3327a20 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,153 +1,152 @@
 /* Navbar */
 .navbar {
-    margin: 0;
+  margin: 0;
 }
 
-
 /* Sidebar */
 #sidebar {
-    position: fixed;
-    top: 51px;
-    bottom: 0;
-    left: 0;
-    width: 300px;
-    padding: 10px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: #f5f5f5;
-    border-right: 1px solid #eeeeee;
+  position: fixed;
+  top: 51px;
+  bottom: 0;
+  left: 0;
+  width: 300px;
+  padding: 10px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background-color: #f5f5f5;
+  border-right: 1px solid #eeeeee;
 }
 
 #sidebar .panel-placeholder {
-    margin-bottom: 20px;
-    border-radius: 4px;
-    background-color: #eeeeee;
-    border: 1px dashed #cccccc;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  background-color: #eeeeee;
+  border: 1px dashed #cccccc;
 }
 
 #sidebar .panel-body {
-    padding-bottom: 0;
+  padding-bottom: 0;
 }
 
 #sidebar .info {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 #sidebar .info-label {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #sidebar .info,
 #sidebar .form-group {
-    min-height: 20px;
+  min-height: 20px;
 }
 
 #sidebar small {
-    color: #888888;
-    font-weight: normal;
+  color: #888888;
+  font-weight: normal;
 }
 
 #sidebar label,
 #sidebar .info-label {
-    width: 60%;
-    float: left;
+  width: 60%;
+  float: left;
 }
 
 #sidebar .info-value,
 #sidebar .form-control {
-    width: 40%;
-    float: left;
+  width: 40%;
+  float: left;
 }
 
 /* Main */
 #main {
-    position: fixed;
-    left: 301px;
-    right: 39px;
-    top: 51px;
-    bottom: 0;
+  position: fixed;
+  left: 301px;
+  right: 39px;
+  top: 51px;
+  bottom: 0;
 }
 
 /* Slider */
 #slider {
-    position: fixed;
-    padding: 10px;
-    width: 60px;
-    top: 51px;
-    bottom: 0;
-    right: 0;
-    background-color: #f5f5f5;
-    border-left: 1px solid #eeeeee;
+  position: fixed;
+  padding: 10px;
+  width: 60px;
+  top: 51px;
+  bottom: 0;
+  right: 0;
+  background-color: #f5f5f5;
+  border-left: 1px solid #eeeeee;
 }
 
 #slider .min,
 #slider .max {
-    padding: 0;
-    height: 20px;
-    display: block;
-    text-align: center;
+  padding: 0;
+  height: 20px;
+  display: block;
+  text-align: center;
 }
 
 #slider .max {
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
 #slider .min {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 #slider .slider {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 #slider .slider-handle {
-    border: 1px #cccccc solid;
-    background-color: #ffffff;
-    background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
-    background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
-    background-image: linear-gradient(to bottom,#eeeeee 0%, #cccccc 100%);
-    background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
-    filter: none;
+  border: 1px #cccccc solid;
+  background-color: #ffffff;
+  background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0);
+  filter: none;
 }
 
 #slider .slider-track {
-    border: 1px solid #eeeeee;
+  border: 1px solid #eeeeee;
 }
 
 #slider .slider-track,
 #slider .slider-selection {
-    background-color: #ffffff;
-    background-image: none;
-    filter: none;
+  background-color: #ffffff;
+  background-image: none;
+  filter: none;
 }
 
 /* Alert */
 #alert {
-    position: absolute;
-    top: 61px;
-    left: 311px;
-    right: 71px;
+  position: absolute;
+  top: 61px;
+  left: 311px;
+  right: 71px;
 }
 
 /* Button file */
 .btn-file {
-    position: relative;
-    overflow: hidden;
-}
-
-.btn-file input[type=file] {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 100%;
-    min-height: 100%;
-    font-size: 100px;
-    text-align: right;
-    filter: alpha(opacity=0);
-    opacity: 0;
-    outline: none;
-    background: white;
-    cursor: inherit;
-    display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-file input[type='file'] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  min-width: 100%;
+  min-height: 100%;
+  font-size: 100px;
+  text-align: right;
+  filter: alpha(opacity=0);
+  opacity: 0;
+  outline: none;
+  background: white;
+  cursor: inherit;
+  display: block;
 }
diff --git a/index.html b/index.html
index 82414a7..b5802b5 100644
--- a/index.html
+++ b/index.html
@@ -1,365 +1,699 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <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 (bêta)</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" />
-    </head>
-    <body>
-        <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="#">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">
+  <head>
+    <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">
-                    <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 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>
 
-                <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 -->
+            <hr />
 
-                <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 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>
 
-                <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 -->
+            <hr />
 
-                <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 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 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>
+        <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 -->
 
-                        <hr />
+        <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 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 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 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>
+        <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 -->
 
-                        <hr />
+      <div id="main">
+        <div id="viewer3d" class="box fl">loading...</div>
+      </div>
+      <!-- #main -->
 
-                        <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>
+      <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 -->
 
-                        <hr />
+    <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>
 
-                        <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>
 
-        <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>
+    <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>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 8a98b74..1c2c65d 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -1,5 +1,5 @@
 $(document).ready(function() {
-  alert('hi from m3rlin.js');
+  //   alert('hi from m3rlin.js');
   //   if ($slicerLayerHeight.val() > 100) {
   //     alert('Wait - are you sure??');
   //   }

From bbdc71261860901a3c620a01680adc3b0d2b6be7 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 14:07:26 +0200
Subject: [PATCH 03/14] Update README.md. Add 3 m3rlin-btn files to modal-body.

---
 README.md         |    9 +
 css/m3rlin.css    |   22 +
 images/brijan.gif |  Bin 0 -> 6258 bytes
 index.html        | 1192 +++++++++++++++++++++++----------------------
 js/m3rlin.js      |    1 +
 5 files changed, 653 insertions(+), 571 deletions(-)
 create mode 100644 images/brijan.gif

diff --git a/README.md b/README.md
index 28df2da..8867930 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,16 @@
 # SLAcer.js ([demo](http://lautr3k.github.io/SLAcer.js/))
+
 ![Screenshot](/screenshot.png?raw=true)
 
+This project is a fork of SLAcer.js adapted for the M3rlin project.
+
+Checkout the original SlAcer.js at
+
+Additional resources:
+brijan.gif : http://thepatternlibrary.com/
+
 # Main features
+
 - Browse or drag/drop STL file.
 - Mesh information: size, volume, cost, etc...
 - Mesh transformation: scale, rotate, translate, mirror.
diff --git a/css/m3rlin.css b/css/m3rlin.css
index 8692750..bff8aee 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -2,3 +2,25 @@
   opacity: 0.3;
   display: none;
 }
+.modal-header {
+  color: rgb(105, 105, 105);
+  text-align: center;
+}
+.full_modal-dialog {
+  width: 98% !important;
+  height: 92% !important;
+  min-width: 98% !important;
+  min-height: 92% !important;
+  max-width: 98% !important;
+  max-height: 92% !important;
+  padding: 0 !important;
+}
+
+.full_modal-content {
+  height: 99% !important;
+  min-height: 99% !important;
+  max-height: 99% !important;
+}
+.modal-body {
+  background-image: url('../images/brijan.gif');
+}
diff --git a/images/brijan.gif b/images/brijan.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2e2d86448304086338b6d12fc5a007ccbee823cd
GIT binary patch
diff --git a/index.html b/index.html
index b5802b5..c574b10 100644
--- a/index.html
+++ b/index.html
@@ -29,637 +29,687 @@
     <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">
+    <div id="hide">
+      <nav class="navbar navbar-inverse navbar-fixed-top">
+        <div class="container-fluid">
+          <div class="navbar-header">
             <button
-              class="panel-toggle btn btn-default btn-xs pull-right"
               type="button"
+              class="navbar-toggle collapsed"
               data-toggle="collapse"
-              data-target="#transform-body"
+              data-target="#navbar"
+              aria-expanded="false"
+              aria-controls="navbar"
             >
-              <span class="glyphicon glyphicon-menu-down"></span>
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
             </button>
-            <h3 class="panel-title">Transformations</h3>
+            <a class="navbar-brand" href="#">M3rlin SLAcer.js (bêta)</a>
           </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 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>
-        <!-- #transform -->
-
-        <div id="file" class="panel panel-default">
-          <div class="panel-heading">
+      </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
-              class="panel-toggle btn btn-default btn-xs pull-right"
+              id="abort-button"
+              class="btn btn-danger hidden"
               type="button"
-              data-toggle="collapse"
-              data-target="#file-body"
             >
-              <span class="glyphicon glyphicon-menu-down"></span>
+              <span class="glyphicon glyphicon-off"></span> Abort
             </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"
+              id="zip-button"
+              class="btn btn-info"
               type="button"
-              data-toggle="collapse"
-              data-target="#mesh-body"
+              disabled="disabled"
             >
-              <span class="glyphicon glyphicon-menu-down"></span>
+              <span class="glyphicon glyphicon-compressed"></span> ZIP
             </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
+
+          <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="info-value" id="mesh-size-x">0</span>
+                <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 class="info">
-              <span class="info-label"
-                >Depth
-                <small>(<span class="mesh-size-unit">mm</span>)</small></span
+          </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="info-value" id="mesh-size-y">0</span>
+                <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 class="info">
-              <span class="info-label"
-                >Height
-                <small>(<span class="mesh-size-unit">mm</span>)</small></span
+          </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="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>
+                <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>
-        </div>
-        <!-- #mesh -->
+          <!-- #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
+          <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="info-value">
-                <span id="slicer-layer-value">0</span> /
-                <span id="slicer-layers-value">0</span>
-              </span>
-            </div>
+                <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 />
+              <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">
+                <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>
+              <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 />
+              <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>
+              <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 />
+              <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 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 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 class="form-group">
-              <label for="slicer-speed-delay"
-                >Speed mode<br />delay <small>(ms)</small></label
+          </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"
               >
-              <input
-                type="number"
-                id="slicer-speed-delay"
-                class="form-control input-sm"
-                placeholder="100"
-                min="1"
-              />
+                <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>
-        </div>
-        <!-- #slicer -->
+          <!-- #build-volume -->
 
-        <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 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>
-        </div>
-        <!-- #build-volume -->
+          <!-- #resin -->
 
-        <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
+          <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"
               >
-              <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"
-              />
+                <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>
-        </div>
-        <!-- #resin -->
+          <!-- #screen -->
 
-        <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 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>
-        <!-- #screen -->
+        <!-- #sidebar -->
 
-        <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 id="main">
+          <div id="viewer3d" class="box fl">loading...</div>
         </div>
-        <!-- #colors -->
-      </div>
-      <!-- #sidebar -->
+        <!-- #main -->
 
-      <div id="main">
-        <div id="viewer3d" class="box fl">loading...</div>
+        <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>
-      <!-- #main -->
+      <!-- .body -->
 
-      <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 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>
-      <!-- #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 Clay Printer
+            </h1>
+            <h3>Built with SLAcer.js</h3>
+            <!-- <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button> -->
+          </div>
+          <div class="modal-body">
+            <div class="m3rlin-options">
 
+                <button class="m3rlin-btn">Quick Start</button>
+                <button class="m3rlin-btn">Configure Printer</button>
+                <button class="m3rlin-btn">About M3rlin</button>
 
+            </div>
+          </div>
+          <!-- <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div> -->
+        </div>
+      </div>
+    </div>
+    <!-- MODAL END MODAL END MODAL END -->
 
     <script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
     <script
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 1c2c65d..e56f1b3 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -3,4 +3,5 @@ $(document).ready(function() {
   //   if ($slicerLayerHeight.val() > 100) {
   //     alert('Wait - are you sure??');
   //   }
+  $('#m3rlinModal').modal('toggle');
 });

From b4881f498db925b95aa1dc10ae7eee38f4aa9d50 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 14:53:23 +0200
Subject: [PATCH 04/14] Style m3rlin buttons. Close m3rlin-modal with m3rlin.js
 jquery.

---
 css/m3rlin.css         |  30 +++++++++++++++++++++++++++++-
 images/brijan-pale.gif | Bin 0 -> 5054 bytes
 images/brijan.gif      | Bin 6258 -> 5134 bytes
 index.html             |   8 ++++----
 js/m3rlin.js           |   4 ++++
 5 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 images/brijan-pale.gif

diff --git a/css/m3rlin.css b/css/m3rlin.css
index bff8aee..9115f8a 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -22,5 +22,33 @@
   max-height: 99% !important;
 }
 .modal-body {
-  background-image: url('../images/brijan.gif');
+  background-image: url('../images/brijan-pale.gif');
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.m3rlin-options {
+  display: flex;
+  justify-content: space-around;
+
+  width: 90%;
+  margin: 20px;
+  padding: 50px;
+}
+.m3rlin-btn {
+  background-color: white;
+  border: 5px solid #2a93ad;
+  border-radius: 10px;
+  background-size: contain;
+  font-size: 1.5em;
+  /* margin: 10px; */
+  align-content: center;
+  padding: 5% 7% 5% 7%;
+  transition: 0.5s;
+}
+
+.m3rlin-btn:hover {
+  background: #2a93ad;
+  color: white;
+  border: 5px solid orange;
 }
diff --git a/images/brijan-pale.gif b/images/brijan-pale.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9604b2dc44484675059f087d15197528b179a0d0
GIT binary patch
diff --git a/images/brijan.gif b/images/brijan.gif
index 2e2d86448304086338b6d12fc5a007ccbee823cd..87390e5c9f88ea4a63ddff4aeffa719e5e9fb447 100644
GIT binary patch
diff --git a/index.html b/index.html
index c574b10..e026969 100644
--- a/index.html
+++ b/index.html
@@ -675,9 +675,9 @@ <h3 class="panel-title">Colors</h3>
         <div class="modal-content full_modal-content">
           <div class="modal-header">
             <h1 class="modal-title" id="exampleModalLabel">
-              M3rlin 3D Clay Printer
+              M3rlin 3D
             </h1>
-            <h3>Built with SLAcer.js</h3>
+            <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             <!-- <button
               type="button"
               class="close"
@@ -691,8 +691,8 @@ <h3>Built with SLAcer.js</h3>
             <div class="m3rlin-options">
 
                 <button class="m3rlin-btn">Quick Start</button>
-                <button class="m3rlin-btn">Configure Printer</button>
-                <button class="m3rlin-btn">About M3rlin</button>
+                <button class="m3rlin-btn" id="settings">Settings</button>
+                <button class="m3rlin-btn">About</button>
 
             </div>
           </div>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index e56f1b3..0952bc7 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -4,4 +4,8 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
+
+  $('#settings').click(function() {
+    $('#m3rlinModal').modal('toggle');
+  });
 });

From cc569d9bc695b98c5888f87fa41bc6eadc7e336f Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 14:59:29 +0200
Subject: [PATCH 05/14] m3rlin settings button onclick fade-in SLAcer.

---
 css/m3rlin.css | 3 ++-
 js/m3rlin.js   | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index 9115f8a..978ee2b 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -1,6 +1,7 @@
 #hide {
-  opacity: 0.3;
+  /* opacity: 0.3; */
   display: none;
+  transition: 0.5s;
 }
 .modal-header {
   color: rgb(105, 105, 105);
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 0952bc7..b84d16b 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -7,5 +7,7 @@ $(document).ready(function() {
 
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
+    // $('#hide').css({ display: 'block' });
+    $('#hide').fadeIn('slow');
   });
 });

From 5f7dc48c6cd5bce45fa9ddbd93b2c06fb627b28b Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 16:04:30 +0200
Subject: [PATCH 06/14] Setup quick-start menu.

---
 css/m3rlin.css | 4 ++++
 index.html     | 3 ++-
 js/m3rlin.js   | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index 978ee2b..f4ab328 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -53,3 +53,7 @@
   color: white;
   border: 5px solid orange;
 }
+
+#quick-confirm {
+  display: none;
+}
diff --git a/index.html b/index.html
index e026969..6f552a2 100644
--- a/index.html
+++ b/index.html
@@ -688,9 +688,10 @@ <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             </button> -->
           </div>
           <div class="modal-body">
+              <div id="quick-confirm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, sapiente?</div>
             <div class="m3rlin-options">
 
-                <button class="m3rlin-btn">Quick Start</button>
+                <button class="m3rlin-btn" id="quick">Quick Start</button>
                 <button class="m3rlin-btn" id="settings">Settings</button>
                 <button class="m3rlin-btn">About</button>
 
diff --git a/js/m3rlin.js b/js/m3rlin.js
index b84d16b..17be1ab 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -10,4 +10,9 @@ $(document).ready(function() {
     // $('#hide').css({ display: 'block' });
     $('#hide').fadeIn('slow');
   });
+
+  $('#quick').click(function() {
+    $('#quick-confirm').fadeIn('slow');
+    $('.m3rlin-options').css({ display: 'none' });
+  });
 });

From afc3eb3ff314430bf6580784d8eb5687b80ea5cf Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 17:54:47 +0200
Subject: [PATCH 07/14] Show quick-start options on quick start click.

---
 css/m3rlin.css | 38 ++++++++++++++++++++++--------
 index.html     | 63 ++++++++++++++++++++++++++++++++++++--------------
 js/m3rlin.js   |  3 ++-
 3 files changed, 76 insertions(+), 28 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index f4ab328..d6b3c65 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -25,35 +25,53 @@
 .modal-body {
   background-image: url('../images/brijan-pale.gif');
   display: flex;
+  /* display: none; */
   align-content: center;
   justify-content: center;
 }
-.m3rlin-options {
+.m3rlin-options,
+.m3rlin-main-menu-btns {
+  /* display: none; */
+  background-image: url('../images/brijan-pale.gif');
   display: flex;
   justify-content: space-around;
 
-  width: 90%;
-  margin: 20px;
+  width: 100%;
+  margin: 0px;
   padding: 50px;
 }
 .m3rlin-btn {
   background-color: white;
-  border: 5px solid #2a93ad;
+  border: 5px solid #696969;
   border-radius: 10px;
   background-size: contain;
   font-size: 1.5em;
-  /* margin: 10px; */
+  margin: 10px;
   align-content: center;
-  padding: 5% 7% 5% 7%;
-  transition: 0.5s;
+  padding: 3% 7% 3% 7%;
+  transition: 0.3s;
 }
-
-.m3rlin-btn:hover {
-  background: #2a93ad;
+.modal-footer {
+  display: none;
+  background-image: url('../images/brijan-pale.gif');
+}
+#m3rlin-continue {
+  background: rgb(171, 250, 171);
+  transition: 0.3s;
+}
+.m3rlin-btn:hover,
+#m3rlin-continue:hover {
+  background: #696969;
   color: white;
   border: 5px solid orange;
 }
 
 #quick-confirm {
+  /* display: flex; */
   display: none;
 }
+.m3rlin-quickstart-btns {
+  display: flex;
+  align-content: space-between;
+  justify-content: center;
+}
diff --git a/index.html b/index.html
index 6f552a2..f180e27 100644
--- a/index.html
+++ b/index.html
@@ -677,7 +677,10 @@ <h3 class="panel-title">Colors</h3>
             <h1 class="modal-title" id="exampleModalLabel">
               M3rlin 3D
             </h1>
-            <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
+            <h4>
+              Prototyped with
+              <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a>
+            </h4>
             <!-- <button
               type="button"
               class="close"
@@ -688,25 +691,51 @@ <h4>Built with <a href="https://github.com/lautr3k/SLAcer.js">SLAcer.js</a></h4>
             </button> -->
           </div>
           <div class="modal-body">
-              <div id="quick-confirm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, sapiente?</div>
-            <div class="m3rlin-options">
-
-                <button class="m3rlin-btn" id="quick">Quick Start</button>
-                <button class="m3rlin-btn" id="settings">Settings</button>
-                <button class="m3rlin-btn">About</button>
-
+            <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 print; then press Continue.
+                  </h4>
+                  
+                </div>
             </div>
           </div>
-          <!-- <div class="modal-footer">
-            <button
-              type="button"
-              class="btn btn-secondary"
-              data-dismiss="modal"
-            >
-              Close
+        </div>
+            <div class="m3rlin-options">
+                <div class="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>
+            <div class="modal-footer">
+
+                    <div class="row">
+<div class="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>
+                <!-- <button
+                type="button"
+                class="btn btn-secondary"
+                data-dismiss="modal"
+                >
+                Close
             </button>
-            <button type="button" class="btn btn-primary">Save changes</button>
-          </div> -->
+            <button type="button" class="btn btn-primary">Save changes</button> -->
+        </div>
+    </div>
         </div>
       </div>
     </div>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 17be1ab..73f5b85 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -13,6 +13,7 @@ $(document).ready(function() {
 
   $('#quick').click(function() {
     $('#quick-confirm').fadeIn('slow');
-    $('.m3rlin-options').css({ display: 'none' });
+    $('.modal-footer').fadeIn('slow');
+    $('.m3rlin-main-menu-btns').css({ display: 'none' });
   });
 });

From d19c2e661b5e9f46e3c214a644d4bd554991dab3 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 19:41:02 +0200
Subject: [PATCH 08/14] Bug fix. modals display appromately correctly now.

---
 css/m3rlin.css |  7 +++----
 index.html     | 41 ++++++++++++++++++++++-------------------
 js/m3rlin.js   | 10 +++++++++-
 3 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index d6b3c65..9adf39a 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -24,13 +24,13 @@
 }
 .modal-body {
   background-image: url('../images/brijan-pale.gif');
-  display: flex;
-  /* display: none; */
+  /* display: flex; */
+  display: none;
   align-content: center;
   justify-content: center;
 }
 .m3rlin-options,
-.m3rlin-main-menu-btns {
+m34 {
   /* display: none; */
   background-image: url('../images/brijan-pale.gif');
   display: flex;
@@ -53,7 +53,6 @@
 }
 .modal-footer {
   display: none;
-  background-image: url('../images/brijan-pale.gif');
 }
 #m3rlin-continue {
   background: rgb(171, 250, 171);
diff --git a/index.html b/index.html
index f180e27..8d1ef79 100644
--- a/index.html
+++ b/index.html
@@ -691,32 +691,35 @@ <h4>
             </button> -->
           </div>
           <div class="modal-body">
-            <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 print; then press Continue.
-                  </h4>
-                  
-                </div>
-            </div>
-          </div>
+            
         </div>
             <div class="m3rlin-options">
+            
+                    <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 class="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>
+            </div>
             <div class="modal-footer">
 
                     <div class="row">
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 73f5b85..48c4dff 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -13,7 +13,15 @@ $(document).ready(function() {
 
   $('#quick').click(function() {
     $('#quick-confirm').fadeIn('slow');
-    $('.modal-footer').fadeIn('slow');
+    $('.m3rlin-greeter').css({ display: 'none' });
     $('.m3rlin-main-menu-btns').css({ display: 'none' });
+    $('.m3rlin-quickstart-btns').fadeIn('slow');
+    $('.modal-footer').fadeIn('slow');
+  });
+
+  $('#m3rlin-back').click(function() {
+    $('#quick-confirm').css({ display: 'none' });
+    $('.modal-footer').css({ display: 'none' });
+    $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });

From 64a311c16e14a6abcabf953254f0356e53c4c5c5 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 23:02:29 +0200
Subject: [PATCH 09/14] Include favicon.ico

---
 README.md   |   1 +
 favicon.ico | Bin 0 -> 1150 bytes
 index.html  |   1 +
 3 files changed, 2 insertions(+)
 create mode 100644 favicon.ico

diff --git a/README.md b/README.md
index 8867930..682fdb1 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,7 @@ Checkout the original SlAcer.js at
 
 Additional resources:
 brijan.gif : http://thepatternlibrary.com/
+favicon.ico : https://game-icons.net/1x1/delapouite/porcelain-vase.html
 
 # Main features
 
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..f2b462d7ef97130475c7c8c37f5813b66f74f07c
GIT binary patch
diff --git a/index.html b/index.html
index 8d1ef79..d5a88e3 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!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" />

From d5642d093f255ce096a0797192a92b6e02c700d0 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 23:11:08 +0200
Subject: [PATCH 10/14] Improve modal layout.

---
 css/m3rlin.css |  4 ++--
 index.html     | 29 +++++++++++++++--------------
 js/m3rlin.js   |  3 ++-
 3 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index 9adf39a..ac7dac4 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -52,7 +52,7 @@ m34 {
   transition: 0.3s;
 }
 .modal-footer {
-  display: none;
+  /* display: flex; */
 }
 #m3rlin-continue {
   background: rgb(171, 250, 171);
@@ -70,7 +70,7 @@ m34 {
   display: none;
 }
 .m3rlin-quickstart-btns {
-  display: flex;
+  display: none;
   align-content: space-between;
   justify-content: center;
 }
diff --git a/index.html b/index.html
index d5a88e3..1446161 100644
--- a/index.html
+++ b/index.html
@@ -697,13 +697,13 @@ <h4>
             <div class="m3rlin-options">
             
                     <div id="quick-confirm">
-                            <div class="col">
-                              <div class="row">
+                        <div class="col">
+                            <div class="row">
                                 <h2 class="centered">
                                   Quick Start
                                 </h2>
-                              </div>
-                              <div class="row">
+                            </div>
+                            <div class="row">
                                 <h4 class="padded centered">
                                   To print test image using default settings:
                                 </h4>
@@ -715,19 +715,20 @@ <h4 class="centered">
                               </div>
                           </div>
                         </div>
-                <div class="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>
             <div class="modal-footer">
 
                     <div class="row">
-<div class="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 class="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="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>
                 <!-- <button
@@ -738,7 +739,7 @@ <h4 class="centered">
                 Close
             </button>
             <button type="button" class="btn btn-primary">Save changes</button> -->
-        </div>
+            </div>
     </div>
         </div>
       </div>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 48c4dff..4aacdc4 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -21,7 +21,8 @@ $(document).ready(function() {
 
   $('#m3rlin-back').click(function() {
     $('#quick-confirm').css({ display: 'none' });
-    $('.modal-footer').css({ display: 'none' });
+    $('.m3rlin-quickstart-btns').css({ display: 'none' });
+
     $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });

From cbbfe84e6064e1b560124c1eb7ef3b18928635c9 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 23:36:18 +0200
Subject: [PATCH 11/14] Style buttons.

---
 css/m3rlin.css | 24 ++++++++++++++++++------
 index.html     | 27 ++++++++++++++++++++++++---
 js/m3rlin.js   |  6 ++++--
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index ac7dac4..caed729 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -1,3 +1,9 @@
+.centerer {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
 #hide {
   /* opacity: 0.3; */
   display: none;
@@ -54,23 +60,29 @@ m34 {
 .modal-footer {
   /* display: flex; */
 }
-#m3rlin-continue {
+#m3rlin-continue,
+#quick {
   background: rgb(171, 250, 171);
   transition: 0.3s;
 }
-.m3rlin-btn:hover,
-#m3rlin-continue:hover {
+.m3rlin-btn:hover {
   background: #696969;
   color: white;
   border: 5px solid orange;
 }
+#m3rlin-continue:hover,
+#quick:hover {
+  background: #696969;
+
+  color: rgb(171, 250, 171);
+}
 
 #quick-confirm {
   /* display: flex; */
   display: none;
 }
 .m3rlin-quickstart-btns {
-  display: none;
-  align-content: space-between;
-  justify-content: center;
+  /* display: none; */
+  /* align-content: space-between;
+  justify-content: center; */
 }
diff --git a/index.html b/index.html
index 1446161..7dd11ee 100644
--- a/index.html
+++ b/index.html
@@ -696,6 +696,27 @@ <h4>
         </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">
@@ -714,18 +735,18 @@ <h4 class="centered">
                                 
                               </div>
                           </div>
-                        </div>
+                    </div>
               
             </div>
             <div class="modal-footer">
 
                     <div class="row">
-                            <div class="m3rlin-main-menu-btns">
+                            <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="m3rlin-quickstart-btns">
+                            <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>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index 4aacdc4..717df43 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -4,7 +4,7 @@ $(document).ready(function() {
   //     alert('Wait - are you sure??');
   //   }
   $('#m3rlinModal').modal('toggle');
-
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
     // $('#hide').css({ display: 'block' });
@@ -17,12 +17,14 @@ $(document).ready(function() {
     $('.m3rlin-main-menu-btns').css({ display: 'none' });
     $('.m3rlin-quickstart-btns').fadeIn('slow');
     $('.modal-footer').fadeIn('slow');
+    $('#greeter').css({ display: 'none' });
   });
 
   $('#m3rlin-back').click(function() {
     $('#quick-confirm').css({ display: 'none' });
-    $('.m3rlin-quickstart-btns').css({ display: 'none' });
 
+    $('#greeter').fadeIn('slow');
+    $('.m3rlin-quickstart-btns').css({ display: 'none' });
     $('.m3rlin-main-menu-btns').fadeIn('slow');
   });
 });

From e616f33a863e3c5b843793e4f03bef9469915059 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Sun, 7 Apr 2019 23:49:57 +0200
Subject: [PATCH 12/14] Add print placeholder for quickstart > continue

---
 js/m3rlin.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/js/m3rlin.js b/js/m3rlin.js
index 717df43..a67cc37 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -1,3 +1,11 @@
+backToMain = () => {
+  $('#quick-confirm').css({ display: 'none' });
+
+  $('#greeter').fadeIn('slow');
+  $('.m3rlin-quickstart-btns').css({ display: 'none' });
+  $('.m3rlin-main-menu-btns').fadeIn('slow');
+};
+
 $(document).ready(function() {
   //   alert('hi from m3rlin.js');
   //   if ($slicerLayerHeight.val() > 100) {
@@ -21,10 +29,14 @@ $(document).ready(function() {
   });
 
   $('#m3rlin-back').click(function() {
-    $('#quick-confirm').css({ display: 'none' });
+    backToMain();
+  });
 
-    $('#greeter').fadeIn('slow');
-    $('.m3rlin-quickstart-btns').css({ display: 'none' });
-    $('.m3rlin-main-menu-btns').fadeIn('slow');
+  $('#m3rlin-continue').on('click', function() {
+    window.print();
+    alert('aaaannnndd... Print!');
+    setTimeout(function() {
+      backToMain();
+    }, 500);
   });
 });

From 4a59cd5582ea96c5bfe766217630ce2617768950 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Mon, 8 Apr 2019 10:30:26 +0200
Subject: [PATCH 13/14] Alert user if Layers height > 100

---
 css/m3rlin.css |   10 +-
 index.html     |    8 -
 js/m3rlin.js   |    2 +-
 js/main.js     | 1453 +++++++++++++++++++++++++-----------------------
 4 files changed, 756 insertions(+), 717 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index caed729..564cafc 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -4,11 +4,11 @@
   justify-content: space-around;
 }
 
-#hide {
-  /* opacity: 0.3; */
+/* #hide {
+ 
   display: none;
   transition: 0.5s;
-}
+} */
 .modal-header {
   color: rgb(105, 105, 105);
   text-align: center;
@@ -86,3 +86,7 @@ m34 {
   /* align-content: space-between;
   justify-content: center; */
 }
+.caution {
+  border: 4px solid orange;
+  background-color: orange;
+}
diff --git a/index.html b/index.html
index 7dd11ee..b8ebe54 100644
--- a/index.html
+++ b/index.html
@@ -752,14 +752,6 @@ <h4 class="centered">
                                 <button class="m3rlin-btn">Help</button>
                           </div>
                         </div>
-                <!-- <button
-                type="button"
-                class="btn btn-secondary"
-                data-dismiss="modal"
-                >
-                Close
-            </button>
-            <button type="button" class="btn btn-primary">Save changes</button> -->
             </div>
     </div>
         </div>
diff --git a/js/m3rlin.js b/js/m3rlin.js
index a67cc37..c6aa567 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -11,7 +11,7 @@ $(document).ready(function() {
   //   if ($slicerLayerHeight.val() > 100) {
   //     alert('Wait - are you sure??');
   //   }
-  $('#m3rlinModal').modal('toggle');
+  //   $('#m3rlinModal').modal('toggle');
   $('.m3rlin-quickstart-btns').css({ display: 'none' });
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
diff --git a/js/main.js b/js/main.js
index 416f74f..8c7f7ba 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,92 +3,92 @@
 // -----------------------------------------------------------------------------
 //window.localStorage.clear();
 var settings = new SLAcer.Settings({
-    file: {
-        panel: {
-            collapsed: false,
-            position : 0
-        }
-    },
-    slicer: {
-        layers: {
-            height: 100 // μm
-        },
-        light: {
-            on : 1000,
-            off: 500
-        },
-        zip: true,
-        svg: false,
-        png: true,
-        speed: false,
-        speedDelay: 10, // ms
-        panel: {
-            collapsed: false,
-            position : 1
-        },
-        lifting: {
-            speed : 50, // mm/min
-            height: 3,  // mm
-        }
-    },
-    mesh: {
-        panel: {
-            collapsed: false,
-            position : 2
-        }
-    },
-    transform: {
-        panel: {
-            collapsed: false,
-            position : 3
-        },
-        mirror: false
-    },
-    buildVolume: {
-        size     : { x: 100,  y: 100,  z: 100 }, // mm
-        unit     : 'mm',                         // mm or in
-        color    : 0xcccccc,
-        opacity  : 0.1,
-        panel    : {
-            collapsed: false,
-            position : 4
-        }
+  file: {
+    panel: {
+      collapsed: false,
+      position: 0
+    }
+  },
+  slicer: {
+    layers: {
+      height: 100 // μm
     },
-    resin: {
-        density  : 1.1, // g/cm3
-        price    : 50,   // $
-        panel    : {
-            collapsed: false,
-            position : 5
-        }
+    light: {
+      on: 1000,
+      off: 500
     },
-    screen: {
-        width    : window.screen.width,
-        height   : window.screen.height,
-        diagonal : { size: 22, unit: 'in' },
-        panel    : {
-            collapsed: false,
-            position : 6
-        }
+    zip: true,
+    svg: false,
+    png: true,
+    speed: false,
+    speedDelay: 10, // ms
+    panel: {
+      collapsed: false,
+      position: 1
     },
-    colors: {
-        mesh : '#eb0984',
-        slice: '#88ee11',
-        panel: {
-            collapsed: false,
-            position : 7
-        }
+    lifting: {
+      speed: 50, // mm/min
+      height: 3 // mm
+    }
+  },
+  mesh: {
+    panel: {
+      collapsed: false,
+      position: 2
+    }
+  },
+  transform: {
+    panel: {
+      collapsed: false,
+      position: 3
     },
-    viewer3d: {
-        color: 0xffffff
+    mirror: false
+  },
+  buildVolume: {
+    size: { x: 100, y: 100, z: 100 }, // mm
+    unit: 'mm', // mm or in
+    color: 0xcccccc,
+    opacity: 0.1,
+    panel: {
+      collapsed: false,
+      position: 4
+    }
+  },
+  resin: {
+    density: 1.1, // g/cm3
+    price: 50, // $
+    panel: {
+      collapsed: false,
+      position: 5
+    }
+  },
+  screen: {
+    width: window.screen.width,
+    height: window.screen.height,
+    diagonal: { size: 22, unit: 'in' },
+    panel: {
+      collapsed: false,
+      position: 6
     }
+  },
+  colors: {
+    mesh: '#eb0984',
+    slice: '#88ee11',
+    panel: {
+      collapsed: false,
+      position: 7
+    }
+  },
+  viewer3d: {
+    color: 0xffffff
+  }
 });
 
 // -----------------------------------------------------------------------------
 // Error handler
 // -----------------------------------------------------------------------------
 function errorHandler(error) {
-    console.error(error);
+  console.error(error);
 }
 
 // -----------------------------------------------------------------------------
@@ -98,178 +98,184 @@ var slicer = new SLAcer.Slicer();
 var shapes, slices;
 
 function removeShapes() {
-    if (shapes && shapes.length) {
-        for (var i = 0, il = shapes.length; i < il; i++) {
-            viewer3d.removeObject(shapes[i]);
-        }
+  if (shapes && shapes.length) {
+    for (var i = 0, il = shapes.length; i < il; i++) {
+      viewer3d.removeObject(shapes[i]);
     }
+  }
 }
 
 function removeSlices() {
-    if (slices && slices.length) {
-        for (var i = 0, il = slices.length; i < il; i++) {
-            viewer2d.removeObject(slices[i]);
-        }
+  if (slices && slices.length) {
+    for (var i = 0, il = slices.length; i < il; i++) {
+      viewer2d.removeObject(slices[i]);
     }
+  }
 
-    sliceImage('none');
+  sliceImage('none');
 }
 
 function hexToDec(hex) {
-    return parseInt(hex.toString().replace('#', ''), 16);
+  return parseInt(hex.toString().replace('#', ''), 16);
 }
 
 function sliceImage(dataURL) {
-    settings.set('slice.dataURL', dataURL || 'none');
+  settings.set('slice.dataURL', dataURL || 'none');
 }
 
 function getSlice(layerNumber) {
-    // remove old shapes
-    removeSlices();
-    removeShapes();
-
-    // ...
-    $slicerLayerValue.html(layerNumber);
-
-    if (layerNumber < 1) {
-        viewer2d.render();
-        viewer3d.render();
-        return;
-    }
-
-    if (transformations.update) {
-        throw 'transformations not applyed...';
-    }
-
-    // get position
-    layerHeight = settings.get('slicer.layers.height') / 1000;
-    zPosition   = layerNumber * layerHeight;
+  // remove old shapes
+  removeSlices();
+  removeShapes();
 
-    // get faces
-    var faces = slicer.getFaces(zPosition);
+  // ...
+  $slicerLayerValue.html(layerNumber);
 
-    //console.log('layer number:', layerNumber);
-    //console.log('z position  :', zPosition);
-
-    // get new shapes list
-    shapes = faces.meshes;
-    zPosition -= viewer3d.buildVolume.size.z / 2;
-
-    // slices
-    slices = [];
-    var slice, shape;
-    var sliceColor = hexToDec(settings.get('colors.slice'));
-
-    // add new shapes
-    for (var i = 0, il = shapes.length; i < il; i++) {
-        shape = shapes[i];
-        slice = shape.clone();
-
-        slice.material = slice.material.clone();
-        slice.material.color.setHex(0xffffff);
-        viewer2d.addObject(slice);
-        slices.push(slice);
-
-        shape.material.color.setHex(sliceColor);
-        shape.material.depthTest = false;
-        shape.position.z = zPosition;
-        viewer3d.scene.add(shape);
-    }
-
-    // render 3D view
+  if (layerNumber < 1) {
+    viewer2d.render();
     viewer3d.render();
+    return;
+  }
+
+  if (transformations.update) {
+    throw 'transformations not applyed...';
+  }
+
+  // get position
+  layerHeight = settings.get('slicer.layers.height') / 1000;
+  zPosition = layerNumber * layerHeight;
+
+  // get faces
+  var faces = slicer.getFaces(zPosition);
+
+  //console.log('layer number:', layerNumber);
+  //console.log('z position  :', zPosition);
+
+  // get new shapes list
+  shapes = faces.meshes;
+  zPosition -= viewer3d.buildVolume.size.z / 2;
+
+  // slices
+  slices = [];
+  var slice, shape;
+  var sliceColor = hexToDec(settings.get('colors.slice'));
+
+  // add new shapes
+  for (var i = 0, il = shapes.length; i < il; i++) {
+    shape = shapes[i];
+    slice = shape.clone();
+
+    slice.material = slice.material.clone();
+    slice.material.color.setHex(0xffffff);
+    viewer2d.addObject(slice);
+    slices.push(slice);
+
+    shape.material.color.setHex(sliceColor);
+    shape.material.depthTest = false;
+    shape.position.z = zPosition;
+    viewer3d.scene.add(shape);
+  }
+
+  // render 3D view
+  viewer3d.render();
+
+  // render 2D view
+  viewer2d.screenshot(function(dataURL) {
+    sliceImage(dataURL);
+
+    if (PNGExport) {
+      var fileName = layerNumber + '.png';
+      var imgData = dataURL.substr(dataURL.indexOf(',') + 1);
+      zipFolder.file(fileName, imgData, { base64: true });
+    }
+  });
 
-    // render 2D view
-    viewer2d.screenshot(function(dataURL) {
-        sliceImage(dataURL);
-
-        if (PNGExport) {
-            var fileName = layerNumber + '.png';
-            var imgData  = dataURL.substr(dataURL.indexOf(',') + 1);
-            zipFolder.file(fileName, imgData, { base64: true });
-        }
-    });
-
-    // SVG export
-    if (SVGExport) {
-        // offset for positive coords
-        var xOffset = Math.abs(slicer.mesh.geometry.boundingBox.min.x);
-        var yOffset = Math.abs(slicer.mesh.geometry.boundingBox.min.y);
-
-        function SVGPath(actions, dir) {
-            var path = [];
-            var area = 0;
-            var a, b, c, x, y;
-
-            if (dir != 'ccw') {
-                dir = 'cw';
-            }
-
-            actions.push({ action: 'lineTo', args: actions[0].args });
-
-            for (var i = 0, il = actions.length; i < il; i++) {
-                a = actions[i];
+  // SVG export
+  if (SVGExport) {
+    // offset for positive coords
+    var xOffset = Math.abs(slicer.mesh.geometry.boundingBox.min.x);
+    var yOffset = Math.abs(slicer.mesh.geometry.boundingBox.min.y);
 
-                if (i > 0) {
-                    b = actions[i - 1];
-                    area += a.args[0] * b.args[1];
-                    area -= b.args[0] * a.args[1];
-                }
+    function SVGPath(actions, dir) {
+      var path = [];
+      var area = 0;
+      var a, b, c, x, y;
 
-                c = a.action == 'moveTo' ? 'M' : 'L';
-                x = (a.args[0] + xOffset);
-                y = (a.args[1] + yOffset);
+      if (dir != 'ccw') {
+        dir = 'cw';
+      }
 
-                path.push(c + x + ' ' + y);
-            }
+      actions.push({ action: 'lineTo', args: actions[0].args });
 
-            if (dir == 'cw' && area < 0 || dir == 'ccw' && area > 0) {
-                path = path.reverse();
-                path[0] = path[0].replace(/^L/, 'M');
-                path[actions.length - 1] = path[actions.length - 1].replace(/^M/, 'L');
-            }
+      for (var i = 0, il = actions.length; i < il; i++) {
+        a = actions[i];
 
-            return path.join(' ') + ' Z ';
+        if (i > 0) {
+          b = actions[i - 1];
+          area += a.args[0] * b.args[1];
+          area -= b.args[0] * a.args[1];
         }
 
-        // svg start
-        var size = slicer.mesh.getSize();
-        var svg = '<svg version="1.1" width="' + size.x + '" height="' + size.y + '" baseProfile="full" xmlns="http://www.w3.org/2000/svg">\n';
-
-        // svg background
-        svg += '<rect x="0" y="0" width="100%" height="100%" style="fill:black; stroke:none"/>\n';
+        c = a.action == 'moveTo' ? 'M' : 'L';
+        x = a.args[0] + xOffset;
+        y = a.args[1] + yOffset;
 
-        // fix coordinate system (rotate 180°)
-        svg += '<g transform="translate(0, ' + size.y + ') scale(1, -1)">\n';
+        path.push(c + x + ' ' + y);
+      }
 
-        // draw main paths
-        var actions;
-        for (var i = 0, il = faces.shapes.length; i < il; i++) {
-            actions = faces.shapes[i].actions;
+      if ((dir == 'cw' && area < 0) || (dir == 'ccw' && area > 0)) {
+        path = path.reverse();
+        path[0] = path[0].replace(/^L/, 'M');
+        path[actions.length - 1] = path[actions.length - 1].replace(/^M/, 'L');
+      }
 
-            // path start
-            svg += '<path d="';
-
-            // main paths
-            svg += SVGPath(actions, 'cw');
-
-            // holes paths
-            var holes = faces.shapes[i].holes;
-            for (var j = 0, jl = holes.length; j < jl; j++) {
-                svg += SVGPath(holes[j].actions, 'ccw');
-            }
+      return path.join(' ') + ' Z ';
+    }
 
-            // path end
-            svg += '" style="fill:white; stroke:none" />\n';
-        }
+    // svg start
+    var size = slicer.mesh.getSize();
+    var svg =
+      '<svg version="1.1" width="' +
+      size.x +
+      '" height="' +
+      size.y +
+      '" baseProfile="full" xmlns="http://www.w3.org/2000/svg">\n';
+
+    // svg background
+    svg +=
+      '<rect x="0" y="0" width="100%" height="100%" style="fill:black; stroke:none"/>\n';
+
+    // fix coordinate system (rotate 180°)
+    svg += '<g transform="translate(0, ' + size.y + ') scale(1, -1)">\n';
+
+    // draw main paths
+    var actions;
+    for (var i = 0, il = faces.shapes.length; i < il; i++) {
+      actions = faces.shapes[i].actions;
+
+      // path start
+      svg += '<path d="';
+
+      // main paths
+      svg += SVGPath(actions, 'cw');
+
+      // holes paths
+      var holes = faces.shapes[i].holes;
+      for (var j = 0, jl = holes.length; j < jl; j++) {
+        svg += SVGPath(holes[j].actions, 'ccw');
+      }
+
+      // path end
+      svg += '" style="fill:white; stroke:none" />\n';
+    }
 
-        // svg end
-        svg += '</g>';
-        svg += '</svg>';
+    // svg end
+    svg += '</g>';
+    svg += '</svg>';
 
-        // add svg file to zip
-        zipFolder.file(layerNumber + '.svg', svg);
-    }
+    // add svg file to zip
+    zipFolder.file(layerNumber + '.svg', svg);
+  }
 }
 
 // -----------------------------------------------------------------------------
@@ -280,10 +286,10 @@ var $main = $('#main');
 
 // Viewer 3D
 var $viewer3d = $('#viewer3d');
-var viewer3d  = new SLAcer.Viewer3D({
-    color      : settings.get('viewer3d.color'),
-    buildVolume: settings.get('buildVolume'),
-    target     : $viewer3d[0]
+var viewer3d = new SLAcer.Viewer3D({
+  color: settings.get('viewer3d.color'),
+  buildVolume: settings.get('buildVolume'),
+  target: $viewer3d[0]
 });
 
 // Triangulation algorithm
@@ -293,77 +299,83 @@ THREE.Triangulation.setLibrary('earcut');
 //THREE.Triangulation.setLibrary('poly2tri');
 
 // Viewer 2D
-var viewer2dWin   = null;
+var viewer2dWin = null;
 var $openViewer2D = $('#open-viewer-2d');
 
 var viewer2d = new SLAcer.Viewer2D({
-    target     : null, // off-screen
-    color      : 0x000000,
-    buildPlate : {
-        size   : settings.get('buildVolume.size'),
-        unit   : settings.get('buildVolume.unit'),
-        color  : 0x000000,
-        opacity: 0 // hide build plate
-    },
-    size: settings.get('screen')
+  target: null, // off-screen
+  color: 0x000000,
+  buildPlate: {
+    size: settings.get('buildVolume.size'),
+    unit: settings.get('buildVolume.unit'),
+    color: 0x000000,
+    opacity: 0 // hide build plate
+  },
+  size: settings.get('screen')
 });
 
 $openViewer2D.click(function(e) {
-    if (viewer2dWin == null || viewer2dWin.closed) {
-        var screen  = settings.get('screen');
-        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'
-
-        viewer2dWin = window.open('viewer2d.html', 'SLAcerViewer2D', size + ', ' + opts);
-
-        $(viewer2dWin).on('beforeunload', function(e) {
-            viewer2dWin = null;
-        })
-        .load(function(e) {
-            getSlice($sliderInput.slider('getValue'));
-        });
-    }
-    else {
-        viewer2dWin.focus();
-    }
-
-    return false;
+  if (viewer2dWin == null || viewer2dWin.closed) {
+    var screen = settings.get('screen');
+    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';
+
+    viewer2dWin = window.open(
+      'viewer2d.html',
+      'SLAcerViewer2D',
+      size + ', ' + opts
+    );
+
+    $(viewer2dWin)
+      .on('beforeunload', function(e) {
+        viewer2dWin = null;
+      })
+      .load(function(e) {
+        getSlice($sliderInput.slider('getValue'));
+      });
+  } else {
+    viewer2dWin.focus();
+  }
+
+  return false;
 });
 
 // Slider
 var $sliderInput = $('#slider input');
 
-$sliderInput.slider({ reversed : true }).on('change', function(e) {
-    getSlice(e.value.newValue);
+$sliderInput.slider({ reversed: true }).on('change', function(e) {
+  getSlice(e.value.newValue);
 });
 
-var $sliderElement  = $('#slider .slider');
+var $sliderElement = $('#slider .slider');
 var $sliderMaxValue = $('#slider .max');
 
 function updateSliderUI() {
-    var layersHeight = settings.get('slicer.layers.height') / 1000;
-    var layersNumber = Math.floor(slicer.mesh.getSize().z / layersHeight);
+  var layersHeight = settings.get('slicer.layers.height') / 1000;
+  var layersNumber = Math.floor(slicer.mesh.getSize().z / layersHeight);
 
-    $sliderInput.slider('setAttribute', 'max', layersNumber);
-    $sliderMaxValue.html(layersNumber);
-    $slicerLayersValue.html(layersNumber);
+  $sliderInput.slider('setAttribute', 'max', layersNumber);
+  $sliderMaxValue.html(layersNumber);
+  $slicerLayersValue.html(layersNumber);
 }
 
 // Sidebar
 var $sidebar = $('#sidebar');
-var $panels  = $sidebar.find('.panel');
+var $panels = $sidebar.find('.panel');
 
 $sidebar.sortable({
-    axis       : 'y',
-    handle     : '.panel-heading',
-    cancel     : '.panel-toggle',
-    placeholder: 'panel-placeholder', forcePlaceholderSize: true,
-    // update panel position
-    stop: function(e, ui) {
-        $sidebar.find('.panel').each(function(i, element) {
-            settings.set(_.camelCase(element.id) + '.panel.position', i);
-        });
-    }
+  axis: 'y',
+  handle: '.panel-heading',
+  cancel: '.panel-toggle',
+  placeholder: 'panel-placeholder',
+  forcePlaceholderSize: true,
+  // update panel position
+  stop: function(e, ui) {
+    $sidebar.find('.panel').each(function(i, element) {
+      settings.set(_.camelCase(element.id) + '.panel.position', i);
+    });
+  }
 });
 
 // Sort panels
@@ -371,145 +383,149 @@ var panels = [];
 var panel;
 
 _.forEach(settings.settings, function(item, namespace) {
-    if (item && item.panel) {
-        panels[item.panel.position] = $('#' + _.kebabCase(namespace));
-    }
+  if (item && item.panel) {
+    panels[item.panel.position] = $('#' + _.kebabCase(namespace));
+  }
 });
 
 for (var i in panels) {
-    $sidebar.append(panels[i]);
+  $sidebar.append(panels[i]);
 }
 
 // Init panel
 function initPanel(name) {
-    var id    = _.kebabCase(name);
-    var name  = _.camelCase(name);
-    var $body = $('#' + id + '-body');
+  var id = _.kebabCase(name);
+  var name = _.camelCase(name);
+  var $body = $('#' + id + '-body');
 
-    $body.on('hidden.bs.collapse', function () {
-        settings.set(name + '.panel.collapsed', true);
-    });
+  $body.on('hidden.bs.collapse', function() {
+    settings.set(name + '.panel.collapsed', true);
+  });
 
-    $body.on('shown.bs.collapse', function () {
-        settings.set(name + '.panel.collapsed', false);
-    });
+  $body.on('shown.bs.collapse', function() {
+    settings.set(name + '.panel.collapsed', false);
+  });
 
-    if (settings.get(name + '.panel.collapsed')) {
-        $body.collapse('hide');
-    }
+  if (settings.get(name + '.panel.collapsed')) {
+    $body.collapse('hide');
+  }
 
-    return $body;
+  return $body;
 }
 
 // Unit converter
 function parseUnit(value, unit) {
-    return parseFloat(unit == 'in' ? (value / 25.4) : (value * 25.4));
+  return parseFloat(unit == 'in' ? value / 25.4 : value * 25.4);
 }
 
 // File panel
-var $fileBody  = initPanel('file');
+var $fileBody = initPanel('file');
 var $fileInput = $fileBody.find('#file-input');
 var loadedFile = null;
 
 $fileInput.on('change', function(e) {
-    resetTransformValues();
-    loadedFile = e.target.files[0];
-    loader.loadFile(loadedFile);
+  resetTransformValues();
+  loadedFile = e.target.files[0];
+  loader.loadFile(loadedFile);
 });
 
 // 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 $meshCost     = $meshBody.find('#mesh-cost');
-var $meshSizeX    = $meshBody.find('#mesh-size-x');
-var $meshSizeY    = $meshBody.find('#mesh-size-y');
-var $meshSizeZ    = $meshBody.find('#mesh-size-z');
+var $meshBody = initPanel('mesh');
+var $meshFaces = $meshBody.find('#mesh-faces');
+var $meshVolume = $meshBody.find('#mesh-volume');
+var $meshWeight = $meshBody.find('#mesh-weight');
+var $meshCost = $meshBody.find('#mesh-cost');
+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() {
-    var mesh = slicer.mesh;
-    var size = mesh.getSize();
-    var unit = settings.get('buildVolume.unit');
+  var mesh = slicer.mesh;
+  var size = mesh.getSize();
+  var unit = settings.get('buildVolume.unit');
 
-    updateSliderUI();
+  updateSliderUI();
 
-    $meshSizeUnit.html(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');
-    }
+  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));
+  $meshSizeX.html(size.x.toFixed(2));
+  $meshSizeY.html(size.y.toFixed(2));
+  $meshSizeZ.html(size.z.toFixed(2));
 
-    var volume = parseInt(mesh.getVolume() / 1000);                   // cm3/ml
-    var weight = (volume * settings.get('resin.density')).toFixed(2); // g
-    var cost   = volume * settings.get('resin.price') / 1000;
+  var volume = parseInt(mesh.getVolume() / 1000); // cm3/ml
+  var weight = (volume * settings.get('resin.density')).toFixed(2); // g
+  var cost = (volume * settings.get('resin.price')) / 1000;
 
-    $meshFaces.html(mesh.geometry.faces.length);
-    $meshVolume.html(volume);
-    $meshWeight.html(weight);
-    $meshCost.html(cost);
+  $meshFaces.html(mesh.geometry.faces.length);
+  $meshVolume.html(volume);
+  $meshWeight.html(weight);
+  $meshCost.html(cost);
 }
 
 // Slicer panel
-var $slicerBody        = initPanel('slicer');
+var $slicerBody = initPanel('slicer');
 var $slicerLayerHeight = $slicerBody.find('#slicer-layers-height');
 var $slicerLayersValue = $slicerBody.find('#slicer-layers-value');
-var $slicerLayerValue  = $slicerBody.find('#slicer-layer-value');
-var $slicerLightOff    = $slicerBody.find('#slicer-light-off');
-var $slicerLightOn     = $slicerBody.find('#slicer-light-on');
+var $slicerLayerValue = $slicerBody.find('#slicer-layer-value');
+var $slicerLightOff = $slicerBody.find('#slicer-light-off');
+var $slicerLightOn = $slicerBody.find('#slicer-light-on');
 
-var $slicerLiftingSpeed  = $slicerBody.find('#slicer-lifting-speed');
+var $slicerLiftingSpeed = $slicerBody.find('#slicer-lifting-speed');
 var $slicerLiftingHeight = $slicerBody.find('#slicer-lifting-height');
 
 var $slicerExportPNG = $slicerBody.find('#slicer-image-extension-png');
 var $slicerExportSVG = $slicerBody.find('#slicer-image-extension-svg');
 
-var $slicerSpeedYes    = $slicerBody.find('#slicer-speed-yes');
-var $slicerSpeedNo     = $slicerBody.find('#slicer-speed-no');
-var $slicerSpeedDelay  = $slicerBody.find('#slicer-speed-delay');
-var $slicerMakeZipYes  = $slicerBody.find('#slicer-make-zip-yes');
-var $slicerMakeZipNo   = $slicerBody.find('#slicer-make-zip-no');
-var $sliceButton       = $sidebar.find('#slice-button');
-var $abortButton       = $sidebar.find('#abort-button');
-var $zipButton         = $sidebar.find('#zip-button');
+var $slicerSpeedYes = $slicerBody.find('#slicer-speed-yes');
+var $slicerSpeedNo = $slicerBody.find('#slicer-speed-no');
+var $slicerSpeedDelay = $slicerBody.find('#slicer-speed-delay');
+var $slicerMakeZipYes = $slicerBody.find('#slicer-make-zip-yes');
+var $slicerMakeZipNo = $slicerBody.find('#slicer-make-zip-no');
+var $sliceButton = $sidebar.find('#slice-button');
+var $abortButton = $sidebar.find('#abort-button');
+var $zipButton = $sidebar.find('#zip-button');
 
 function updateSlicerUI() {
-    var slicer = settings.get('slicer');
+  var slicer = settings.get('slicer');
 
-    $slicerSpeedDelay.val(slicer.speedDelay);
-    $slicerLayerHeight.val(slicer.layers.height);
-    $slicerLightOff.val(slicer.light.off);
-    $slicerLightOn.val(slicer.light.on);
+  $slicerSpeedDelay.val(slicer.speedDelay);
+  $slicerLayerHeight.val(slicer.layers.height);
+  $slicerLightOff.val(slicer.light.off);
+  $slicerLightOn.val(slicer.light.on);
 
-    $slicerLiftingSpeed.val(slicer.lifting.speed);
-    $slicerLiftingHeight.val(slicer.lifting.height);
+  $slicerLiftingSpeed.val(slicer.lifting.speed);
+  $slicerLiftingHeight.val(slicer.lifting.height);
 }
 
 function updateSlicerSettings() {
-    settings.set('slicer.layers.height', $slicerLayerHeight.val());
-    settings.set('slicer.light.off', $slicerLightOff.val());
-    settings.set('slicer.light.on', $slicerLightOn.val());
+  settings.set('slicer.layers.height', $slicerLayerHeight.val());
+  if ($slicerLayerHeight.val() > 100) {
+    $('#slicer-layers-height').addClass('caution');
+    alert('Wait - are you sure??');
+  }
+  settings.set('slicer.light.off', $slicerLightOff.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.lifting.speed', $slicerLiftingSpeed.val());
+  settings.set('slicer.lifting.height', $slicerLiftingHeight.val());
 
-    settings.set('slicer.png', $slicerExportPNG[0].checked);
-    settings.set('slicer.svg', $slicerExportSVG[0].checked);
+  settings.set('slicer.png', $slicerExportPNG[0].checked);
+  settings.set('slicer.svg', $slicerExportSVG[0].checked);
 
-    settings.set('slicer.zip', $slicerMakeZipYes[0].checked);
-    settings.set('slicer.speed', $slicerSpeedYes[0].checked);
-    settings.set('slicer.speedDelay', $slicerSpeedDelay.val());
+  settings.set('slicer.zip', $slicerMakeZipYes[0].checked);
+  settings.set('slicer.speed', $slicerSpeedYes[0].checked);
+  settings.set('slicer.speedDelay', $slicerSpeedDelay.val());
 
-    getSlice($sliderInput.slider('getValue'));
+  getSlice($sliderInput.slider('getValue'));
 
-    updateSliderUI();
+  updateSliderUI();
 }
 
 var sliceInterval;
@@ -532,247 +548,272 @@ var liftingTime;
 var estimatedTime;
 
 function slice() {
-    currentSliceNumber++;
+  currentSliceNumber++;
 
-    if (currentSliceNumber > slicesNumber) {
-        return endSlicing();
-    }
+  if (currentSliceNumber > slicesNumber) {
+    return endSlicing();
+  }
 
-    getSlice(currentSliceNumber);
-    $sliderInput.slider('setValue', currentSliceNumber);
+  getSlice(currentSliceNumber);
+  $sliderInput.slider('setValue', currentSliceNumber);
 
-    var time = Date.now();
-    var diff = time - expectedSliceInterval;
+  var time = Date.now();
+  var diff = time - expectedSliceInterval;
 
-    !settings.get('slicer.speed') && viewer2dWin && setTimeout(function() {
-        sliceImage('none');
+  !settings.get('slicer.speed') &&
+    viewer2dWin &&
+    setTimeout(function() {
+      sliceImage('none');
     }, settings.get('slicer.light.on'));
 
-    expectedSliceInterval += sliceInterval;
-    setTimeout(slice, Math.max(0, sliceInterval - diff));
+  expectedSliceInterval += sliceInterval;
+  setTimeout(slice, Math.max(0, sliceInterval - diff));
 }
 
 function endSlicing() {
-    sliceImage('none');
-    $sidebar.find('input, button').prop('disabled', false);
-    $sliderInput.slider('enable');
-    $abortButton.addClass('hidden');
-    $sliceButton.removeClass('hidden');
-    $zipButton.prop('disabled', !zipFile);
+  sliceImage('none');
+  $sidebar.find('input, button').prop('disabled', false);
+  $sliderInput.slider('enable');
+  $abortButton.addClass('hidden');
+  $sliceButton.removeClass('hidden');
+  $zipButton.prop('disabled', !zipFile);
 }
 
 function startSlicing() {
-    var times = settings.get('slicer.light');
-
-    if (settings.get('slicer.speed')) {
-        sliceInterval = parseInt(settings.get('slicer.speedDelay'));
-    }
-    else {
-        sliceInterval = parseInt(times.on) + parseInt(times.off);
-    }
-
-    expectedSliceInterval = Date.now() + sliceInterval;
-    slicesNumber          = parseInt($slicerLayersValue.html());
-    currentSliceNumber    = 0;
-
-    zipFile   = null;
-    zipFolder = null;
-    SVGExport = null;
-    PNGExport = null;
-
-    if (settings.get('slicer.zip')) {
-        zipFile   = new JSZip();
-        zipFolder = zipFile.folder('slices');
-        zipFile.file("README.txt", 'Generated by SLAcer.js\r\nhttp://lautr3k.github.io/SLAcer.js/\r\n');
-        zipFile.file("slacer.json", JSON.stringify({
-            imageExtension: settings.get('slicer.png') ? 'png' : 'svg',
-            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));
-        SVGExport = settings.get('slicer.svg');
-        PNGExport = settings.get('slicer.png');
-    }
-
-    slicesNumber && slice();
+  var times = settings.get('slicer.light');
+
+  if (settings.get('slicer.speed')) {
+    sliceInterval = parseInt(settings.get('slicer.speedDelay'));
+  } else {
+    sliceInterval = parseInt(times.on) + parseInt(times.off);
+  }
+
+  expectedSliceInterval = Date.now() + sliceInterval;
+  slicesNumber = parseInt($slicerLayersValue.html());
+  currentSliceNumber = 0;
+
+  zipFile = null;
+  zipFolder = null;
+  SVGExport = null;
+  PNGExport = null;
+
+  if (settings.get('slicer.zip')) {
+    zipFile = new JSZip();
+    zipFolder = zipFile.folder('slices');
+    zipFile.file(
+      'README.txt',
+      'Generated by SLAcer.js\r\nhttp://lautr3k.github.io/SLAcer.js/\r\n'
+    );
+    zipFile.file(
+      'slacer.json',
+      JSON.stringify(
+        {
+          imageExtension: settings.get('slicer.png') ? 'png' : 'svg',
+          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
+      )
+    );
+    SVGExport = settings.get('slicer.svg');
+    PNGExport = settings.get('slicer.png');
+  }
+
+  slicesNumber && slice();
 }
 
 $zipButton.on('click', function(e) {
-    if (zipFile) {
-        var name = 'SLAcer';
-        if (loadedFile && loadedFile.name) {
-            name = loadedFile.name;
-        }
-        saveAs(zipFile.generate({type: 'blob'}), name + '.zip');
+  if (zipFile) {
+    var name = 'SLAcer';
+    if (loadedFile && loadedFile.name) {
+      name = loadedFile.name;
     }
+    saveAs(zipFile.generate({ type: 'blob' }), name + '.zip');
+  }
 });
 
 $sliceButton.on('click', function(e) {
-    $sidebar.find('input, button').prop('disabled', true);
-    $('.panel-heading button').prop('disabled', false);
-    $openViewer2D.prop('disabled', false);
-    $sliderInput.slider('disable');
-    $abortButton.prop('disabled', false);
-    $abortButton.removeClass('hidden');
-    $sliceButton.addClass('hidden');
-    startSlicing();
+  $sidebar.find('input, button').prop('disabled', true);
+  $('.panel-heading button').prop('disabled', false);
+  $openViewer2D.prop('disabled', false);
+  $sliderInput.slider('disable');
+  $abortButton.prop('disabled', false);
+  $abortButton.removeClass('hidden');
+  $sliceButton.addClass('hidden');
+  startSlicing();
 });
 
 $abortButton.on('click', function(e) {
-    currentSliceNumber = slicesNumber + 1;
-    endSlicing();
+  currentSliceNumber = slicesNumber + 1;
+  endSlicing();
 });
 
-$('#slicer-image-extension-' + (settings.get('slicer.png') ? 'png' : 'svg')).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-image-extension-' + (settings.get('slicer.png') ? 'png' : 'svg')
+).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 input').on('input, change', updateSlicerSettings);
 updateSlicerUI();
 
 // Build volume panel
 var $buildVolumeBody = initPanel('buildVolume');
-var $buildVolumeX    = $buildVolumeBody.find('#build-volume-x');
-var $buildVolumeY    = $buildVolumeBody.find('#build-volume-y');
-var $buildVolumeZ    = $buildVolumeBody.find('#build-volume-z');
+var $buildVolumeX = $buildVolumeBody.find('#build-volume-x');
+var $buildVolumeY = $buildVolumeBody.find('#build-volume-y');
+var $buildVolumeZ = $buildVolumeBody.find('#build-volume-z');
 
 function updateBuildVolumeUI() {
-    var buildVolume = settings.get('buildVolume');
+  var buildVolume = settings.get('buildVolume');
 
-    $buildVolumeX.val(buildVolume.size.x);
-    $buildVolumeY.val(buildVolume.size.y);
-    $buildVolumeZ.val(buildVolume.size.z);
+  $buildVolumeX.val(buildVolume.size.x);
+  $buildVolumeY.val(buildVolume.size.y);
+  $buildVolumeZ.val(buildVolume.size.z);
 
-    updateBuildVolumeSizeStep();
+  updateBuildVolumeSizeStep();
 }
 
 function updateBuildVolumeSizeStep() {
-    var step = (settings.get('buildVolume.unit') == 'in') ? 0.01 : 1;
+  var step = settings.get('buildVolume.unit') == 'in' ? 0.01 : 1;
 
-    $buildVolumeX.prop('step', step);
-    $buildVolumeY.prop('step', step);
-    $buildVolumeZ.prop('step', step);
+  $buildVolumeX.prop('step', step);
+  $buildVolumeY.prop('step', step);
+  $buildVolumeZ.prop('step', step);
 }
 
 function updateBuildVolumeSettings() {
-    var unit = $('#build-volume input[type=radio]:checked').val();
+  var unit = $('#build-volume input[type=radio]:checked').val();
 
-    if (unit != settings.get('buildVolume.unit')) {
-        var size = settings.get('buildVolume.size');
+  if (unit != settings.get('buildVolume.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));
-    }
+    $buildVolumeX.val(parseUnit(size.x, unit));
+    $buildVolumeY.val(parseUnit(size.y, unit));
+    $buildVolumeZ.val(parseUnit(size.z, unit));
+  }
 
-    settings.set('buildVolume', {
-        size: {
-            x: $buildVolumeX.val(),
-            y: $buildVolumeY.val(),
-            z: $buildVolumeZ.val()
-        },
-        unit: unit
-    });
+  settings.set('buildVolume', {
+    size: {
+      x: $buildVolumeX.val(),
+      y: $buildVolumeY.val(),
+      z: $buildVolumeZ.val()
+    },
+    unit: unit
+  });
 
-    viewer3d.setBuildVolume(settings.get('buildVolume'));
-    slicer.mesh && viewer3d.dropObject(slicer.mesh);
-    viewer3d.render();
+  viewer3d.setBuildVolume(settings.get('buildVolume'));
+  slicer.mesh && viewer3d.dropObject(slicer.mesh);
+  viewer3d.render();
 
-    size && updateMeshInfoUI();
+  size && updateMeshInfoUI();
 
-    updateBuildVolumeSizeStep();
-    getSlice($sliderInput.slider('getValue'));
+  updateBuildVolumeSizeStep();
+  getSlice($sliderInput.slider('getValue'));
 }
 
-$('#build-volume-unit-' + settings.get('buildVolume.unit')).prop('checked', true);
+$('#build-volume-unit-' + settings.get('buildVolume.unit')).prop(
+  'checked',
+  true
+);
 $('#build-volume input[type=radio]').on('change', updateBuildVolumeSettings);
 $('#build-volume input').on('input', updateBuildVolumeSettings);
 updateBuildVolumeUI();
 
 // Resin panel
-var $resinBody    = initPanel('resin');
-var $resinPrice   = $resinBody.find('#resin-price');
+var $resinBody = initPanel('resin');
+var $resinPrice = $resinBody.find('#resin-price');
 var $resinDensity = $resinBody.find('#resin-density');
 
 function updateResinUI() {
-    var resin = settings.get('resin');
+  var resin = settings.get('resin');
 
-    $resinDensity.val(resin.density);
-    $resinPrice.val(resin.price);
+  $resinDensity.val(resin.density);
+  $resinPrice.val(resin.price);
 }
 
 function updateResinSettings() {
-    settings.set('resin.price'  , $resinPrice.val());
-    settings.set('resin.density', $resinDensity.val());
-    updateMeshInfoUI();
+  settings.set('resin.price', $resinPrice.val());
+  settings.set('resin.density', $resinDensity.val());
+  updateMeshInfoUI();
 }
 
 $('#resin input').on('input', updateResinSettings);
 updateResinUI();
 
 // Screen
-var $screenBody         = initPanel('screen');
-var $screenWidth        = $screenBody.find('#screen-width');
-var $screenHeight       = $screenBody.find('#screen-height');
+var $screenBody = initPanel('screen');
+var $screenWidth = $screenBody.find('#screen-width');
+var $screenHeight = $screenBody.find('#screen-height');
 var $screenDiagonalSize = $screenBody.find('#screen-diagonal-size');
-var $screenDotPitch     = $screenBody.find('#screen-dot-pitch');
+var $screenDotPitch = $screenBody.find('#screen-dot-pitch');
 
 function updateScreenUI() {
-    var screen = settings.get('screen');
+  var screen = settings.get('screen');
 
-    $screenWidth.val(screen.width);
-    $screenHeight.val(screen.height);
-    $screenDiagonalSize.val(screen.diagonal.size);
-    $screenDotPitch.html(viewer2d.dotPitch.toFixed(2));
+  $screenWidth.val(screen.width);
+  $screenHeight.val(screen.height);
+  $screenDiagonalSize.val(screen.diagonal.size);
+  $screenDotPitch.html(viewer2d.dotPitch.toFixed(2));
 
-    viewer2d.setScreenResolution(screen);
+  viewer2d.setScreenResolution(screen);
 }
 
 function updateScreenSettings() {
-    var unit = $('#screen input[type=radio]:checked').val();
-
-    if (unit != settings.get('screen.diagonal.unit')) {
-        $screenDiagonalSize.val(
-            parseUnit(settings.get('screen.diagonal.size'), unit)
-        );
+  var unit = $('#screen input[type=radio]:checked').val();
+
+  if (unit != settings.get('screen.diagonal.unit')) {
+    $screenDiagonalSize.val(
+      parseUnit(settings.get('screen.diagonal.size'), unit)
+    );
+  }
+
+  settings.set('screen', {
+    width: $screenWidth.val(),
+    height: $screenHeight.val(),
+    diagonal: {
+      size: $screenDiagonalSize.val(),
+      unit: unit
     }
+  });
 
-    settings.set('screen', {
-        width   : $screenWidth.val(),
-        height  : $screenHeight.val(),
-        diagonal: {
-            size: $screenDiagonalSize.val(),
-            unit: unit
-        }
-    });
-
-    viewer2d.setScreenResolution(settings.get('screen'));
-    $screenDotPitch.html(viewer2d.dotPitch.toFixed(2));
+  viewer2d.setScreenResolution(settings.get('screen'));
+  $screenDotPitch.html(viewer2d.dotPitch.toFixed(2));
 
-    getSlice($sliderInput.slider('getValue'));
+  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
+);
 $('#screen input[type=radio]').on('change', updateScreenSettings);
 $('#screen input').on('input', updateScreenSettings);
 updateScreenUI();
 
 // Colors
 var $colorsBody = initPanel('colors');
-var $meshColor  = $colorsBody.find('#mesh-color');
+var $meshColor = $colorsBody.find('#mesh-color');
 var $sliceColor = $colorsBody.find('#slice-color');
 
 function updateColorsUI() {
-    var colors = settings.get('colors');
+  var colors = settings.get('colors');
 
-    $meshColor.val(colors.mesh);
-    $sliceColor.val(colors.slice);
+  $meshColor.val(colors.mesh);
+  $sliceColor.val(colors.slice);
 }
 
 updateColorsUI();
@@ -780,214 +821,211 @@ $meshColor.colorpicker({ format: 'hex' });
 $sliceColor.colorpicker({ format: 'hex' });
 
 $meshColor.colorpicker().on('changeColor.colorpicker', function(e) {
-    if (slicer.mesh && slicer.mesh.material) {
-        var hexString  = e.color.toHex();
-        var hexInteger = hexToDec(hexString);
-        settings.set('colors.mesh', hexString);
-        slicer.mesh.material.color.setHex(hexInteger);
-        viewer3d.render();
-    }
+  if (slicer.mesh && slicer.mesh.material) {
+    var hexString = e.color.toHex();
+    var hexInteger = hexToDec(hexString);
+    settings.set('colors.mesh', hexString);
+    slicer.mesh.material.color.setHex(hexInteger);
+    viewer3d.render();
+  }
 });
 
 $sliceColor.colorpicker().on('changeColor.colorpicker', function(e) {
-    if (shapes && shapes.length) {
-        var hexString  = e.color.toHex();
-        var hexInteger = hexToDec(hexString);
-        settings.set('colors.slice', hexString);
-        for (var i = 0, il = shapes.length; i < il; i++) {
-            shapes[i].material.color.setHex(hexInteger);
-        }
-        viewer3d.render();
+  if (shapes && shapes.length) {
+    var hexString = e.color.toHex();
+    var hexInteger = hexToDec(hexString);
+    settings.set('colors.slice', hexString);
+    for (var i = 0, il = shapes.length; i < il; i++) {
+      shapes[i].material.color.setHex(hexInteger);
     }
+    viewer3d.render();
+  }
 });
 
 // Alert
-var $alertPanel   = $('#alert');
+var $alertPanel = $('#alert');
 var $alertMessage = $alertPanel.find('.message');
 
 // Transform
-var $transformBody    = initPanel('transform');
-var $transformAction  = $transformBody.find('#transform-action');
+var $transformBody = initPanel('transform');
+var $transformAction = $transformBody.find('#transform-action');
 var $transformUniform = $transformBody.find('#transform-uniform');
-var $transformX       = $transformBody.find('#transform-x');
-var $transformY       = $transformBody.find('#transform-y');
-var $transformZ       = $transformBody.find('#transform-z');
+var $transformX = $transformBody.find('#transform-x');
+var $transformY = $transformBody.find('#transform-y');
+var $transformZ = $transformBody.find('#transform-z');
 var $transformButtons = $transformBody.find('button');
 
 var $transformMirrorYes = $transformBody.find('#transform-mirror-yes');
-var $transformMirrorNo  = $transformBody.find('#transform-mirror-no');
+var $transformMirrorNo = $transformBody.find('#transform-mirror-no');
 
 var transformAction, transformations;
 
 function resetTransformValues() {
-    transformAction = 'scale';
-    transformations = {
-        scale    : { x:1, y:1 , z:1 },
-        rotate   : { x:0, y:0 , z:0 },
-        translate: { x:0, y:0 , z:0 }
-    };
-    updateTransformAction();
+  transformAction = 'scale';
+  transformations = {
+    scale: { x: 1, y: 1, z: 1 },
+    rotate: { x: 0, y: 0, z: 0 },
+    translate: { x: 0, y: 0, z: 0 }
+  };
+  updateTransformAction();
 }
 
 function updateTransformAction() {
-    transformAction = $transformAction.val();
-
-    var axis = transformations[transformAction];
-
-    var min, max, step;
-
-    if (transformAction == 'scale') {
-        min  = 0.01;
-        max  = 999;
-        step = 0.01;
-    }
-    else if (transformAction == 'rotate') {
-        min  = 0;
-        max  = 360;
-        step = 1;
-    }
-    else {
-        min  = -9999;
-        max  = 9999;
-        step = 1;
-    }
-
-    $transformUniform.toggleClass('hidden', transformAction != 'scale');
-    $transformZ.parent().toggleClass('hidden', transformAction == 'translate');
-
-    $transformX.prop('min', min);
-    $transformY.prop('min', min);
-    $transformZ.prop('min', min);
-    $transformX.prop('max', max);
-    $transformY.prop('max', max);
-    $transformZ.prop('max', max);
-    $transformX.prop('step', step);
-    $transformY.prop('step', step);
-    $transformZ.prop('step', step);
-    $transformX.val(axis.x);
-    $transformY.val(axis.y);
-    $transformZ.val(axis.z);
+  transformAction = $transformAction.val();
+
+  var axis = transformations[transformAction];
+
+  var min, max, step;
+
+  if (transformAction == 'scale') {
+    min = 0.01;
+    max = 999;
+    step = 0.01;
+  } else if (transformAction == 'rotate') {
+    min = 0;
+    max = 360;
+    step = 1;
+  } else {
+    min = -9999;
+    max = 9999;
+    step = 1;
+  }
+
+  $transformUniform.toggleClass('hidden', transformAction != 'scale');
+  $transformZ.parent().toggleClass('hidden', transformAction == 'translate');
+
+  $transformX.prop('min', min);
+  $transformY.prop('min', min);
+  $transformZ.prop('min', min);
+  $transformX.prop('max', max);
+  $transformY.prop('max', max);
+  $transformZ.prop('max', max);
+  $transformX.prop('step', step);
+  $transformY.prop('step', step);
+  $transformZ.prop('step', step);
+  $transformX.val(axis.x);
+  $transformY.val(axis.y);
+  $transformZ.val(axis.z);
 }
 
 function updateTransformValues() {
-    var current = transformations[transformAction];
-    var uniform = $('#transform-uniform input[type=radio]:checked').val() == 'yes';
-    var input   = {
-        x: parseFloat($transformX.val()),
-        y: parseFloat($transformY.val()),
-        z: parseFloat($transformZ.val())
-    };
+  var current = transformations[transformAction];
+  var uniform =
+    $('#transform-uniform input[type=radio]:checked').val() == 'yes';
+  var input = {
+    x: parseFloat($transformX.val()),
+    y: parseFloat($transformY.val()),
+    z: parseFloat($transformZ.val())
+  };
+
+  input.x = isNaN(input.x) ? current.x : input.x;
+  input.y = isNaN(input.y) ? current.y : input.y;
+  input.z = isNaN(input.z) ? current.z : input.z;
+
+  $transformX.val(input.x);
+  $transformY.val(input.y);
+  $transformZ.val(input.z);
+
+  if (transformAction == 'scale') {
+    if (uniform) {
+      if (input.x != current.x) {
+        var ratio = current.x / input.x;
+        input.y = (current.y / ratio).toFixed(2);
+        input.z = (current.z / ratio).toFixed(2);
+        $transformY.val(input.y);
+        $transformZ.val(input.z);
+      } else if (input.y != current.y) {
+        var ratio = current.y / input.y;
+        input.x = (current.x / ratio).toFixed(2);
+        input.z = (current.z / ratio).toFixed(2);
+        $transformX.val(input.x);
+        $transformZ.val(input.z);
+      } else if (input.z != current.z) {
+        var ratio = current.z / input.z;
+        input.x = (current.x / ratio).toFixed(2);
+        input.y = (current.y / ratio).toFixed(2);
+        $transformX.val(input.x);
+        $transformY.val(input.y);
+      }
+    }
 
-    input.x = isNaN(input.x) ? current.x : input.x;
-    input.y = isNaN(input.y) ? current.y : input.y;
-    input.z = isNaN(input.z) ? current.z : input.z;
-
-    $transformX.val(input.x);
-    $transformY.val(input.y);
-    $transformZ.val(input.z);
-
-    if (transformAction == 'scale') {
-        if (uniform) {
-            if (input.x != current.x) {
-                var ratio = current.x / input.x;
-                input.y = (current.y / ratio).toFixed(2);
-                input.z = (current.z / ratio).toFixed(2);
-                $transformY.val(input.y);
-                $transformZ.val(input.z);
-            }
-            else if (input.y != current.y) {
-                var ratio = current.y / input.y;
-                input.x = (current.x / ratio).toFixed(2);
-                input.z = (current.z / ratio).toFixed(2);
-                $transformX.val(input.x);
-                $transformZ.val(input.z);
-            }
-            else if (input.z != current.z) {
-                var ratio = current.z / input.z;
-                input.x = (current.x / ratio).toFixed(2);
-                input.y = (current.y / ratio).toFixed(2);
-                $transformX.val(input.x);
-                $transformY.val(input.y);
-            }
-        }
+    input.x <= 0 && (input.x = 1);
+    input.y <= 0 && (input.y = 1);
+    input.z <= 0 && (input.z = 1);
+
+    slicer.mesh.geometry.scale(
+      input.x / current.x,
+      input.y / current.y,
+      input.z / current.z
+    );
+  } else if (transformAction == 'rotate') {
+    var deg = Math.PI / 180;
+    var offsets = {
+      x: input.x - current.x,
+      y: input.y - current.y,
+      z: input.z - current.z
+    };
 
-        input.x <= 0 && (input.x = 1);
-        input.y <= 0 && (input.y = 1);
-        input.z <= 0 && (input.z = 1);
+    slicer.mesh.geometry.rotateX(offsets.x * deg);
+    slicer.mesh.geometry.rotateY(offsets.y * deg);
+    slicer.mesh.geometry.rotateZ(offsets.z * deg);
+  } else {
+    var offsets = {
+      x: input.x - current.x,
+      y: input.y - current.y
+    };
 
-        slicer.mesh.geometry.scale(
-            input.x / current.x,
-            input.y / current.y,
-            input.z / current.z
-        );
-    }
-    else if (transformAction == 'rotate') {
-        var deg     = Math.PI / 180;
-        var offsets = {
-            x: input.x - current.x,
-            y: input.y - current.y,
-            z: input.z - current.z
-        };
-
-        slicer.mesh.geometry.rotateX(offsets.x * deg);
-        slicer.mesh.geometry.rotateY(offsets.y * deg);
-        slicer.mesh.geometry.rotateZ(offsets.z * deg);
-    }
-    else {
-        var offsets = {
-            x: input.x - current.x,
-            y: input.y - current.y
-        };
+    slicer.mesh.geometry.translate(offsets.x, offsets.y, 0);
+  }
 
-        slicer.mesh.geometry.translate(offsets.x, offsets.y, 0);
-    }
+  current.x = input.x;
+  current.y = input.y;
+  current.z = input.z;
 
-    current.x = input.x;
-    current.y = input.y;
-    current.z = input.z;
+  if (transformAction != 'translate') {
+    loadGeometry(slicer.mesh.geometry, false);
+    // stay at current position
+    var current = transformations['translate'];
+    slicer.mesh.geometry.translate(current.x, current.y, current.z);
+  }
 
-    if (transformAction != 'translate') {
-        loadGeometry(slicer.mesh.geometry, false);
-        // stay at current position
-        var current = transformations['translate'];
-        slicer.mesh.geometry.translate(current.x, current.y, current.z);
-    }
-
-    getSlice($sliderInput.slider('getValue'));
+  getSlice($sliderInput.slider('getValue'));
 }
 
 $transformButtons.on('click', function(e) {
-    var $this   = $(this);
-    var axis    = $this.data('axis');
-    var action  = $this.data('action');
-    var value   = transformations[transformAction][axis];
-    var $target = $transformBody.find('#transform-' + axis);
-
-    $target.val(value + (action == '+' ? 1 : -1));
-    updateTransformValues();
+  var $this = $(this);
+  var axis = $this.data('axis');
+  var action = $this.data('action');
+  var value = transformations[transformAction][axis];
+  var $target = $transformBody.find('#transform-' + axis);
+
+  $target.val(value + (action == '+' ? 1 : -1));
+  updateTransformValues();
 });
 
 function flipGeometry() {
-    settings.set('transform.mirror', $transformMirrorYes[0].checked);
-    loadGeometry(slicer.mesh.geometry, true);
-    getSlice($sliderInput.slider('getValue'));
+  settings.set('transform.mirror', $transformMirrorYes[0].checked);
+  loadGeometry(slicer.mesh.geometry, true);
+  getSlice($sliderInput.slider('getValue'));
 }
 
 $transformMirrorYes.on('change', flipGeometry);
 $transformMirrorNo.on('change', flipGeometry);
 
-$('#transform-mirror-' + (settings.get('transform.mirror') ? 'yes' : 'no')).prop('checked', true);
+$(
+  '#transform-mirror-' + (settings.get('transform.mirror') ? 'yes' : 'no')
+).prop('checked', true);
 $('#transform select').on('change', updateTransformAction);
 $('#transform input').on('change', updateTransformValues);
 resetTransformValues();
 
 // UI resize
 function resizeUI() {
-    var width  = $main.width();
-    var height = $main.height();
-    $sliderElement.height(height - 80);
-    viewer3d.setSize({ width : width, height: height });
-    viewer3d.render();
+  var width = $main.width();
+  var height = $main.height();
+  $sliderElement.height(height - 80);
+  viewer3d.setSize({ width: width, height: height });
+  viewer3d.render();
 }
 
 $(window).resize(resizeUI);
@@ -1001,55 +1039,60 @@ var loader = new MeshesJS.STLLoader($main[0]); // drop target
 
 // Load an geometry
 function loadGeometry(geometry, mirror) {
-    try {
-        // remove old mesh and plane
-        slicer.mesh && viewer3d.removeObject(slicer.mesh);
+  try {
+    // remove old mesh and plane
+    slicer.mesh && viewer3d.removeObject(slicer.mesh);
 
-        // remove old shapes
-        removeShapes();
+    // remove old shapes
+    removeShapes();
 
-        // flip geometry
-        if (mirror) {
-            geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
-        }
+    // flip geometry
+    if (mirror) {
+      geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
+    }
 
-        // load new mesh in slicer
-        slicer.loadMesh(new SLAcer.Mesh(geometry, new THREE.MeshPhongMaterial({
-            color: hexToDec(settings.get('colors.mesh')), side: THREE.DoubleSide
-        })));
+    // load new mesh in slicer
+    slicer.loadMesh(
+      new SLAcer.Mesh(
+        geometry,
+        new THREE.MeshPhongMaterial({
+          color: hexToDec(settings.get('colors.mesh')),
+          side: THREE.DoubleSide
+        })
+      )
+    );
 
-        // add new mesh and render view
-        viewer3d.addObject(slicer.mesh);
-        viewer3d.render();
+    // add new mesh and render view
+    viewer3d.addObject(slicer.mesh);
+    viewer3d.render();
 
-        // update mesh info
-        updateMeshInfoUI();
+    // update mesh info
+    updateMeshInfoUI();
 
-        // get first slice
-        //getSlice(1);
-    }
-    catch(e) {
-        errorHandler(e);
-    }
+    // get first slice
+    //getSlice(1);
+  } catch (e) {
+    errorHandler(e);
+  }
 }
 
 // Haaaaaaaaaaaaaaaaaa!!!!
 function ultraMegaDirtyFix() {
-    $transformBody.find('#transform-x').val(1.1);
-    $transformBody.find('#transform-y').val(1.1);
-    $transformBody.find('#transform-z').val(1.1);
-    updateTransformValues();
-    $transformBody.find('#transform-x').val(1);
-    $transformBody.find('#transform-y').val(1);
-    $transformBody.find('#transform-z').val(1);
-    updateTransformValues();
+  $transformBody.find('#transform-x').val(1.1);
+  $transformBody.find('#transform-y').val(1.1);
+  $transformBody.find('#transform-z').val(1.1);
+  updateTransformValues();
+  $transformBody.find('#transform-x').val(1);
+  $transformBody.find('#transform-y').val(1);
+  $transformBody.find('#transform-z').val(1);
+  updateTransformValues();
 }
 
 // On Geometry loaded
 loader.onGeometry = function(geometry) {
-    resetTransformValues();
-    loadGeometry(geometry, settings.get('transform.mirror'));
-    ultraMegaDirtyFix();
+  resetTransformValues();
+  loadGeometry(geometry, settings.get('transform.mirror'));
+  ultraMegaDirtyFix();
 };
 
 // On loading error
@@ -1070,16 +1113,16 @@ var url = window.location.href + stl;
 var xmlhttp = new XMLHttpRequest();
 
 // Get the file contents
-xmlhttp.open("GET", url);
+xmlhttp.open('GET', url);
 
 xmlhttp.onreadystatechange = function() {
-    if (xmlhttp.readyState == XMLHttpRequest.DONE) {
-        if(xmlhttp.status == 200){
-            loader.loadString(xmlhttp.responseText);
-        }else{
-            errorHandler('xmlhttp: ' + xmlhttp.statusText);
-        }
+  if (xmlhttp.readyState == XMLHttpRequest.DONE) {
+    if (xmlhttp.status == 200) {
+      loader.loadString(xmlhttp.responseText);
+    } else {
+      errorHandler('xmlhttp: ' + xmlhttp.statusText);
     }
-}
+  }
+};
 
 xmlhttp.send();

From 39f96527c42d735b5c0fc7e5dc891c66936fa640 Mon Sep 17 00:00:00 2001
From: ribo <roibeard.mac.unfraidh@gmail.com>
Date: Mon, 8 Apr 2019 10:33:02 +0200
Subject: [PATCH 14/14] Reactivate modal.

---
 css/m3rlin.css | 5 ++---
 js/m3rlin.js   | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/css/m3rlin.css b/css/m3rlin.css
index 564cafc..bbacaf5 100644
--- a/css/m3rlin.css
+++ b/css/m3rlin.css
@@ -4,11 +4,10 @@
   justify-content: space-around;
 }
 
-/* #hide {
- 
+#hide {
   display: none;
   transition: 0.5s;
-} */
+}
 .modal-header {
   color: rgb(105, 105, 105);
   text-align: center;
diff --git a/js/m3rlin.js b/js/m3rlin.js
index c6aa567..e7d7800 100644
--- a/js/m3rlin.js
+++ b/js/m3rlin.js
@@ -11,11 +11,11 @@ $(document).ready(function() {
   //   if ($slicerLayerHeight.val() > 100) {
   //     alert('Wait - are you sure??');
   //   }
-  //   $('#m3rlinModal').modal('toggle');
+  $('#m3rlinModal').modal('toggle');
   $('.m3rlin-quickstart-btns').css({ display: 'none' });
   $('#settings').click(function() {
     $('#m3rlinModal').modal('toggle');
-    // $('#hide').css({ display: 'block' });
+    $('#hide').css({ display: 'block' });
     $('#hide').fadeIn('slow');
   });
 
