Skip to content

Commit

Permalink
#7 Updated web interface
Browse files Browse the repository at this point in the history 
Changed look of upload buttons
Added rules file guidelines
Extended converter canvasses
Changed layout of demo section
  • Loading branch information
@DreyerChris
DreyerChris committed Aug 20, 2017
1 parent 67525d5 commit 0b54a63
Show file tree
Hide file tree
Showing 6 changed files with 172 additions and 36 deletions.
67 changes: 56 additions & 11 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,15 +183,18 @@ a{
}

.input-file-hidden + label {
font-size: 1.25em;
font-weight: 700;
width: 70px;
height: 70px;
border-radius: 70px;
font-size: 40px;
color: #222;
background-color: #86DCEF;
display: inline-block;
padding: 8px 20px 8px 20px;
cursor: pointer;
margin-bottom: 10px;
transition: all 0.3s;
padding-top: 6px;
margin-bottom: 15px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.input-file-hidden:focus + label,
Expand Down Expand Up @@ -231,9 +234,29 @@ a{

}

.upload-edited-file:hover{
.rules-file-button-container{
text-align: center;
}

.rules-file-button{
width: 70px;
height: 70px;
border-radius: 70px;
font-size: 40px;
padding-top: 6px;
color: #222;
background-color: #86DCEF;
transition: all 0.3s;
cursor: pointer;
margin-bottom: 5px;
margin: 0 auto;
margin-bottom: 15px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.rules-file-button:hover{
color: white;
background-color: #15af03;
background-color: #29badb;
text-decoration: none;
}

Expand Down Expand Up @@ -311,6 +334,16 @@ a{
padding: 0;
}

.geometry-image-bottom{
padding: 0;
overflow-x: hidden;

}

.geometry-image-bottom img{

}

.documents{
text-align: center;
margin-bottom: 400px;
Expand All @@ -330,7 +363,7 @@ a{
color: #222;
}

.document-link-container:hover i{
.document-link-container i:hover{
color: #86DCEF;
}

Expand All @@ -348,21 +381,22 @@ a{
}

#editor{

margin-top: 30px;
margin-bottom: 30px;
}

#converter1Canvas{
background-color: #222;
background-color: transparent;
min-height: 400px;
}

#converter2Canvas1{
background-color: #222;
background-color: transparent;
min-height: 400px;
}

#converter2Canvas2{
background-color: #222;
background-color: transparent;
min-height: 400px;
}

Expand All @@ -379,4 +413,15 @@ input[type=range][orient=vertical]
padding: 0 5px;
}

#usageSection{
margin-bottom: -200px;
}

#converter1Section{
padding-top: 60px;
}

#voxelDemo{
margin-top: 40px;
}

141 changes: 116 additions & 25 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<script src="js/monokai.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mode-json.js" type="text/javascript" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css"/>

<!-- voxc.js required scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="build/js/voxc.js" type="text/javascript" charset="utf-8"></script>
<script src="js/webMain.js" type="text/javascript" charset="utf-8"></script>

Expand Down Expand Up @@ -79,38 +81,54 @@ <h2 class="section-heading">Demo</h2>
</div>

<div class="row">
<div class="file-upload-container col-sm-4">
<div class="file-upload-container col-sm-2">
<input type="file" name="file" id="file" class="input-file-hidden" accept=".obj"/>

<label for="file">Upload a file</label><br>
<label for="file"><i class="fa fa-upload" aria-hidden="true"></i></label><br>

or
Upload own rules file
</div>
<div class="rules-file-button-container col-sm-2">
<div class="rules-file-button">
<i class="fa fa-download" aria-hidden="true"></i>
</div>
Use predefined rules file
</div>
<div class="col-sm-4">
<a class="upload-edited-file">Upload original rules file</a>
<div class="rules-file-button-container col-sm-2 col-sm-offset-3">
<div class="rules-file-button">
<i class="fa fa-download" aria-hidden="true"></i>
</div>
Upload own .obj file
</div>
</div>

</div>
<div class="row">
<div class="col-sm-9">
<div class="col-sm-4">
<div id="editor">{"key" : "Write your own rules file here..."}<br></div>
</div>
</div>
<div class="row">
<div class="col-sm-11">
<div class="col-sm-8">
<div id="voxelDemo" width="800" height="400"></div>
</div>
<div class="col-sm-1">
<input type="range" id="zoomSlider" orient="vertical" />
</div>
</div>
<div class="row save-buttons">
<div class="row">
<div class="col-sm-4">

</div>
<div class="col-sm-12">
<a class="reload-canvas">Upload own .obj file</a>
<div class="rules-file-button-container col-sm-6">
<a data-toggle="modal" data-target="#texturesModal">
<div class="rules-file-button">
<i class="fa fa-th" aria-hidden="true"></i>
</div>
</a>
Texture guidelines
</div>
<div class="rules-file-button-container col-sm-6">
<a data-toggle="modal" data-target="#shapesModal">
<div class="rules-file-button">
<i class="fa fa-codepen" aria-hidden="true"></i>
</div>
</a>
Shape guidelines
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -168,32 +186,40 @@ <h5>Creation of canvas and setting up wireframe-mesh display</h5>
</div>
</div>
<div class="row">
<div id="converter1Section" class="col-sm-8 col-sm-offset-2 section">
<div class="col-sm-8 col-sm-offset-2">
<div class="geometry-image-bottom col-sm-2">
<img height="200px" src="resources/images/geometry-bottom.png"/>
</div>
<div class="geometry-image-bottom col-sm-2 col-sm-offset-8">
<img height="200px" src="resources/images/geometry-bottom.png"/>
</div>
</div>
<div class="row">
<div id="converter1Section" class="col-sm-12 section">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="section-heading">Converter 1</h2>
<hr class="norm-hr"/>
<p class="section-paragraph">
Voxc.js is meant to be a lightweight, easy to use library for converting voxel objects into JavaScript matrixes for easy manipulation. These matrixes can then be used for creating more meshes that have different goals. This library will contain a series of converters that all have a different purpose. The creation and formatting of these converters stay consistent by using JavaScriptmatrixes as input and output.
</p>
</div>
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1">
<div id="converter1Canvas" width="800" height="400"></div>
</div>
</div>
</div>
<div class="row">
<div id="converter2Section" class="col-sm-8 col-sm-offset-2 section">
<div class="col-sm-8 col-sm-offset-2">
<div id="converter2Section" class="col-sm-12 section">
<div class="col-sm-6 col-sm-offset-3">
<h2 class="section-heading">Converter 2</h2>
<hr class="norm-hr"/>
<p class="section-paragraph">
Voxc.js is meant to be a lightweight, easy to use library for converting voxel objects into JavaScript matrixes for easy manipulation. These matrixes can then be used for creating more meshes that have different goals. This library will contain a series of converters that all have a different purpose. The creation and formatting of these converters stay consistent by using JavaScriptmatrixes as input and output.
</p>
</div>
<div class="col-sm-6">
<div class="col-sm-5 col-sm-offset-1">
<div id="converter2Canvas1" width="800" height="400"></div>
</div>
<div class="col-sm-6">
<div class="col-sm-5">
<div id="converter2Canvas2" width="800" height="400"></div>
</div>
</div>
Expand Down Expand Up @@ -234,6 +260,71 @@ <h2 class="section-heading">Converter 2</h2>
</div>
</div>
</div>

<div id="shapesModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Rules file shape guidelines</h4>
</div>
<div class="modal-body">
<pre><code class="language-javascript"> var converterOne_canvas = new voxJSCanvas("voxelDemo");
var converterOne_model;

var arrayToMesh = new ArrayToMesh(converterOne_canvas.scene, model);
converterOne_model = arrayToMesh.output();
converterOne_canvas.CameraPosition(0, 0, -10);
converterOne_canvas.setMesh(converterOne_model);
converterOne_canvas.start();
</code></pre><br/>
<h4>Available shapes:</h4>
<ul>
<li>"circle"</li>
<li>"triangle"</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>
<div id="texturesModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Rules file texture guidelines</h4>
</div>
<div class="modal-body">
<pre><code class="language-javascript"> var converterOne_canvas = new voxJSCanvas("voxelDemo");
var converterOne_model;

var arrayToMesh = new ArrayToMesh(converterOne_canvas.scene, model);
converterOne_model = arrayToMesh.output();
converterOne_canvas.CameraPosition(0, 0, -10);
converterOne_canvas.setMesh(converterOne_model);
converterOne_canvas.start();
</code></pre><br/>
<h4>Available textures:</h4>
<ul>
<li>"texture1.png"</li>
<li>"texture2.png"</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>

</div>
</div>
<script>
//Smooth Scroll
$(document).ready(function(){
Expand Down
Binary file modified resources/images/Thumbs.db
View file
Binary file not shown.
Binary file added resources/images/geometry-bottom.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/geometry.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified resources/images/geometry2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0b54a63

Please sign in to comment.