Commit 7d1908fa authored by Richard Torenvliet's avatar Richard Torenvliet

Add all files to this repo

parents
{
"directory": "bower_components",
"analytics": false
}
# 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
{
/**
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
}
# 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
{
"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
}
---
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
{
"ignore_dirs": ["tmp", "dist"]
}
# 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/)
import JSONAPIAdapter from 'ember-data/adapters/json-api';
export default JSONAPIAdapter.extend({
host: 'http://localhost:8888',
namespace: 'api/v1'
});
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;
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;
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;
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);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
});
<!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>
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')
});
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')
});
import Resolver from 'ember-resolver';
export default Resolver;
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;
import Ember from 'ember';
export default Ember.Route.extend({
});
import Ember from 'ember';
export default Ember.Route.extend({
});
import Ember from 'ember';
export default Ember.Route.extend({
model() {
//return this.get('store').findAll('face');
}
});
canvas { width: 100%; height: 100% }
.empty-image-container {
width: 100%;
height: 480px;
}
<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}}
{{# if current_face_filename }}
<img src='{{current_face_filename}}' alt='missing original'>
{{/if}}
{{yield}}
<div id="threejs-container"> </div>
{{yield}}
<h1>Reconstruction</h1>
<div class="container">
<div class="clearfix">
<div class="col col-6">
{{images-loader image_index=image_index
background_image=background_image
shape_components=shape_components
loading=loading
}}
</div>
<div class="col col-6">
<div class="table">
<div class="table-cell align-middle">
{{#if reconstructed }}
<img src='data:image/jpg;base64,{{reconstructed}}'
alt='missing image'>
{{/if}}
{{#if loading }}
{{fa-icon "spinner" spin=true size='lg'}} Loading..
{{/if}}
</div>
</div>
</div>
</div>
<div class="col col-12 px2">
{{three-js-reconstruction
shape_eigenvalues=shape_eigenvalues
updateIndex=(action 'updateIndexComponentConnector')
updateBackground=(action 'updateBackgroundComponentConnector')
updateShapeComponents=(action 'updateShapeComponents')
updateShapeEigenValues=(action 'updateShapeEigenValues')
resetShapeEigenValues=(action 'resetShapeEigenValues')
}}
</div>
</div>
{
"name": "viewer",
"dependencies": {
"ember": "~2.6.0",
"ember-cli-shims": "0.1.1",
"ember-cli-test-loader": "0.2.2",
"ember-qunit-notifications": "0.1.0",
"urijs": "^1.18.1",
"basscss": "~8.0.1",
"font-awesome": "~4.5.0"
}
}
/* jshint node: true */
module.exports = function(environment) {