Skip to content

/SLAcer.js

Permalink
Browse files

started new UI

  • Loading branch information...
@lautr3k
lautr3k committed Mar 16, 2016
1 parent 1b6f25a commit a2e96537003893b180fc570cad68d9a611148334
143 css/main.css
View file
@@ -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;
}*/
164 index.html
View file
@@ -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>

0 comments on commit a2e9653

Please sign in to comment.
You can’t perform that action at this time.