From 864b87fa8a928d51ae5e5815607eef44e6be7f1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0?=
 <itsmylivex@gmail.com>
Date: Wed, 30 May 2018 13:56:04 +0300
Subject: [PATCH] html fixes

---
 html/hbs.html | 28 +++++++++++++++++++-------
 src/html.h    | 55 +++++++++++++++++++++------------------------------
 src/main.cpp  |  2 +-
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/html/hbs.html b/html/hbs.html
index 37e763a..4fa7553 100644
--- a/html/hbs.html
+++ b/html/hbs.html
@@ -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;
                         }
                     };
 
diff --git a/src/html.h b/src/html.h
index 92bfac3..6f099b8 100644
--- a/src/html.h
+++ b/src/html.h
@@ -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++)
diff --git a/src/main.cpp b/src/main.cpp
index 35a9b19..5f9b632 100644
--- a/src/main.cpp
+++ b/src/main.cpp
@@ -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);