Refined promises and loading bar

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);
-}*/
+	-webkit-transition: -webkit-transform 0.5s linear;
+	transition: transform 0.5s linear;
+}

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"
   }
 }

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) {

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() {});
 	};
 }());

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;
 	};

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");

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() {