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

9
app.js
View File

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

View File

@ -1,10 +1,7 @@
var pejs = require('pejs');
views = pejs();
module.exports.index = function(req, res) { module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html'); 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); console.log(err);
res.send(result); res.send(result);
}); });

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

View File

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

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.

View File

@ -1,10 +1,8 @@
var pejs = require('pejs');
views = pejs();
module.exports.index = function(req, res) { module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html'); 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); res.send(result);
}); });
} }

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

View File

@ -1,13 +1,8 @@
var express = require('express')
var pejs = require('pejs');
app = express();
views = pejs();
module.exports.index = function(req, res) { module.exports.index = function(req, res) {
res.setHeader('Content-Type', 'text/html'); 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); 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>'; 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); console.log(err);
res.send(result); 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>'; 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); res.send(result);
}); });
} }

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

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")

View File

@ -1,8 +1,5 @@
var pejs = require('pejs');
var tools = require('../../my_modules/filterInt') var tools = require('../../my_modules/filterInt')
views = pejs();
module.exports.index = function(req, res, next) { module.exports.index = function(req, res, next) {
// Parse get argument res // Parse get argument res
@ -22,7 +19,8 @@ module.exports.index = function(req, res, next) {
} }
res.setHeader('Content-Type', 'text/html'); 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); res.send(result);
}); });
} }

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

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);
});
});
}

View File

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

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>

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>
<%} %>

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>
<%} %>

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

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>
<%} %>

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>
<%} %>

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>
<%} %>

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>
<%} %>

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