view www/m/js/client.js @ 11:0a8133490050

absorbed metronome.js .css into main css and client files
also some minor html5 and css changes

/////////////////////////////////////////////////
// connect to websocket

var socket = io.connect();

//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);
    }
}
/////////////////////////////////////////////////
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(" ")});
    $(".metrocase > div").each(function(){$(this).animate({opacity: 0.5},
							  50,
							  function() { $(this).animate({opacity:0.0}); }
							 );
					 })  
	}



function metronomeTick(pulse, voice,metrobeat) {
    console.log( voice+ "   metronome tick" + metrobeat)
    var color = "gray"

    metroCss(0, "red", "4")    

//if (metrobeat == 0) {
//	metroCss(0, "gray", "1")
  //  }   
    
    //if (metrobeat == 3) {
//	metroCss(0, "white", "4")
  //  }   

//    if (metrobeat == 1||metrobeat == 2){ 
//	$("#metronome"+metrobeat).stop();
//	$("#metronome"+metrobeat).css('background-color', color);
//	$("#metronome"+metrobeat).text(" ");
	//$("#metronome"+metrobeat).text(metrobeat+1);
//	$("#metronome"+metrobeat).animate({opacity: 1},
//				      50,
  //                          function() { $(this).animate({opacity:0.0}); }
//				     );
  //  }
};

/////////////////////////////////////////////////

// update the stopwatch value on the client page in line with server
socket.on("chronFromServer", function(chron) {
    $("div#client_chronometer").text(chron);
});

/////////////////////////////////////////////////

function pageFlip(unit) {
    console.log("flipping page:"+ unit);
    $('#sections').trigger('goto', [parseFloat(unit)]); 
    //metroStart(1000); 
    //document.getElementById("countdowncase").style.visibility="hidden";
}

/////////////////////////////////////////////////
// call the fancy jquery functions

function slideTo (target) { $('#sections').trigger('goto', [target]); }
function pad2(number) { return (number < 10 ? '0' : '') + number }       

/////////////////////////////////////////////////

socket.on("pageFlipfromserver", pageTurn);
function pageTurn (group,unit,time,mm) {
    var groupPage=document.getElementById('group').value;
    console.log("fromservercommand has been executed on client");
    if (group == groupPage) {
	var g= pad2(group); 
	var p= pad2(unit);
	pageFlip(unit); 
    }
    else { 
	console.log("not for this group... ignoring... for group:" + group );
    }
}

/////////////////////////////////////////////////