changeset 456:be5bff655c50 Dev_main

MUSHRA now has scale drawn by HTML5 Canvas

--- a/mushra.css	Wed Jan 06 12:56:29 2016 +0000
+++ b/mushra.css	Mon Jan 11 10:40:02 2016 +0000
@@ -38,17 +38,19 @@
 div#slider-holder {
 	height: inherit;
 	position: absolute;
-	top: 125px;
 	left: 0px;
-	z-index: 2;
+	z-index: 3;
 }
 
 div#scale-holder {
 	height: inherit;
 	position: absolute;
-	top: 125px;
 	left: 0px;
-	z-index: 3;
+	z-index: 2;
+}
+
+canvas#scale-canvas {
+	position: relative;
 }
 
 div.track-slider {

--- a/mushra.js	Wed Jan 06 12:56:29 2016 +0000
+++ b/mushra.js	Mon Jan 11 10:40:02 2016 +0000
@@ -42,6 +42,7 @@
 	// Create Interface buttons!
 	var interfaceButtons = document.createElement('div');
 	interfaceButtons.id = 'interface-buttons';
+	interfaceButtons.style.height = '25px';
 	
 	// Create playback start/stop points
 	var playback = document.createElement("button");
@@ -77,6 +78,9 @@
 	var scaleHolder = document.createElement('div');
 	scaleHolder.id = "scale-holder";
 	sliderBox.appendChild(scaleHolder);
+	var scaleCanvas = document.createElement('canvas');
+	scaleCanvas.id = "scale-canvas";
+	scaleHolder.appendChild(scaleCanvas);
 	var sliderObjectHolder = document.createElement('div');
 	sliderObjectHolder.id = 'slider-holder';
 	sliderObjectHolder.align = "center";
@@ -176,10 +180,7 @@
 	});
 	
 	// Auto-align
-	var numObj = audioHolderObject.audioElements.length;
-	var totalWidth = (numObj-1)*150+100;
-	var diff = (window.innerWidth - totalWidth)/2;
-	sliderBox.style.marginLeft = diff + 'px';
+	resizeWindow(null);
 	
 	// Construct outside reference;
 	if (audioHolderObject.outsideReference != null) {
@@ -317,8 +318,38 @@
 	{
 		audioEngineContext.audioObjects[i].interfaceDOM.resize(event);
 	}
+	document.getElementById('scale-holder').style.marginLeft = (diff-100) + 'px';
+	var canvas = document.getElementById('scale-canvas');
+	canvas.width = totalWidth+100;
+	canvas.height = window.innerHeight-194;
+	drawScale();
 }
 
+function drawScale()
+{
+	var interfaceObj = testState.currentStateMap.interfaces[0];
+	var scales = testState.currentStateMap.interfaces[0].scales;
+	scales = scales.sort(function(a,b) {
+		return a.position - b.position;
+	});
+	var canvas = document.getElementById('scale-canvas');
+	var ctx = canvas.getContext("2d");
+	var height = canvas.height;
+	var width = canvas.width;
+	var draw_heights = [24, height-34];
+	for (var scale of scales)
+	{
+		var posPercent = scale.position / 100.0;
+		var posPix = (1-posPercent)*(draw_heights[1]-draw_heights[0])+draw_heights[0];
+		ctx.font = "20px Georgia";
+		ctx.fillText(scale.text,0,Math.floor(posPix)+10);
+		ctx.fillStyle = "#000000";
+		ctx.setLineDash([1,2]);
+		ctx.moveTo(100,posPix);
+		ctx.lineTo(width,posPix);
+		ctx.stroke();
+	}
+}
 
 function buttonSubmitClick() // TODO: Only when all songs have been played!
 {