js_murks

gistfile1.js

//define global conversion parameters here:
var lsb_acc_small = 100000;
var lsb_acc_full = 100000;
var lsb_inc_small = 100000;
var lsb_inc_full = 100000;

var sens=$("#sens-select").val();
//display digital-number   
var display = new SegmentDisplay("display");
display.pattern         = "##.########";
display.displayAngle    = 6;
display.digitHeight     = 20;
display.digitWidth      = 14;
display.digitDistance   = 2.5;
display.segmentWidth    = 2;
display.segmentDistance = 0.3;
display.segmentCount    = 7;
display.cornerType      = 3;
display.colorOn         = "#e95d0f";
display.colorOff        = "#2F1E05";
display.draw();

display.setValue('--.-------');

var peopleTable = d3.select("#stattable").append("table");
var statResult={mean: 0, variance: 0, deviation: 0}
var roundDigitLen=10000000;
var fixDigitLen=7;
var running = false;
var nowangle=0;
var socket;
// this goes into the onCreate() function
//$(function() {
//socket = New WebSocket('ws://192.168.2.1:5000');
window.WebSocket = window.WebSocket || window.MozWebSocket;
socket = new WebSocket('ws://10.42.0.214:9000', 'measure');
socket.onmessage = function(msg) {
	if (running) {
		var temp = msg.data.split(';');
		var time = temp[0];
		var acc = temp[1];
		update(acc);
		//update the graph, the picture, the text
		//...
	}
}
//})
var preci=90;
var n = 400,
    random = d3.random.normal(0, .2);  //d3.random.normal([mean, [deviation]])   

var data = d3.range(n).map(random); //data storage, data number is limited to 40
data=draw(nowangle, data); //initialization

/*table buildup setting end*/
var numberLength=6;

var sensorName1="SensIncline";
var sensorName2="SensAcc"
var sensorName;
var valueName=" "
var nowangle=0;
var n = 400,
    random = d3.random.normal(0, .2);  //d3.random.normal([mean, [deviation]])
var data = d3.range(n).map(random); //data storage, data number is limited to 40
var coldata = [];
//console.log(coldata);

var tmpdic={};
tmpdic[valueName]="mean";
tmpdic[sensorName1]=0;
tmpdic[sensorName2]=0;
coldata.push(tmpdic);
tmpdic={};
tmpdic[valueName]="nowangle";
tmpdic[sensorName1]=0;
tmpdic[sensorName2]=0;
coldata.push(tmpdic);
tmpdic={};
tmpdic[valueName]="stdv";
tmpdic[sensorName1]=0;
tmpdic[sensorName2]=0;
coldata.push(tmpdic);
tmpdic={};
tmpdic[valueName]="max";
tmpdic[sensorName1]=0;
tmpdic[sensorName2]=0;
coldata.push(tmpdic);
tmpdic={};
tmpdic[valueName]="min";
tmpdic[sensorName1]=0;
tmpdic[sensorName2]=0;
coldata.push(tmpdic);

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
/*table buildup setting end*/	

init();



function selectToggle(){
	init();
	($('#preci-select').is(':checked')? smallScale():fullScale());

}
function switchToggle(){
	if ($('#switch').is(':checked')) {
		console.log('start pressed');
		startMeasurement();

	}

	else {
		stopMeasurement();
	}	
}
// this function has to be called in the start button onClick()
function startMeasurement() {
	console.log(running);
	if(!running) {	
		socket.send('start');
		running = true;
		console.log(running);
	}
}

// this function has to be called in the stop button onClick()
function stopMeasurement() {
	console.log(running);
	if(running) {	
		socket.send('stop');
		running = false;
	}
}

//this has to be called when switching to full scale measurement
function fullScale() {
	if(running){ 
		stopMeasurement();
		$('#switch').prop('checked',false);
	}
	socket.send("fullscale");
}

//this has to be called when switching to small scale measurement
function smallScale() {
	if(running) {
		stopMeasurement();
		$('#switch').attr('checked',false);
	}
	socket.send("smallscale");

}



function chart(data,domain, interpolation) {

	var margin = {top: 6, right: 0, bottom: 6, left: 40},
	    width = 320 - margin.right,
	    height = 120 - margin.top - margin.bottom;

	var x = d3.scale.linear()
		.domain(domain)
		.range([0, width]);

	var y = d3.scale.linear()
		.domain([-preci, preci])
		.range([height, 0]);

	var line = d3.svg.line()
		.interpolate(interpolation)
		.x(function(d, i) { return x(i); })
		.y(function(d, i) { return y(d); });

	var svg = d3.select('#plotting').append('p').append('svg')
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.style("margin-left", -margin.left + "px")

		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append("defs").append("clipPath")
		.attr("id", "clip")
		.append("rect")
		.attr("width", width)
		.attr("height", height);

	svg.append("g")
		.attr("class", "y axis")
		.call(d3.svg.axis().scale(y).orient("left"));

	var path = svg.append("g")
		.attr("clip-path", "url(#clip)")
		.append("path")
		.datum(data)
		.attr("class", "line")
		.attr("d", line);   
}

function drawPose(angle) {
	var midX=50,midY=100;
	var halfL=50;
	pos=[midX-halfL*Math.cos(angle/180.0*Math.PI),midY-halfL*Math.sin(angle/180.0*Math.PI),midX+halfL*Math.cos(angle/180.0*Math.PI),midY+halfL*Math.sin(angle/180.0*Math.PI),midX-halfL*Math.cos((angle+90)/180.0*Math.PI),midY-halfL*Math.sin((angle+90)/180.0*Math.PI)];
	return pos;		
}

function draw(nowangle, data){

	data.push(nowangle);
	data.shift();
	chart(data,[0, n - 1], "linear");	
	$("#pose-fig").empty();
	var svgContainer = d3.select("#pose-fig")
		.attr("width",200)
		.attr("height",200);

	var pos=drawPose(nowangle);
	x1=pos[0];
	y1=pos[1];
	x2=pos[2];
	y2=pos[3];
	x3=pos[4];
	y3=pos[5];
	var circle = svgContainer.append("line")
		.attr("x1",x1)
		.attr("y1",y1)
		.attr("x2",x2)
		.attr("y2",y2)
		.attr("stroke-width",2)
		.attr("stroke","black");	
	var circle = svgContainer.append("line")
		.attr("x1",50)
		.attr("y1",100)
		.attr("x2",x3)
		.attr("y2",y3)
		.attr("stroke-width",2)
		.attr("stroke","black");	

	var rotate = 'rotate(' + Math.round(nowangle).toString() + 'deg)';
	$('#woodpecker').css({ 
			'-webkit-transform': rotate,
			'-moz-transform': rotate,
			'-o-transform': rotate,
			'-ms-transform': rotate,
			'transform': rotate, 
			'height': '241px',
			'width' : '110px'
			});

	return data;
}
function float2string(f){
	var integern=0;
	var floatn=0;
	var symbol=1;
	var absf=Math.abs(f);
	symbol=f/absf;
	integern=Math.floor(absf);
	floatn=Math.abs(Math.round(absf*1000000-integern*1000000));					
	/* display of the angle ranging from -90.0 deg to 90.0 deg
	   integern >=10   ' ##.#'
	   10>integern >=0 '  #.#'				
	   0>integern>-10  ' -#.#'
	   -10>=integern   '-##.#'*/
	return (f>=10 || f<0 && f > -10 ? ' ' :'').concat((f<10 && f >=0 ? '  ':'')).concat((f>=0 ? '':'-')).concat(integern.toString()).concat('.').concat(floatn.toString());		
}

// The table generation function
function tabulate(data, columns) {
	var table = d3.select("#stattable").append("table")
		.attr("style", "margin-left: 250px"),
		thead = table.append("thead"),
		tbody = table.append("tbody");

	// append the header row
	thead.append("tr")
		.selectAll("th")
		.data(columns)
		.enter()
		.append("th")
		.text(function(column) { return column; });

	// create a row for each object in the data
	var rows = tbody.selectAll("tr")
		.data(coldata)
		.enter()
		.append("tr");
	//console.log(rows);
	// create a cell in each row for each column

	var cells = rows.selectAll("td")
		.data(function(row) {
				//console.log(row);
				return columns.map(function(column) {
					//console.log(row[column]);
					return {column: column, value: row[column] };
					});
				})
	.enter()
		.append("td")
		.attr("style", "font-family: Courier") // sets the font style
		.html(function(d) { return d.value; });

	return table;
}

// render the table

function FormatNumberLength(num, length) {//for integer part=> unused fcn
	var r = "" + num;
	while (r.length < length) {
		r = "0" + r;
	}
	return r;
} 
function calcMeanSdVar(values) {
	var r = {mean: 0, variance: 0, deviation: 0}, t = values.length;
	for(var m, s = 0, l = t; l--; s += parseInt(values[l]));
	for(m = r.mean = s / t, l = t, s = 0; l--; s += Math.pow(parseInt(values[l]) - m, 2));
	return r.deviation = Math.sqrt(r.variance = s / t), r;
}
function selectSens(){
	init();	
}
function sensModeSet(s){
	stopMeasurement();
	$('#switch').prop('checked',false);

	function sensIncL(){
		preci=90;
		console.log(preci);

	}
	function sensIncS(){
		preci=2;
		console.log(preci);

	}
	function sensAccS(){
		preci=1;
		console.log(preci);

	}
	function sensAccL(){
		preci=3;
		console.log(preci);

	}
	switch(s) {
		case "SensInc":
			socket.send('inclination');
			//preci-toggle label
			$('#preci-label').attr("data-off",'90');
			$('#preci-label').attr("data-on",'2');
			//scale number
			($('#preci-select').is(':checked')? sensIncS():sensIncL());
			//table
			sensorName=sensorName1;
			break;
		case "SensAcc":
			socket.send('acceleration');
			//preci-toggle label
			$('#preci-label').attr("data-off",'3g');
			$('#preci-label').attr("data-on",'1g');
			//scale number
			($('#preci-select').is(':checked')? sensAccS():sensAccL());
			//table
			sensorName=sensorName2;
			break;
		default:

	}

}

function init(){
	sens=$("#sens-select").val();
	setTimeout(function(){sensModeSet(sens);},300);
	data=d3.range(n).map(function(input){return 0});
	$("#plotting").empty();
	nowangle=0;
	//console.log(data);
	data=draw(nowangle, data);
	display.setValue('--.-------');
	statResult=calcMeanSdVar(data);

	/*coldata[0]=mean, coldata[1]=mass, coldata[2]=stdv, coldata[3]=max, coldata[4]=min*/
	coldata[0][sensorName1]=(Math.round(statResult.mean*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[1][sensorName1]=(Math.round(nowangle*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[2][sensorName1]=(Math.round(statResult.deviation*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[3][sensorName1]=(Math.round(Math.max.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[4][sensorName1]=(Math.round(Math.min.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);

	coldata[0][sensorName2]=(Math.round(statResult.mean*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[1][sensorName2]=(Math.round(nowangle*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[2][sensorName2]=(Math.round(statResult.deviation*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[3][sensorName2]=(Math.round(Math.max.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
	coldata[4][sensorName2]=(Math.round(Math.min.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);

	// render the table
	$("#stattable").empty();
	peopleTable= tabulate(coldata, [valueName,sensorName]);	


}				
$('#genBtn').click(function(){ //this function can be replaced by socket.onmessage = function(msg){}
		update(random()*90);
		})
function update(nowangle) {
	if(running){
		nowangle = convert(nowangle);
		$("#plotting").empty();
		data=draw(nowangle, data);
		//display.setValue(float2string(nowangle).toString());
		display.setValue(nowangle.toString());
		statResult=calcMeanSdVar(data);

		/*coldata[0]=mean, coldata[1]=mass, coldata[2]=stdv, coldata[3]=max, coldata[4]=min*/
		coldata[0][sensorName1]=(Math.round(statResult.mean*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[1][sensorName1]=(Math.round(nowangle*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[2][sensorName1]=(Math.round(statResult.deviation*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[3][sensorName1]=(Math.round(Math.max.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[4][sensorName1]=(Math.round(Math.min.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);

		coldata[0][sensorName2]=(Math.round(statResult.mean*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[1][sensorName2]=(Math.round(nowangle*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[2][sensorName2]=(Math.round(statResult.deviation*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[3][sensorName2]=(Math.round(Math.max.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);
		coldata[4][sensorName2]=(Math.round(Math.min.apply(Math,data)*roundDigitLen)/roundDigitLen).toFixed(fixDigitLen);

		//console.log(coldata);
		// render the table
		$("#stattable").empty();
		peopleTable= tabulate(coldata, [valueName,sensorName]);

	}
	else{
		init();
	}
}
function convert(acc) {

	var toRet;
	switch(preci) {
		case 90 : //inclination fullscale
			toRet = acc / lsb_inc_full;
			toRet = 180/Math.PI*Math.asin(toRet);
			break;

		case 2 : //inclination smallscale
			toRet = acc / lsb_inc_small;
			toRet = 180/Math.PI*Math.asin(toRet);
			break;

		case 1 : //acceleration smallscale
			toRet = acc / lsb_acc_small;
			break;

		case 3 : //acceleration fullscale
			toRet = acc / lsb_acc_full;
			break;
	} 
	return toRet;
}