3code
/
nodeosci
forked from defend/nodemcu-lab-1
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

changed method how a main page was built

master
Никита 7 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
Unified 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> <!DOCTYPE html>
<html> <html>
<style> <head>
button { <style>
width: 190px; button
height: 40px; {
} 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 секунд - Сделайте несколько оборотов устройством перпендикулярно оси Х";
} }
#navs
context.font = "50px Arial"; {
context.fillText("24", 320, 170); height: 40px;
</script> width: 400px;
position: relative;
<p id="calibrate_text" onclick="calibrateDevice()">Устройство не откалибровано.</p> }
<button onclick="calibrateDevice()">Откалибровать</button> 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"> function iY(y) {
<button onclick="window.location.href='/hbs.html'" class="button">Оптодатчик</button> 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>
<div class="clear"></div> <footer>
<hr \>Тамбовский Государственный Технический Университет 2017-2018 г.
</div> </footer>
</body>
<footer>
Тамбовский Государственный Технический Университет 2017 г.
</footer>
</body>
</html> </html>

112
src/html.h
View File

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

20
src/main.cpp
View File

@ -31,14 +31,14 @@ WebSocketsServer webSocket = WebSocketsServer(81);
void handleAccelerometer() void handleAccelerometer()
{ {
int16_t bias = 0; int16_t bias = 0;
const int arr_size = 10000; const int arr_size = 5000;
char *html_code = new char[arr_size]; char *html_code = new char[arr_size];
memset(html_code, '\0', sizeof(char) * arr_size); memset(html_code, '\0', sizeof(char) * arr_size);
bias += getHtml(HTML_BEGIN, *html_code, arr_size, 0); bias += getHtml(HTML_BEGIN, *html_code, arr_size, 0);
bias += getHtml(STYLE, *html_code, arr_size, bias); // bias += getHtml(STYLE, *html_code, arr_size, bias);
bias += getHtml(SCRIPT, *html_code, arr_size, bias); // bias += getHtml(SCRIPT, *html_code, arr_size, bias);
bias += getHtml(HTML_END, *html_code, arr_size, bias); // bias += getHtml(HTML_END, *html_code, arr_size, bias);
server.send(200, "text/html", html_code); server.send(200, "text/html", html_code);
@ -67,7 +67,7 @@ void updateAccelerometer()
if ((millis() - accelerometer.lastUpdate) > (1000 / graphAcc.graphUpdateRate)) if ((millis() - accelerometer.lastUpdate) > (1000 / graphAcc.graphUpdateRate))
{ {
int filteredAcc = 0; 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) { if (graphAcc.graphCounter != 0) {
//filteredAcc = lowFreqFilter(accelerometer.lastValue, graphAcc.graphArray[graphAcc.graphCounter - 1], 0.5); //filteredAcc = lowFreqFilter(accelerometer.lastValue, graphAcc.graphArray[graphAcc.graphCounter - 1], 0.5);
@ -143,15 +143,9 @@ void setup(void)
Serial.print("AP IP address: "); Serial.print("AP IP address: ");
Serial.println(myIP); 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("/accelerometer", handleAccelerometer);
server.on("/", []() { 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); server.onNotFound(handleNotFound);
@ -168,8 +162,6 @@ void loop(void)
{ {
updateCpuTime(0); updateCpuTime(0);
dnsServer.processNextRequest();
server.handleClient(); server.handleClient();
webSocket.loop(); webSocket.loop();
updateAccelerometer(); updateAccelerometer();

Write Preview
Loading…
Cancel
Save