Permalink
Browse files

Refined promises and loading bar

  • Loading branch information...
1 parent f2b122f commit 8b8123d5a051df80b5a3641c2873b07f5e4a5d5e @robhawkes robhawkes committed Nov 4, 2013
Showing with 105 additions and 71 deletions.
  1. +4 −11 css/loading.css
  2. +1 −1 package.json
  3. +12 −12 src/client/City.js
  4. +6 −2 src/client/DOMEvents.js
  5. +79 −34 src/client/objects/ObjectManager.js
  6. +2 −6 src/client/ui/Loading.js
  7. +1 −5 src/client/webgl/WebGL.js
View
@@ -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);
-}*/
+ -webkit-transition: -webkit-transform 0.5s linear;
+ transition: transform 0.5s linear;
+}
View
@@ -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"
}
}
View
@@ -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) {
View
@@ -1,14 +1,16 @@
-/* globals window, _, VIZI */
+/* globals window, _, VIZI, Q */
(function() {
"use strict";
VIZI.DOMEvents = function() {
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() {});
};
}());
@@ -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;
-
- _.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);
+ var processedCount = 0;
+ var result = batchPromises[0];
+ batchPromises.forEach(function (f) {
+ result = result.then(function(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);
+
+ 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;
};
View
@@ -13,18 +13,14 @@
};
VIZI.Loading.prototype.init = function() {
- var deferred = Q.defer();
-
this.domContainer = this.createDOMContainer();
this.domTimer = this.createDOMTimer();
this.domIndicator = this.createDOMIndicator();
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");
@@ -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() {

0 comments on commit 8b8123d

Please sign in to comment.