Skip to content

Instantly share code, notes, and snippets.

@JulienLouette

JulienLouette/visualizer.html

Created June 23, 2016 07:14
Show Gist options
  • Save JulienLouette/0f7e1f468b85f66da7af17de821ed512 to your computer and use it in GitHub Desktop.
Save JulienLouette/0f7e1f468b85f66da7af17de821ed512 to your computer and use it in GitHub Desktop.
Download ZIP
Raspoid - Accelerometer, gyroscope, complementary filter: visualizer.
Raw
visualizer.html
<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