I am a mentor on an FRC team, and we are currently trying to use ESP32s to create robots. We are creating an API to mimic the FRC Driver Station. We are creating a websocket on an ESP32 in AP mode to run a website that serves as the driver station. One feature of the FRC Driver Station that is nice is that it has a terminal running to not only show printouts, but errors. We were wondering if anyone had any ideas as to how to add a terminal to the website we are creating. Though it is currently in its infancy, here is the code we currently have for the Webserver Portion of our robot code (We are currently using the onboard LED as a proof of concept test)...
Code: Select all
#This code comes courtesy of Rinus.
#Find it here...
#https://github.com/RinusW/WiPy
try:
import usocket as socket
except:
import socket
from time import sleep
from machine import Pin, PWM
frequency = 5000
led=PWM(Pin(2), frequency)
def AiCWebserv():
# minimal Ajax in Control Webserver
address_info = socket.getaddrinfo('xxx.xxx.x.x', xx)
print("Hostinfo: {}".format(address_info))
address = address_info[0][-1]
s = socket.socket()
s.bind(address)
s.listen(5)
while True:
conn, addr = s.accept()
print("Got a connection from %s" % str(addr))
request = conn.recv(1024)
conn.sendall('HTTP/1.1 200 OK\nConnection: close\nServer: nanoWiPy\nContent-Type: text/html\n\n')
## print("Content = %s" % str(request))
request = str(request)
ib = request.find('Val=')
if ib > 0 :
ie = request.find(' ', ib)
Val = request[ib+4:ie]
print("Val =", Val)
duty_cycle = int(Val)
led.duty(duty_cycle)
conn.send(Val)
else:
with open('aicWebpage.html', 'r') as html:
conn.send(html.read())
conn.sendall('\n')
conn.close()
print("Connection wth %s closed" % str(addr))
Code: Select all
<html>
<head>
<title>AiCWeb</title>
<link rel="icon" href="data:;base64,=">
<style type="text/css" id="style">
.dimwrap { border: 2px solid red; height: 210px; width: 70px;}
.dimSlide { transform: scaleX(2) rotate(270deg); position: relative; top: 80px; left: -32px;}
.dimVal { width: 45px; position: relative; top: 20px; left: 12px}
</style>
<script language="javascript">
function dimSet(evt) {
var me, he;
var resp, xmlhttp=new XMLHttpRequest();
me = evt.target;
he = document.getElementById(me.id == "dimVal"? "dimSlide":"dimVal"); // need my other value node
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200){
resp = xmlhttp.responseText;
console.log(resp);
he.value = parseInt(resp);
}
}
xmlhttp.open("GET","Val=" + me.value,true); xmlhttp.send()
}
</script>
</head>
<body>
<h1>Ajax in Control WebPage</h1>
<div class="dimwrap" id="dimwrap">
<input class="dimVal" type="number" id="dimVal" min="0" max="180" step="3" value="0" onclick="dimSet(event)" oninput="dimSet(event)" >
<input class= "dimSlide" type="range" id="dimSlide" min="0" max="180" step="3" value="0" onclick="dimSet(event)" oninput="dimSet(event)" >
</div>
</body>
</html>
Thank you in advance.
~Mr. R^2
P.S. Anyone trying this, beware, currently, the server creates a blocking call(Fixing this is our next step. Implementing the terminal will follow).
