library/CodeRacer_MKII/Webserver.h

146 lines
7.5 KiB
C
Raw Normal View History

#ifndef __CodeRacer_WEBSERVER_H__ // Necessary to avoid multiple includes of this header
#define __CodeRacer_WEBSERVER_H__
#include "CodeRacer_MKII.h"
#include <AsyncTCP.h> // external library for asynchronous webserver for ESP32
#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!
// In line 21, you should change your IP adress so the Webserver can work properly
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>
<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>
<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