<!DOCTYPE html>
<html>
<head>
<style>
button
{
width: 190px;
height: 40px;
}
#navs
{
height: 40px;
width: 400px;
position: relative;
}
footer
{
height: 5%;
text-align: center;
width: 100%;
margin-top: 100px;
}
.clear
{
clear: left;
}
.text
{
text-align: left;
width: 400px;
text-indent: 20px;
}
</style>
<meta charset="UTF-8">
</head>
<body>
<div id="main_block" align="center">
<h1>Лабораторная работа</h1>
<h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
<p class="text">Акселерометр подает на выход данные по одной оси.</p>
<canvas id="canvasVoltage" width="496" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas>
<p class="text"><center>График 1 - Напряжение на выводе акселерометра</center></p>
<canvas id="canvasFFT" width="440" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas>
<p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p>
<p class="text"><div id="peakFreq"></div> пиковая частота</p>
<script>
var socket = new WebSocket("ws://2.2.2.2:81");
var i, data;
var c1 = document.getElementById("canvasVoltage");
var c2 = document.getElementById("canvasFFT");
var canvasVoltage = c1.getContext("2d");
var canvasFFT = c2.getContext("2d");
var maxX = 456, maxY = 200;
var biasX = 20, biasY = 20;
//drawXYui(canvasFFT);
drawXYui(canvasVoltage);
function iY(y) {
return maxY + biasY - y;
}
function drawXYui(someCanvas) {
someCanvas.beginPath();
someCanvas.moveTo(20, iY(0));
for (i = 0; i <= 200; i+=20) {
someCanvas.lineTo(20, iY(i));
someCanvas.lineTo(15, iY(i));
someCanvas.moveTo(20, iY(i));
textY = i/200*3.3;
someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5));
}
someCanvas.moveTo(20, iY(0));
for (i = 20; i <= 420; i+=40) {
someCanvas.lineTo(i, iY(0));
someCanvas.lineTo(i, iY(-5));
someCanvas.moveTo(i, iY(0));
textX = (i-20)/456*4 ;
someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
}
someCanvas.stroke();
}
socket.onopen = function () {
alert('Соединение установлено.');
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
// first canvas update
data = JSON.parse(event.data);
if(data.data) {
canvasVoltage.clearRect(biasX, 0, maxX, maxY + biasY);
canvasVoltage.beginPath();
canvasVoltage.moveTo(biasX, data.data[0]+biasY);
for (i = 1; i < 256; i++) {
canvasVoltage.lineTo(i*2 + biasX, data.data[i] + biasY);
}
canvasVoltage.stroke();
}
if (data.fft) {
canvasFFT.clearRect(biasX, 0, maxX, maxY + biasY);
canvasFFT.beginPath();
canvasFFT.moveTo(biasX, data.fft[1]+biasY);
for (i = 2; i < 128; i++) {
canvasFFT.lineTo(i*2 + biasX, data.fft[i] + biasY);
}
canvasFFT.stroke();
}
if (data.peakFreq) {
document.getElementById("peakFreq").innerHTML = data.peakFreq;
}
};
function calibrateDevice() {
var calibrating = 10;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
}
</script>
<div class="clear"></div>
</div>
<footer>
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г.
</footer>
</body>
</html>