2 changed files with 191 additions and 100 deletions
@ -1,73 +1,135 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<style> |
|||
button { |
|||
<head> |
|||
<style> |
|||
button |
|||
{ |
|||
width: 190px; |
|||
height: 40px; |
|||
} |
|||
|
|||
#navs { |
|||
#navs |
|||
{ |
|||
height: 40px; |
|||
width: 400px; |
|||
position: relative; |
|||
} |
|||
|
|||
footer { |
|||
footer |
|||
{ |
|||
height: 5%; |
|||
text-align: center; |
|||
width: 100%; |
|||
margin-top: 100px; |
|||
} |
|||
|
|||
.clear { |
|||
.clear |
|||
{ |
|||
clear: left; |
|||
} |
|||
|
|||
#hbs_text { |
|||
.text |
|||
{ |
|||
text-align: left; |
|||
width: 400px; |
|||
text-indent: 20px; |
|||
} |
|||
</style> |
|||
</style> |
|||
<meta charset="UTF-8"> |
|||
</head> |
|||
<body> |
|||
|
|||
<body> |
|||
<div id="main_block" align="center"> |
|||
<h2>Лабораторная работа *НАЗВАНИЕ*</h2> |
|||
<h3>Высокочувствительный оптодатчик ADPD2214</h3> |
|||
<p id="hbs_text">Применяется для измерения пульса, расчета фотоплетизмограммы. Низкое энергопотребление, а также управляемое выключение |
|||
этого электроприбора позволяет использовать его в портативных устройствах. |
|||
</p> |
|||
<p id="hbs_text">Также применяется в химическом анализе. Частота обновления графика - 1 раз в двадцать секунд. Данные с сенсора снимаются |
|||
с частотой в 20Hz. </p> |
|||
|
|||
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #3c70ff;"> |
|||
Браузер устарел! |
|||
<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 c = document.getElementById("myCanvas"); |
|||
var context = c.getContext("2d"); |
|||
var randomNumbers, randNumsLength; |
|||
context.moveTo(0, 0); |
|||
for (i = 0; i != 400; i += 4) { |
|||
context.lineTo(i, Math.random() * 100 + 50); |
|||
} |
|||
context.stroke(); |
|||
context.font = "50px Arial"; |
|||
context.fillText("122",300,170); |
|||
</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; |
|||
|
|||
<div id="navs"> |
|||
<button onclick="window.location.href='/acc.html?f=0'" class="button">Акселерометр</button> |
|||
</div> |
|||
<div class="clear"></div> |
|||
//drawXYui(canvasFFT); |
|||
drawXYui(canvasVoltage); |
|||
|
|||
</div> |
|||
function iY(y) { |
|||
return maxY + biasY - y; |
|||
} |
|||
|
|||
<footer> |
|||
Тамбовский Государственный Технический Университет 2017 г. |
|||
</footer> |
|||
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(); |
|||
} |
|||
|
|||
</body> |
|||
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> |
|||
Loading…
Reference in new issue