two new buttons for csv data export

.gitignore

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

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));

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>
+            <form>
-            <p class="text"><center><span id="peakFreq">0</span>Hz - пиковая частота</center></p>
+                <input type="button" OnClick="getCsv(fftArr);" value="Сохранить данные">
-            <p class="text"><center><span id="steps">0</span> шагов</center></p>
+            </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));

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>