RNTLab.com

The Ultimate Shortcut to Learn Electronics and Programming with Open Source Hardware and Software

Micropython – So many questions

Q&A Forum › Category: ESP32 › Micropython – So many questions
0 Vote Up Vote Down
Mario Zandel asked 5 years ago

Hello I have been trying to work this out for months. I have seen so many tutorials my eyes are square.

A brief explanation of what i am trying to do:

I want to be able to connect a phone to an ESP32 acting as a stand alone access point ( which is further down the track, at this point I am happy to connect through a router). from there I want to be able to access the ESP32 through a web page. The web page will display 6 buttons which will return a value to the ESP32 of 1 to 6. The rest I can probably work out.

I can get the web page to load, but I cant seem to figure out how to get the CSS to load and run. Also i can`t figure out how to return the value I need to the ESP32

Here is the main.py file:

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

wlan_connect(essid,essid_password)

def web_page():

  html = """
 <!DOCTYPE html>
<html>
<head>
    <title>AUTOAGILITY &copy</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</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)
  request = str(request)
  print('Content = %s' % request)
  response = web_page()
  conn.send('HTTP/1.1 200 OK\n')
  conn.send('Content-Type: text/html\n')
  conn.send('Connection: close\n\n')
  conn.sendall(response)
  conn.close()

And the CSS:

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;
}}

Can anybody tell me where i`m going wrong?

5 Answers
0 Vote Up Vote Down
Steph answered 5 years ago

Hello, Mario,

I’m not very familiar with Python, but I’ll still try to shed some light on what’s wrong with your code 🙂

In your main loop, whatever HTTP request reaches your web server, it always returns the HTML code of your main page (with your radio buttons).

Now, inside this HTML code, you have placed the following directive :

<link rel="stylesheet" type="text/css" href="style.css">

This will necessarily generate a new request from your browser, to obtain an additional resource, corresponding to your CSS stylesheet, whose URL is /style.css. Thus, the HTTP request headers will be in the form :

Request URL: http://[IP of your ESP]/style.css
Request Method: GET

However, your server always returns the same HTML code (the one on your main page), regardless of the HTTP request. It will therefore never return the code corresponding to your CSS stylesheet.
To solve this, you have two possibilities:
– either you keep this way of proceeding (which is not really ideal) and in this case, in your web_page() function, you have to replace :

<link rel="stylesheet" type="text/css" href="style.css">

by:

<style>
/* put your CSS codes here */
</style>

– either you modify the HTTP request processing code of your server so that it can process the 2 following HTTP requests:
The one concerning the main HTML page:

Request URL: http://[IP of your ESP]/
Request Method: GET

And the one concerning the CSS stylesheet :

Request URL: http://[IP of your ESP]/style.css
Request Method: GET

As I told you, I’m not very familiar with Python, so my code may have some errors, but basically here’s what you can do:

while True:
    conn, addr = s.accept()
    request = conn.recv(1024)
    request = str(request)

    isCSS = request.find('/style.css')

    if isCSS:
        response = css_stylesheet()
        mimetype = 'text/css'
    else:
        response = web_page()
        mimetype = 'text/html'
    
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: %s\n' % mimetype)
    conn.send('Connection: close\n\n')
    conn.sendall(response)
    conn.close()

Assuming that you also define a css_stylesheet() function capable of providing the CSS code to be sent to the browser.

Hoping this answers your question…

0 Vote Up Vote Down
Mario Zandel answered 5 years ago

@Stephane Thank you SO MUCH 😀  I had tried to link the CSS in the HTML using <style> but it didnt work, so I gave up. When you said that was one way to do it, I went back to the CSS and found a couple of errors I hadn`t noticed. Fixed then and the page loads  as expected.  So now it is just figuring out how to return the value of the button press.

So this is the code which now loads the web page:

  1. from netcreds import *
  2. from nettools import *
  3. import usocket as socket
  5. wlan_connect(essid,essid_password)
  7. def web_page():
  9.    html = “”” <!DOCTYPE html>
  10.   <html>
  11.   <head>
  12.    <title>AUTOAGILITY &copy</title>
  13.    <style>
  14.    body {
  15.     background-color: #aaa;
  16.     font-family: arial;
  17. }
  19. #container {
  20.     background-color: white;
  21.     width: 950px;
  22.     margin-left: auto;
  23.     margin-right: auto;
  24. }
  26. #header {
  27.     background-color: deepskyblue;
  28.     color: white;
  29.     font-size: 90px;
  30.     text-align: center;
  31. }
  33. #instruct {
  34.     color: deepskyblue;
  35.     text-align: center;
  36.     font-size: 25px;
  37. }
  39. .radio-toolbar input[type=”radio”] {
  40.     opacity: 0;
  41.    position: fixed;
  42.    width: 0;
  43. }
  45. .radio-toolbar label {
  46.    display: block;
  47.    background-color: cornflowerblue;
  48.    padding: 5px 5px;
  49.    text-align: center;
  50.    font-size: 127px;
  51.    border: 5px solid #444;
  52.    border-radius: 30px;
  53.    margin-bottom: 50px;
  54. }
  56. .radio-toolbar input[type=”radio”]:focus + label {
  57.    border: 5px dashed darkgreen;
  58. }
  60. .radio-toolbar input[type=”radio”]:checked + label {
  61.    background-color: #bfb;
  62.    border-color: #4c4;
  63. }
  65. #explain {
  66.     color: blue;
  67.     font-size: 20px;
  68.     text-align: center;
  69.     margin: 0;
  70. }
  71. #footer {
  72.     padding: 15px;
  73.     background-color: deepskyblue;
  74.     font-size: 30px;
  75.     color: white;
  76.     text-align: center;
  77. }
  78.    </style>
  79.   </head>
  80.   <body>
  81.    <div id=”container”>
  82.        <div id=”header”>
  83.            <h2>AUTOAGILITY</h2>    
  84.        </div>
  85.        <div id= “instruct”>
  86.            <p>PRESS A BUTTON TO SET THE HEIGHT</p>
  87.        </div>
  88.        <div class=”radio-toolbar”>
  89.            <input type=”radio” id=”five” name=”height” value=”5″>
  90.            <label for=”five”>500</label>  </br>
  91.            <input type=”radio” id=”four” name=”height” value=”4″>
  92.            <label for=”four”>400</label> </br>
  93.            <input type=”radio” id=”three” name=”height” value=”3″>
  94.            <label for=”three”>300</label> </br>
  95.            <input type=”radio”id=”two” name=”height” value=”2″>
  96.            <label for=”two”>200</label> </br>
  97.            <input type=”radio” id=”one” name=”height” value=”1″ checked>
  98.            <label for=”one”>100</label>
  99.            <p></p>
  100.        </div>
  101.        <div id=”footer”>
  102.                Copyright &copy; 2019 Autoagility
  103.        </div>
  104.    </div>
  106.   </body>
  107.   </html>”””
  108.    return html
  110. s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  111. s.bind((”, 80))
  112. s.listen(5)
  114. while True:
  115.   conn, addr = s.accept()
  116.   print(‘Got a connection from %s’ % str(addr))
  117.   request = conn.recv(1024)
  118.   print(‘Content = %s’ % str(request))
  119.   response = web_page()
  120.   conn.send(response)
  121.   conn.close()

 

0 Vote Up Vote Down
Steph answered 5 years ago

You’re welcome! My pleasure.
Don’t hesitate to come back and ask questions if you get stuck 😉

But open a specific topic for each question, I think Rui & Sara prefer it that way.

And when you have a lot of code to post, it would be better if you host it on GitHub Gist to make it easier for us to read it 😉

0 Vote Up Vote Down
Sara Santos Staff answered 5 years ago

Hi Mario.

You need to create a form for your radio buttons and you need a “Submit” button so that the page actually makes a request to the server (send some information to the ESP32).

When you submit the form, depending on the selected options, you’ll make a request on a different URL. Then, accordingly to that, the ESP32 can perform different tasks.

Unfortunately, we don’t have any tutorial showing how radio buttons work. But a good resource is always the w3schools website: https://www.w3schools.com/tags/att_input_type_radio.asp

Click the try it yourself button and see their example: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_radio

Depending on your application, you may also want to consider different input types: https://www.w3schools.com/html/html_form_input_types.asp

To know how to handle requests on different URLs, you can take a look at the microPython eBook project that starts at page 163.

I hope this helps.

Regards,
Sara

0 Vote Up Vote Down
Mario Zandel answered 5 years ago

Thanks Sarah. Time for some reading.