You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
203 lines
8.3 KiB
203 lines
8.3 KiB
#include <Arduino.h>
|
|
|
|
enum parts
|
|
{
|
|
HTML_BEGIN
|
|
};
|
|
|
|
const char html_begin[] PROGMEM = R"===(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<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;
|
|
}
|
|
.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 class="text">Акселерометр подает на выход данные по одной оси.</p>
|
|
<canvas id="canvasVoltage" width="552" height="240" style="border:0px solid #000000;">
|
|
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
|
|
</canvas>
|
|
<p class="text"><center>График 1 - Напряжение на выводе акселерометра</center></p>
|
|
<form>
|
|
<input type="button" OnClick="getCsv(voltageArr);" value="Сохранить данные">
|
|
</form>
|
|
<canvas id="canvasFFT" width="296" height="240" style="border:0px solid #000000;">
|
|
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
|
|
</canvas>
|
|
<form>
|
|
<input type="button" OnClick="getCsv(fftArr);" value="Сохранить данные">
|
|
</form>
|
|
<p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p>
|
|
<p class="text"><div id="peakFreq">0</div>Hz - пиковая частота</p>
|
|
<p class="text"><div id="steps">0</div> шагов</p>
|
|
<script>
|
|
var socket = new WebSocket("ws://2.2.2.2:81");
|
|
var i, data;
|
|
var voltageArr, fftArr;
|
|
var c1 = document.getElementById("canvasVoltage");
|
|
var c2 = document.getElementById("canvasFFT");
|
|
var canvasVoltage = c1.getContext("2d");
|
|
var canvasFFT = c2.getContext("2d");
|
|
var maxX = 512, maxY = 200;
|
|
var biasX = 20, biasY = 20;
|
|
|
|
drawXYui(canvasVoltage);
|
|
drawXYui2(canvasFFT);
|
|
|
|
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 <= 552; i+=40) {
|
|
someCanvas.lineTo(i, iY(0));
|
|
someCanvas.lineTo(i, iY(-5));
|
|
someCanvas.moveTo(i, iY(0));
|
|
textX = (i-20)/512*8.5 ;
|
|
someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
|
|
}
|
|
someCanvas.stroke();
|
|
}
|
|
function drawXYui2(someCanvas) {
|
|
someCanvas.beginPath();
|
|
someCanvas.moveTo(20, iY(0));
|
|
for (i = 20; i <= 552; i+=40) {
|
|
someCanvas.lineTo(i, iY(0));
|
|
someCanvas.lineTo(i, iY(-5));
|
|
someCanvas.moveTo(i, iY(0));
|
|
textX = (i-20)/276*15 ;
|
|
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();
|
|
voltageArr = data.data;
|
|
}
|
|
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();
|
|
fftArr = data.fft;
|
|
}
|
|
if (data.peakFreq) {
|
|
document.getElementById("peakFreq").innerHTML = data.peakFreq;
|
|
document.getElementById("steps").innerHTML = data.steps;
|
|
}
|
|
};
|
|
|
|
function downloadableCSV(rows) {
|
|
var content = "data:text/csv;charset=utf-8,";
|
|
rows.forEach(function(row, index) {
|
|
content += row + "\n";
|
|
});
|
|
return encodeURI(content);
|
|
}
|
|
|
|
function getCsv (array) {
|
|
if (array) {
|
|
window.open(downloadableCSV(array));
|
|
}
|
|
}
|
|
|
|
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>
|
|
)===";
|
|
|
|
|
|
static int getHtml(parts p, char &adr, uint16_t buf_size, uint16_t bias)
|
|
{
|
|
char *buffer = &adr;
|
|
const char *html_part;
|
|
int length = 0;
|
|
switch (p)
|
|
{
|
|
case HTML_BEGIN:
|
|
html_part = html_begin;
|
|
break;
|
|
}
|
|
length = strlen_P(html_part);
|
|
for (int i = 0; i != length; i++)
|
|
{
|
|
if (i > buf_size)
|
|
return i;
|
|
buffer[i + bias] = pgm_read_byte_near(html_part + i);
|
|
}
|
|
return length;
|
|
}
|