supleed2/ELEC50003-P1-CW
1
0
Fork 0
mirror of https://github.com/supleed2/ELEC50003-P1-CW.git synced 2024-12-22 21:45:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed some syntax errors in the js code for the webpage. Also added mouse click support for the arrow keys. Added some commented code that can be uncommented for connecting the esp32 to a wifi router instead of AP mode.

Browse source
This commit is contained in:
jc4419 2021-05-31 21:49:50 +04:00
parent bf2675fa45
commit 816c9d5663
2 changed files with 143 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
Command/index.html
View file

@ -9,7 +9,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
.section-container { .section_container {
float: left; float: left;
width: 50%; width: 50%;
padding: 10px; padding: 10px;
@ -32,11 +32,11 @@ li {
:is(h1, h2, h3, h4, h5, h6, label, strong, meter) { :is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.movement-control { .movement_control {
text-align: center; text-align: center;
} }
.sensor-data { .sensor_data {
text-align: center; text-align: center;
} }
@ -157,22 +157,57 @@ function down_unpressed(){
send_data(); send_data();
} }
var timer = null;
function up_mouseDown() {
timer = setInterval(up_pressed, 100);
}
function up_mouseUp() {
clearInterval(timer);
up_unpressed();
}
function down_mouseDown() {
timer = setInterval(down_pressed, 100);
}
function down_mouseUp() {
clearInterval(timer);
down_unpressed();
}
function right_mouseDown() {
timer = setInterval(right_pressed, 100);
}
function right_mouseUp() {
clearInterval(timer);
right_unpressed();
}
function left_mouseDown() {
timer = setInterval(left_pressed, 100);
}
function left_mouseUp() {
clearInterval(timer);
left_unpressed();
}
document.onkeydown = function(e) { document.onkeydown = function(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 37: case 37:
document.getElementById("left-arrow").className = "button pressed"; document.getElementById("left_arrow").className = "button pressed";
left_pressed(); left_pressed();
break; break;
case 38: case 38:
document.getElementById("up-arrow").className = "button pressed"; document.getElementById("up_arrow").className = "button pressed";
up_pressed(); up_pressed();
break; break;
case 39: case 39:
document.getElementById("right-arrow").className = "button pressed"; document.getElementById("right_arrow").className = "button pressed";
right_pressed(); right_pressed();
break; break;
case 40: case 40:
document.getElementById("down-arrow").className = "button pressed"; document.getElementById("down_arrow").className = "button pressed";
down_pressed(); down_pressed();
break; break;
} }
@ -180,19 +215,19 @@ document.onkeydown = function(e) {
document.onkeyup = function(e) { document.onkeyup = function(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 37: case 37:
document.getElementById("left-arrow").className = "button"; document.getElementById("left_arrow").className = "button";
left_unpressed(); left_unpressed();
break; break;
case 38: case 38:
document.getElementById("up-arrow").className = "button"; document.getElementById("up_arrow").className = "button";
up_unpressed(); up_unpressed();
break; break;
case 39: case 39:
document.getElementById("right-arrow").className = "button"; document.getElementById("right_arrow").className = "button";
right_unpressed(); right_unpressed();
break; break;
case 40: case 40:
document.getElementById("down-arrow").className = "button"; document.getElementById("down_arrow").className = "button";
down_unpressed(); down_unpressed();
break; break;
} }
@ -206,39 +241,39 @@ document.onkeyup = function(e) {
<div class="clearfix"> <div class="clearfix">
<div class="section-container"> <div class="section_container">
<div class ="movement-control"> <div class ="movement_control">
<h2>Movement Control</h2> <h2>Movement Control</h2>
<div style="transform: translateY(0px);"> <div style="transform: translateY(0px);">
<button id="up-arrow" class="button" ><span>&#8679;</span></button> <button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()" class="button" ><span>&#8679;</span></button>
</div> </div>
<div style="transform: translateY(13px);"> <div style="transform: translateY(13px);">
<button id="left-arrow" class="button"><span>&#8678;</span></button> <button id="left_arrow" onmousedown="left_mouseDown()" onmouseup="left_mouseUp()" class="button"><span>&#8678;</span></button>
<button id="down-arrow" class="button"><span>&#8681;</span></button> <button id="down_arrow" onmousedown="down_mouseDown()" onmouseup="down_mouseUp()" class="button"><span>&#8681;</span></button>
<button id="right-arrow" class="button"><span>&#8680;</span></button> <button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()" class="button"><span>&#8680;</span></button>
</div> </div>
</div> </div>
</div> </div>
<div class="section-container"> <div class="section_container">
<div class="sensor-data"> <div id="bleh" class="sensor_data">
<h2>Sensor Data</h2> <h2>Sensor Data</h2>
<ul> <ul>
<li><div class="section-container"> <li><div class="section_container">
<label>Battery Voltage</label> <label>Battery Voltage</label>
</div> </div>
<div class="section-container"> <div class="section_container">
<meter id="btry_meter" min="4.0" max="6.0" low ="4.5" optimum="5.0" high="4.8" value="5.8" title="V"></meter> <meter id="btry_meter" min="4.0" max="6.0" low ="4.5" optimum="5.0" high="4.8" value="5.8" title="V"></meter>
</div> </div>
</li> </li>
<li><div class="section-container"> <li><div class="section_container">
<label>Odometer</label> <label>Odometer</label>
</div> </div>
<div class="section-container"> <div class="section_container">
<strong id="Odometer">28</strong><strong>mm</strong> <strong id="Odometer">28</strong><strong>mm</strong>
</div> </div>
</li> </li>
@ -250,6 +285,5 @@ document.onkeyup = function(e) {
</div> </div>
</body> </body>
</html> </html>

108
Command/main/main.ino
View file

@ -12,6 +12,9 @@ const int L_Led = 12; //LED subsitute for the 'movement left command'.
const int R_Led = 15; //LED subsitute for the 'movement right command'. const int R_Led = 15; //LED subsitute for the 'movement right command'.
const int D_Led = 13; //LED subsitute for the 'movement back command'. const int D_Led = 13; //LED subsitute for the 'movement back command'.
/* const char* ssid = "ssid";
const char* password = "xxxxxxxx"; */
int potVal = 0; int potVal = 0;
bool butState = 1; //Variables only for testing - will be removed in final bool butState = 1; //Variables only for testing - will be removed in final
@ -33,7 +36,7 @@ char index_html[] PROGMEM = R"=====(
box-sizing: border-box; box-sizing: border-box;
} }
.section-container { .section_container {
float: left; float: left;
width: 50%; width: 50%;
padding: 10px; padding: 10px;
@ -56,11 +59,11 @@ li {
:is(h1, h2, h3, h4, h5, h6, label, strong, meter) { :is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.movement-control { .movement_control {
text-align: center; text-align: center;
} }
.sensor-data { .sensor_data {
text-align: center; text-align: center;
} }
@ -181,22 +184,57 @@ function down_unpressed(){
send_data(); send_data();
} }
var timer = null;
function up_mouseDown() {
timer = setInterval(up_pressed, 100);
}
function up_mouseUp() {
clearInterval(timer);
up_unpressed();
}
function down_mouseDown() {
timer = setInterval(down_pressed, 100);
}
function down_mouseUp() {
clearInterval(timer);
down_unpressed();
}
function right_mouseDown() {
timer = setInterval(right_pressed, 100);
}
function right_mouseUp() {
clearInterval(timer);
right_unpressed();
}
function left_mouseDown() {
timer = setInterval(left_pressed, 100);
}
function left_mouseUp() {
clearInterval(timer);
left_unpressed();
}
document.onkeydown = function(e) { document.onkeydown = function(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 37: case 37:
document.getElementById("left-arrow").className = "button pressed"; document.getElementById("left_arrow").className = "button pressed";
left_pressed(); left_pressed();
break; break;
case 38: case 38:
document.getElementById("up-arrow").className = "button pressed"; document.getElementById("up_arrow").className = "button pressed";
up_pressed(); up_pressed();
break; break;
case 39: case 39:
document.getElementById("right-arrow").className = "button pressed"; document.getElementById("right_arrow").className = "button pressed";
right_pressed(); right_pressed();
break; break;
case 40: case 40:
document.getElementById("down-arrow").className = "button pressed"; document.getElementById("down_arrow").className = "button pressed";
down_pressed(); down_pressed();
break; break;
} }
@ -204,19 +242,19 @@ document.onkeydown = function(e) {
document.onkeyup = function(e) { document.onkeyup = function(e) {
switch (e.keyCode) { switch (e.keyCode) {
case 37: case 37:
document.getElementById("left-arrow").className = "button"; document.getElementById("left_arrow").className = "button";
left_unpressed(); left_unpressed();
break; break;
case 38: case 38:
document.getElementById("up-arrow").className = "button"; document.getElementById("up_arrow").className = "button";
up_unpressed(); up_unpressed();
break; break;
case 39: case 39:
document.getElementById("right-arrow").className = "button"; document.getElementById("right_arrow").className = "button";
right_unpressed(); right_unpressed();
break; break;
case 40: case 40:
document.getElementById("down-arrow").className = "button"; document.getElementById("down_arrow").className = "button";
down_unpressed(); down_unpressed();
break; break;
} }
@ -230,39 +268,39 @@ document.onkeyup = function(e) {
<div class="clearfix"> <div class="clearfix">
<div class="section-container"> <div class="section_container">
<div class ="movement-control"> <div class ="movement_control">
<h2>Movement Control</h2> <h2>Movement Control</h2>
<div style="transform: translateY(0px);"> <div style="transform: translateY(0px);">
<button id="up-arrow" class="button" ><span>&#8679;</span></button> <button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()" class="button" ><span>&#8679;</span></button>
</div> </div>
<div style="transform: translateY(13px);"> <div style="transform: translateY(13px);">
<button id="left-arrow" class="button"><span>&#8678;</span></button> <button id="left_arrow" onmousedown="left_mouseDown()" onmouseup="left_mouseUp()" class="button"><span>&#8678;</span></button>
<button id="down-arrow" class="button"><span>&#8681;</span></button> <button id="down_arrow" onmousedown="down_mouseDown()" onmouseup="down_mouseUp()" class="button"><span>&#8681;</span></button>
<button id="right-arrow" class="button"><span>&#8680;</span></button> <button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()" class="button"><span>&#8680;</span></button>
</div> </div>
</div> </div>
</div> </div>
<div class="section-container"> <div class="section_container">
<div class="sensor-data"> <div id="bleh" class="sensor_data">
<h2>Sensor Data</h2> <h2>Sensor Data</h2>
<ul> <ul>
<li><div class="section-container"> <li><div class="section_container">
<label>Battery Voltage</label> <label>Battery Voltage</label>
</div> </div>
<div class="section-container"> <div class="section_container">
<meter id="btry_meter" min="4.0" max="6.0" low ="4.5" optimum="5.0" high="4.8" value="5.8" title="V"></meter> <meter id="btry_meter" min="4.0" max="6.0" low ="4.5" optimum="5.0" high="4.8" value="5.8" title="V"></meter>
</div> </div>
</li> </li>
<li><div class="section-container"> <li><div class="section_container">
<label>Odometer</label> <label>Odometer</label>
</div> </div>
<div class="section-container"> <div class="section_container">
<strong id="Odometer">28</strong><strong>mm</strong> <strong id="Odometer">28</strong><strong>mm</strong>
</div> </div>
</li> </li>
@ -274,7 +312,6 @@ document.onkeyup = function(e) {
</div> </div>
</body> </body>
</html> </html>
@ -336,6 +373,26 @@ void setup()
pinMode(D_Led,OUTPUT); pinMode(D_Led,OUTPUT);
pinMode(butPin, INPUT_PULLUP); pinMode(butPin, INPUT_PULLUP);
/* Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("Rover connected to ");
Serial.println(ssid);
Serial.println();
Serial.println("Rover IP address: ");
Serial.println(WiFi.localIP()); */
WiFi.softAP("RoverAP", "SplendidCheeks"); WiFi.softAP("RoverAP", "SplendidCheeks");
Serial.println(); Serial.println();
Serial.println("RoverAP running"); Serial.println("RoverAP running");
@ -360,7 +417,7 @@ void setup()
server.onNotFound(notFound); server.onNotFound(notFound);
server.begin(); // it will start webserver server.begin();
websockets.begin(); websockets.begin();
websockets.onEvent(webSocketEvent); websockets.onEvent(webSocketEvent);
timer.attach(0.5,send_sensor_data); timer.attach(0.5,send_sensor_data);
@ -386,6 +443,5 @@ void send_sensor_data()
JSON_Data += ",\"ODO_DIST\":"; JSON_Data += ",\"ODO_DIST\":";
JSON_Data += d; JSON_Data += d;
JSON_Data += "}"; JSON_Data += "}";
//Serial.println(JSON_Data);
websockets.broadcastTXT(JSON_Data); websockets.broadcastTXT(JSON_Data);
} }