diff --git a/html/hbs.html b/html/hbs.html
index 4a2290d..37e763a 100644
--- a/html/hbs.html
+++ b/html/hbs.html
@@ -1,73 +1,135 @@
 <!DOCTYPE html>
 <html>
-<style>
-    button {
-        width: 190px;
-        height: 40px;
-    }
-
-    #navs {
-        height: 40px;
-        width: 400px;
-        position: relative;
-    }
-
-    footer {
-        height: 5%;
-        text-align: center;
-        width: 100%;
-        margin-top: 100px;
-    }
-
-    .clear {
-        clear: left;
-    }
-
-    #hbs_text {
-        text-align: left;
-        width: 400px;
-        text-indent: 20px;
-    }
-</style>
-
-<body>
-    <div id="main_block" align="center">
-        <h2>Лабораторная работа *НАЗВАНИЕ*</h2>
-        <h3>Высокочувствительный оптодатчик ADPD2214</h3>
-        <p id="hbs_text">Применяется для измерения пульса, расчета фотоплетизмограммы. Низкое энергопотребление, а также управляемое выключение
-            этого электроприбора позволяет использовать его в портативных устройствах.
-        </p>
-        <p id="hbs_text">Также применяется в химическом анализе. Частота обновления графика - 1 раз в двадцать секунд. Данные с сенсора снимаются
-            с частотой в 20Hz. </p>
-
-        <canvas id="myCanvas" width="400" height="200" style="border:1px solid #3c70ff;">
-            Браузер устарел!
-        </canvas>
-
-        <script>
-            var c = document.getElementById("myCanvas");
-            var context = c.getContext("2d");
-            var randomNumbers, randNumsLength;
-            context.moveTo(0, 0);
-            for (i = 0; i != 400; i += 4) {
-                context.lineTo(i, Math.random() * 100 + 50);
+    <head>
+        <style>
+            button 
+            {
+                width: 190px;
+                height: 40px;
             }
-            context.stroke();
-            context.font = "50px Arial";
-            context.fillText("122",300,170);
-        </script>
-
-        <div id="navs">
-            <button onclick="window.location.href='/acc.html?f=0'" class="button">Акселерометр</button>
-        </div>
-        <div class="clear"></div>
+            #navs 
+            {
+                height: 40px;
+                width: 400px;
+                position: relative;
+            }
+            footer 
+            {
+                height: 5%;
+                text-align: center;
+                width: 100%;
+                margin-top: 100px;
+            }
+            .clear 
+            {
+                clear: left;
+            }
+            .text 
+            {
+                text-align: left;
+                width: 400px;
+                text-indent: 20px;
+            }
+        </style>
+        <meta charset="UTF-8">
+    </head>
+    <body>
+    
+        <div id="main_block" align="center">
+            <h1>Лабораторная работа</h1>
+            <h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
+            <p class="text">Акселерометр подает на выход данные по одной оси.</p>
+            <canvas id="canvasVoltage" width="496" 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>
+            <p class="text"><center>График 2 - Частотный спектр (быстрое преобразование Фурье)</center></p>
+            <p class="text"><div id="peakFreq"></div> пиковая частота</p>
+            <script>
+                    var socket = new WebSocket("ws://2.2.2.2:81");
+                    var i, data;
+                    var c1 = document.getElementById("canvasVoltage");
+                    var c2 = document.getElementById("canvasFFT");
+                    var canvasVoltage = c1.getContext("2d");
+                    var canvasFFT = c2.getContext("2d");
+                    var maxX = 456, maxY = 200;
+                    var biasX = 20, biasY = 20;
 
-    </div>
+                    //drawXYui(canvasFFT);
+                    drawXYui(canvasVoltage);
 
-    <footer>
-        Тамбовский Государственный Технический Университет 2017 г.
-    </footer>
+                    function iY(y) {
+                        return maxY + biasY - y;
+                    }
 
-</body>
+                    function drawXYui(someCanvas) {
+                        someCanvas.beginPath();
+                        someCanvas.moveTo(20, iY(0));
+                        for (i = 0; i <= 200; i+=20) {
+                            someCanvas.lineTo(20, iY(i));
+                            someCanvas.lineTo(15, iY(i));
+                            someCanvas.moveTo(20, iY(i));
+                            textY = i/200*3.3;
+                            someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5));
+                        }
+                        someCanvas.moveTo(20, iY(0));
+                        for (i = 20; i <= 420; i+=40) {
+                            someCanvas.lineTo(i, iY(0));
+                            someCanvas.lineTo(i, iY(-5));
+                            someCanvas.moveTo(i, iY(0));
+                            textX = (i-20)/456*4 ;
+                            someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
+                        }
+                        someCanvas.stroke();
+                    }
+                    
+                    socket.onopen = function () {
+                        alert('Соединение установлено.');
+                    };
+                    socket.onclose = function (event) {
+                        if (!event.wasClean) {
+                            alert('Обрыв соединения'); 
+                        }
+                    };
+                    socket.onmessage = function (event) {
+                        // first canvas update
+                        data =  JSON.parse(event.data);
+                        if(data.data) {
+                            canvasVoltage.clearRect(biasX, 0, maxX, maxY + biasY);
+                            canvasVoltage.beginPath();
+                            canvasVoltage.moveTo(biasX, data.data[0]+biasY);
+                            for (i = 1; i < 256; i++) {
+                                canvasVoltage.lineTo(i*2 + biasX, data.data[i] + biasY);
+                            }
+                            canvasVoltage.stroke();
+                        } 
+                        if (data.fft) { 
+                            canvasFFT.clearRect(biasX, 0, maxX, maxY + biasY);
+                            canvasFFT.beginPath();
+                            canvasFFT.moveTo(biasX, data.fft[1]+biasY);
+                            for (i = 2; i < 128; i++) {
+                                canvasFFT.lineTo(i*2 + biasX, data.fft[i] + biasY);
+                            }
+                            canvasFFT.stroke();
+                        }
+                        if (data.peakFreq) {
+                            document.getElementById("peakFreq").innerHTML = data.peakFreq;
+                        }
+                    };
 
+                    function calibrateDevice() {
+                        var calibrating = 10;
+                        socket.send(JSON.stringify(calibrating));
+                        document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
+                    }
+                </script>
+            <div class="clear"></div>
+        </div>
+        <footer>
+            <hr \>Тамбовский Государственный Технический Университет 2017-2018 г.
+        </footer>
+    </body>
 </html>
\ No newline at end of file
diff --git a/src/html.h b/src/html.h
index 3547d70..92bfac3 100644
--- a/src/html.h
+++ b/src/html.h
@@ -9,7 +9,7 @@ enum parts
     ACC_CALIBRATE
 };
 
-const char html_begin[] PROGMEM = R"(
+const char html_begin[] PROGMEM = R"===(
 <!DOCTYPE html>
 <html>
     <head>
@@ -36,7 +36,7 @@ const char html_begin[] PROGMEM = R"(
             {
                 clear: left;
             }
-            #hbs_text 
+            .text 
             {
                 text-align: left;
                 width: 400px;
@@ -50,42 +50,54 @@ const char html_begin[] PROGMEM = R"(
         <div id="main_block" align="center">
             <h1>Лабораторная работа</h1>
             <h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
-            <p id="hbs_text">Акселерометр подает на выход данные по одной оси.</p>
-            <p id="hbs_text">Частота обновления графика - 1 раз в секунду. Данные с сенсора снимаются
-                    с частотой в 50Hz. </p>
-            <canvas id="myCanvas" width="440" height="240" style="border:0px solid #000000;">
-                Браузер устарел!
+            <p class="text">Акселерометр подает на выход данные по одной оси.</p>
+            <canvas id="canvasVoltage" width="496" 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>
+            <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://192.168.1.1:81");
+                    var socket = new WebSocket("ws://2.2.2.2:81");
                     var i, data;
-                    var c = document.getElementById("myCanvas");
-                    var context = c.getContext("2d");
-                    var maxX = 400, maxY = 200;
+                    var c1 = document.getElementById("canvasVoltage");
+                    var c2 = document.getElementById("canvasFFT");
+                    var canvasVoltage = c1.getContext("2d");
+                    var canvasFFT = c2.getContext("2d");
+                    var maxX = 456, maxY = 200;
                     var biasX = 20, biasY = 20;
 
+                    //drawXYui(canvasFFT);
+                    drawXYui(canvasVoltage);
+
                     function iY(y) {
                         return maxY + biasY - y;
                     }
 
-                    context.beginPath();
-                    context.moveTo(20, iY(0));
-                    for (i = 0; i <= 200; i+=20) {
-                        context.lineTo(20, iY(i));
-                        context.lineTo(15, iY(i));
-                        context.moveTo(20, iY(i));
-                        textY = i/200*3.3;
-                        context.fillText(textY.toFixed(1), 0, iY(i-2.5));
-                    }
-                    context.moveTo(20, iY(0));
-                    for (i = 20; i <= 420; i+=40) {
-                        context.lineTo(i, iY(0));
-                        context.lineTo(i, iY(-5));
-                        context.moveTo(i, iY(0));
-                        textX = (i-20)/400*4 ;
-                        context.fillText(textX.toFixed(1), i-10, iY(-20));
+                    function drawXYui(someCanvas) {
+                        someCanvas.beginPath();
+                        someCanvas.moveTo(20, iY(0));
+                        for (i = 0; i <= 200; i+=20) {
+                            someCanvas.lineTo(20, iY(i));
+                            someCanvas.lineTo(15, iY(i));
+                            someCanvas.moveTo(20, iY(i));
+                            textY = i/200*3.3;
+                            someCanvas.fillText(textY.toFixed(1), 0, iY(i-2.5));
+                        }
+                        someCanvas.moveTo(20, iY(0));
+                        for (i = 20; i <= 420; i+=40) {
+                            someCanvas.lineTo(i, iY(0));
+                            someCanvas.lineTo(i, iY(-5));
+                            someCanvas.moveTo(i, iY(0));
+                            textX = (i-20)/456*4 ;
+                            someCanvas.fillText(textX.toFixed(1), i-10, iY(-20));
+                        }
+                        someCanvas.stroke();
                     }
-                    context.stroke();
                     
                     socket.onopen = function () {
                         alert('Соединение установлено.');
@@ -96,15 +108,32 @@ const char html_begin[] PROGMEM = R"(
                         }
                     };
                     socket.onmessage = function (event) {
-                        context.clearRect(biasX, 0, maxX, maxY + biasY);
-                        context.beginPath();
+                        // first canvas update
                         data =  JSON.parse(event.data);
-                        context.moveTo(biasX, data.data[0]+biasY);
-                        for (i = 1; i < 200; i++) {
-                            context.lineTo(i*2 + biasX, data.data[i] + biasY);
+                        if(data.data) {
+                            canvasVoltage.clearRect(biasX, 0, maxX, maxY + biasY);
+                            canvasVoltage.beginPath();
+                            canvasVoltage.moveTo(biasX, data.data[0]+biasY);
+                            for (i = 1; i < 256; i++) {
+                                canvasVoltage.lineTo(i*2 + biasX, data.data[i] + biasY);
+                            }
+                            canvasVoltage.stroke();
+                        } 
+                        if (data.fft) { 
+                            canvasFFT.clearRect(biasX, 0, maxX, maxY + biasY);
+                            canvasFFT.beginPath();
+                            canvasFFT.moveTo(biasX, data.fft[1]+biasY);
+                            for (i = 2; i < 128; i++) {
+                                canvasFFT.lineTo(i*2 + biasX, data.fft[i] + biasY);
+                            }
+                            canvasFFT.stroke();
+                        }
+                        if (data.peakFreq) {
+                            document.getElementById("peakFreq").innerHTML = data.peakFreq;
+                            document.getElementById("steps").innerHTML = data.steps;
                         }
-                        context.stroke();
                     };
+
                     function calibrateDevice() {
                         var calibrating = 10;
                         socket.send(JSON.stringify(calibrating));
@@ -118,7 +147,7 @@ const char html_begin[] PROGMEM = R"(
         </footer>
     </body>
 </html>
-)";
+)===";
 
 
 const char acc_calibrate[] PROGMEM = R"=(
