From 8b8123d5a051df80b5a3641c2873b07f5e4a5d5e Mon Sep 17 00:00:00 2001 From: Rob Hawkes Date: Mon, 4 Nov 2013 15:43:57 +0000 Subject: [PATCH] Refined promises and loading bar --- css/loading.css | 15 ++-- package.json | 2 +- src/client/City.js | 24 +++---- src/client/DOMEvents.js | 8 ++- src/client/objects/ObjectManager.js | 103 ++++++++++++++++++++-------- src/client/ui/Loading.js | 8 +-- src/client/webgl/WebGL.js | 6 +- 7 files changed, 100 insertions(+), 66 deletions(-) diff --git a/css/loading.css b/css/loading.css index be5fb23..5af1b4e 100644 --- a/css/loading.css +++ b/css/loading.css @@ -102,7 +102,7 @@ width: 250px; height: 50px; margin: 40px 0 0; - background: rgba(0,0,0,0.1); + background: rgba(0, 0, 0, 0.1); pointer-events: none; overflow: hidden; } @@ -114,13 +114,6 @@ background: #f5f5f5; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); - -webkit-transition: -webkit-transform 0.1s linear; - transition: transform 0.1s linear; -} - -/*.ui-loading-indicator::before { - -webkit-transition: -webkit-transform 5.4s linear 0.3s; - transition: transform 5.4s linear 0.3s; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -}*/ \ No newline at end of file + -webkit-transition: -webkit-transform 0.5s linear; + transition: transform 0.5s linear; +} \ No newline at end of file diff --git a/package.json b/package.json index 2729b48..08da241 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,6 @@ "grunt-contrib-concat": "~0.3.0", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-connect": "~0.5.0", - "grunt-notify": "~0.2.14" + "grunt-notify": "~0.2.15" } } diff --git a/src/client/City.js b/src/client/City.js index 4a3bf0f..09100e7 100644 --- a/src/client/City.js +++ b/src/client/City.js @@ -80,6 +80,9 @@ }).then(function() { self.publish("loadingProgress", 0.4); + // TODO: Work out a way to use progress event of each promises to increment loading progress + // Perhaps by looping through each promises individually and working out progress fraction by num. of promises / amount processed + // Load objects using promises var promises = []; @@ -124,16 +127,12 @@ var startTime = Date.now(); - var deferred = Q.defer(); - this.fps = new VIZI.FPS(); this.rendererInfo = new VIZI.RendererInfo(); VIZI.Log("Finished intialising debug tools in " + (Date.now() - startTime) + "ms"); - deferred.resolve(); - - return deferred.promise; + return Q.fcall(function() {}); }; // TODO: Move set up of core objects out to somewhere else @@ -160,9 +159,11 @@ this.domEvents = new VIZI.DOMEvents(); - VIZI.Log("Finished intialising DOM events in " + (Date.now() - startTime) + "ms"); + this.domEvents.init().then(function(result) { + VIZI.Log("Finished intialising DOM events in " + (Date.now() - startTime) + "ms"); - deferred.resolve(); + deferred.resolve(); + }); return deferred.promise; }; @@ -172,16 +173,12 @@ var startTime = Date.now(); - var deferred = Q.defer(); - // Set up core components this.floor = new VIZI.Floor(); VIZI.Log("Finished loading core objects in " + (Date.now() - startTime) + "ms"); - deferred.resolve(); - - return deferred.promise; + return Q.fcall(function() {}); }; VIZI.City.prototype.loadBuildings = function(url) { @@ -198,6 +195,9 @@ buildingManager.processFeaturesWorker(value.features).then(function(result) { VIZI.Log("Finished loading buildings in " + (Date.now() - startTime) + "ms"); deferred.resolve(buildingManager); + }, undefined, function(progress) { + // Pass-through progress + deferred.notify(progress); }); // buildingManager.processFeaturesWorker2(value.features); }, function(error) { diff --git a/src/client/DOMEvents.js b/src/client/DOMEvents.js index cf5940e..3f1a249 100644 --- a/src/client/DOMEvents.js +++ b/src/client/DOMEvents.js @@ -1,4 +1,4 @@ -/* globals window, _, VIZI */ +/* globals window, _, VIZI, Q */ (function() { "use strict"; @@ -6,9 +6,11 @@ VIZI.Log("Inititialising DOM events"); _.extend(this, VIZI.Mediator); + }; + VIZI.DOMEvents.prototype.init = function() { var self = this; - + // Window resize window.addEventListener( "resize", function(event) { self.publish("resize", event); @@ -17,5 +19,7 @@ // Keyboard // Mouse + + return Q.fcall(function() {}); }; }()); \ No newline at end of file diff --git a/src/client/objects/ObjectManager.js b/src/client/objects/ObjectManager.js index 5c23bbc..8fac6f1 100644 --- a/src/client/objects/ObjectManager.js +++ b/src/client/objects/ObjectManager.js @@ -196,49 +196,94 @@ batchPromises.push(this.workerPromise(worker, featuresBatch)); } + VIZI.Log(batchPromises.length); + var loader = new THREE.JSONLoader(); var material = new THREE.MeshLambertMaterial({vertexColors: THREE.VertexColors}); var self = this; + // TODO: Update this to fire progress events for each completed batch + // Possibly by using promise sequences rather than waiting for all to complete + // https://github.com/kriskowal/q#sequences + // Handle promises - Q.allSettled(batchPromises).then(function (promises) { - var count = 0; + var processedCount = 0; + var result = batchPromises[0]; + batchPromises.forEach(function (f) { + result = result.then(function(value) { + var data = value.data; - _.each(promises, function (promise) { - if (promise.state === "fulfilled") { - var value = promise.value; - var data = value.data; + // Not sure how reliable the send time is + var timeToSend = value.timeToSend; + var timeToArrive = value.timeToArrive; + var timeTaken = data.timeTaken; + var inputSize = data.inputSize; + var outputSize = data.outputSize; + var count = data.count; + var json = data.json; - // Not sure how reliable the send time is - var timeToSend = value.timeToSend; - var timeToArrive = value.timeToArrive; - var timeTaken = data.timeTaken; - var inputSize = data.inputSize; - var outputSize = data.outputSize; - var count = data.count; - var json = data.json; + VIZI.Log("Worker input sent in " + timeToSend + "ms"); + VIZI.Log("Worker input size is " + inputSize); + VIZI.Log("Worker output received in " + timeToArrive + "ms"); + VIZI.Log("Worker output size is " + outputSize); + VIZI.Log("Processed " + count + " features in " + timeTaken + "ms"); - VIZI.Log("Worker input sent in " + timeToSend + "ms"); - VIZI.Log("Worker input size is " + inputSize); - VIZI.Log("Worker output received in " + timeToArrive + "ms"); - VIZI.Log("Worker output size is " + outputSize); - VIZI.Log("Processed " + count + " features in " + timeTaken + "ms"); + // VIZI.Log(json); - VIZI.Log(json); + // TODO: Stop this locking up the browser + // No visible lock up at all when removed + var geom = loader.parse(json); + var mesh = new THREE.Mesh(geom.geometry, material); + self.publish("addToScene", mesh); - // TODO: Stop this locking up the browser - // No visible lock up at all when removed - var geom = loader.parse(json); - var mesh = new THREE.Mesh(geom.geometry, material); - self.publish("addToScene", mesh); + processedCount++; + + deferred.notify( processedCount / batches ); + + if (processedCount === batches) { + VIZI.Log("Overall worker time is " + (Date.now() - startTime) + "ms"); + deferred.resolve(); } - }); - VIZI.Log("Overall worker time is " + (Date.now() - startTime) + "ms"); - }).done(function() { - deferred.resolve(); + return f; + }); }); + //Q.allSettled(batchPromises).then(function (promises) { + // _.each(promises, function (promise) { + // if (promise.state === "fulfilled") { + // var value = promise.value; + // var data = value.data; + + // //Not sure how reliable the send time is + // var timeToSend = value.timeToSend; + // var timeToArrive = value.timeToArrive; + // var timeTaken = data.timeTaken; + // var inputSize = data.inputSize; + // var outputSize = data.outputSize; + // var count = data.count; + // var json = data.json; + + // VIZI.Log("Worker input sent in " + timeToSend + "ms"); + // VIZI.Log("Worker input size is " + inputSize); + // VIZI.Log("Worker output received in " + timeToArrive + "ms"); + // VIZI.Log("Worker output size is " + outputSize); + // VIZI.Log("Processed " + count + " features in " + timeTaken + "ms"); + + // //VIZI.Log(json); + + // //TODO: Stop this locking up the browser + // //No visible lock up at all when removed + // var geom = loader.parse(json); + // var mesh = new THREE.Mesh(geom.geometry, material); + // self.publish("addToScene", mesh); + // } + // }); + + // VIZI.Log("Overall worker time is " + (Date.now() - startTime) + "ms"); + //}).done(function() { + // deferred.resolve(); + //}); return deferred.promise; }; diff --git a/src/client/ui/Loading.js b/src/client/ui/Loading.js index 952099e..80d7446 100644 --- a/src/client/ui/Loading.js +++ b/src/client/ui/Loading.js @@ -13,8 +13,6 @@ }; VIZI.Loading.prototype.init = function() { - var deferred = Q.defer(); - this.domContainer = this.createDOMContainer(); this.domTimer = this.createDOMTimer(); this.domIndicator = this.createDOMIndicator(); @@ -22,9 +20,7 @@ this.subscribe("loadingProgress", this.progress); this.subscribe("loadingComplete", this.remove); - deferred.resolve(); - - return deferred.promise; + return Q.fcall(function() {}); }; VIZI.Loading.prototype.createDOMContainer = function() { @@ -97,7 +93,7 @@ setTimeout(function() { self.domContainer.classList.add("inactive"); - }, 500); + }, 800); setTimeout(function() { VIZI.Log("Removing loading UI DOM container"); diff --git a/src/client/webgl/WebGL.js b/src/client/webgl/WebGL.js index 8d8c2a4..bb9b3a2 100644 --- a/src/client/webgl/WebGL.js +++ b/src/client/webgl/WebGL.js @@ -16,8 +16,6 @@ }; VIZI.WebGL.prototype.init = function() { - var deferred = Q.defer(); - this.domContainer = this.createDOMContainer(); this.scene = new VIZI.Scene(); this.camera = new VIZI.Camera(); @@ -26,9 +24,7 @@ this.lights = []; this.addLights(); - deferred.resolve(); - - return deferred.promise; + return Q.fcall(function() {}); }; VIZI.WebGL.prototype.createDOMContainer = function() {