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