Browse Source

two new buttons for csv data export

master
Никита 6 years ago
parent
commit
66ab765b5d
  1. 2
      .gitignore
  2. 23
      html/hbs.html
  3. 35
      src/html.h
  4. 2
      src/main.cpp

2
.gitignore

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

23
html/hbs.html

@ -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

@ -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

@ -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>

Loading…
Cancel
Save