tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

From EJS to Jade

Browse Source
This commit is contained in:
Thomas FORGIONE
2015-05-05 16:30:51 +02:00
parent e05add5ee5
commit 7363f0aeed
26 changed files with 246 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
views/404.html
View File

@@ -1,10 +0,0 @@
<%{ 'main' }%>
<%{ title %>404<%} %>
<%{ content %>
<section>
<h2>Error 404</h2>
<p>
There is nothing there... maybe you want to go back to <a href="<%= urls.index %>">the index</a>
</p>
</section>
<%} %>

9
views/404.jade Normal file
View File

@@ -0,0 +1,9 @@
extends ./main
block title
title #{title} - 404
block content
section
h2 Error 404
p There is nothing there... maybe you want to go back to <a href="#{urls.index}")>the index</a>

11
views/bouncing/index.html
View File

@@ -1,11 +0,0 @@
<%{ '../withjs' }%>
<%{ title %>Bouncing cube<%} %>
<%{ extrajs %><script src="/static/js/bouncing/BouncingMain.js"></script><%} %>
<%{ content %>
<h2>Bouncing cube</h2>
<p>Click on the cube to make it jump !</p>
<div id="container"></div>
<%} %>

43
views/index.html
View File

@@ -1,43 +0,0 @@
<%{ './main' }%>
<%{ title %>Index<%} %>
<%{ content %>
<h2>Index</h2>
<ul>
<li>
<a href="/bouncing/">A bouncing cube that jumps when you click on it</a>
<p>Jumps and bounce when you click on it.</p>
</li>
<li>
<a href="/multisphere/">Sphere with multi-resolution</a>
<p>Lots of obj files loaded and displayed. When you click
somewhere, the current obj is hidden and the next one, with a
better resolution is shown.</p>
</li>
<li>
<a href="/prototype/">A proto of the real thing</a>
<p>You can move the camera with the arrow keys and move the angle
of the camera with 2, 4, 6 and 8 (the arrows of the numpad), or you
can do a drag-and-drop like (click on the mouse to grap the scene,
and move the mouse to rotate the camera). You can also select a
camera by clicking on the red part of it, and get back to the free
camera by clicking again. You can also select a camera by simply
clicking on the object you want to see. The program will choose the
camera that you want, and move to it progressively.</p>
</li>
<li>
<a href="/stream/">Streaming simulation</a>
<p>A mesh of a sphere is fully loaded, and displayed progressively.
This test is here to prove that we can dynamically add vertices and
faces to a mesh.</p>
</li>
</ul>
<%} %>

49
views/main.html
View File

@@ -1,49 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="/static/css/style.css" />
<link rel="stylesheet" href="/static/css/syntax.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" />
<%{{ extrahead }}%>
<title><%= title %> - <%{{ title }}%></title>
</head>
<body>
<nav id="nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">3DUI</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="<%= urls.bouncing %>">Bouncing cube</a></li>
<li><a href="<%= urls.multisphere %>">Multi-sphere</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Prototypes <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="<%= urls.arrows %>">Arrows</a></li>
<li><a href="<%= urls.viewports %>">Viewports</a></li>
</ul>
</li>
<li><a href="<%= urls.stream %>">Streaming simulator</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<section class="container" id="main-section">
<%{{ content }}%>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<%{{ js }}%>
<%{{ extrajs }}%>
</body>
</html>

48
views/main.jade Normal file
View File

@@ -0,0 +1,48 @@
doctype html
html(lang='fr')
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width, initial-scale=1')
link(rel="stylesheet", href="/static/bootstrap/css/bootstrap.css")
link(rel="stylesheet", href="/static/css/style.css")
link(rel="stylesheet", href="/static/css/syntax.css")
link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic")
block extrahead
block title
title Hello
body
nav#nav.navbar.navbar-inverse.navbar-fixed-top(role="navigation")
.container
.navbar-header
button.navbar-toggle(type="button", data-toggle="collapse" data-target=".navbar-collapse")
span.sr-only Tootle navigation
span.icon-bar
span.icon-bar
a.navbar-brand(href="/") 3DUI
div.navbar-collapse.collapse
ul.nav.navbar-nav
li
a(href="#{urls.bouncing}") Bouncing cube
li
a(href="#{urls.multisphere}") Multisphere
li
a.dropdown-toggle(href="#", data-toggle="dropdown", role="button", aria-expanded="false") Prototype
span.caret
ul.dropdown-menu(role="menu")
li
a(href="#{urls.arrows}") Arrows
li
a(href="#{urls.viewports}") Viewports
li
a(href="#{urls.stream}") Streaming simulator
section#main-section.container
block content
script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
script(src="/static/bootstrap/js/bootstrap.min.js")
block js
block extrajs

13
views/multisphere/index.html
View File

@@ -1,13 +0,0 @@
<%{ '../withjs' }%>
<%{ title %>Multi-sphere<%} %>
<%{ extrajs %><script src="/static/js/multisphere/MultiSphere.js"></script><%} %>
<%{ content %>
<h2>Multiresolution sphere</h2>
<p>This is the first test of multi-resolution. In fact, it's not really one
multi-resolution sphere but many spheres with different resolutions. You can
change resolution by clicking on the canvas.</p>
<div id="container"></div>
<%} %>

14
views/prototype/index.html
View File

@@ -1,14 +0,0 @@
<%{ '../main' }%>
<%{ title %>Prototypes<%} %>
<%{ content %>
<h2>Index</h2>
There are two prototypes here :
<ul>
<li><a href="arrows/">One with arrows</a></li>
<li><a href="viewports/">One with viewports</a></li>
</ul>
<%} %>

48
views/prototype/prototype.html
View File

@@ -1,48 +0,0 @@
<%{ '../withjs' }%>
<%{ title %>Prototype with old cameras<%} %>
<%{ extrajs %><%- extrajs %><%} %>
<%{ extrahead %><link rel="stylesheet" href="/static/css/prototype.css" /><%} %>
<%{ content %>
<div id="main-div">
<!--<div style="display: none;">-->
<h2>3D Interface</h2>
<p>
This is the prototype of a 3D interface. You can move the camera with the arrow
keys of your keyboard, and change the angle of the camera by dragging and
dropping the scene around it (you can also use your numpad, 2 to look lower, 8
to look higher, 4 to look on the left and 6 to look on the right, but if you're
more comfortable with non-numpad keys, you can also use i for up, j for left, k
for down, and l for right).
</p>
<p>
Recommended views are displayed with a transparent red arrow. They disappear
when you come closer to them, and you can automatically move to them by
clicking on them. You can reset the camera at anytime by clicking on the reset
button.
</p>
<button class="btn btn-primary" id="full" style="margin-bottom: 10px; display: none;">Fullscreen</button>
<button class="btn btn-primary" id="reset" style="margin-bottom:10px">Reset camera</button>
<button class="btn btn-default" id="undo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
</button>
<button class="btn btn-default" id="redo" style="margin-bottom:10px">
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
</button>
<input type="checkbox" id="fullarrow" style="margin-bottom:10px">
<label for="fullarrow">Full arrow</label>
<input type="checkbox" id="collisions" style="margin-bottom:10px" checked>
<label for="collisions">Collisions</label>
<input type="checkbox" id="showarrows" style="margin-bottom:10px" checked>
<label for="showarrows">Show arrows</label>
</div>
<!-- </div> -->
<div id="container" style="padding: 0px; margin: 0px;" tabindex="1"></div>
<%} %>

16
views/stream/index.html
View File

@@ -1,16 +0,0 @@
<%{ '../withjs' }%>
<%{ title %>Streaming simulator<%} %>
<%{ extrajs %>
<script>params = {}; params.get= {}; params.get.res = <%= resolution %>;</script>
<script src="/static/js/stream/main.js"></script>
<%} %>
<%{ content %>
<h2>Streaming simulator</h2>
<p>In fact, it's not really streaming. The sphere is fully preloaded and then, a
mesh is created and vertices and faces are dynamically added to this mesh as
time goes by.</p>
<div style="border-width:1px; border-style: solid;" id="container"></div>
<%} %>

22
views/withjs.html
View File

@@ -1,22 +0,0 @@
<%{ 'main.html' }%>
<%{ js %>
<script src="/static/js/three.js"></script>
<script src="/static/js/Tools.js"></script>
<script src="/static/js/three/stats.min.js"></script>
<script src="/static/js/three/DDSLoader.js"></script>
<script src="/static/js/three/MTLLoader.js"></script>
<script src="/static/js/three/OBJLoader.js"></script>
<script src="/static/js/three/OBJMTLLoader.js"></script>
<script src="/static/js/three/OrbitControls.js"></script>
<script src="/static/js/Cube.js"></script>
<script src="/static/js/ProgressiveSphere.js"></script>
<script src="/static/js/Camera.js"></script>
<script src="/static/js/FixedCamera.js"></script>
<script src="/static/js/OldFixedCamera.js"></script>
<script src="/static/js/BouncingCube.js"></script>
<script src="/static/js/BufferGeometryToGeometry.js"></script>
<script src="/static/js/PointerCamera.js"></script>
<script src="/static/js/CameraContainer.js"></script>
<script src="/static/js/Hermite.js"></script>
<script>static_path="/static/"</script>
<%} %>

22
views/withjs.jade Normal file
View File

@@ -0,0 +1,22 @@
extends ./main
block js
script(src="/static/js/three.js")
script(src="/static/js/Tools.js")
script(src="/static/js/three/stats.min.js")
script(src="/static/js/three/DDSLoader.js")
script(src="/static/js/three/MTLLoader.js")
script(src="/static/js/three/OBJLoader.js")
script(src="/static/js/three/OBJMTLLoader.js")
script(src="/static/js/three/OrbitControls.js")
script(src="/static/js/Cube.js")
script(src="/static/js/ProgressiveSphere.js")
script(src="/static/js/Camera.js")
script(src="/static/js/FixedCamera.js")
script(src="/static/js/OldFixedCamera.js")
script(src="/static/js/BouncingCube.js")
script(src="/static/js/BufferGeometryToGeometry.js")
script(src="/static/js/PointerCamera.js")
script(src="/static/js/CameraContainer.js")
script(src="/static/js/Hermite.js")
script static_path="/static/";