<!DOCTYPE html>
< html >
< 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;
}
< / style >
< body >
< div id = "main_block" align = "center" >
< h2 > Лабораторная работа *НАЗВАНИЕ*< / h2 >
< h3 > Акселерометр ADW22035Z - Cемейство ADXL103< / h3 >
< p > Акселерометр подает на выход данные по одной оси.
< br / > Частота обновления графика - 1 раз в двадцать секунд.
< br / > Данные с сенсора снимаются с частотой в 20Hz. < / p >
< canvas id = "myCanvas" width = "400" height = "200" style = "border:1px solid #000000;" >
Браузер устарел!
< / canvas >
< script >
var socket = new WebSocket("ws://192.168.4.1:81");
var data;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
socket.onopen = function () {
alert("Соединение установлено.");
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
context.clearRect(0, 0, c.width, c.height);
data = event.data;
context.moveTo(0, 0);
for (i = 0; i != 400; i += 2) {
context.lineTo(i, data.root[i]);
}
context.stroke();
};
function calibrateDevice() {
var calibrating = 5;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
}
context.font = "50px Arial";
context.fillText("24", 320, 170);
< / script >
< p id = "calibrate_text" onclick = "calibrateDevice()" > Устройство не откалибровано.< / p >
< button onclick = "calibrateDevice()" > Откалибровать< / button >
< div id = "navs" >
< button onclick = "window.location.href='/hbs.html'" class = "button" > Оптодатчик< / button >
< / div >
< div class = "clear" > < / div >
< / div >
< footer >
Тамбовский Государственный Технический Университет 2017 г.
< / footer >
< / body >
< / html >
