defend
/
nodemcu-lab-1
1
1
Fork 1
Code Issues Pull Requests Releases Wiki Activity
Browse Source

changed method how a main page was built

master
Никита 6 years ago
parent
4479150a71
commit
4a2795c115
3 changed files with 173 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 187
      html/acc.html
  2. 112
      src/html.h
  3. 20
      src/main.cpp

187
html/acc.html
View File

@ -1,91 +1,108 @@
<!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;
}
</style>
<body>
<div id="main_block" align="center">
<h2>Лабораторная работа *НАЗВАНИЕ*</h2>
<h3>Акселерометр ADW22035Z - Cемейство ADXL103</h3>
<p>Акселерометр подает на выход данные по одной оси.
<br />Частота обновления графика - 1 раз в двадцать секунд.
<br />Данные с сенсора снимаются с частотой в 20Hz. </p>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
Браузер устарел!
</canvas>
<script>
var socket = new WebSocket("ws://192.168.4.1:81");
var data;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
socket.onopen = function () {
alert("Соединение установлено.");
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
context.clearRect(0, 0, c.width, c.height);
data = event.data;
context.moveTo(0, 0);
for (i = 0; i != 400; i += 2) {
context.lineTo(i, data.root[i]);
}
context.stroke();
};
function calibrateDevice() {
var calibrating = 10;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
<head>
<style>
button
{
width: 190px;
height: 40px;
}
context.font = "50px Arial";
context.fillText("24", 320, 170);
</script>
<p id="calibrate_text" onclick="calibrateDevice()">Устройство не откалибровано.</p>
<button onclick="calibrateDevice()">Откалибровать</button>
#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>
<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;">
Браузер устарел!
</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;
<div id="navs">
<button onclick="window.location.href='/hbs.html'" class="button">Оптодатчик</button>
function iY(y) {
return maxY + biasY - y;
}
// отрисовка OY шкалы
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));
}
// отрисовка OX шкалы
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));
}
context.stroke();
socket.onopen = function () {
alert('Соединение установлено.');
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
}
};
socket.onmessage = function (event) {
context.clearRect(biasX, biasY, maxX, maxY);
context.beginPath();
data = JSON.parse(event.data);
context.moveTo(biasX, data.data[0]+biasY);
for (i = 0; i < 200; i++) {
context.lineTo(i*2 + biasX, data.data[i] + biasY);
}
context.stroke();
};
function calibrateDevice() {
var calibrating = 10;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
}
</script>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<footer>
Тамбовский Государственный Технический Университет 2017 г.
</footer>
</body>
<footer>
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г.
</footer>
</body>
</html>

112
src/html.h
View File

@ -12,9 +12,6 @@ enum parts
const char html_begin[] PROGMEM = R"(
<!DOCTYPE html>
<html>
)";
const char style[] PROGMEM = R"(
<head>
<style>
button
@ -51,58 +48,79 @@ const char style[] PROGMEM = R"(
<body>
<div id="main_block" align="center">
<h2>Лабораторная работа</h2>
<h3>Акселерометр ADW22035Z - Cемейство ADXL103</h3>
<h1>Лабораторная работа</h1>
<h2>Акселерометр ADW22035Z - Cемейство ADXL103</h2>
<p id="hbs_text">Акселерометр подает на выход данные по одной оси.</p>
<p id="hbs_text">Частота обновления графика - 1 раз в секунду. Данные с сенсора снимаются
с частотой в 50Hz. </p>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
<canvas id="myCanvas" width="440" height="240" style="border:0px solid #000000;">
Браузер устарел!
</canvas>
)";
const char script[] PROGMEM = R"(
<script>
var socket = new WebSocket("ws://192.168.1.1:81");
var i, data;
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
socket.onopen = function () {
alert('Соединение установлено.');
};
socket.onclose = function (event) {
if (!event.wasClean) {
alert('Обрыв соединения');
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;
function iY(y) {
return maxY + biasY - y;
}
};
socket.onmessage = function (event) {
context.clearRect(0, 0, 400, 200);
context.beginPath();
data = JSON.parse(event.data);
context.moveTo(0, data.data[0]);
for (i = 0; i < 200; i++) {
context.lineTo(i*2, data.data[i]);
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));
}
context.stroke();
};
function calibrateDevice() {
var calibrating = 10;
socket.send(JSON.stringify(calibrating));
document.getElementById("calibrate_text").innerHTML = "Калибровка в течении 10 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
}
</script>
)";
const char html_end[] PROGMEM = R"(
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);
}
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>Тамбовский Государственный Технический Университет 2017-2018 г.
<footer>
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г.
</footer>
</body>
</html>
)";
const char acc_calibrate[] PROGMEM = R"=(
<p id="calibrate_text">Устройство не откалибровано.</p>
<button onclick="calibrateDevice()">Откалибровать</button>
@ -118,15 +136,15 @@ 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 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;

20
src/main.cpp
View File

@ -31,14 +31,14 @@ WebSocketsServer webSocket = WebSocketsServer(81);
void handleAccelerometer()
{
int16_t bias = 0;
const int arr_size = 10000;
const int arr_size = 5000;
char *html_code = new char[arr_size];
memset(html_code, '\0', sizeof(char) * arr_size);
bias += getHtml(HTML_BEGIN, *html_code, arr_size, 0);
bias += getHtml(STYLE, *html_code, arr_size, bias);
bias += getHtml(SCRIPT, *html_code, arr_size, bias);
bias += getHtml(HTML_END, *html_code, arr_size, bias);
// bias += getHtml(STYLE, *html_code, arr_size, bias);
// bias += getHtml(SCRIPT, *html_code, arr_size, bias);
// bias += getHtml(HTML_END, *html_code, arr_size, bias);
server.send(200, "text/html", html_code);
@ -67,7 +67,7 @@ void updateAccelerometer()
if ((millis() - accelerometer.lastUpdate) > (1000 / graphAcc.graphUpdateRate))
{
int filteredAcc = 0;
accelerometer.lastValue = map(analogRead(A0), 368, 768, 200, 0);
accelerometer.lastValue = map(analogRead(A0), 0, 1023, 200, 0);
if (graphAcc.graphCounter != 0) {
//filteredAcc = lowFreqFilter(accelerometer.lastValue, graphAcc.graphArray[graphAcc.graphCounter - 1], 0.5);
@ -143,15 +143,9 @@ void setup(void)
Serial.print("AP IP address: ");
Serial.println(myIP);
// DNS SERVER SETUP
dnsServer.setTTL(300);
dnsServer.setErrorReplyCode(DNSReplyCode::ServerFailure);
dnsServer.start(53, "lab1.tstu", myIP);
// END DNS SERVER SETUP
server.on("/accelerometer", handleAccelerometer);
server.on("/", []() {
server.send(200, "text/html", "<a style=\"font-size:10em;2\"href=\"http://lab1.tstu/accelerometer\">Main Page</a>");
server.send(200, "text/html", "<a style=\"font-size:10em;2\"href=\"http://192.168.1.1/accelerometer\">Main Page</a>");
});
server.onNotFound(handleNotFound);
@ -168,8 +162,6 @@ void loop(void)
{
updateCpuTime(0);
dnsServer.processNextRequest();
server.handleClient();
webSocket.loop();
updateAccelerometer();

Write Preview
Loading…
Cancel
Save