Update viewer app, moved to static file server and only websockets for reconstruction image

src/aam.py

@@ -21,6 +21,18 @@ class AAMPoints():
     these points transparent.
     """
     def __init__(self, normalized_flattened_points_list=None, points_list=None, actual_shape=()):
+        """
+        Args:
+            normalized_flattened_points_list(ndarray): flattened list of points.
+                This means that if the points consist of x,y coordinates, then all this
+                list will be: [x1, y1, x2, y2, ... xi, yi]
+            points_list(ndarray): this list is the same points but then not
+                flattened, [[x1, y1], [x2, y2], ... [xi, yi]]. You either create
+                this object with this argument or the normalized_flattened_points_list
+            actual_shape(tuple): this is important if you want to reconstruct
+                the original list, see get_scaled_points() for usage.
+
+        """
         self.normalized_flattened_points_list = normalized_flattened_points_list
         self.points_list = points_list
         self.actual_shape = actual_shape
@@ -29,6 +41,10 @@ class AAMPoints():
     def get_bounding_box(self):
         """
         Get the bounding box around the points.
+
+        Returns:
+            OpenCV rectangle:
+                x, y, w, h
         """
         if self.bounding_box is None:
             return self.calculate_bounding_box()

src/server.py

 import json
+import os.path
 import base64
 from glob import glob
 
-from tornado import websocket, web, ioloop
+from tornado import websocket, web, ioloop, autoreload
 
 import imm_points as imm
 
 BASE = '../viewer/app'
 FILES_DIR = '../data/'
-FACE_DB = '{}{}'.format(FILES_DIR, 'imm_face_db')
+FACE_DB_NAME = 'imm_face_db'
+FACE_DB = '{}{}'.format(FILES_DIR, FACE_DB_NAME)
 
 
 class ImageWebSocketHandler(websocket.WebSocketHandler):
@@ -105,7 +107,7 @@ class FaceHandler(ApiHandler):
                 'type': 'faces',
                 'id': id,
                 'attributes': {
-                    'filename': filename,
+                    'filename': '{}/{}'.format(FACE_DB_NAME, os.path.basename(self.images[id])),
                     'shape': Points.get_scaled_points(shape=(480, 640)).tolist()
                 }
             })
@@ -120,9 +122,12 @@ class FaceHandler(ApiHandler):
 app = web.Application([
     (r'/reconstruction[\/0-9]?', ImageWebSocketHandler),
     (r'/api/v1/faces[\/0-9]?', FaceHandler),
+    (r'/data/(.*)', web.StaticFileHandler, {'path': '../data'}),
 ])
 
 
 if __name__ == '__main__':
     app.listen(8888)
-    ioloop.IOLoop.instance().start()
+    ioloop = ioloop.IOLoop.instance()
+    autoreload.start(ioloop)
+    ioloop.start()

viewer/app/components/images-loader.js

 import Ember from 'ember';
+import ENV from 'viewer/config/environment';
 
-export default Ember.Component.extend({
-    websockets: inject.service(),
-    socketRef: null,
-    images: null,
+const ImageLoaderComponent = Ember.Component.extend({
+    store: Ember.inject.service(),
+    current_face: null,
 
-    init() {
-        /*
-        * 2) The next step you need to do is to create your actual websocket. Calling socketFor
-        * will retrieve a cached websocket if one exists or in this case it
-        * will create a new one for us.
-        */
-        const socket = get(this, 'websockets').socketFor('ws://localhost:8888/reconstruction/images');
-
-        /*
-        * 3) The next step is to define your event handlers. All event handlers
-        * are added via the `on` method and take 3 arguments: event name, callback
-        * function, and the context in which to invoke the callback. All 3 arguments
-        * are required.
-        */
-        socket.on('open', this.openHandler, this);
-        socket.on('message', this.messageHandler, this);
-        socket.on('close', this.closeHandler, this);
+    imageIndexChanged: Ember.observer('image_index', function() {

+        this.send('updateCurrentFace');
+    }),
 
-        this.set('socketRef', socket);
-    },
+    loadFaces: Ember.on('didInsertElement', function() {
+        this.get('store').findAll('face').then((faces) => {
+            this.set('faces', faces);
+            this.send('updateCurrentFace');
+        });
+    }),
 
-    willDestroyElement() {
-        const socket = this.get('socketRef');
+    faces: Ember.computed('params.[]', function(){
+        return this.get('params')[1];
+    }),
 
-        /*
-        * 4) The final step is to remove all of the listeners you have setup.
+    actions: {
+        /**
+        * Update the current face given the current index
         */
-        socket.off('open', this.openHandler);
-        socket.off('message', this.messageHandler);
-        socket.off('close', this.closeHandler);
-    },
-
-    openHandler(event) {
-        console.log(`On open event has been called: ${event}`);
-    },
-
-    messageHandler(event) {
-        var message = JSON.parse(event.data);
-        this.set('image', message.image);
-
-        console.log(`Message: ${'received image'}`);
-    },
+        updateCurrentFace() {
+            var face = this.get('faces').objectAt(this.get('image_index'));
 
-    closeHandler(event) {
-        console.log(`On close event has been called: ${event}`);
-    },
-
-    actions: {
-        get_image() {
-            const socket = this.get('socketRef');
-            socket.send(
-                JSON.stringify({image_index: 1}
-            ));
-        },
+            this.set('current_face', face);
+            this.set('current_face_filename', ENV.APP.staticURL + face.get('filename'));
+        }
     }
 });
+
+ImageLoaderComponent.reopenClass({
+    positionalParams: ['params']
+});
+
+export default ImageLoaderComponent;

viewer/app/components/three-js-reconstruction.js

@@ -2,8 +2,10 @@ import Ember from 'ember';
 import THREE from 'npm:three';
 import dat from 'npm:dat-gui';
 
-export default Ember.Component.extend({
+
+const ThreeComponent = Ember.Component.extend({
     store: Ember.inject.service(),
+    scene: null,
 
     willRender() {
         if (this.scene) {
@@ -25,6 +27,11 @@ export default Ember.Component.extend({
         this.set('camera', camera);
         this.set('renderer', renderer);
         this.set('gui', gui);
+
+        this.get('store').findAll('face').then((faces) => {
+            this.set('faces', faces);
+            this.addSliders();
+        });
     },
 
     /**
@@ -32,17 +39,15 @@ export default Ember.Component.extend({
      * the threejs container.
      * TODO: try to not use appendChild
      */
-    loadGui: Ember.on('didInsertElement', function() {
+    loadGui: Ember.computed('faces', function() {
         //var container = document.getElementById('threejs-container');
         //container.appendChild(this.get('renderer').domElement);
 
-        this.addSliders();
     }),
 
     addSliders() {
         var self = this;
         var gui = this.get('gui');
-
         var obj = {
             name: "Image filename",
             index: 0
@@ -53,13 +58,18 @@ export default Ember.Component.extend({
             components: 0
         };
 
+        var length = this.get('faces').get('length');
+
         var imagesSlider = gui.add(obj, "index").min(0).max(
-                this.n_images - 1).step(1);
+                length - 1).step(1);
 
-        gui.add(components, "components").min(0).max(this.n_images - 1).step(1);
+        gui.add(components, "components").min(0).max(length - 1).step(1);
 
         imagesSlider.onChange(function(newValue) {
             self.set('image_index', newValue);
+            self.sendAction('update', newValue);
         });
     }
 });
+
+export default ThreeComponent;

viewer/app/controllers/reconstruction.js

@@ -5,16 +5,15 @@ const { get, inject } = Ember;
 export default Ember.Controller.extend({
     title: 'title',
     websockets: inject.service(),
-    socketRef: null,
+    faces: null,
     image: null,
-    reconstructed: null,
-    n_images: null,
-    n_components: null,
+
     image_index: 0,
+    n_components: null,
+    n_images: null,
+    reconstructed: null,
 
-    imageIndexChanged: Ember.observer('image_index', function() {

-        this.send('getImage');
-    }),
+    socketRef: null,
 
     init() {
         const socket = get(this, 'websockets').socketFor('ws://localhost:8888/reconstruction');
@@ -24,15 +23,6 @@ export default Ember.Controller.extend({
         socket.on('close', this.closeHandler, this);
 
         this.set('socketRef', socket);
-
-        this.get('store').findAll('face').
-                then(function(faces) {
-            var face = faces.objectAt(0);
-            this.send('getImage', face);
-        }, function(reason) {
-            console.log('fail');
-            console.log(reason);
-        });
     },
 
     willDestroyElement() {
@@ -47,7 +37,6 @@ export default Ember.Controller.extend({
     },
 
     openHandler(event) {
-        console.log(event);
         console.log(`On open event has been called: ${event}`);
     },
 
@@ -58,9 +47,9 @@ export default Ember.Controller.extend({
             this.set('n_images', message.n_images);
         }
 
-        if (message.image) {
-            this.set('image', message.image);
-        }
+        //if (message.image) {
+        //    this.set('image', message.image);
+        //}
 
         if (message.reconstructed) {
             this.set('reconstructed', message.reconstructed);
@@ -76,6 +65,10 @@ export default Ember.Controller.extend({
         //});
     },
 
+    getReconstruction: Ember.computed('faces', function() {
+        console.log(this.get('faces'));
+    }),
+
     closeHandler(event) {
         console.log(`On close event has been called: ${event}`);
     },
@@ -84,7 +77,6 @@ export default Ember.Controller.extend({
         getImage(faceModel) {
             var filename = faceModel.get('filename');
             const socket = this.get('socketRef');
-            console.log(socket);
 
             socket.send(
                 JSON.stringify({filename: filename})
@@ -97,6 +89,12 @@ export default Ember.Controller.extend({
             socket.send(
                 JSON.stringify({reconstruction_index: this.get('image_index')}
             ));
+        },
+
+        // connects components together
+        // handles the upate action passed to a component
+        updateComponentConnector(index) {
+            this.set('image_index', index);
         }
     }
 });

viewer/app/routes/application.js

+import Ember from 'ember';
+
+export default Ember.Route.extend({
+});

viewer/app/routes/reconstruction.js

+import Ember from 'ember';
+
+export default Ember.Route.extend({
+    model() {
+        //return this.get('store').findAll('face');
+    }
+});

viewer/app/templates/application.hbs

+<nav class="clearfix white bg-black">
+    {{#link-to "index" class="btn py2"}}Index{{/link-to}}
+    {{#link-to "reconstruction" class="btn py2"}}Reconstruction{{/link-to}}
+</nav>
+
+{{outlet}}

viewer/app/templates/components/images-loader.hbs

+{{# if current_face_filename }}
+    <img src='{{current_face_filename}}' alt='missing original'>
+{{/if}}
+
 {{yield}}

viewer/app/templates/components/three-js-reconstruction.hbs

-<div id="threejs-container">
-</div>
+<div id="threejs-container"> </div>
+{{yield}}

viewer/app/templates/reconstruction.hbs

 <h1>Reconstruction</h1>
 
-
 <div class="container">
     <div class="clearfix">
         <div class="col col-6">
-            {{#if image }}
-                <img src='data:image/jpg;base64,{{image}}' alt='missing image'>
-            {{/if}}
+            {{images-loader image_index=image_index}}
         </div>
+
         <div class="col col-6">
             {{#if reconstructed }}
-                <img src='data:image/jpg;base64,{{reconstructed}}' alt='missing image'>
+                <img src='data:image/jpg;base64,{{reconstructed}}'
+                    alt='missing image'>
             {{/if}}
         </div>
     </div>
 
     <div class="col col-12 px2">
-        {{#if n_images }}
-            {{
-                three-js-reconstruction
-                    n_images=n_images
-                    image_index=image_index
-                    n_components=n_components
-            }}
-        {{/if}}
+        {{three-js-reconstruction update=(action 'updateComponentConnector')}}
     </div>
 </div>
 

viewer/config/environment.js

@@ -20,6 +20,7 @@ module.exports = function(environment) {
   };
 
   if (environment === 'development') {
+    ENV.APP.staticURL = 'http://localhost:8888/data/';
     // ENV.APP.LOG_RESOLVER = true;
     // ENV.APP.LOG_ACTIVE_GENERATION = true;
     // ENV.APP.LOG_TRANSITIONS = true;

viewer/tests/unit/routes/application-test.js

+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:application', 'Unit | Route | application', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});

viewer/tests/unit/routes/reconstruction-test.js

+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:reconstruction', 'Unit | Route | reconstruction', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});