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

From EJS to Jade

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.js
View File

@ -1,14 +1,13 @@
var http = require('http');
var express = require('express');
var pejs = require('pejs');
var module = require('./my_modules/filterInt');
var jade = require('jade');
var app = express();
var views = pejs();
var urls = require('./urls');
app.set('view engine', 'pejs');
app.set('view engine', 'jade');
app.use(function(req, res, next) {
res.locals.title = "3DUI";
@ -25,7 +24,7 @@ app.use(function(err, req, res, next) {
if (err.status === 404) {
res.setHeader('Content-Type', 'text/html');
views.render('404', res.locals, function(err, result) {
res.render('404.jade', res.locals, function(err, result) {
res.send(result);
});
}
@ -34,7 +33,7 @@ app.use(function(err, req, res, next) {
app.use(function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('404', res.locals, function(err, result) {
res.render('404.jade', res.locals, function(err, result) {
res.send(result);
});
});

5
controllers/bouncing/index.js
View File

@ -1,10 +1,7 @@
var pejs = require('pejs');
views = pejs();
module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('bouncing', res.locals, function(err, result) {
res.render('index.jade', res.locals, function(err, result) {
console.log(err);
res.send(result);
});

13
controllers/bouncing/views/index.jade Normal file
View File

@ -0,0 +1,13 @@
extends ../../../views/withjs
block title
title #{title} - Bouncing cube
block extrajs
script(src="/static/js/bouncing/BouncingMain.js")
block content
h2 Bouncing cube
p Click on the cube to make it jump !
#container

8
controllers/index/index.js
View File

@ -1,10 +1,8 @@
var pejs = require('pejs');
views = pejs();
module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('index', res.locals, function(err, result) {
res.send(result);
res.render('index.jade', res.locals, function(err, out) {
console.log(err);
res.send(out);
});
}

38
controllers/index/views/index.jade Normal file
View File

@ -0,0 +1,38 @@
extends ../../../views/main
block title
title 3DUI - Index
block content
h2 Index
ul
li
a(href="/bouncing/") A bouncing cube that jumps when you click on it
p.
Jumps and bounce when you click on it.
li
a(href="/multisphere/") Sphere with multi-resolution
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.
li
a(href="/prototype/") A proto of the real thing
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.
li
a(href="/stream/") Streaming simulation
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.

6
controllers/multisphere/index.js
View File

@ -1,10 +1,8 @@
var pejs = require('pejs');
views = pejs();
module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('multisphere', res.locals, function(err, result) {
res.render('index.jade', res.locals, function(err, result) {
console.log(err);
res.send(result);
});
}

17
controllers/multisphere/views/index.jade Normal file
View File

@ -0,0 +1,17 @@
extends ../../../views/withjs
block title
title #{title} - Multi-sphere
block extrajs
script(src="/static/js/multisphere/MultiSphere.js")
block content
h2 Multiresolution sphere
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.
#container

13
controllers/prototype/index.js vendored
View File

@ -1,13 +1,8 @@
var express = require('express')
var pejs = require('pejs');
app = express();
views = pejs();
module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('prototype', res.locals, function(err, result) {
res.render('index.jade', res.locals, function(err, result) {
console.log(err);
res.send(result);
});
}
@ -17,7 +12,7 @@ module.exports.arrows = function(req, res) {
res.locals.extrajs = '<script src="/static/js/prototype/arrows/main.js"></script>';
views.render('prototype/prototype', res.locals, function(err, result) {
res.render('prototype.jade', res.locals, function(err, result) {
console.log(err);
res.send(result);
});
@ -28,7 +23,7 @@ module.exports.viewports = function(req, res) {
res.locals.extrajs = '<script src="/static/js/prototype/viewports/main.js"></script>';
views.render('prototype/prototype', res.locals, function(err, result) {
res.render('prototype.jade', res.locals, function(err, result) {
res.send(result);
});
}

14
controllers/prototype/views/index.jade Normal file
View File

@ -0,0 +1,14 @@
extends ../../../views/main
block title
title #{title} - Prototype
block content
h2 Index
p There are two prototypes here :
ul
li
a(href="arrows/") One with arrows
li
a(href="viewports/") One with viewports
ul

50
controllers/prototype/views/prototype.jade Normal file
View File

@ -0,0 +1,50 @@
extends ../../../views/withjs
block title
title #{title} - Prototype
block extrajs
#{extrajs}
block extrahead
link(rel="stylesheet" href="/static/css/prototype.css")
block content
#main-div
h2 3D Interface
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
| 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.
button#full.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom': '10px', display: 'none'}) Fullscreen
button#reset.btn.btn-primary(style={'margin-right': '10px', 'margin-bottom':'10px'}) Reset camera
button#undo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom': '10px'})
span.glyphicon.glyphicon-triangle-left('aria-hidden'="true")
button#redo.btn.btn-default(style={'margin-right': '10px', 'margin-bottom':'10px'})
span.glyphicon.glyphicon-triangle-right('aria-hidden'="true")
input#fullarrow(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'})
label(for="fullarrow" style={'margin-right':'10px'}) Full arrow
input#collisions(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
label(for="collisions" style={'margin-right':'10px'}) Collisions
input#showarrows(type="checkbox", style={'margin-right': '10px', 'margin-bottom': '10px'}, checked)
label(for="showarrows" style={'margin-right':'10px'}) Show arrows
#container(style={'padding': '0px', 'margin': '0px'}, tabindex="1")

6
controllers/stream/index.js
View File

@ -1,8 +1,5 @@
var pejs = require('pejs');
var tools = require('../../my_modules/filterInt')
views = pejs();
module.exports.index = function(req, res, next) {
// Parse get argument res
@ -22,7 +19,8 @@ module.exports.index = function(req, res, next) {
}
res.setHeader('Content-Type', 'text/html');
views.render('stream/index.html', res.locals, function(err, result) {
res.render('index.jade', res.locals, function(err, result) {
console.log(err);
res.send(result);
});
}

18
controllers/stream/views/index.jade Normal file
View File

@ -0,0 +1,18 @@
extends ../../../views/withjs
block title
title #{title} - Streaming simulator
block extrajs
script params = {}; params.get= {}; params.get.res = #{resolution}
script(src="/static/js/stream/main.js")
block content
h2 Streaming simulator
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.
#container

10
index/index.js
View File

@ -1,10 +0,0 @@
module.exports = function(app, urls) {
app.get(urls.index, function(req, res) {
res.setHeader('Content-Type', 'text/html');
views.render('index', res.locals, function(err, result) {
console.log(err);
res.send(result);
});
});
}

3
package.json
View File

@ -3,7 +3,6 @@
"version": "2.0.0",
"dependencies": {
"express": "4.0",
"ejs": "2.3.1",
"pejs": "0.6.5"
"jade": "1.9.2"
}
}

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/";