Web client controlling ESP by way of a variable.

All ESP32 boards running MicroPython.
Target audience: MicroPython users with an ESP32 board.
Post Reply
Marzandee
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
wlan_connect(essid,essid_password)

def web_page():

html = """ <!DOCTYPE html>
<html>
<head>
<title>AUTOAGILITY &copy</title>
<style>
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;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h2>AUTOAGILITY</h2>
</div>
<div id= "instruct">
<p>PRESS A BUTTON TO SET THE HEIGHT</p>
</div>
<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>
<p></p>
</div>
<div id="footer">
Copyright &copy; 2019 Autoagility
</div>
</div>

</body>
</html>"""
return html

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


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()
conn.send(response)
conn.close()


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

Thanks.
Marz.

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

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

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

Hi,

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

https://github.com/miguelgrinberg/microdot

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

Marzandee
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

Marz

Post Reply