diff --git a/app.js b/app.js index 9abea75..48d9b86 100644 --- a/app.js +++ b/app.js @@ -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); }); }); diff --git a/controllers/bouncing/index.js b/controllers/bouncing/index.js index 7645fa6..5a7f792 100644 --- a/controllers/bouncing/index.js +++ b/controllers/bouncing/index.js @@ -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); }); diff --git a/controllers/bouncing/views/index.jade b/controllers/bouncing/views/index.jade new file mode 100644 index 0000000..454cd92 --- /dev/null +++ b/controllers/bouncing/views/index.jade @@ -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 diff --git a/controllers/index/index.js b/controllers/index/index.js index 8808a55..e64590b 100644 --- a/controllers/index/index.js +++ b/controllers/index/index.js @@ -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); }); } diff --git a/controllers/index/views/index.jade b/controllers/index/views/index.jade new file mode 100644 index 0000000..3a4f6e1 --- /dev/null +++ b/controllers/index/views/index.jade @@ -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. diff --git a/controllers/multisphere/index.js b/controllers/multisphere/index.js index 4e0332d..5a7f792 100644 --- a/controllers/multisphere/index.js +++ b/controllers/multisphere/index.js @@ -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); }); } diff --git a/controllers/multisphere/views/index.jade b/controllers/multisphere/views/index.jade new file mode 100644 index 0000000..d305464 --- /dev/null +++ b/controllers/multisphere/views/index.jade @@ -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 diff --git a/controllers/prototype/index.js b/controllers/prototype/index.js index a80d240..29bb6da 100644 --- a/controllers/prototype/index.js +++ b/controllers/prototype/index.js @@ -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 = ''; - 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 = ''; - views.render('prototype/prototype', res.locals, function(err, result) { + res.render('prototype.jade', res.locals, function(err, result) { res.send(result); }); } diff --git a/controllers/prototype/views/index.jade b/controllers/prototype/views/index.jade new file mode 100644 index 0000000..6740172 --- /dev/null +++ b/controllers/prototype/views/index.jade @@ -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 diff --git a/controllers/prototype/views/prototype.jade b/controllers/prototype/views/prototype.jade new file mode 100644 index 0000000..3aa2a7a --- /dev/null +++ b/controllers/prototype/views/prototype.jade @@ -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") diff --git a/controllers/stream/index.js b/controllers/stream/index.js index 5d25965..7fe2ae8 100644 --- a/controllers/stream/index.js +++ b/controllers/stream/index.js @@ -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); }); } diff --git a/controllers/stream/views/index.jade b/controllers/stream/views/index.jade new file mode 100644 index 0000000..b8e5cc9 --- /dev/null +++ b/controllers/stream/views/index.jade @@ -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 diff --git a/index/index.js b/index/index.js deleted file mode 100644 index 4fd522b..0000000 --- a/index/index.js +++ /dev/null @@ -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); - }); - }); -} diff --git a/package.json b/package.json index 9867505..0fcd6bb 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,6 @@ "version": "2.0.0", "dependencies": { "express": "4.0", - "ejs": "2.3.1", - "pejs": "0.6.5" + "jade": "1.9.2" } } diff --git a/views/404.html b/views/404.html deleted file mode 100644 index 21a06ad..0000000 --- a/views/404.html +++ /dev/null @@ -1,10 +0,0 @@ -<%{ 'main' }%> -<%{ title %>404<%} %> -<%{ content %> -
-

Error 404

-

- There is nothing there... maybe you want to go back to the index -

-
-<%} %> diff --git a/views/404.jade b/views/404.jade new file mode 100644 index 0000000..691cd77 --- /dev/null +++ b/views/404.jade @@ -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 the index diff --git a/views/bouncing/index.html b/views/bouncing/index.html deleted file mode 100644 index 66b06f8..0000000 --- a/views/bouncing/index.html +++ /dev/null @@ -1,11 +0,0 @@ -<%{ '../withjs' }%> -<%{ title %>Bouncing cube<%} %> -<%{ extrajs %><%} %> - -<%{ content %> -

Bouncing cube

- -

Click on the cube to make it jump !

- -
-<%} %> diff --git a/views/index.html b/views/index.html deleted file mode 100644 index 9c675ea..0000000 --- a/views/index.html +++ /dev/null @@ -1,43 +0,0 @@ -<%{ './main' }%> - -<%{ title %>Index<%} %> - -<%{ content %> -

Index

- -<%} %> diff --git a/views/main.html b/views/main.html deleted file mode 100644 index 38ebf0c..0000000 --- a/views/main.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - - - - - - <%{{ extrahead }}%> - <%= title %> - <%{{ title }}%> - - - -
- <%{{ content }}%> -
- - - <%{{ js }}%> - <%{{ extrajs }}%> - - diff --git a/views/main.jade b/views/main.jade new file mode 100644 index 0000000..49d39d2 --- /dev/null +++ b/views/main.jade @@ -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 + diff --git a/views/multisphere/index.html b/views/multisphere/index.html deleted file mode 100644 index dfa40e4..0000000 --- a/views/multisphere/index.html +++ /dev/null @@ -1,13 +0,0 @@ -<%{ '../withjs' }%> -<%{ title %>Multi-sphere<%} %> -<%{ extrajs %><%} %> - -<%{ content %> -

Multiresolution sphere

- -

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.

- -
-<%} %> diff --git a/views/prototype/index.html b/views/prototype/index.html deleted file mode 100644 index ffa562f..0000000 --- a/views/prototype/index.html +++ /dev/null @@ -1,14 +0,0 @@ -<%{ '../main' }%> -<%{ title %>Prototypes<%} %> -<%{ content %> - -

Index

-There are two prototypes here : - - -<%} %> - diff --git a/views/prototype/prototype.html b/views/prototype/prototype.html deleted file mode 100644 index 8354aa9..0000000 --- a/views/prototype/prototype.html +++ /dev/null @@ -1,48 +0,0 @@ -<%{ '../withjs' }%> - -<%{ title %>Prototype with old cameras<%} %> -<%{ extrajs %><%- extrajs %><%} %> -<%{ extrahead %><%} %> - -<%{ content %> -
- -

3D Interface

- -

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

- -

-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. -

- - - - - - - - - - - - - -
- - -
-<%} %> diff --git a/views/stream/index.html b/views/stream/index.html deleted file mode 100644 index dd5e580..0000000 --- a/views/stream/index.html +++ /dev/null @@ -1,16 +0,0 @@ -<%{ '../withjs' }%> -<%{ title %>Streaming simulator<%} %> -<%{ extrajs %> - - -<%} %> - -<%{ content %> -

Streaming simulator

- -

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.

- -
-<%} %> diff --git a/views/withjs.html b/views/withjs.html deleted file mode 100644 index 30d50b9..0000000 --- a/views/withjs.html +++ /dev/null @@ -1,22 +0,0 @@ -<%{ 'main.html' }%> -<%{ js %> - - - - - - - - - - - - - - - - - - - -<%} %> diff --git a/views/withjs.jade b/views/withjs.jade new file mode 100644 index 0000000..cdc0e2b --- /dev/null +++ b/views/withjs.jade @@ -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/";