/SLAcer.js

Permalink
Browse files

integrate slacer into printflow3d

  • Loading branch information...
1 parent 25ae5ba commit 52f6623d58a7b4d75d87e3ec47dfe279ab44a4eb @kloknibor kloknibor committed Nov 22, 2016
Unified Split
Showing with 306 additions and 81 deletions.
  1. +159 −0 css/jPushMenu.css
  2. +7 −8 css/main.css
  3. +36 −60 index.html
  4. +94 −0 js/jPushMenu.js
  5. +2 −2 js/main.js
  6. BIN js/pdp
  7. +6 −4 js/photonic3d.js
  8. +1 −6 js/slacer/viewer.js
  9. +1 −1 vendor/bootstrap/css/bootstrap.min.css
View
159 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;
+ }
+}
View
15 css/main.css
@@ -7,14 +7,14 @@
/* Sidebar */
#sidebar {
position: fixed;
- top: 51px;
- bottom: 0;
+ 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;
}
@@ -25,11 +25,10 @@
border: 1px dashed #cccccc;
}
-/*
#sidebar .panel-body {
padding-bottom: 0;
}
-*/
+
#sidebar .info {
margin-bottom: 10px;
}
@@ -65,7 +64,7 @@
position: fixed;
left: 301px;
right: 39px;
- top: 51px;
+ top: 0px;
bottom: 0;
}
@@ -74,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;
}
View
96 index.html
@@ -4,16 +4,13 @@
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>Printflow3D</title>
- <link rel="stylesheet" type="text/css" href="/slacer/vendor/jquery-ui/jquery-ui.min.css" />
- <link rel="stylesheet" type="text/css" href="/slacer/vendor/bootstrap-slider/css/bootstrap-slider.min.css" />
- <link rel="stylesheet" type="text/css" href="/slacer/vendor/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css" />
- <link rel="stylesheet" type="text/css" href="/slacer/css/main.css" />
- <!-- <link rel="stylesheet" type="text/css" href="/slacer/vendor/bootstrap/css/bootstrap.min.css" /> -->
-
- </head>
+ <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>
-
<div class="body container-fluid">
<div id="sidebar">
@@ -165,9 +162,10 @@ <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">
<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
@@ -195,10 +193,11 @@ <h3 class="panel-title">Slicer</h3>
<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>
</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>
@@ -245,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>
@@ -300,23 +299,10 @@ <h3 class="panel-title">Colors</h3>
<div id="main">
<div id="viewer3d" class="box fl">loading...</div>
- <div id="printables">
- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
- <a href="#">About</a>
- <a href="#">Services</a>
- <a href="#">Clients</a>
- <a href="#">Contact</a>
- </div>
</div><!-- #main -->
-
- <div id="slider">
-
-
- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
-
-
- <span class="max">100</span>
+ <div id="slider">
+ <span class="max">100</span>
<input id="ex4" type="text"
data-slider-min="0"
data-slider-max="100"
@@ -335,37 +321,27 @@ <h3 class="panel-title">Colors</h3>
<p class="message">Alert message empty...</p>
</div>
- <script src="/slacer/vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/bootstrap-slider/bootstrap-slider.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/lodash.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/three.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/earcut.js" type="text/javascript"></script>
- <script src="/slacer/vendor/triangulation.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/settings.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/mesh.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/viewer.js" type="text/javascript"></script>
- <script src="/slacer/vendor/OrbitControls.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/viewcontrols.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/viewer3d.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/viewer2d.js" type="text/javascript"></script>
- <script src="/slacer/js/slacer/slicer.js" type="text/javascript"></script>
- <script src="/slacer/js/loader/stl.js" type="text/javascript"></script>
- <script src="/slacer/vendor/FileSaver.min.js" type="text/javascript"></script>
- <script src="/slacer/vendor/jszip.min.js" type="text/javascript"></script>
- <script src="/slacer/js/main.js" type="text/javascript"></script>
- <script src="/slacer/js/photonic3d.js" type="text/javascript"></script>
-
- <script>
- function openNav() {
- document.getElementById("printables").style.width = "250px";
- }
-
- function closeNav() {
- document.getElementById("printables").style.width = "0";
- }
- </script>
+ <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/photonic3d.js" type="text/javascript"></script>
</body>
</html>
Oops, something went wrong.

0 comments on commit 52f6623

Please sign in to comment.