2020-08-28 09:53:40 +02:00
|
|
|
#ifndef __CodeRacer_WEBSERVER_H__ // Necessary to avoid multiple includes of this header
|
2020-08-21 11:21:29 +02:00
|
|
|
#define __CodeRacer_WEBSERVER_H__
|
|
|
|
|
#include "CodeRacer_MKII.h"
|
2020-08-28 09:53:40 +02:00
|
|
|
#include <AsyncTCP.h> // external library for asynchronous webserver for ESP32
|
2020-08-21 11:21:29 +02:00
|
|
|
#include <ESPAsyncWebServer.h>
|
|
|
|
|
|
|
|
|
|
// This is a char array containing the html code for the website. It is sent ONCE when the webserver first initializes.
|
|
|
|
|
// The script contains various routines telling what the AJAX object should do and when.
|
|
|
|
|
// It is strongly advised NOT to change the html text, unless you know exactly what you're doing!
|
2020-08-28 09:53:40 +02:00
|
|
|
// In line 21, you should change your IP adress so the Webserver can work properly
|
2020-08-21 11:21:29 +02:00
|
|
|
|
|
|
|
|
const char indexHTML[] PROGMEM = R"=====(
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>CodeRacer Webserver</title>
|
|
|
|
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
|
|
|
|
<link rel="icon" type="image/x-png" href="data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC
|
|
|
|
|
/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACglBMVEURMEwSMU0RME0QL0oSMU4SMEwTMk4TMk8SME0QL0wXOVgUNVEXOlsUNFEUM1ATM08TMU4TMU0UMk8TM1AcQmgZPV8lUnwoW4okUXwcQWQVNFIUMlAVNFAVNVMfSXMXPGMmVoQ9fbk4drIsYpgUNFQWN1YVNlUVNFMTMU8WNVIaOloeRGoqXZIza6E1c7BHjcxTm9Y+fbkyaJoaPWEaPWAaO10XOFkUNFMWNVMPMFESOV8dT4EwdLU5e7tAhsdCkthMn+JKltUtbKgUQ3IUPWUNMlgTNVoXN1kPL1BNZH1YcoxmhKNmj7uMqcWLqsd+qM54ps94pMp4mrtXc5B0hZg/WXURM1gNLk54iZmCla2JnryYrs2Vrs+ds8+cscyludSxwdGgtcqlssFrg5ymsb1pfZELMFYWO14rUoFHd7l+reWQve6Zw/GFt++AtvJen+5VmepIi9g+d7AtZJohTHciQ2UZPGAcQWYoXJ6q2vjg+/rk+frl+fvz/v3l+PzW8Pyy2v9no+s3fso9g8cnXJAZP2YXOFohT4Z0reW03/m+5fjG7PfR8/fN8ffW9ffZ9fbJ6/qGw/AzeL8vZ6MaPmISL0scRnYgUo9QiMZyrOSUyfO+5/y85vuy4fqx4PuHxPFXk8IpX5UtZZ8eRXATMEwMHjIRLlEVN2EfUIgoXpo7eLhSjslZlM5QisdHf7gqX5ckWpMsY5kiTXsVMU8PJDkMGy0KHDEPJkQTL1ARL1EWO2UWQHAYRXchUYUbRnYlV4sjUH4YOVwOIzoMHi8MGysKFiQJFiQIFyoMID0KHDQMITwKHTQJGSwZPmcaQWwZQW8SMFgNIz8KGisKGCUJFiP///+JaqBNAAAAAWJLR0TVfrw7EwAAAAd0SU1FB+QIFAoOJAEdNLQAAAETSURBVBjTY2BgRAZMzAxAARZWNkY2IMXOwsLBycDBxs7OxcrNysPFy87HL8DAICjELizCKyomLiEpICUlzcEgIMMmKyevoKikLKGiqqauwcCnqaWto6unb2BoZGxiambOYGFpZW1ja2fv4Ojk7OLq5s7g4enl7ePr5x8QGOQdHBIaxhAeERkVHRMbF5+QmJSckprGkJ6RmZWdk5uXX1BYVFxSWsZQXlFZVV1TW1ff0NjU3NLaxsDb3tHZ1d3T29c/YeKkyVOkGaZOmz5j5qzZc+bOm79g4aLFSxiWLlu+YuWq1WvWrlu/YeOmzVsYtm7bvmPnrt179u7bf+DgocNHGI4eO37i5KnTZ86eO3/h4qXLVwBVcFmCQPwHjgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0wOC0yMFQxMDoxNDozNiswMDowMGk0R6UAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMDgtMjBUMTA6MTQ6MzYrMDA6MDAYaf8ZAAAAAElFTkSuQmCC"/>
|
|
|
|
|
<script>
|
|
|
|
|
var Url ="http://192.168.1.146/";
|
|
|
|
|
window.onload = start;
|
|
|
|
|
function start()
|
|
|
|
|
{
|
|
|
|
|
myAjax= new XMLHttpRequest();
|
|
|
|
|
myAjax.onreadystatechange= LesenAjax;
|
|
|
|
|
setInterval(aktualisieren,750);
|
|
|
|
|
aktualisieren();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function aktualisieren()
|
|
|
|
|
{
|
|
|
|
|
myAjax.open("GET", Url+"Values", true);
|
|
|
|
|
myAjax.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function LesenAjax()
|
|
|
|
|
{
|
|
|
|
|
if(myAjax.readyState==4 && myAjax.status==200)
|
|
|
|
|
{
|
|
|
|
|
var datenstr= myAjax.responseText;
|
|
|
|
|
var params = new URLSearchParams(datenstr);
|
|
|
|
|
var leftsteps=params.get('leftstep');
|
|
|
|
|
var leftspeed= params.get('leftspeed');
|
|
|
|
|
var distance=params.get('distance');
|
|
|
|
|
var drivendistanceMM= params.get('DistanceMM');
|
|
|
|
|
var rightsteps=params.get('rightstep');
|
|
|
|
|
var rightspeed=params.get('rightspeed');
|
|
|
|
|
var servopos= params.get('ServoPosition');
|
|
|
|
|
var drivendistanceM= params.get('DistanceM');
|
|
|
|
|
var themessage= params.get('TheMessage');
|
|
|
|
|
document.getElementById('leftstep').innerHTML= "Left: "+leftsteps;
|
|
|
|
|
document.getElementById('leftspeed').innerHTML= "Left: "+leftspeed;
|
|
|
|
|
document.getElementById('distance').innerHTML= "Current Distance: "+distance;
|
|
|
|
|
document.getElementById('DistanceMM').innerHTML= "Driven Distance (MM): "+drivendistanceMM;
|
|
|
|
|
document.getElementById('rightstep').innerHTML= "Right: "+rightsteps;
|
|
|
|
|
document.getElementById('rightspeed').innerHTML= "Right: "+rightspeed;
|
|
|
|
|
document.getElementById('ServoPosition').innerHTML="Current Servo position: " +servopos;
|
|
|
|
|
document.getElementById('DistanceM').innerHTML= "Driven Distance (M): "+drivendistanceM;
|
|
|
|
|
addtext('textbox', themessage);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addtext(inputid, inputtxt){
|
|
|
|
|
if(inputtxt!='' && inputtxt!=null)
|
|
|
|
|
{
|
|
|
|
|
var obj= document.getElementById(inputid);
|
|
|
|
|
obj.innerHTML += inputtxt + "<p>";
|
|
|
|
|
obj.scrollTop = obj.scrollHeight;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function SetValue(cmd, id)
|
|
|
|
|
{
|
|
|
|
|
action=cmd + "?" + id + "=" + document.getElementById(id).value;
|
|
|
|
|
myAjax.open("GET", Url+action, true);
|
|
|
|
|
myAjax.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function httpGet(sende)
|
|
|
|
|
{
|
|
|
|
|
myAjax.open("GET", Url+sende, true);
|
|
|
|
|
myAjax.send();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function flushTextbox(id){
|
|
|
|
|
document.getElementById(id).innerHTML= "";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
<style>
|
|
|
|
|
html { font-family: Sylfaen; display: inline-block; margin: 0px auto; text-align: left;}
|
|
|
|
|
.outmsg {background-color: #FFFFFF; border: 2px solid black; color: black; padding: 5px 10px;
|
|
|
|
|
text-decoration: none; font-size: 20px; margin: 15px; cursor: pointer;}
|
|
|
|
|
div{width:650px; overflow:auto; height: 300px; border: 1px solid #000000; padding: 15px; line-height:10px;}
|
|
|
|
|
.button {font-family: Sylfaen; background-color: #000000; border: 2px solid black; color: white; padding: 5px 10px;
|
|
|
|
|
text-decoration: none; font-size: 20px; margin: 15px; cursor: pointer;}
|
|
|
|
|
.button3 {font-family: Sylfaen; background: #FF0000; border: 2px solid black; color: white; padding: 5px 10px;
|
|
|
|
|
text-decoration: none; font-size: 20px; margin: 10px 0px; cursor: pointer;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Welcome to the CodeRacer Webserver!</h1>
|
|
|
|
|
<p><button class="button" onclick="httpGet('DriveForward')">Drive Forward</button>
|
|
|
|
|
<button class="button" onclick="httpGet('DriveBackward')">Drive Backward</button>
|
|
|
|
|
<button class="button" onclick="httpGet('TurnLeft')">Turn Left</button>
|
|
|
|
|
<button class="button" onclick="httpGet('TurnRight')">Turn Right</button>
|
2020-08-28 09:53:40 +02:00
|
|
|
<button class="button3" onclick="httpGet('StopDriving')">Stop Driving</button>
|
|
|
|
|
<button class="button" onclick="httpGet('SetActive')">Set Active</button>
|
|
|
|
|
<button class="button3" onclick="httpGet('SetInactive')">Set Inactive</button>
|
2020-08-21 11:21:29 +02:00
|
|
|
<p>
|
|
|
|
|
<label for="speed">Set new Speed</label>
|
|
|
|
|
<input id="speed" type="text" placeholder="Enter value (0-255)" />
|
|
|
|
|
<input type="button" onclick="SetValue('SetSpeed', 'speed')" />
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<label for="b">Turn Servo</label>
|
|
|
|
|
<input id="degree" type="text" placeholder="Enter Degree (10-170)" />
|
|
|
|
|
<input type="button" onclick="SetValue('TurnServo', 'degree')" />
|
|
|
|
|
</p>
|
|
|
|
|
<p><table border="1">
|
|
|
|
|
<tr><th>Step Counters</th><th>Speed of Drives</th><th>Servo- Information</th><th>Driven Distance</th><th>AJAX Information<th></tr>
|
|
|
|
|
<tr><td id="leftstep">0</td><td id="leftspeed">0</td><td id="distance">0</td><td id="DistanceMM">0</td><td id="AJAXstate">0</td></tr>
|
|
|
|
|
<tr><td id="rightstep">0</td><td id="rightspeed">0</td><td id="ServoPosition">0</td><td id="DistanceM">0</td><td id="AJAXstatus">0</td></tr>
|
|
|
|
|
</table>
|
|
|
|
|
<button class="button3" onclick="httpGet('ResetTable')">Reset Dashboard</button></p>
|
|
|
|
|
|
|
|
|
|
<div id="textbox"></div>
|
|
|
|
|
<button class="button3" onclick="flushTextbox('textbox')">Reset Debugging Window</button>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
)=====";
|
|
|
|
|
|
|
|
|
|
// The class declaration of the webserver
|
|
|
|
|
class Codeserver {
|
|
|
|
|
private:
|
|
|
|
|
|
|
|
|
|
public:
|
|
|
|
|
Codeserver(char *ssid, char *password);
|
|
|
|
|
const char* Ssid;
|
|
|
|
|
const char* Password;
|
|
|
|
|
void Run();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
extern AsyncWebServer server;
|
|
|
|
|
#endif
|
