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

2
src/main.cpp
View File

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

Write Preview
Loading…
Cancel
Save