supleed2/ELEC50003-P1-CW
1
0
Fork 0
mirror of https://github.com/supleed2/ELEC50003-P1-CW.git synced 2024-09-19 20:16:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added SPIFFS support so the html file does not need to be embedded in the main sketch. Makes it easier to update the webpage quickly as no longer need to recompile everything. Also added a favicon!

Browse source
This commit is contained in:
jc4419 2021-05-31 23:57:23 +04:00
parent 816c9d5663
commit a00eb39ad1
3 changed files with 24 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
Command/main/data/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
Command/index.html → Command/main/data/index.html
View file

@ -4,6 +4,10 @@
<title>Rover Command Center</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<style>
* {
box-sizing: border-box;

319
Command/main/main.ino
View file

@ -1,4 +1,5 @@
#include <WiFi.h>
#include <SPIFFS.h>
#include<ESPmDNS.h>
#include <WebSocketsServer.h>
#include <ESPAsyncWebServer.h>
@ -23,301 +24,6 @@ int d = 0; //Initializing variable for odometer distance.
void send_sensor();
Ticker timer;
char index_html[] PROGMEM = R"=====(
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Rover Command Center</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.section_container {
float: left;
width: 50%;
padding: 10px;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
padding: 0px;
margin-bottom: 0px;
}
:is(h1, h2, h3, h4, h5, h6, label, strong, meter) {
font-family: Arial, Helvetica, sans-serif;
}
.movement_control {
text-align: center;
}
.sensor_data {
text-align: center;
}
meter{
width: 100%;
height: 40px;
transform: translateY(-8px);
}
meter::after {
content : attr(value) attr(title);
top:-28px;
left:0px;
position:relative;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: rgb(255, 255, 255);
background-color: #161616;
border: none;
border-radius: 15px;
box-shadow: 0 9px rgb(161, 161, 161);
}
.button:hover {background-color: #585858}
.button:active {
background-color: #107C10;
box-shadow: 0 5px rgb(161, 161, 161);
transform: translateY(4px);
}
.pressed {
background-color: #107C10;
box-shadow: 0 5px rgb(161, 161, 161);
transform: translateY(4px);
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
<script>
var connection = new WebSocket('ws://'+location.hostname+':81/');
var MVM_F_status = 0;
var MVM_L_status = 0;
var MVM_R_status = 0;
var MVM_B_status = 0;
var BTRY_VOLT = 0;
var ODO_DIST = 0;
function round(value, precision) {
var multiplier = Math.pow(10, precision || 0);
return Math.round(value * multiplier) / multiplier;
}
connection.onmessage = function(event){
var raw_data = event.data;
console.log(raw_data);
var data = JSON.parse(raw_data);
digiBTRY_VOLT = data.BTRY_VOLT;
BTRY_VOLT = round((digiBTRY_VOLT*(4.8e-4)+4), 1)
ODO_DIST = data.ODO_DIST;
document.getElementById("btry_meter").value = BTRY_VOLT;
document.getElementById("Odometer").innerHTML = ODO_DIST;
}
function send_data()
{
var raw_data = '{"MVM_F":'+MVM_F_status+',"MVM_L":'+MVM_L_status+',"MVM_R":'+MVM_R_status+',"MVM_B":'+MVM_B_status+'}';
connection.send(raw_data);
console.log(raw_data);
}
function left_pressed(){
MVM_L_status = 1;
send_data();
}
function left_unpressed(){
MVM_L_status = 0;
send_data();
}
function up_pressed(){
MVM_F_status = 1;
send_data();
}
function up_unpressed(){
MVM_F_status = 0;
send_data();
}
function right_pressed(){
MVM_R_status = 1;
send_data();
}
function right_unpressed(){
MVM_R_status = 0;
send_data();
}
function down_pressed(){
MVM_B_status = 1;
send_data();
}
function down_unpressed(){
MVM_B_status = 0;
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) {
switch (e.keyCode) {
case 37:
document.getElementById("left_arrow").className = "button pressed";
left_pressed();
break;
case 38:
document.getElementById("up_arrow").className = "button pressed";
up_pressed();
break;
case 39:
document.getElementById("right_arrow").className = "button pressed";
right_pressed();
break;
case 40:
document.getElementById("down_arrow").className = "button pressed";
down_pressed();
break;
}
};
document.onkeyup = function(e) {
switch (e.keyCode) {
case 37:
document.getElementById("left_arrow").className = "button";
left_unpressed();
break;
case 38:
document.getElementById("up_arrow").className = "button";
up_unpressed();
break;
case 39:
document.getElementById("right_arrow").className = "button";
right_unpressed();
break;
case 40:
document.getElementById("down_arrow").className = "button";
down_unpressed();
break;
}
};
</script>
</head>
<body>
<h1 style="text-align:center;">ROVER COMMAND CENTER</h1>
<div class="clearfix">
<div class="section_container">
<div class ="movement_control">
<h2>Movement Control</h2>
<div style="transform: translateY(0px);">
<button id="up_arrow" onmousedown="up_mouseDown()" onmouseup="up_mouseUp()" class="button" ><span>&#8679;</span></button>
</div>
<div style="transform: translateY(13px);">
<button id="left_arrow" onmousedown="left_mouseDown()" onmouseup="left_mouseUp()" class="button"><span>&#8678;</span></button>
<button id="down_arrow" onmousedown="down_mouseDown()" onmouseup="down_mouseUp()" class="button"><span>&#8681;</span></button>
<button id="right_arrow" onmousedown="right_mouseDown()" onmouseup="right_mouseUp()" class="button"><span>&#8680;</span></button>
</div>
</div>
</div>
<div class="section_container">
<div id="bleh" class="sensor_data">
<h2>Sensor Data</h2>
<ul>
<li><div class="section_container">
<label>Battery Voltage</label>
</div>
<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>
</div>
</li>
<li><div class="section_container">
<label>Odometer</label>
</div>
<div class="section_container">
<strong id="Odometer">28</strong><strong>mm</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
)=====";
AsyncWebServer server(80); // server port 80 for initial HTTP request for the main webpage.
WebSocketsServer websockets(81); // server port 81 for real time data flow through websockets.
@ -360,6 +66,15 @@ void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length
digitalWrite(R_Led,MVM_R_status);
digitalWrite(D_Led,MVM_B_status);
}
case WStype_BIN:
case WStype_ERROR:
case WStype_FRAGMENT_TEXT_START:
case WStype_FRAGMENT_BIN_START:
case WStype_FRAGMENT:
case WStype_FRAGMENT_FIN:
default:
break;
}
}
@ -373,7 +88,10 @@ void setup()
pinMode(D_Led,OUTPUT);
pinMode(butPin, INPUT_PULLUP);
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
/* Serial.println();
Serial.println();
Serial.print("Connecting to ");
@ -408,11 +126,12 @@ void setup()
}
Serial.println("mDNS responder started! Rover Command Center can now be accessed at 'rover.local' ");
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", "text/html");
});
server.on("/", [](AsyncWebServerRequest * request)
{
request->send_P(200, "text/html", index_html);
server.on("/favicon.ico", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/favicon.ico", "image/png");
});
server.onNotFound(notFound);