/visualizer.html
Created Jun 23, 2016
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