#include <Arduino.h>
enum parts
{
HTML_BEGIN,
HTML_END,
STYLE,
SCRIPT,
ACC_CALIBRATE
};
const char html_begin[] PROGMEM = R"(
<!DOCTYPE html>
<html>
<head>
<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>
<meta charset="UTF-8">
</head>
<body>
<div id="main_block" align="center">
<h1>Диагностика</h1>
<canvas id="myCanvas" width="440" height="240" style="border:0px solid #000000;">
Браузер устарел!
</canvas>
<script>
var socket = new WebSocket("ws://192.168.1.1:81");
var i, data;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var maxX = 400, maxY = 200;
var biasX = 20, biasY = 20;
var curVoltage = 20;
var freq = 16;
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*curVoltage;
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*freq ;
context.fillText(textX.toFixed(1), i-10, iY(-20));
}
context.stroke();
socket.onopen = function () {
alert('Соединение установлено.');
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
context.clearRect(biasX, 0, maxX, maxY + biasY);
context.beginPath();
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);
}
voltage = data.data[199]*(-0.1)+20;
context.fillText(voltage + " V", 200,20);
context.stroke();
};
function calibrateDevice() {
var calibrating = 10;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
}
</script>
<div class="clear"></div>
</div>
<footer>
<hr \>DEFEND STUDIO | DEFEND.PW | 2018
</footer>
</body>
</html>
)";
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;
const char *html_part;
int length = 0;
switch (p)
{
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++)
{
if (i > buf_size)
return i;
buffer[i + bias] = pgm_read_byte_near(html_part + i);
}
return length;
}