defend
/
nodemcu-lab-1
1
1
Fork 1
Code Issues Pull Requests Releases Wiki Activity
Browse Source

html fixes

master
Никита 6 years ago
parent
ed1512726f
commit
864b87fa8a
3 changed files with 45 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      html/hbs.html
  2. 55
      src/html.h
  3. 2
      src/main.cpp

28
html/hbs.html
View File

@ -39,15 +39,16 @@
<h1>Лабораторная работа</h1> <h1>Лабораторная работа</h1>
<h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2> <h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
<p class="text">Акселерометр подает на выход данные по одной оси.</p> <p class="text">Акселерометр подает на выход данные по одной оси.</p>
<canvas id="canvasVoltage" width="496" height="240" style="border:0px solid #000000;"> <canvas id="canvasVoltage" width="552" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком! Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas> </canvas>
<p class="text"><center>График 1 - Напряжение на выводе акселерометра</center></p> <p class="text"><center>График 1 - Напряжение на выводе акселерометра</center></p>
<canvas id="canvasFFT" width="440" height="240" style="border:0px solid #000000;"> <canvas id="canvasFFT" width="296" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком! Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas> </canvas>
<p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p> <p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p>
<p class="text"><div id="peakFreq"></div> пиковая частота</p> <p class="text"><div id="peakFreq">0</div>Hz - пиковая частота</p>
<p class="text"><div id="steps">0</div> шагов</p>
<script> <script>
var socket = new WebSocket("ws://2.2.2.2:81"); var socket = new WebSocket("ws://2.2.2.2:81");
var i, data; var i, data;
@ -55,11 +56,11 @@
var c2 = document.getElementById("canvasFFT"); var c2 = document.getElementById("canvasFFT");
var canvasVoltage = c1.getContext("2d"); var canvasVoltage = c1.getContext("2d");
var canvasFFT = c2.getContext("2d"); var canvasFFT = c2.getContext("2d");
var maxX = 456, maxY = 200; var maxX = 512, maxY = 200;
var biasX = 20, biasY = 20; var biasX = 20, biasY = 20;
//drawXYui(canvasFFT);
drawXYui(canvasVoltage); drawXYui(canvasVoltage);
drawXYui2(canvasFFT);
function iY(y) { function iY(y) {
return maxY + biasY - y; return maxY + biasY - y;
@ -76,11 +77,23 @@
someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5)); someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5));
} }
someCanvas.moveTo(20, iY(0)); someCanvas.moveTo(20, iY(0));
for (i = 20; i <= 420; i+=40) { for (i = 20; i <= 552; i+=40) {
someCanvas.lineTo(i, iY(0)); someCanvas.lineTo(i, iY(0));
someCanvas.lineTo(i, iY(-5)); someCanvas.lineTo(i, iY(-5));
someCanvas.moveTo(i, iY(0)); someCanvas.moveTo(i, iY(0));
textX = (i-20)/456*4 ; 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.fillText(textX.toFixed(1), i-10, iY(-20));
} }
someCanvas.stroke(); someCanvas.stroke();
@ -117,6 +130,7 @@
} }
if (data.peakFreq) { if (data.peakFreq) {
document.getElementById("peakFreq").innerHTML = data.peakFreq; document.getElementById("peakFreq").innerHTML = data.peakFreq;
document.getElementById("steps").innerHTML = data.steps;
} }
}; };

55
src/html.h
View File

@ -2,11 +2,7 @@
enum parts enum parts
{ {
HTML_BEGIN, HTML_BEGIN
HTML_END,
STYLE,
SCRIPT,
ACC_CALIBRATE
}; };
const char html_begin[] PROGMEM = R"===( const char html_begin[] PROGMEM = R"===(
@ -51,16 +47,16 @@ const char html_begin[] PROGMEM = R"===(
<h1>Лабораторная работа</h1> <h1>Лабораторная работа</h1>
<h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2> <h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
<p class="text">Акселерометр подает на выход данные по одной оси.</p> <p class="text">Акселерометр подает на выход данные по одной оси.</p>
<canvas id="canvasVoltage" width="496" height="240" style="border:0px solid #000000;"> <canvas id="canvasVoltage" width="552" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком! Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas> </canvas>
<p class="text"><center>График 1 - Напряжение на выводе акселерометра</center></p> <p class="text"><center>График 1 - Напряжение на выводе акселерометра [OX - t,c; OY - U,В]</center></p>
<canvas id="canvasFFT" width="440" height="240" style="border:0px solid #000000;"> <canvas id="canvasFFT" width="296" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком! Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas> </canvas>
<p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p> <p class="text"><center>График 2 - Частотный спектр [OX - f,Гц; OY - U,В] (быстрое преобразование Фурье)</center></p>
<p class="text"><div id="peakFreq">0</div>Hz - пиковая частота</p> <p class="text"><center><span id="peakFreq">0</span>Hz - пиковая частота</center></p>
<p class="text"><div id="steps">0</div> шагов</p> <p class="text"><center><span id="steps">0</span> шагов</center></p>
<script> <script>
var socket = new WebSocket("ws://2.2.2.2:81"); var socket = new WebSocket("ws://2.2.2.2:81");
var i, data; var i, data;
@ -68,11 +64,11 @@ const char html_begin[] PROGMEM = R"===(
var c2 = document.getElementById("canvasFFT"); var c2 = document.getElementById("canvasFFT");
var canvasVoltage = c1.getContext("2d"); var canvasVoltage = c1.getContext("2d");
var canvasFFT = c2.getContext("2d"); var canvasFFT = c2.getContext("2d");
var maxX = 456, maxY = 200; var maxX = 512, maxY = 200;
var biasX = 20, biasY = 20; var biasX = 20, biasY = 20;
//drawXYui(canvasFFT);
drawXYui(canvasVoltage); drawXYui(canvasVoltage);
drawXYui2(canvasFFT);
function iY(y) { function iY(y) {
return maxY + biasY - y; return maxY + biasY - y;
@ -89,11 +85,23 @@ const char html_begin[] PROGMEM = R"===(
someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5)); someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5));
} }
someCanvas.moveTo(20, iY(0)); someCanvas.moveTo(20, iY(0));
for (i = 20; i <= 420; i+=40) { for (i = 20; i <= 552; i+=40) {
someCanvas.lineTo(i, iY(0)); someCanvas.lineTo(i, iY(0));
someCanvas.lineTo(i, iY(-5)); someCanvas.lineTo(i, iY(-5));
someCanvas.moveTo(i, iY(0)); someCanvas.moveTo(i, iY(0));
textX = (i-20)/456*4 ; 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 <= 296; i+=40) {
someCanvas.lineTo(i, iY(0));
someCanvas.lineTo(i, iY(-5));
someCanvas.moveTo(i, iY(0));
textX = (i-20)/256*15 ;
someCanvas.fillText(textX.toFixed(1), i-10, iY(-20)); someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
} }
someCanvas.stroke(); someCanvas.stroke();
@ -150,11 +158,6 @@ const char html_begin[] PROGMEM = R"===(
)==="; )===";
const char acc_calibrate[] PROGMEM = R"=(
<p id="calibrate_text">Устройство не откалибровано.</p>
<button onclick="calibrateDevice()">Откалибровать</button>
)=";
static int getHtml(parts p, char &adr, uint16_t buf_size, uint16_t bias) static int getHtml(parts p, char &adr, uint16_t buf_size, uint16_t bias)
{ {
char *buffer = &adr; char *buffer = &adr;
@ -165,18 +168,6 @@ static int getHtml(parts p, char &adr, uint16_t buf_size, uint16_t bias)
case HTML_BEGIN: case HTML_BEGIN:
html_part = html_begin; html_part = html_begin;
break; break;
// case HTML_END:
// html_part = html_end;
// break;
// case STYLE:
// html_part = style;
// break;
// case SCRIPT:
// html_part = script;
// break;
case ACC_CALIBRATE:
html_part = acc_calibrate;
break;
} }
length = strlen_P(html_part); length = strlen_P(html_part);
for (int i = 0; i != length; i++) for (int i = 0; i != length; i++)

2
src/main.cpp
View File

@ -40,7 +40,7 @@ WebSocketsServer webSocket = WebSocketsServer(81);
void handleAccelerometer() void handleAccelerometer()
{ {
int16_t bias = 0; int16_t bias = 0;
const int arr_size = 7000; const int arr_size = 8000;
char *html_code = new char[arr_size]; char *html_code = new char[arr_size];
memset(html_code, '\0', sizeof(char) * arr_size); memset(html_code, '\0', sizeof(char) * arr_size);
bias += getHtml(HTML_BEGIN, *html_code, arr_size, 0); bias += getHtml(HTML_BEGIN, *html_code, arr_size, 0);

Write Preview
Loading…
Cancel
Save