Raspoid - Accelerometer, gyroscope, complementary filter: visualizer.
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"> | |
<script type="text/javascript" src="jquery-1.12.1.min.js"></script> | |
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> | |
<script type="text/javascript"> | |
var active = false; | |
var ipAddress; | |
var port; | |
var route; | |
var selectedLevel1; | |
var selectedLevel2; | |
var measuresPerSecond = 10; | |
var title = 'Accelerometer - accelerations'; | |
var nbOfData = 60; | |
var xPoints = new Array(nbOfData + 1); | |
xPoints[0] = ['time', 'x', 'y', 'z']; | |
for (var i = 1; i < xPoints.length; i++) { | |
xPoints[i] = [i, 0, 0, 0]; | |
} | |
google.charts.load('current', {'packages':['corechart']}); | |
google.charts.setOnLoadCallback(function(){drawChart(xPoints)}); | |
function drawChart(data) { | |
var data = google.visualization.arrayToDataTable(data); | |
var options = { | |
title: title, | |
curveType: 'function', | |
legend: { position: 'bottom' }, | |
// vAxis: { maxValue: 180, minValue: -180}, | |
}; | |
var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); | |
chart.draw(data, options); | |
} | |
function updatePrintedValues(newValues) { | |
$("#xPrintedValue").text(newValues[0].toFixed(6)); | |
$("#yPrintedValue").text(newValues[1].toFixed(6)); | |
$("#zPrintedValue").text(newValues[2].toFixed(6)); | |
} | |
function getGyroOffsets() { | |
$.get( "http://" + ipAddress + ":" + port + "/gyro_angular_speeds_offsets", function( data ) { | |
var splittedData = data.split(' '); | |
xValue = parseFloat(splittedData[0]), yValue = parseFloat(splittedData[1]), zValue = parseFloat(splittedData[2]); | |
console.log("x:" + xValue + " y:" + yValue + " z:" + zValue); | |
}); | |
} | |
function updateData() { | |
if(active) { | |
$.get( "http://" + ipAddress + ":" + port + "/" + route, function( data ) { | |
var splittedData = data.split(' '); | |
xValue = parseFloat(splittedData[0]), yValue = parseFloat(splittedData[1]), zValue = parseFloat(splittedData[2]); | |
xPoints = slideArrayData(xPoints, xValue, yValue, zValue); | |
updatePrintedValues([xValue, yValue, zValue]); | |
drawChart(xPoints); | |
}); | |
} | |
} | |
function slideArrayData(array, newXValue, newYValue, newZValue) { | |
var arraySize = array.length; | |
var result = new Array(arraySize); | |
for(var i = 0; i < array.length; i++) { | |
result[i] = array[i + 1]; | |
} | |
result[0] = array[0]; | |
result[arraySize - 1] = [parseInt(array[arraySize - 1]) + 1, newXValue, newYValue, newZValue]; | |
return result; | |
} | |
$(function() { | |
// LEVEL 1 | |
selectedLevel1 = $('input[type=radio][name=signalSelectLevel1]:checked').val(); | |
$("#accelerometer").show(); | |
$("#gyroscope").hide(); | |
$("#complementaryFilter").hide(); | |
$('input[type=radio][name=signalSelectLevel1]').on('change', function(event) { | |
signalSelectLevel1 = $(this).val(); | |
if(signalSelectLevel1 == 'accelerometer') { | |
selectedLevel1 = 'accelerometer'; | |
$("#accelerometer").show(); | |
$("#gyroscope").hide(); | |
$("#complementaryFilter").hide(); | |
} else if(signalSelectLevel1 == 'gyroscope') { | |
$("#accelerometer").hide(); | |
$("#gyroscope").show(); | |
$("#complementaryFilter").hide(); | |
} else if(signalSelectLevel1 == 'complementaryFilter') { | |
$("#accelerometer").hide(); | |
$("#gyroscope").hide(); | |
$("#complementaryFilter").show(); | |
} | |
}); | |
var timer; | |
$("#playButton").on('click', function(e) { | |
clearInterval(timer); | |
measuresPerSecond = parseInt($("#frequencyInput").val()); | |
timer = setInterval(updateData, 1000/measuresPerSecond); | |
ipAddress = $("#ipInput").val(); | |
port = $("#portInput").val(); | |
signalSelectLevel1 = $('input[type=radio][name=signalSelectLevel1]:checked').val(); | |
if(signalSelectLevel1 == 'accelerometer') { | |
selectedLevel2 = $('input[type=radio][name=accelerometerSignalSelectLevel2]:checked').val(); | |
if(selectedLevel2 == 'accelerations') { | |
title = 'Accelerometer - accelerations'; | |
route = 'accel_accelerations'; | |
} else if(selectedLevel2 == 'angles') { | |
title = 'Accelerometer - angles'; | |
route = 'accel'; | |
} | |
} else if(signalSelectLevel1 == 'gyroscope') { | |
selectedLevel2 = $('input[type=radio][name=gyroscopeSignalSelectLevel2]:checked').val(); | |
if(selectedLevel2 == 'angularSpeeds') { | |
title = 'Gyroscope - angular speeds'; | |
route = 'gyro_angular_speeds'; | |
getGyroOffsets(); | |
} else if(selectedLevel2 == 'angles') { | |
title = 'Gyroscope - angles'; | |
route = 'gyro'; | |
} | |
} else if(signalSelectLevel1 == 'complementaryFilter') { | |
selectedLevel2 = $('input[type=radio][name=complementaryFilterSignalSelectLevel2]:checked').val(); | |
if(selectedLevel2 == 'angles') { | |
title = 'Complementary filter - angles'; | |
route = 'filtered'; | |
} | |
} | |
active = true; | |
}); | |
$("#pauseButton").on('click', function(e) { | |
active = false; | |
clearInterval(timer); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row" style="margin-top: 15px;"> | |
<div class="panel panel-default"> | |
<div class="panel-body"> | |
<label class="radio-inline"> | |
<input type="radio" name="signalSelectLevel1" id="inlineRadio1" value="accelerometer" checked="checked"> Accelerometer | |
</label> | |
<label class="radio-inline"> | |
<input type="radio" name="signalSelectLevel1" id="inlineRadio2" value="gyroscope"> Gyroscope | |
</label> | |
<label class="radio-inline"> | |
<input type="radio" name="signalSelectLevel1" id="inlineRadio3" value="complementaryFilter"> Complementary filter | |
</label> | |
<hr> | |
<div id="accelerometer"> | |
<label class="radio-inline"> | |
<input type="radio" name="accelerometerSignalSelectLevel2" id="accelerometerInlineRadio1" value="accelerations" checked="checked"> Accelerations | |
</label> | |
<label class="radio-inline"> | |
<input type="radio" name="accelerometerSignalSelectLevel2" id="accelerometerInlineRadio2" value="angles"> Angles | |
</label> | |
</div> | |
<div id="gyroscope"> | |
<label class="radio-inline"> | |
<input type="radio" name="gyroscopeSignalSelectLevel2" id="gyroscopeInlineRadio1" value="angularSpeeds" checked="checked"> Angular speeds | |
</label> | |
<label class="radio-inline"> | |
<input type="radio" name="gyroscopeSignalSelectLevel2" id="gyroscopeInlineRadio2" value="angles"> Angles | |
</label> | |
</div> | |
<div id="complementaryFilter"> | |
<label class="radio-inline"> | |
<input type="radio" name="complementaryFilterSignalSelectLevel2" id="complementaryFilterInlineRadio1" value="angles" checked="checked"> Angles | |
</label> | |
</div> | |
<hr> | |
<div id="general"> | |
<div class="form-inline"> | |
<label for="ipInput">IP</label> | |
<input type="text" class="form-control" id="ipInput" placeholder="ip address" value="192.168.2.2"> | |
<label for="portInput">Port</label> | |
<input type="text" class="form-control" id="portInput" placeholder="port" value="80"> | |
<button id="playButton" class="btn btn-default">Play</button> | |
<button id="pauseButton" class="btn btn-default">Pause</button> | |
<label for="frequencyInput">Measures/sec</label> | |
<input type="text" class="form-control" id="frequencyInput" placeholder="frequency" value="10"> | |
<label for="dlpfInput">DLPF</label> | |
<input type="text" class="form-control" id="dlpfInput" placeholder="DLPF"> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-md-4 text-center"> | |
<h4>X</h4> | |
<span id="xPrintedValue">-</span> | |
</div> | |
<div class="col-md-4 text-center"> | |
<h4>Y</h4> | |
<span id="yPrintedValue">-</span> | |
</div> | |
<div class="col-md-4 text-center"> | |
<h4>Z</h4> | |
<span id="zPrintedValue">-</span> | |
</div> | |
</div> | |
</div> | |
<div id="curve_chart" style="width: 100%; height: 100%"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment