Web client controlling ESP by way of a variable.

All ESP32 boards running MicroPython.
Target audience: MicroPython users with an ESP32 board.
Post Reply
Posts: 3
Joined: Sat Jan 18, 2020 2:30 am

Web client controlling ESP by way of a variable.

Post by Marzandee » Sun Feb 16, 2020 7:34 am

Hello. I am new to all this. Used to do all my projects with Picaxe chips in the past. Thought it was about time to change it up.
I am trying to use an ESP32 as a server and access point(which I will do later. At this stage i am happy for it to connect to my wifi) When conneting it seves up a webpage to a phone. The page has 5 radio buttons. at this stage all I am trying to do is figure out how to extract a value of 1 to 5 depending on which button is pushed. The following code does display the web page, but I am at a loss as to how to extract the value after the button is pressed. I dont understand how you pull it out of a markup language and use it to do something on the hardware side. Here is the code:

from netcreds import *
from nettools import *
import usocket as socket
import machine

def web_page():

html = """ <!DOCTYPE html>
<title>AUTOAGILITY &copy</title>
body {
background-color: #aaa;
font-family: arial;

#container {
background-color: white;
width: 950px;
margin-left: auto;
margin-right: auto;

#header {
background-color: deepskyblue;
color: white;
font-size: 90px;
text-align: center;

#instruct {
color: deepskyblue;
text-align: center;
font-size: 25px;

.radio-toolbar input[type="radio"] {
opacity: 0;
position: fixed;
width: 0;

.radio-toolbar label {
display: block;
background-color: cornflowerblue;
padding: 5px 5px;
text-align: center;
font-size: 127px;
border: 5px solid #444;
border-radius: 30px;
margin-bottom: 50px;

.radio-toolbar input[type="radio"]:focus + label {
border: 5px dashed darkgreen;

.radio-toolbar input[type="radio"]:checked + label {
background-color: #bfb;
border-color: #4c4;

#explain {
color: blue;
font-size: 20px;
text-align: center;
margin: 0;
#footer {
padding: 15px;
background-color: deepskyblue;
font-size: 30px;
color: white;
text-align: center;
<div id="container">
<div id="header">
<div id= "instruct">
<div class="radio-toolbar">
<input type="radio" id="five" name="height" value="5">
<label for="five">500</label> </br>
<input type="radio" id="four" name="height" value="4">
<label for="four">400</label> </br>
<input type="radio" id="three" name="height" value="3">
<label for="three">300</label> </br>
<input type="radio"id="two" name="height" value="2">
<label for="two">200</label> </br>
<input type="radio" id="one" name="height" value="1" checked>
<label for="one">100</label>
<div id="footer">
Copyright &copy; 2019 Autoagility

return html

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('', 80))

while True:
conn, addr = s.accept()
print('Got a connection from %s' % str(addr))
request = conn.recv(1024)
print('Content = %s' % str(request))
response = web_page()

Is there anyone out there that can point me in the right direction?


User avatar
Posts: 2052
Joined: Tue Aug 08, 2017 1:57 am
Location: Sydney, Australia

Re: Web client controlling ESP by way of a variable.

Post by jimmo » Mon Feb 17, 2020 12:06 am


Rather than doing all the socket stuff from scratch, I recommend using a web server. microdot is probably the easiest one I've found.


There's an example there with a webpage that controls a GPIO pin.

Posts: 3
Joined: Sat Jan 18, 2020 2:30 am

Re: Web client controlling ESP by way of a variable.

Post by Marzandee » Wed Feb 19, 2020 8:07 am

" jimmo thanks for that. I will look into it


Post Reply