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

two new buttons for csv data export

master
Никита 7 years ago
parent
864b87fa8a
commit
66ab765b5d
4 changed files with 54 additions and 8 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. 2
      .gitignore
  2. 23
      html/hbs.html
  3. 35
      src/html.h
  4. 2
      src/main.cpp

2
.gitignore
View File

@ -6,4 +6,4 @@
.vscode/launch.json
.vscode
.vscode/.browse.c_cpp.db*
.lib/readme.txt
lib/readme.txt

23
html/hbs.html
View File

@ -43,15 +43,22 @@
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</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");
@ -118,6 +125,7 @@
canvasVoltage.lineTo(i*2 + biasX, data.data[i] + biasY);
}
canvasVoltage.stroke();
voltageArr = data.data;
}
if (data.fft) {
canvasFFT.clearRect(biasX, 0, maxX, maxY + biasY);
@ -127,6 +135,7 @@
canvasFFT.lineTo(i*2 + biasX, data.fft[i] + biasY);
}
canvasFFT.stroke();
fftArr = data.fft;
}
if (data.peakFreq) {
document.getElementById("peakFreq").innerHTML = data.peakFreq;
@ -134,6 +143,20 @@
}
};
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));

35
src/html.h
View File

@ -50,16 +50,23 @@ const char html_begin[] PROGMEM = R"===(
<canvas id="canvasVoltage" width="552" height="240" style="border:0px solid #000000;">
Браузер устарел! Установите современный браузер, для того, чтобы ознакомиться с графиком!
</canvas>
<p class="text"><center>График 1 - Напряжение на выводе акселерометра [OX - t,c; OY - U,В]</center></p>
<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>
<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>
<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");
@ -97,11 +104,11 @@ const char html_begin[] PROGMEM = R"===(
function drawXYui2(someCanvas) {
someCanvas.beginPath();
someCanvas.moveTo(20, iY(0));
for (i = 20; i <= 296; 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)/256*15 ;
textX = (i-20)/276*15 ;
someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
}
someCanvas.stroke();
@ -126,6 +133,7 @@ const char html_begin[] PROGMEM = R"===(
canvasVoltage.lineTo(i*2 + biasX, data.data[i] + biasY);
}
canvasVoltage.stroke();
voltageArr = data.data;
}
if (data.fft) {
canvasFFT.clearRect(biasX, 0, maxX, maxY + biasY);
@ -135,6 +143,7 @@ const char html_begin[] PROGMEM = R"===(
canvasFFT.lineTo(i*2 + biasX, data.fft[i] + biasY);
}
canvasFFT.stroke();
fftArr = data.fft;
}
if (data.peakFreq) {
document.getElementById("peakFreq").innerHTML = data.peakFreq;
@ -142,6 +151,20 @@ const char html_begin[] PROGMEM = R"===(
}
};
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));

2
src/main.cpp
View File

@ -1,7 +1,7 @@
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <html.h>
#include <Html.h>
#include <Graph.h>
#include <Sensor.h>
#include <WebSocketsServer.h>

Write Preview
Loading…
Cancel
Save