Added in loading bar, velocity data

Added in modal Added velocity visualization Fixed preloading Beginning to clean up code and fully comment
Alberto-GS · May 28, 2016 · 2c8a6a8 · 2c8a6a8
1 parent e379a3d
commit 2c8a6a8
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -10,9 +10,71 @@
 		<script type="text/javascript" src="js/libraries/dat.gui.min.js"></script>
 		<!-- stats.js for FPS tracking -->
 		<script type="text/javascript" src="js/libraries/stats.min.js"></script>
+		<!-- nanomodal.js for loading modal -->
+		<script type="text/javascript" src="js/libraries/nanomodal.min.js"></script>
 
 		<script type="text/javascript" src="js/main.js"></script>
+
+		<style>	
+			#progressModal {
+				width: 500px;
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				padding: 3px;
+				border-radius: 5px;
+				background-color: #333;
+				min-height: 45px;
+
+				color: white;
+				font-family: sans-serif;
+				font-weight: bold;
+			}
+
+			#progressModal #name {
+				text-align: center;
+				display: block;
+
+				text-transform: capitalize;
+			}
+
+			.progressBar {
+				height: 30px;
+				background-color: #333;
+				text-align: center;
+				position: relative;
+				border: 3px solid #333;
+			}
+
+			.progressBar #label:after {
+				content: attr(data-perc);
+				display: block;
+
+				font-size: 1.5em;
+				font-weight: bold;
+				width: 100%;
+
+				position: absolute;
+				z-index: 10;
+			}
+
+			.progressBar #bar {
+				background-color: #2FA1D6;
+
+				width: 0%;
+				height: 100%;
+				display: block;
+				position: absolute;
+				top: 0px;
+
+				transition: 0.5s ease;
+			}
+		</style>
 	</head>
 	<body>
+		<div id="progressModal">
+			<span id="name"></span>
+		</div>
 	</body>
 </html>
diff --git a/js/libraries/nanomodal.min.js b/js/libraries/nanomodal.min.js
diff --git a/js/main.js b/js/main.js
@@ -117,13 +117,20 @@ stats.showPanel(0);
   ===================*/
 // Set up GUI controls
 var guiController = new function() {
-	this.overlay = "currents";
+	this.overlay = "salinity";
 	this.overlayOpacity = 0.5;
 
 	this.rotateEarth = true;
 }();
 
+var progressModal;
+var frameLabel;
+
 window.onload = function() {
+	// Set the progress modal
+	progressModal = document.getElementById("progressModal");
+	frameLabel = document.getElementById("name");
+
 	// Append renderer element
 	document.body.appendChild(renderer.domElement);
 
@@ -141,14 +148,18 @@ window.onload = function() {
 	// Hacked together sequential loading using callbacks
 	extractFrames("assets/videos/currents.mp4", currentsMask, "currentsFrames", 1, function() {
 		extractFrames("assets/videos/surfaceflow.mp4", surfaceflowmask, "surfaceflowFrames", 1, function() {
-			extractFrames("assets/videos/salinity.mp4", surfaceflowmask, "salinityFrames", 1);
+			extractFrames("assets/videos/velocity.mp4", surfaceflowmask, "velocityFrames", 1/3, function() {
+				extractFrames("assets/videos/salinity.mp4", surfaceflowmask, "salinityFrames", 1, function() {
+					progressModal.style.display = 'none';
+				});
+			});
 		});
 	}, [2048, 1024]);
 
 	var gui = new dat.GUI();
 
 	// Add all options for overlay
-	gui.add(guiController, 'overlay', ['currents', 'surfaceflow', 'salinity', 'tectonics']).onChange(function() {
+	gui.add(guiController, 'overlay', ['currents', 'surfaceflow', 'velocity', 'salinity', 'tectonics']).onChange(function() {
 		activeOverlay = guiController.overlay + "Frames";
 		frame = 0;
 	});
@@ -168,6 +179,7 @@ window.onload = function() {
 var overlayFrames = {
 	currentsFrames: [],
 	surfaceflowFrames: [],
+	velocityFrames: [],
 	salinityFrames: [],
 	tectonicsFrames: [tectonics]
 };
@@ -189,8 +201,7 @@ function extractFrames(src, mask, frameType, fps, callback, resolution) {
 	var canvasFrames = [];
 	var width = 0;
 	var height = 0;
-
-	console.log("Extracting frames.");
+	var duration = 0;
 
 	video.addEventListener('loadedmetadata', function() {
 		if (resolution == null) {
@@ -202,10 +213,26 @@ function extractFrames(src, mask, frameType, fps, callback, resolution) {
 		}
 
 		video.currentTime = i;
-
-		console.log(frameType + ": " + video.duration);
+		duration = video.duration;
 	}, false);
 
+	frameLabel.innerHTML = frameType.slice(0,-6);
+	var progressBar = document.createElement('div');
+	progressBar.id = frameType;
+	progressBar.className = 'progressBar';
+
+	var progressLabel = document.createElement('span');
+	progressLabel.id = 'label';
+	progressLabel.setAttribute("data-perc", "Preparing frames...");
+
+	var progressBackground = document.createElement('span');
+	progressBackground.id = 'bar';
+
+	progressBar.appendChild(progressLabel);
+	progressBar.appendChild(progressBackground);
+
+	progressModal.appendChild(progressBar);
+
 	video.src = src;
 
 	video.addEventListener('seeked', function() {
@@ -238,13 +265,23 @@ function extractFrames(src, mask, frameType, fps, callback, resolution) {
 		// Add pre-rendered texture to array
 		canvasFrames.push(tempTexture);
 
+		// Update progress
 		i += 1/fps;
-		console.log(frameType + ": " + i);
+
 		if (i <= this.duration) {
 			video.currentTime = i;
+
+			progressBackground.style.width = (i/duration * 100).toFixed(2) + "%";
+			progressLabel.setAttribute("data-perc", (i/duration * 100).toFixed(2) + "%");
 		} else {
+			progressBackground.style.width = "100%";
+			progressLabel.setAttribute("data-perc", "100%");
+
 			overlayFrames[frameType] = canvasFrames;
-			console.log("Finished");
+
+			// Remove it
+			progressModal.removeChild(progressBar);
+
 			if (callback != null)
 				callback();
 		}