diff www/oi/js/nodescore-client.js @ 100:d802954248a7

new svgs for oi version

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/www/oi/js/nodescore-client.js	Wed Dec 10 12:17:19 2014 +0000
@@ -0,0 +1,305 @@
+/////////////////////////////////////////////////
+// connect to websocket
+
+var socket = io.connect();
+function initPage() { socket.emit("initPage");  
+		      console.log("init.client.log")
+		    }
+
+//socket.on("metroPulse", metronomeTick);
+/////////////////////////////////////////////////
+
+socket.on("metroPulse", pulseInClient);
+function pulseInClient(pulse,groupID,metrobeat){
+    var groupPage=document.getElementById('group').value
+    if (groupID == groupPage) {
+	metronomeTick(1000, groupID, metrobeat);
+    }
+}
+
+//////////////////////////////////////////////////
+// AUDIO SCORE CUES
+
+var audioUnit1 = new Audio('audio/testfile.ogg');
+var audioUnit49 = new Audio('audio/testfile.ogg');
+var audioUnit3 = new Audio('audio/testfile.ogg');
+var audioUnit4 = new Audio('audio/testfile.ogg');
+
+function playAudio(a) {
+    a.play();
+}
+
+//playAudio(audio_unit_1);
+
+
+/////////////////////////////////////////////////
+function  metroCss(beat, beatcolor,text){
+    var color = beatcolor;
+    $(".metrocase > div").each(function(){$(this).stop()});
+    $(".metrocase > div").each(function(){$(this).css('background-color', beatcolor)});
+    $(".metrocase > div").each(function(){$(this).text(" ")});
+}
+
+function metronomeTick(pulse, voice,metrobeat) {
+    var color = "gray"
+    metroCss(0, "red", "4")
+    setTimeout(function(){metroCss(0, "black", "4")},150);
+};
+
+/////////////////////////////////////////////////
+// update the stopwatch value on the client page in line with server
+socket.on("chronFromServer", function(chron) { $("div#client_chronometer").text(chron); });
+
+// server time
+    socket.on("dateTime", function(datetime) {
+	$("div#datetime").text("" +datetime);
+    });
+
+/////////////////////////////////////////////////
+
+// countin (solo part)
+
+socket.on("countinFromServer", countinClient);
+function countinClient(groupID, currentseconds,mm,text,colour,background,unit){
+    var groupPage=document.getElementById('group').value
+    if (groupID == groupPage) {
+	$("#counttitle").css('color','black');
+	$("#counttitle").text(text);
+	$("#count").text(currentseconds);
+	document.getElementById("count").style.color=colour;
+ }}
+
+/////////////////////////////////////////////////
+
+// countdown to change (solo)
+
+socket.on("counterText", cText);
+function cText(groupID, currentseconds,text){
+    $("#totalcountdown"+groupID).text(text);	
+    var groupPage=document.getElementById('group').value
+    if (groupID == groupPage) {
+	//console.log(text)
+	$("#totalcountdown").text(text);	
+    }}
+
+// when voice is changed in UI grab and update from server
+
+function changeSoloVoice(v) { socket.emit("changeSoloVoice", v); }
+
+// makes sure page is loaded if not it grabs svg etc
+
+socket.on("pageIni", pageIni);
+function pageIni (group,unit,time,mm,seqcounter,nextunit) { 
+    //console.log(unit + " ---> " + nextunit)
+    var soloist = $("#group").attr('value'); //4//$("#group").value;
+    if (group==1){
+	var n1 = $("#previewbox-1").html().indexOf("svg"); 
+	//console.log(n1)
+	if (n1 == -1){
+	    //console.log("n1 == -1 so load svg:")
+	    $("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+	}
+    }
+    
+    if (group==2){
+	var n2 = $("#previewbox-2").html().indexOf("svg"); 
+	if (n2 == -1){ 
+	    $("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+	}
+    }
+
+    if (group==3){
+	var n3 = $("#previewbox-3").html().indexOf("svg"); 
+	if (n3 == -1){ 
+	    $("#previewbox-3").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+	}
+    }
+
+    if (group==4){
+	var n4 = $("#previewbox-4").html().indexOf("svg"); 
+	if (n4 == -1){ 
+	    $("#previewbox-4").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+	}
+    }
+
+
+    if (group==soloist) { 	
+	//console.log("INI sooolooooist=: ---------------------- : " + soloist)
+	var n = $("#previewbox-solo").html().indexOf("svg"); 
+	if (n == -1){ 
+            $("#previewbox-solo").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+    	    $("#previewbox-solo-next").html("<img src='svg/"+(nextunit) + ".svg" + "' width='100%'>")
+	}   
+    }
+
+
+}   
+
+
+socket.on("pageFlip", pageFlip);
+
+//  some if logic to check if file is already displayed
+// if not load it - client doesnt need to be present at start
+
+function pageFlip (group,unit,time,mm,seqcounter,nextunit) { 
+    var soloist = $("#group").attr('value');
+
+    if (group==1){
+	$("#previewbox-1").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>") 
+    }
+    
+    if (group==2){
+	$("#previewbox-2").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+    }
+    
+    if (group==3){
+	
+	$("#previewbox-3").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+    }
+    
+    if (group==4){
+	$("#previewbox-4").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+    }
+    
+
+    // page flip for solo part section
+    
+    if (group==soloist) {
+
+	// changes the svg and preview images
+	$("#previewbox-solo").html("<img src='svg/"+(unit) + ".svg" + "' width='100%'>")
+	$("#previewbox-solo-next").html("<img src='svg/"+(nextunit) + ".svg" + "' width='100%'>")
+
+	// check for audio assets to play
+	// audio assets should have a value attribute which should be compared with the unit
+	// if the unit has an associated audio attribute it should play
+	
+	if ( window["audioUnit"+unit] ){
+	    console.log("audio asset detected for this unit... playing now...")
+	    playAudio(window["audioUnit"+unit]);
+	} else { console.log("no audio for this unit.."); }
+    }
+
+    // check for effect associated with unit
+    // maybe in future we could use the webAudio API?
+
+}
+
+
+
+////////////////////////////////////////////////
+
+/* commented out for now as interferes with chat
+need to introduce metakey...manyana... not so usefull anyway really... 
+
+keyboard controls 
++++++++++++++++++++++++++
+
+SPACE to toggle visibilty of preview
+m to toggle visibilty of metronome
+s to toggle visibilty of stopwatch
+h to hide all above
+
+
+*/
+
+function toggle_visibility(id) {
+    var e = document.getElementById(id);
+    if(e.style.display == 'block')
+        e.style.display = 'none';
+       else
+           e.style.display = 'block';
+}
+
+$(document).keypress(function(e){
+//    console.log(e.which);
+  // "0" button for hide chat
+    var hcheckWebkitandIE=(e.which==48 ? 1 : 0);
+    var hcheckMoz=(e.which==48 ? 1 : 0);
+    if (hcheckWebkitandIE || hcheckMoz) { 
+	toggle_visibility('comms') 
+}
+    });
+
+//*/
+
+////////////////////////////////////////////////
+// this needs to have a variable to define the websocket
+// otherwise we will pings from all sockets connected
+// no! the server broadcasts the ping and the clients emit the pong!
+// ah but then the time reported back from the server needs to be targeted
+// to specific client..
+
+//////////////////////////////////////////////
+// Latency "Pong"
+
+socket.on("timeFromServer", function(n) { 
+    socket.emit("clientTimeResponse",n); });
+
+socket.on("latencyFromServer", function(latency) {
+    $("#client_latency").text("Latency: "+latency+"ms.")
+});
+
+function getLatencies(x) { socket.emit("getLatencies", x); }
+
+//////////////////////////////////////////////
+
+
+socket.on('connect', function () {
+    $('#chat').addClass('connected');
+});
+
+socket.on('announcement', function (msg) {
+    $('#Lines').append($('<p>').append($('<em>').text(msg)));
+});
+
+socket.on('nicknames', function (nicknames) {
+    $('#nicknames').empty().append($('<span>Online: </span>'));
+    for (var i in nicknames) {
+	$('#nicknames').append($('<b>').text(nicknames[i]));
+    }
+});
+
+socket.on('user message', message);
+socket.on('reconnect', function () {
+    $('#lines').remove();
+    message('System', 'Reconnected to the server');
+});
+
+socket.on('reconnecting', function () {
+    message('System', 'Attempting to re-connect to the server');
+});
+
+socket.on('error', function (e) {
+    message('System', e ? e : 'A unknown error occurred');
+});
+
+function message (from, msg) {
+    $('#lines').prepend($('<p>').prepend($('<b>').text(from), msg));
+}
+
+// dom manipulation
+$(function () {
+    $('#set-nickname').submit(function (ev) {
+	socket.emit('nickname', $('#nick').val(), function (set) {
+	    if (!set) {
+		clear();
+		return $('#chat').addClass('nickname-set');
+	    }
+	    $('#nickname-err').css('visibility', 'visible');
+	});
+	return false;
+    });
+
+    $('#send-message').submit(function () {
+	message('me', $('#message').val());
+	socket.emit('user message', $('#message').val());
+	clear();
+	$('#lines').get(0).scrollTop = 10000000;
+	return false;
+    });
+
+    function clear () {
+	$('#message').val('').focus();
+    };
+});