JulienLouette/visualizer.html

## 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>
	<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>