<!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;
}
#hbs_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 id="hbs_text">Акселерометр подает на выход данные по одной оси.</p>
<p id="hbs_text">Частота обновления графика - 1 раз в секунду. Данные с сенсора снимаются
с частотой в 50Hz. </p>
<canvas id="myCanvas" width="440" height="240" style="border:0px solid #000000;">
Браузер устарел!
</canvas>
<script>
var socket = new WebSocket("ws://192.168.1.1:81");
var i, data;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var maxX = 400, maxY = 200;
var biasX = 20, biasY = 20;
function iY(y) {
return maxY + biasY - y;
}
// отрисовка OY шкалы
context.moveTo(20, iY(0));
for (i = 0; i <= 200; i+=20) {
context.lineTo(20, iY(i));
context.lineTo(15, iY(i));
context.moveTo(20, iY(i));
textY = i/200*3.3;
context.fillText(textY.toFixed(1), 0, iY(i-2.5));
}
// отрисовка OX шкалы
context.moveTo(20, iY(0));
for (i = 20; i <= 420; i+=40) {
context.lineTo(i, iY(0));
context.lineTo(i, iY(-5));
context.moveTo(i, iY(0));
textX = (i-20)/400*4 ;
context.fillText(textX.toFixed(1), i-10, iY(-20));
}
context.stroke();
socket.onopen = function () {
alert('Соединение установлено.');
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
context.clearRect(biasX, biasY, maxX, maxY);
context.beginPath();
data = JSON.parse(event.data);
context.moveTo(biasX, data.data[0]+biasY);
for (i = 0; i < 200; i++) {
context.lineTo(i*2 + biasX, data.data[i] + biasY);
}
context.stroke();
};
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>