Add photonic3d.js and test retrieving config values and initializing …

Load default STL file and fix geometry error temporarily
Merge pull request #1 from wilbur-shi/gh-pages
lautr3k · kloknibor · Nov 30, 2016 · WGAndrew · Nov 30, 2016 · kloknibor
Unified Split

Showing with 435 additions and 48 deletions.

+159 −0 css/jPushMenu.css

+5 −5 css/main.css

+21 −38 index.html

+94 −0 js/jPushMenu.js

+7 −4 js/main.js

BIN js/pdp

+148 −0 js/photonic3d.js

+1 −1 vendor/bootstrap/css/bootstrap.min.css
diff --git a/css/jPushMenu.css b/css/jPushMenu.css
@@ -0,0 +1,159 @@
+/* General styles for all menus */
+.cbp-spmenu {
+    background: #47a3da;
+    position: fixed;
+}
+
+.cbp-spmenu h3 {
+    color: #FFFFFF;
+    font-size: 1.9em;
+    padding: 20px;
+    margin: 0;
+    font-weight: 300;
+    background: #0d77b6;
+}
+
+.cbp-spmenu a {
+    display: block;
+    color: #fff;
+    font-size: 1.1em;
+    font-weight: 300;
+}
+
+.cbp-spmenu a:hover {
+    background: #258ecd;
+}
+
+.cbp-spmenu a:active {
+    background: #afdefa;
+    color: #47a3da;
+}
+
+/* Orientation-dependent styles for the content of the menu */
+.cbp-spmenu-vertical {
+    width: 240px;
+    height: 100%;
+    top: 0;
+    z-index: 1000;
+    overflow-y: scroll;
+}
+
+.cbp-spmenu-vertical a {
+    border-bottom: 1px solid #258ecd;
+    padding: 1em;
+}
+
+.cbp-spmenu-horizontal {
+    width: 100%;
+    height: 150px;
+    left: 0;
+    z-index: 1000;
+    overflow: hidden;
+}
+
+.cbp-spmenu-horizontal h3 {
+    height: 100%;
+    width: 20%;
+    float: left;
+}
+
+.cbp-spmenu-horizontal a {
+    float: left;
+    width: 20%;
+    padding: 0.8em;
+    border-left: 1px solid #258ecd;
+}
+
+/* Vertical menu that slides from the left or right */
+.cbp-spmenu-left {
+    left: -240px;
+}
+
+.cbp-spmenu-right {
+    right: -240px;
+}
+
+.cbp-spmenu-left.menu-open {
+    left: 0px;
+}
+
+.cbp-spmenu-right.menu-open {
+    right: 0px;
+}
+
+/* Horizontal menu that slides from the top or bottom */
+
+.cbp-spmenu-top {
+    top: -150px;
+}
+
+.cbp-spmenu-bottom {
+    bottom: -150px;
+}
+
+.cbp-spmenu-top.menu-open {
+    top: 0px;
+}
+
+.cbp-spmenu-bottom.menu-open {
+    bottom: 0px;
+}
+
+/* Push classes applied to the body */
+.push-body {
+    overflow-x: hidden;
+    position: relative;
+    left: 0;
+}
+
+.push-body-toright {
+    left: 240px;
+}
+
+.push-body-toleft {
+    left: -240px;
+}
+
+/* Transitions */
+.cbp-spmenu,
+.push-body {
+    -webkit-transition: all 0.3s ease;
+       -moz-transition: all 0.3s ease;
+            transition: all 0.3s ease;
+}
+
+/* Example media queries */
+@media screen and (max-width: 55.1875em) {
+    .cbp-spmenu-horizontal {
+        font-size: 75%;
+        height: 110px;
+    }
+
+    .cbp-spmenu-top {
+        top: -110px;
+    }
+
+    .cbp-spmenu-bottom {
+        bottom: -110px;
+    }
+}
+
+@media screen and (max-height: 26.375em) {
+    .cbp-spmenu-vertical {
+        font-size: 90%;
+        width: 190px;
+    }
+
+    .cbp-spmenu-left,
+    .push-body-toleft {
+        left: -190px;
+    }
+
+    .cbp-spmenu-right {
+        right: -190px;
+    }
+
+    .push-body-toright {
+        left: 190px;
+    }
+}
diff --git a/css/main.css b/css/main.css
@@ -7,14 +7,14 @@
 /* Sidebar */
 #sidebar {
     position: fixed;
-    top: 51px;
+    top: 0px;
     bottom: 0;
     left: 0;
     width: 300px;
     padding: 10px;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: #f5f5f5;
+/*    background-color: #f5f5f5; */
     border-right: 1px solid #eeeeee;
 }
 
@@ -64,7 +64,7 @@
     position: fixed;
     left: 301px;
     right: 39px;
-    top: 51px;
+    top: 0px;
     bottom: 0;
 }
 
@@ -73,10 +73,10 @@
     position: fixed;
     padding: 10px;
     width: 60px;
-    top: 51px;
+    top: 0px;
     bottom: 0;
     right: 0;
-    background-color: #f5f5f5;
+    background-color: #f5f5f5; 
     border-left: 1px solid #eeeeee;
 }
 

diff --git a/index.html b/index.html
@@ -1,60 +1,42 @@
-<!DOCTYPE html>
+<!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">
-
-                <div class="form-group">
-                    <button id="open-viewer-2d" class="btn btn-primary" type="button">
-                        <span class="glyphicon glyphicon-picture"></span> 2D viewer
-                    </button>
+                <div class="form-group" style="display:inline-block;">
                     <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 class=" btn-group" style="display:inline-block;">
+        	            <button id="upload-button" class="btn btn-success" type="button" disabled="disa$
+                	        <span class="glyphicon glyphicon-upload"> </span> Save
+	                    </button>
+        	            <button id="print-button" class="btn btn-success" type="button" disabled="disab$
+                	        <span class="glyphicon glyphicon-print"></span> Print
+	                    </button>
+        	   </div>
                 </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>
+                        <h3 class="panel-title"><img src="/images/transformation.png" width="20px" height="20px">Transformations</h3>
                     </div>
                     <div id="transform-body" class="panel-body collapse in">
                         <div class="form-group" id="transform-mirror">
@@ -96,7 +78,7 @@ <h3 class="panel-title">Transformations</h3>
                         <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>
+                        <h3 class="panel-title"><img src="/images/file.png" width="20px" height="20px">File</h3>
                     </div>
                     <div id="file-body" class="panel-body collapse in">
                         <div class="form-group">
@@ -113,7 +95,7 @@ <h3 class="panel-title">File</h3>
                         <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>
+                        <h3 class="panel-title"><img src="/images/mesh.png" width="20px" height="20px">Mesh</h3>
                     </div>
                     <div id="mesh-body" class="panel-body collapse in">
                         <div class="info">
@@ -147,7 +129,7 @@ <h3 class="panel-title">Mesh</h3>
                     </div>
                 </div><!-- #mesh -->
 
-                <div id="slicer" class="panel panel-default">
+                <div id="slicer" class="panel panel-default verbergen">
                     <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>
@@ -182,7 +164,7 @@ <h3 class="panel-title">Slicer</h3>
                             <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="verbergen">
                         <hr />
 
                         <div class="form-group">
@@ -215,7 +197,7 @@ <h3 class="panel-title">Slicer</h3>
                     </div>
                 </div><!-- #slicer -->
 
-                <div id="build-volume" class="panel panel-default">
+                <div id="build-volume" class="panel panel-default verbergen">
                     <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>
@@ -248,7 +230,7 @@ <h3 class="panel-title">Build volume</h3>
                         <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>
+                        <h3 class="panel-title"><img src="/images/resin.png" width="20px" height="20px">Resin</h3>
                     </div>
                     <div id="resin-body" class="panel-body collapse in">
                         <div class="form-group">
@@ -262,7 +244,7 @@ <h3 class="panel-title">Resin</h3>
                     </div>
                 </div><!-- #resin -->
 
-                <div id="screen" class="panel panel-default">
+                <div id="screen" class="panel panel-default verbergen">
                     <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>
@@ -299,7 +281,7 @@ <h3 class="panel-title">Screen</h3>
                         <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>
+                        <h3 class="panel-title"><img src="/images/color.png" width="20px" height="20px">Colors</h3>
                     </div>
                     <div id="colors-body" class="panel-body collapse in">
                         <div class="form-group">
@@ -360,5 +342,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/photonic3d.js" type="text/javascript"></script>
     </body>
 </html>