changeset 201:13946f91f0a3 Dev_main

Started on playhead / scrubber bar. Now object in interfaceContext. Needs binding of setInterval.

--- a/ape.js	Wed Jun 10 14:39:15 2015 +0100
+++ b/ape.js	Wed Jun 10 16:12:46 2015 +0100
@@ -176,6 +176,11 @@
 	feedbackHolder.innerHTML = null;
 	canvas.innerHTML = null;
 	
+	var playbackHolder = document.createElement('div');
+	playbackHolder.style.width = "100%";
+	playbackHolder.align = 'center';
+	playbackHolder.appendChild(interfaceContext.playhead.object);
+	feedbackHolder.appendChild(playbackHolder);
 	// Setup question title
 	var interfaceObj = audioHolderObject.interfaces;
 	var commentBoxPrefix = "Comment on track";

--- a/core.css	Wed Jun 10 14:39:15 2015 +0100
+++ b/core.css	Wed Jun 10 16:12:46 2015 +0100
@@ -60,3 +60,25 @@
 	width: 618px;
 	margin-right:15px;
 }
+
+div.playhead {
+	width: 500px;
+	height: 50px;
+	background-color: #eee;
+	border-radius: 10px;
+	padding: 10px;
+}
+
+div.playhead-scrub-track {
+	width: 100%;
+	height: 10px;
+	border-style: solid;
+	border-width: 1px;
+}
+
+div#playhead-scrubber {
+	width: 10px;
+	height: 10px;
+	position: relative;
+	background-color: #000;
+}

--- a/core.js	Wed Jun 10 14:39:15 2015 +0100
+++ b/core.js	Wed Jun 10 16:12:46 2015 +0100
@@ -1651,5 +1651,60 @@
 		this.commentQuestions.push(node);
 		return node;
 	};
+	
+	this.playhead = new function()
+	{
+		this.object = document.createElement('div');
+		this.object.className = 'playhead';
+		this.object.align = 'left';
+		var curTime = document.createElement('div');
+		curTime.style.width = '50px';
+		this.curTimeSpan = document.createElement('span');
+		this.curTimeSpan.textContent = '00:00';
+		curTime.appendChild(this.curTimeSpan);
+		this.object.appendChild(curTime);
+		this.scrubberTrack = document.createElement('div');
+		this.scrubberTrack.className = 'playhead-scrub-track';
+		
+		this.scrubberHead = document.createElement('div');
+		this.scrubberHead.id = 'playhead-scrubber';
+		this.scrubberTrack.appendChild(this.scrubberHead);
+		this.object.appendChild(this.scrubberTrack);
+		
+		this.timePerPixel = 0;
+		this.maxTime = 0;
+		
+		this.startPlay = function(maxTime) {
+			//maxTime must be in seconds
+			var width = 490; //500 - 10, 5 each side of the tracker head
+			this.timePerPixel = maxTime/490;
+			this.maxTime = maxTime;
+			if (maxTime < 60) {
+				this.curTimeSpan.textContent = '0.00';
+			} else {
+				this.curTimeSpan.textContent = '00:00';
+			}
+		};
+		
+		this.update = function(time) {
+			// Update the playhead position, startPlay must be called
+			if (this.timePerPixel > 0) {
+				var width = 490;
+				var pix = Math.floor(width*time);
+				this.scrubberHead.style.left = pix+'px';
+				if (this.maxTime > 60.0) {
+					var secs = time%60;
+					var mins = Math.floor((time-secs)/60);
+					secs = secs.toString();
+					secs = secs.substr(0,2);
+					mins = mins.toString();
+					this.curTimeSpan.textContent = mins+':'+secs;
+				} else {
+					time = time.toString();
+					this.curTimeSpan.textContent = time.substr(0,4);
+				}
+			}
+		};
+	};
 }