From EJS to Jade

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

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.render('index.jade', res.locals, function(err, out) {
-        res.send(result);
+        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

index/index.js

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

package.json

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

views/404.html

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

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 <a href="#{urls.index}")>the index</a>

views/bouncing/index.html

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

views/index.html

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

views/main.html

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

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
+

views/multisphere/index.html

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

views/prototype/index.html

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

views/prototype/prototype.html

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

views/stream/index.html

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

views/withjs.html

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

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