forked from defend/nodemcu-lab-1
3 changed files with 173 additions and 146 deletions
@ -1,91 +1,108 @@ |
|||
<!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 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х"; |
|||
<head> |
|||
<style> |
|||
button |
|||
{ |
|||
width: 190px; |
|||
height: 40px; |
|||
} |
|||
|
|||
context.font = "50px Arial"; |
|||
context.fillText("24", 320, 170); |
|||
</script> |
|||
|
|||
<p id="calibrate_text" onclick="calibrateDevice()">Устройство не откалибровано.</p> |
|||
<button onclick="calibrateDevice()">Откалибровать</button> |
|||
#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; |
|||
|
|||
<div id="navs"> |
|||
<button onclick="window.location.href='/hbs.html'" class="button">Оптодатчик</button> |
|||
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> |
|||
<div class="clear"></div> |
|||
|
|||
</div> |
|||
|
|||
<footer> |
|||
Тамбовский Государственный Технический Университет 2017 г. |
|||
</footer> |
|||
|
|||
</body> |
|||
|
|||
<footer> |
|||
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г. |
|||
</footer> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue