/SLAcer.js

Permalink
Browse files

started new UI

  • Loading branch information...
1 parent 1b6f25a commit a2e96537003893b180fc570cad68d9a611148334 @lautr3k committed Mar 16, 2016
View
143 css/main.css
@@ -1,42 +1,133 @@
-html, body {
+/* Navbar */
+.navbar {
margin: 0;
- padding: 0;
- overflow: hidden;
}
-.box {
- margin: 5px;
+/* 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;
+}
+
+#sidebar .panel-body {
+ padding-bottom: 0;
+}
+
+
+#sidebar .info {
+ margin-bottom: 10px;
+}
+
+#sidebar .info-label {
+ font-weight: bold;
+}
+
+#sidebar .info,
+#sidebar .form-group {
+ min-height: 20px;
+}
+
+#sidebar small {
+ color: #888888;
+ font-weight: normal;
}
-.fl {
+#sidebar label,
+#sidebar .info-label,
+#sidebar .info-value,
+#sidebar .form-control {
+ width: 50%;
float: left;
}
-#mesh ul {
- margin: 0;
- padding: 5px;
- border-radius: 6px;
- list-style-type: none;
- background-color: #000000;
+/* Main */
+#main {
+ position: fixed;
+ left: 300px;
+ top: 51px;
+ bottom: 0;
+ right: 0;
+}
+
+/* Button file */
+.btn-file {
+ position: relative;
+ overflow: hidden;
}
-#mesh .label,
-#mesh .value {
- padding: 2px;
- display: inline-block;
+.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;
}
-#mesh .label {
- width: 80px;
- color: #eeeeee;
+/*input[type="number"].input-sm {
+ width: 60px;
+}*/
+
+/*#screen label {
+ float: left;
+ width: 100px;
+ height: 30px;
}
-#mesh .value {
- width: 50px;
+#screen .form-control {
float: right;
- color: #ff0000;
- font-size: 0.8em;
- text-align: right;
- border-radius: 4px;
- background-color: #550000;
+}*/
+
+/* Main contents */
+/*.main {
+ padding: 10px;
+ margin-top: 51px;
+}*/
+
+/* Sidebar */
+/*#sidebar {
+ width: 300px;
+ position: fixed;
+ top: 51px;
+ bottom: 0;
+ left: 0;
+ z-index: 1000;
+ display: block;
+ padding: 10px;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background-color: #f5f5f5;
+ border-right: 1px solid #eee;
+ }*/
+
+/* Sidebar navigation */
+/*.nav-sidebar {
+ margin-right: -21px;
+ margin-bottom: 20px;
+ margin-left: -20px;
+}
+.nav-sidebar > li > a {
+ padding-right: 20px;
+ padding-left: 20px;
}
+.nav-sidebar > .active > a,
+.nav-sidebar > .active > a:hover,
+.nav-sidebar > .active > a:focus {
+ color: #fff;
+ background-color: #428bca;
+}*/
View
164 index.html
@@ -4,25 +4,157 @@
<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>
+ <title>SLAcer.js (bêta)</title>
+ <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
- <div id="mesh" class="box fl">
- <ul>
- <li><span class="label">faces</span><span class="value" id="mesh-faces-value">n/a</span></li>
- <li><span class="label">volume</span><span class="value" id="mesh-volume-value">n/a</span></li>
- <li><span class="label">layerHeight</span><span class="value" id="layer-height-value">n/a</span></li>
- <li><span class="label">layers</span><span class="value"><span id="layer-value">n/a</span> / <span id="layers-value">n/a</span></span></li>
- <li><span class="label">zPosition</span><span class="value" id="z-position-value">n/a</span></li>
- <li><input id="z-position-input" type="range" value="0" min="0" max="1" step="1" /></li>
- </ul>
- </div>
- <div id="viewers">
- <div id="viewer1" class="box fl">loading...</div>
- <div id="viewer2" class="box fl">loading...</div>
- <div id="viewer3" class="box fl">loading...</div>
- </div>
+ <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="#">GitHub</a></li>
+ </ul>
+ </div>
+ </div>
+ </nav><!-- .navbar -->
+ <div class="body container-fluid">
+ <div id="sidebar">
+
+ <div id="file" class="panel panel-default">
+ <div class="panel-heading">
+ <button class="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="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">Volume <small>(mm³)</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>
+ </div><!-- #mesh -->
+
+ <div id="build-volume" class="panel panel-default">
+ <div class="panel-heading">
+ <button class="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</label>
+ <input type="number" id="build-volume-x" class="form-control input-sm" placeholder="100" min="0" />
+ </div>
+ <div class="form-group">
+ <label for="build-volume-y">Y</label>
+ <input type="number" id="build-volume-y" class="form-control input-sm" placeholder="100" min="0" />
+ </div>
+ <div class="form-group">
+ <label for="build-volume-z">Z</label>
+ <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</small></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="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="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="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">Diagonal size</label>
+ <input type="number" id="screen-diagonal" 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><!-- #sidebar -->
+
+ <div id="main">
+ <div id="viewer3d" class="box fl">loading...</div>
+ </div><!-- #main -->
+
+ </div><!-- .body -->
+ <script src="vendor/jquery-2.1.4.min.js" type="text/javascript"></script>
+ <script src="vendor/bootstrap/js/bootstrap.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="js/slacer/mesh.js" type="text/javascript"></script>
Oops, something went wrong.

0 comments on commit a2e9653

Please sign in to comment.