<!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 = 10;
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>