From EJS to Jade

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

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

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

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.

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

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

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

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

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

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

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