Add Terminal to webpage

All ESP32 boards running MicroPython.
Target audience: MicroPython users with an ESP32 board.
Post Reply
MrR^2
Posts: 3
Joined: Fri Aug 02, 2019 3:44 pm

Add Terminal to webpage

Post by MrR^2 » Wed Oct 21, 2020 2:59 am

Hello,
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))
Here is the webPage...

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>
As I said, this is just a proof of concept currently. We are excited about the prospect of letting students work with robots at home without the need to install a programming environment on a computer. We realize that we could catch errors and send them, but if a full terminal is possible, it would be incredible.

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).

User avatar
MostlyHarmless
Posts: 163
Joined: Thu Nov 21, 2019 6:25 pm
Location: Pennsylvania, USA

Re: Add Terminal to webpage

Post by MostlyHarmless » Fri Oct 30, 2020 1:42 am

Have you thought about incorporating the term.js of WebREPL into the website, served by the ESP32? That should give you a ready to use terminal.


Best Regards, Jan

Post Reply