Removed viewer from this repo and moved to face-reconstruction-viewer repo

viewer/.bowerrc

-{
-  "directory": "bower_components",
-  "analytics": false
-}

viewer/.editorconfig

-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_style = space
-indent_size = 2
-
-[*.js]
-indent_style = space
-indent_size = 2
-
-[*.hbs]
-insert_final_newline = false
-indent_style = space
-indent_size = 2
-
-[*.css]
-indent_style = space
-indent_size = 2
-
-[*.html]
-indent_style = space
-indent_size = 2
-
-[*.{diff,md}]
-trim_trailing_whitespace = false

viewer/.ember-cli

-{
-  /**
-    Ember CLI sends analytics information by default. The data is completely
-    anonymous, but there are times when you might want to disable this behavior.
-
-    Setting `disableAnalytics` to true will prevent any data from being sent.
-  */
-  "disableAnalytics": false
-}

viewer/.gitignore

-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# compiled output
-/dist
-/tmp
-
-# dependencies
-/node_modules
-/bower_components
-
-# misc
-/.sass-cache
-/connect.lock
-/coverage/*
-/libpeerconnection.log
-npm-debug.log
-testem.log

viewer/.jshintrc

-{
-  "predef": [
-    "document",
-    "window",
-    "-Promise"
-  ],
-  "bass": true,
-  "browser": true,
-  "boss": true,
-  "curly": true,
-  "debug": false,
-  "devel": true,
-  "eqeqeq": true,
-  "evil": true,
-  "forin": false,
-  "immed": false,
-  "laxbreak": false,
-  "newcap": true,
-  "noarg": true,
-  "noempty": false,
-  "nonew": false,
-  "nomen": false,
-  "onevar": false,
-  "plusplus": false,
-  "regexp": false,
-  "undef": true,
-  "sub": true,
-  "strict": false,
-  "white": false,
-  "eqnull": true,
-  "esnext": true,
-  "unused": true
-}

viewer/.travis.yml

----
-language: node_js
-node_js:
-  - "4"
-
-sudo: false
-
-cache:
-  directories:
-    - node_modules
-
-before_install:
-  - npm config set spin false
-  - npm install -g bower
-  - npm install phantomjs-prebuilt
-
-install:
-  - npm install
-  - bower install
-
-script:
-  - npm test

viewer/.watchmanconfig

-{
-  "ignore_dirs": ["tmp", "dist"]
-}

viewer/README.md

-# Viewer
-
-This README outlines the details of collaborating on this Ember application.
-A short introduction of this app could easily go here.
-
-## Prerequisites
-
-You will need the following things properly installed on your computer.
-
-* [Git](http://git-scm.com/)
-* [Node.js](http://nodejs.org/) (with NPM)
-* [Bower](http://bower.io/)
-* [Ember CLI](http://ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
-
-## Installation
-
-* `git clone <repository-url>` this repository
-* change into the new directory
-* `npm install`
-* `bower install`
-
-## Running / Development
-
-* `ember server`
-* Visit your app at [http://localhost:4200](http://localhost:4200).
-
-### Code Generators
-
-Make use of the many generators for code, try `ember help generate` for more details
-
-### Running Tests
-
-* `ember test`
-* `ember test --server`
-
-### Building
-
-* `ember build` (development)
-* `ember build --environment production` (production)
-
-### Deploying
-
-Specify what it takes to deploy your app.
-
-## Further Reading / Useful Links
-
-* [ember.js](http://emberjs.com/)
-* [ember-cli](http://ember-cli.com/)
-* Development Browser Extensions
-  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
-  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
-

viewer/app/adapters/application.js

-import JSONAPIAdapter from 'ember-data/adapters/json-api';
-
-export default JSONAPIAdapter.extend({
-    host: 'http://localhost:8888',
-    namespace: 'api/v1'
-});

viewer/app/app.js

-import Ember from 'ember';
-import Resolver from './resolver';
-import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
-
-let App;
-
-Ember.MODEL_FACTORY_INJECTIONS = true;
-
-App = Ember.Application.extend({
-  modulePrefix: config.modulePrefix,
-  podModulePrefix: config.podModulePrefix,
-  Resolver
-});
-
-loadInitializers(App, config.modulePrefix);
-
-export default App;

viewer/app/components/images-loader.js

-import Ember from 'ember';
-import ENV from 'viewer/config/environment';
-
-const ImageLoaderComponent = Ember.Component.extend({
-    store: Ember.inject.service(),
-    current_face: null,
-
-    imageIndexChanged: Ember.observer('image_index', function() {

-        this.send('updateCurrentFace');
-    }),
-
-    loadFaces: Ember.on('didInsertElement', function() {
-        this.get('store').findAll('face').then((faces) => {
-            this.set('faces', faces);
-            this.send('updateCurrentFace');
-        });
-    }),
-
-    faces: Ember.computed('params.[]', function(){
-        return this.get('params')[1];
-    }),
-
-    convertFilenameToBase64: function(fileUrl, resolve) {
-        var image = new Image();
-        image.crossOrigin = 'Anonymous';
-
-        image.onload = function() {
-            var canvas = document.createElement('CANVAS');
-            var ctx = canvas.getContext('2d');
-            var dataURL;
-            canvas.height = this.height;
-            canvas.width = this.width;
-            ctx.drawImage(this, 0, 0);
-            dataURL = canvas.toDataURL('image/jpeg');
-            console.log(dataUrl);
-            resolve(dataURL);
-            canvas = null;
-        };
-
-        image.src = fileUrl;
-    },
-
-    actions: {
-        /**
-        * Update the current face given the current index
-        */
-        updateCurrentFace() {
-            var face = this.get('faces').objectAt(this.get('image_index'));
-            var filename = face.get('filename');
-            //var that = this;
-
-            //var requestConversion = new Ember.RSVP.Promise(function(resolve, reject) {
-            //     that.convertFilenameToBase64(filename, resolve);
-            //});
-
-            //requestConversion.then((base64Image) => {
-            this.set('current_face', face);
-            //this.set('current_face_base64', base64Image);
-            this.set('current_face_filename', ENV.APP.staticURL + filename);
-        }
-    }
-});
-
-ImageLoaderComponent.reopenClass({
-    positionalParams: ['params']
-});
-
-export default ImageLoaderComponent;

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

-import Ember from 'ember';
-import THREE from 'npm:three';
-import dat from 'npm:dat-gui';
-
-
-const ThreeComponent = Ember.Component.extend({
-    store: Ember.inject.service(),
-    scene: null,
-
-    willRender() {
-        if (this.scene) {
-            return;
-        }
-
-        var scene = new THREE.Scene();
-        var gui = new dat.GUI();
-        var camera = new THREE.PerspectiveCamera(
-            75, window.innerWidth / window.innerHeight, 0.1, 1000
-        );
-
-        scene.add(camera);
-
-        var renderer = new THREE.WebGLRenderer();
-
-        this.set('scene', scene);
-        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();
-        });
-    },
-
-    /**
-     * Wait for elements to be inserted, else we can not find
-     * the threejs container.
-     * TODO: try to not use appendChild
-     */
-    loadGui: Ember.computed('faces', function() {
-        //var container = document.getElementById('threejs-container');
-        //container.appendChild(this.get('renderer').domElement);
-
-    }),
-
-    /**
-     * Adds the 'dat-gui' sliders
-     *
-     * See:
-     * http://learningthreejs.com/blog/2011/08/14/dat-gui-simple-ui-for-demos/
-     */
-    addSliders() {
-        var self = this;
-        var gui = this.get('gui');
-
-        // the sidebar 'dat-gui' controls
-        var reconstructionControls = {
-            index: 0,
-            shape_components: 58,
-            background_image: true
-        };
-
-        var length = this.get('faces').get('length');
-
-        var index = gui.add(reconstructionControls, 'index', 0, length - 1);
-        var shapeComponents = gui.add(reconstructionControls, 'shape_components', 0, 58);
-        var background = gui.add(reconstructionControls, 'background_image');
-
-        // on index change
-        index.onChange(function(newValue) {
-            // update the image_index, which is on the controller
-            self.set('image_index', parseInt(newValue));
-            self.sendAction('updateIndex', parseInt(newValue));
-        });
-
-        background.onChange(function(newValue) {
-            self.sendAction('updateBackground', newValue);
-        });
-
-        shapeComponents.onChange(function(newValue) {
-            self.sendAction('updateShapeComponents', newValue);
-        });
-
-        var shapeEigenValueControls = gui.addFolder('shape_eigen_values');
-
-        /**
-        * ShapeSlider callback function
-        */
-        var handleShapeSlidersCb = function(value) {
-            var sliderObject = this;
-
-            // slider index is the last character of the slider property string.
-            var sliderCharacterIndex = sliderObject.property.length - 1;
-            var sliderIndex = parseInt(sliderObject.property[sliderCharacterIndex]);
-
-            self.sendAction('updateShapeEigenValues', sliderIndex, value);
-        };
-
-        var shapeEigenValues = this.get('shape_eigenvalues');
-
-        shapeEigenValues.forEach(function(value, index) {
-            reconstructionControls['shape_eigen_value_' + index] = value;
-            var slider = shapeEigenValueControls.add(reconstructionControls, 'shape_eigen_value_' + index, 0.0, 10.0);
-
-            slider.onChange(handleShapeSlidersCb);
-        });
-
-        console.log(gui.__controllers);
-    }
-});
-
-export default ThreeComponent;

viewer/app/controllers/reconstruction.js

-import Ember from 'ember';
-
-const { get, inject } = Ember;
-
-export default Ember.Controller.extend({
-    websockets: inject.service(),
-
-    title: 'title',
-    faces: null,
-    image: null,
-
-    image_index: 0,
-    background_image: true,
-    shape_components: 58,
-    n_images: null,
-    reconstructed: null,
-    shape_eigenvalues: [],
-
-    socketRef: null,
-
-    init() {
-        const socket = get(this, 'websockets').socketFor('ws://localhost:8888/reconstruction');
-
-        socket.on('open', this.openHandler, this);
-        socket.on('message', this.messageHandler, this);
-        socket.on('close', this.closeHandler, this);
-
-        this.set('socketRef', socket);
-        this.initShapeEigenValues(15);
-    },
-
-    initShapeEigenValues(amountOfEigenValues) {
-        var shapeEigenValues = this.get('shape_eigenvalues');
-
-        shapeEigenValues.length = amountOfEigenValues;
-        shapeEigenValues.fill(1.0);
-
-        this.set('shape_eigenvalues', shapeEigenValues);
-    },
-
-    willDestroyElement() {
-        const socket = this.get('socketRef');
-
-        /*
-        * Remove all of the listeners you have setup.
-        */
-        socket.off('open', this.openHandler);
-        socket.off('message', this.messageHandler);
-        socket.off('close', this.closeHandler);
-
-        console.log('Websockets: Removed all handlers');
-    },
-
-    openHandler(event) {
-        console.log(`On open event has been called: ${event}`);
-
-        // get the reconstruction right after the socket opened
-        this.send('getReconstruction');
-    },
-
-    messageHandler(event) {
-        var message = JSON.parse(event.data);
-
-        if (message.n_images) {
-            this.set('n_images', message.n_images);
-        }
-
-        if (message.reconstructed) {
-            this.set('reconstructed', message.reconstructed);
-        }
-
-        if (message.error) {
-            console.log(message.error);
-        }
-
-        this.set('loading', false);
-    },
-
-    getReconstruction: Ember.observer(
-            'image_index', 'background_image',
-            'shape_components', 'shape_eigenvalues', function() {
-        this.send('getReconstruction');
-    }),
-
-    closeHandler(event) {
-        console.log(`On close event has been called: ${event}`);
-    },
-
-    actions: {
-        getImage(faceModel) {
-            this.set('loading', true);
-            var filename = faceModel.get('filename');
-
-            const socket = this.get('socketRef');
-
-            socket.send(
-                JSON.stringify({filename: filename})
-            );
-        },
-
-        getReconstruction() {
-            this.set('loading', true);
-            const socket = this.get('socketRef');
-            console.log(this.get('current_face_base64'));
-
-            socket.send(
-                JSON.stringify({
-                    reconstruction: {
-                        reconstruction_index: this.get('image_index'),
-                        background_image: this.get('background_image'),
-                        shape_components: this.get('shape_components'),
-                        shape_eigenvalues: this.get('shape_eigenvalues')
-                    }
-                })
-            );
-        },
-
-        // connects components together
-        // handles the upate action passed to a component
-        updateIndexComponentConnector(index) {
-            this.set('image_index', index);
-        },
-
-        updateBackgroundComponentConnector(showBackground) {
-            this.set('background_image', showBackground);
-        },
-
-        updateShapeComponents(components) {
-            console.log('shape_components', components);
-            this.set('shape_components', components);
-        },
-
-        updateShapeEigenValues(eigenValueIndex, value) {
-            console.log('shape_eigenvalues', value);
-            var eigenValues = this.get('shape_eigenvalues');
-            eigenValues[eigenValueIndex] = value;
-
-            this.set('shape_eigenvalues', eigenValues);
-            this.send('getReconstruction');
-        },
-
-        resetShapeEigenValues(/*gui*/) {
-            this.initShapeEigenValues(15);
-        }
-    }
-});

viewer/app/controllers/test-controller.js

-import Ember from 'ember';
-
-export default Ember.Controller.extend({
-});

viewer/app/index.html

-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <title>Viewer</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    {{content-for "head"}}
-
-    <link rel="stylesheet" href="assets/vendor.css">
-    <link rel="stylesheet" href="assets/viewer.css">
-
-    <link href="https://npmcdn.com/basscss@7.1.1/css/basscss.min.css"
-    rel="stylesheet">
-
-    {{content-for "head-footer"}}
-  </head>
-  <body>
-    <div class="clearfix">
-        {{content-for "body"}}
-    </div>
-
-        <script src="assets/vendor.js"></script>
-        <script src="assets/viewer.js"></script>
-
-    <div class="clearfix">
-        {{content-for "body-footer"}}
-    </div>
-  </body>
-</html>

viewer/app/models/face-model.js

-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { hasMany } from 'ember-data/relationships';
-
-export default Model.extend({
-    type: attr('string'),
-    maxComponents: attr('int'),
-    nEigenvalues: attr('int'),
-    faces: hasMany('face')
-});

viewer/app/models/face.js

-import Model from 'ember-data/model';
-import attr from 'ember-data/attr';
-import { belongsTo } from 'ember-data/relationships';
-
-export default Model.extend({
-    filename: attr('string'),
-    shape: attr(),
-    faceModel: belongsTo('face-model')
-});

viewer/app/resolver.js

-import Resolver from 'ember-resolver';
-
-export default Resolver;

viewer/app/router.js

-import Ember from 'ember';
-import config from './config/environment';
-
-const Router = Ember.Router.extend({
-  location: config.locationType
-});
-
-Router.map(function() {
-  this.route('reconstruction');
-});
-
-export default Router;

viewer/app/routes/application.js

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