From 25d6d3a89a13712cc83a3767850bc7258745234f Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Mon, 24 Aug 2015 17:13:14 +0200 Subject: [PATCH] Created checker interface --- controllers/prototype/dbrequests.js | 7 +- controllers/prototype/index.js | 26 ++ controllers/prototype/urls.js | 1 + .../prototype/views/prototype_checker.jade | 15 + js/Makefile | 7 +- js/l3d/apps/prototype/coin-checker/main.js | 278 ++++++++++++++++++ 6 files changed, 330 insertions(+), 4 deletions(-) create mode 100644 controllers/prototype/views/prototype_checker.jade create mode 100644 js/l3d/apps/prototype/coin-checker/main.js diff --git a/controllers/prototype/dbrequests.js b/controllers/prototype/dbrequests.js index c56975c..86e96a7 100644 --- a/controllers/prototype/dbrequests.js +++ b/controllers/prototype/dbrequests.js @@ -834,7 +834,7 @@ DBReq.ExpIdChecker = function(id, finishAction) { DBReq.ExpIdChecker.prototype.execute = function() { var self = this; this.client.query( - "SELECT scene_id FROM experiment WHERE id = $1;", + "SELECT scene_id FROM experiment, CoinCombination WHERE CoinCombination.id = Experiment.coin_combination_id AND Experiment.id = $1;", [self.id], function(err, result) { if (result === undefined || result.rows.length === 0) { @@ -888,8 +888,9 @@ DBReq.ExpGetter.prototype.execute = function() { "users.worker_id as username, " + "scene.name as scenename, " + "users.id as user_id " + - "FROM experiment, users, scene " + - "WHERE experiment.user_id = users.id and scene.id = experiment.scene_id " + + "FROM experiment, users, scene, CoinCombination " + + "WHERE experiment.user_id = users.id and scene.id = CoinCombination.scene_id AND " + + " Experiment.coin_combination_id = CoinCombination.id " + "ORDER BY experiment.id;", [], function(err, result) { diff --git a/controllers/prototype/index.js b/controllers/prototype/index.js index 43df7e0..07a26b6 100644 --- a/controllers/prototype/index.js +++ b/controllers/prototype/index.js @@ -239,6 +239,32 @@ module.exports.viewer = function(req, res, next) { }; +module.exports.checker = function(req, res, next) { + + var scene = req.params.scene; + + switch (scene) { + + case 'peach': res.locals.scene = "L3D.initPeach"; break; + case 'coolcoolmountain': res.locals.scene = "L3D.initMountain"; break; + case 'whomp': res.locals.scene = "L3D.initWhomp"; break; + case 'bobomb': res.locals.scene = "L3D.initBobomb"; break; + default: + // 404 + var err = new Error('Incorrect scene'); + err.status = 404; + next(err); + break; + + } + + res.setHeader('Content-Type', 'text/html'); + res.render('prototype_checker.jade', res.locals, function(err, result) { + res.send(result); + }); + +}; + module.exports.userstudy = function(req, res) { res.setHeader('Content-Type', 'text/html'); diff --git a/controllers/prototype/urls.js b/controllers/prototype/urls.js index 4a829c7..3b9830e 100644 --- a/controllers/prototype/urls.js +++ b/controllers/prototype/urls.js @@ -8,5 +8,6 @@ module.exports = { '/prototype/sponza': 'sponza', '/prototype/coin-creator/:scene': 'clicker', '/prototype/coin-viewer/:scene': 'viewer', + '/prototype/coin-checker/:scene': 'checker', '/user-study': 'userstudy' }; diff --git a/controllers/prototype/views/prototype_checker.jade b/controllers/prototype/views/prototype_checker.jade new file mode 100644 index 0000000..542f65a --- /dev/null +++ b/controllers/prototype/views/prototype_checker.jade @@ -0,0 +1,15 @@ +extends ./prototype + +block title + title #{title} - Prototype + +block mainjs + script initMainScene = #{scene}; + script Recommendation = L3D.ArrowRecommendation; + + script(src="/static/js/coinchecker.min.js") + +block extrabutton + //-button#save.btn.btn-primary.navbar-btn(style={'margin-right': '10px', 'margin-bottom':'10px'}, onclick="saveCoins();") Save coins + button#coins-remaining.btn.btn-primary.navbar-btn(style={'margin-right':'10px', 'margin-bottom':'10px'}) Lol coins remaining + diff --git a/js/Makefile b/js/Makefile index baa041f..8db62da 100644 --- a/js/Makefile +++ b/js/Makefile @@ -6,7 +6,7 @@ else CLOSURE=../utils/simple-compiler/compiler.sh endif -all: L3D L3DP Socket Three Stats Bouncing Multisphere StreamingSimulator PrototypeReplay PrototypeInteractive Tutorial TestList CoinCreator CoinViewer StarRating +all: L3D L3DP Socket Three Stats Bouncing Multisphere StreamingSimulator PrototypeReplay PrototypeInteractive Tutorial TestList CoinCreator CoinViewer CoinChecker StarRating StarRating: cp star-rating.min.js ../static/js/ @@ -99,6 +99,11 @@ CoinViewer: --js l3d/apps/prototype/coin-viewer/main.js \ --js_output_file ../static/js/coinviewer.min.js +CoinChecker: + $(CLOSURE) $(OPT) \ + --js l3d/apps/prototype/coin-checker/main.js \ + --js_output_file ../static/js/coinchecker.min.js + PrototypeReplay: $(CLOSURE) $(OPT) \ --js l3d/apps/prototype/ButtonManager.js \ diff --git a/js/l3d/apps/prototype/coin-checker/main.js b/js/l3d/apps/prototype/coin-checker/main.js new file mode 100644 index 0000000..3ef94e6 --- /dev/null +++ b/js/l3d/apps/prototype/coin-checker/main.js @@ -0,0 +1,278 @@ +// Let's be sure we avoid using global variables +var onWindowResize = (function() { + +// Disable scrolling +window.onscroll = function () { window.scrollTo(0, 0); }; +document.addEventListener('contextmenu', function(e) { + e.preventDefault(); +}); +window.onload = main; + +var stats; +var renderer, scene, container; +var clickableObjects = []; +var recommendations, objectClicker; +var previewer; +var camera1; +var coins = []; +var previousTime; +var pointer; +var startCanvas; +var name; + +function sceneName() { + switch (initMainScene) { + case L3D.initPeach: + return 'L3D.initPeach'; + case L3D.initWhomp: + return 'L3D.initWhomp'; + case L3D.initBobomb: + return 'L3D.initBobomb'; + case L3D.initMountain: + return 'L3D.initMountain'; + } +} + +saveCoins = function() { + + var tmp = 0; + for (var i = 0; i < coins.length; i++) { + if (coins[i].mesh.visible) + tmp++; + } + + document.getElementById('coins-remaining').innerHTML = tmp + ' coins remaining'; + + // L3D.DB.Private.sendData('/posts/coin-info', result, true); + +}; + +function main() { + + // Main container that holds everything + container = document.getElementById('container'); + + // Initialization + initThreeElements(); + initCanvases(); + initModels(); + initListeners(); + + appendTo(container)(stats, startCanvas, pointer, previewer, renderer); + + // Set the good size of cameras + onWindowResize(); + + // Some config + L3D.DB.disable(); + + Coin.update(); + startCanvas.render(L3D.StartCanvas.Black); + + // Bind previewer to renderer (for fixed option) + function bind() { + if (document.pointerLockElement || document.mozPointerLockElement || document.webkitPointerLockElement) { + // Lock event + previewer.fixed = true; + } else { + // Unlock event + previewer.fixed = false; + } + } + document.addEventListener('pointerlockchange', bind); + document.addEventListener('mozpointerlockchange', bind); + document.addEventListener('webkitpointerlockchange', bind); + + // Start rendering + setInterval(render, 20); + +} + +function initThreeElements() { + + // Initialize scene + scene = new THREE.Scene(); + renderer = new THREE.WebGLRenderer({alpha:true, antialias:true}); + renderer.setClearColor(0x87ceeb); + + // Initialize pointer camera + camera1 = new L3D.PointerCamera( + 50, + container_size.width() / container_size.height(), + 0.01, 100000, renderer, container + ); + + camera1.collisions = false; + +} + +function initCanvases() { + + // Initialize previewer + previewer = new L3D.Previewer(renderer, scene); + previewer.domElement.style.position ="absolute"; + previewer.domElement.style.cssFloat = 'top-left'; + + // Initialize stats counter + stats = new Stats(); + stats.setMode(0); + stats.domElement.style.position = 'absolute'; + stats.domElement.style.cssFloat = "top-left"; + + // Initialize pointer for pointer lock + pointer = new L3D.MousePointer(camera1); + + // Init start canvas + startCanvas = new L3D.StartCanvas(camera1); + +} + +function initModels() { + + var i = 0; + + // Init recommendations + recommendations = initMainScene(camera1, scene, coins, clickableObjects, []); + + for (i = 0; i < coins.length; i++) { + coins[i].rotating = true; + clickableObjects.push(coins[i]); + } + + setTimeout(saveCoins, 1000); + + // Erase recommendations + for (i =0; i < recommendations.length; i++) + recommendations[i].traverse(function(obj) {obj.visible = false;}); + recommendations = []; + +} + +function initListeners() { + + // Add listeners + window.addEventListener('resize', onWindowResize, false); + + // HTML Bootstrap buttons + buttonManager = new ButtonManager(camera1, recommendations, previewer); + + // Object clicker for hover and clicking recommendations + objectClicker = new L3D.ObjectClicker( + renderer, + camera1, + clickableObjects, + objectClickerOnHover(camera1, previewer, recommendations, container), // Create onHover function + + // onclick + function(c, x, y, event) { + + // if (event.button !== 2) { + + // if (c !== undefined && c.object instanceof Coin) + // glob = c.object; + // else + // glob = null; + + // return; + + // } + + if (c !== undefined) { + + if (c.object instanceof Coin) { + + c.object.mesh.visible = false; + c.object.raycastable = false; + + } else { + + // var newPosition = c.point.clone(); + // var direction = L3D.Tools.diff(newPosition, camera1.position); + // direction.normalize(); + // direction.multiplyScalar(0.2); + // newPosition.sub(direction); + // var coin = new Coin(newPosition.x, newPosition.y, newPosition.z, function() {}); + // coin.addToScene(scene); + // coins.push(coin); + // clickableObjects.push(coin); + + } + + } + + saveCoins(); + }, + container + ); + +} + +function render() { + + // Stats for render + stats.begin(); + + objectClicker.update(); + + // Update recommendations (set raycastable if shown) + recommendations.map(function(reco) { + if (reco instanceof Recommendation) { + reco.traverse(function(elt) { + elt.visible = elt.raycastable = buttonManager.showArrows; + }); + } + }); + + // Update coins + coins.forEach(function(coin) { coin.update(); }); + + // Update main camera + var currentTime = Date.now() - previousTime; + camera1.update(isNaN(currentTime) ? 20 : currentTime); + previousTime = Date.now(); + + // Update the recommendations + recommendations.map(function(reco) { reco.update(camera1);}); + + // Set current position of camera + camera1.look(); + + var left = 0, bottom = 0, width = container_size.width(), height = container_size.height(); + renderer.setScissor(left, bottom, width, height); + renderer.enableScissorTest(true); + renderer.setViewport(left, bottom, width, height); + renderer.render(scene, camera1); + + // Remove borders of preview + previewer.clear(); + + // Hide arrows in recommendation + recommendations.map(function(reco) { if (reco instanceof Recommendation) hide(reco); }); + + // Update transparent elements + THREEx.Transparency.update(camera1); + + // Render preview + previewer.render(container_size.width(), container_size.height()); + + // Finish stats + stats.end(); + +} + +function onWindowResize() { + + resizeElements(renderer, container, previewer, pointer, startCanvas); + + recommendations.forEach(function(reco) { + resetCameraAspect(reco.camera, container_size.width(), container_size.height()); + }); + + render(); + +} + +// onWindowResize will be the only global function +return onWindowResize; + +})();