2 changed files with 191 additions and 100 deletions
@ -1,73 +1,135 @@ |
|||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||
<html> |
<html> |
||||
|
<head> |
||||
<style> |
<style> |
||||
button { |
button |
||||
|
{ |
||||
width: 190px; |
width: 190px; |
||||
height: 40px; |
height: 40px; |
||||
} |
} |
||||
|
#navs |
||||
#navs { |
{ |
||||
height: 40px; |
height: 40px; |
||||
width: 400px; |
width: 400px; |
||||
position: relative; |
position: relative; |
||||
} |
} |
||||
|
footer |
||||
footer { |
{ |
||||
height: 5%; |
height: 5%; |
||||
text-align: center; |
text-align: center; |
||||
width: 100%; |
width: 100%; |
||||
margin-top: 100px; |
margin-top: 100px; |
||||
} |
} |
||||
|
.clear |
||||
.clear { |
{ |
||||
clear: left; |
clear: left; |
||||
} |
} |
||||
|
.text |
||||
#hbs_text { |
{ |
||||
text-align: left; |
text-align: left; |
||||
width: 400px; |
width: 400px; |
||||
text-indent: 20px; |
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;"> |
<div id="main_block" align="center"> |
||||
Браузер устарел! |
<h1>Лабораторная работа</h1> |
||||
|
<h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2> |
||||
|
<p class="text">Акселерометр подает на выход данные по одной оси.</p> |
||||
|
<canvas id="canvasVoltage" width="496" height="240" style="border:0px solid #000000;"> |
||||
|
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком! |
||||
</canvas> |
</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> |
<script> |
||||
var c = document.getElementById("myCanvas"); |
var socket = new WebSocket("ws://2.2.2.2:81"); |
||||
var context = c.getContext("2d"); |
var i, data; |
||||
var randomNumbers, randNumsLength; |
var c1 = document.getElementById("canvasVoltage"); |
||||
context.moveTo(0, 0); |
var c2 = document.getElementById("canvasFFT"); |
||||
for (i = 0; i != 400; i += 4) { |
var canvasVoltage = c1.getContext("2d"); |
||||
context.lineTo(i, Math.random() * 100 + 50); |
var canvasFFT = c2.getContext("2d"); |
||||
} |
var maxX = 456, maxY = 200; |
||||
context.stroke(); |
var biasX = 20, biasY = 20; |
||||
context.font = "50px Arial"; |
|
||||
context.fillText("122",300,170); |
|
||||
</script> |
|
||||
|
|
||||
<div id="navs"> |
//drawXYui(canvasFFT); |
||||
<button onclick="window.location.href='/acc.html?f=0'" class="button">Акселерометр</button> |
drawXYui(canvasVoltage); |
||||
</div> |
|
||||
<div class="clear"></div> |
|
||||
|
|
||||
</div> |
function iY(y) { |
||||
|
return maxY + biasY - y; |
||||
|
} |
||||
|
|
||||
|
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(); |
||||
|
} |
||||
|
|
||||
|
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> |
<footer> |
||||
Тамбовский Государственный Технический Университет 2017 г. |
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г. |
||||
</footer> |
</footer> |
||||
|
|
||||
</body> |
</body> |
||||
|
|
||||
</html> |
</html> |
||||
Loading…
Reference in new issue