Difference: WEBServerPicoweb (1 vs. 8)

Revision 82020-06-08 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

A "Hello World!" WEB server

Line: 18 to 18
 In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Studying example_webapp.py in the base directory of picoweb will show you how to do this.

Added:
>
>		 Since from now on we will have to upload several file to the ESP32 I provide shell scripts named setup.sh which create directories like /html to store html files, /templates to store templates (see later) and /static to store static images. In fact it the script will check if the directories already exist on the ESP32 and create them only if not. Once the directories are created it stores the necessary html files, templates or images into their corresponding directory.
 
Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.

Line: 76 to 78
 Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript. The ledControl.html file defines 2 functions: ledOn() and ledOff() sending an XMLHttpRequest to the WEB server. The WEB server switches the user LED on or off and answers with the current state of the LED. This information is used be the javascript code in the html file to show a lighted or dark LED icon.

ajaxLEDServer.py in the tar archive is the WEB server to be run on the ESP32, /html/ledControl.html is the HTML and javascript file and setup.sh is a shell script uploading all the necessary files to their correct places in the ESP32 file system.

Changed:
<
<

Making Temperature and Humidity measurements available to the WEB page

>
>

Making Temperature and Humidity measurements available to the WEB page through AJAX

  With the knowledge on how to measure temperature and humidity and the knowledge on how to communicate between the WEB client and the WEB server using AJAX we have all we need to create a WEB page showing periodic temperature and humidity measurements. For measurement of other parameters we only need to implement the driver code reading out the sensor in addition.

Revision 72020-06-08 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

A "Hello World!" WEB server

Line: 12 to 12
 
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well, space in its flash, it is interesting to compress the HTML file to save resources.
Version 1
Changed:
<
<		Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. You may add some HTML text if desired. In the first version we will write a TCP server creating a stream socket and binding to port 80.

s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
   s.bind(('',80))
except OSError as exception:
   if exception.args[0] == uerrno.EADDRINUSE:
   print("Socket is already bound, please reset the machine")
   sys.exit()

The server then starts listening for an incoming connection request and establishes a connection by accepting it.

s.listen(5)
print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
   conn,addr=s.accept() print("GOT a connection from %s" % str(addr))

Finally it reads an http request from the connection and answers with its Hello World page:

request=conn.recv(1024)
print("Content %s" % str(request))
request=str(request)  response=html
conn.send(response)  conn.close()

html is the http string to be sent, e.g.

html = """ <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<title>Hello World </title>
<h1>The Hello World! HTML page</h1>
<p>Hello World!</p>

</body>
</html>
"""

Please check https://docs.micropython.org/en/latest/library/usocket.html for more details.

>
>		Version 1 is the basic WEB server we implemented in BasicWEBServer
 
Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Revision 62020-06-04 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

A "Hello World!" WEB server

Line: 9 to 9
 As examples we provide 3 different versions of the Hello World WEB server:
  • Version1 does not use picoweb at all but opens a socket and listens to requests. Once it sees a request it sends some HTML text, stored in the MicroPython source code
  • Version 2 exports the HTML code to a separate HTML file. It uses picoweb and answers if either serverHost/ or serverHost/index.html is requested. The HTML file is read and its text returned to the caller
Changed:
<
<
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well. space in its flash, it is interesting to compress the HTML file to save space.
>
>
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well, space in its flash, it is interesting to compress the HTML file to save resources.
 
Version 1

Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. You may add some HTML text if desired. In the first version we will write a TCP server creating a stream socket and binding to port 80.

Line: 25 to 22
 request=conn.recv(1024)
print("Content %s" % str(request))
request=str(request)  response=html
conn.send(response)  conn.close()

html is the http string to be sent, e.g.

Deleted:
<
<
 html = """ <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<title>Hello World </title>
<h1>The Hello World! HTML page</h1>
<p>Hello World!</p>

</body>
</html>
"""

Please check https://docs.micropython.org/en/latest/library/usocket.html for more details.

Deleted:
<
<		 The complete code is here:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV1.py.txt

 
Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Studying example_webapp.py in the base directory of picoweb will show you how to do this.

Deleted:
<
<		 https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV2.py.txt
 
Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.

Deleted:
<
<		https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV3.py.txt
 and finally a screen dump of the WEB pages as seen by the browser

helloWorldWEBServerV1.png

Added:
>
>		 You can download the code here:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServer.tar.gz

To make the programs run, first execute setup.sh. This will create the directories needed on the ESP32 file system and upload the html files into their correct places. Please have a look into this shell script to understand what it is doing. Then run the WEB server in thonny:

thonny helloWorldWebServerV2.py

thonnyWEB.png

The last line printed tells you that you can access the server on the URL: 192.168.0.46 with your browser.

 

Adding Temperature and Humidity Measurements

From the Hello World Web server to a server that actually shows measurements is only a small step. In the following example we create a table on HTML into which we insert the measurements taken with the SHT30 (see SHT30NopI2CTemperatureAndHumiditySensor) This is done with templates using the utemplate module in MicroPython. Have a look at the picoweb examples to see how this can be done.

Line: 85 to 85
  Communication between the WEB client, on which javascript is running, and the WEB server on the ESP 32 can be accomplished with Asynchronous JavaScript And XML (AJAX). To understand this you will have to go through yet another tutorial: the AJAX tutorial.
Changed:
<
<		Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript.
>
>		Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript. The ledControl.html file defines 2 functions: ledOn() and ledOff() sending an XMLHttpRequest to the WEB server. The WEB server switches the user LED on or off and answers with the current state of the LED. This information is used be the javascript code in the html file to show a lighted or dark LED icon.

ajaxLEDServer.py in the tar archive is the WEB server to be run on the ESP32, /html/ledControl.html is the HTML and javascript file and setup.sh is a shell script uploading all the necessary files to their correct places in the ESP32 file system.

Making Temperature and Humidity measurements available to the WEB page

With the knowledge on how to measure temperature and humidity and the knowledge on how to communicate between the WEB client and the WEB server using AJAX we have all we need to create a WEB page showing periodic temperature and humidity measurements. For measurement of other parameters we only need to implement the driver code reading out the sensor in addition.

Plotting the result on the client side is another story. However, a very powerful javascript library is available to do exactly this:
https://www.highcharts.com/docs/index.

Explaining this library would again largely exceed the scope of this course. Have a look at the documentation and in particular the examples given with it to understand how you can plot measurement data taken over a long period. An example for the SHT30 is given here:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/highCharts.tar.gz.

sht30WebServer.png

 
Added:
>
>		The plot shows temperature and humidity data taken at intervals of 30s during a whole night. It allows to
  • zoom into a particular time period
  • save the acquired data on a .csv file for offline evaluation
  • and much more.
 -- Uli Raich - 2020-04-28

Comments

Line: 106 to 123
 
META FILEATTACHMENT attachment="helloWorldWebServerV3.py.txt" attr="" comment="" date="1591284768" name="helloWorldWebServerV3.py.txt" path="helloWorldWebServerV3.py.txt" size="789" user="UliRaich" version="1"
META FILEATTACHMENT attachment="sht30.tar.gz" attr="" comment="" date="1591285702" name="sht30.tar.gz" path="sht30.tar.gz" size="1872" user="UliRaich" version="1"
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1591287148" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"
Changed:
<
<
META FILEATTACHMENT attachment="ledControl.tar.gz" attr="" comment="" date="1591289001" name="ledControl.tar.gz" path="ledControl.tar.gz" size="160245" user="UliRaich" version="2"
>
>
META FILEATTACHMENT attachment="ledControl.tar.gz" attr="" comment="" date="1591296684" name="ledControl.tar.gz" path="ledControl.tar.gz" size="160247" user="UliRaich" version="3"
META FILEATTACHMENT attachment="highCharts.tar.gz" attr="" comment="" date="1591296684" name="highCharts.tar.gz" path="highCharts.tar.gz" size="3685" user="UliRaich" version="2"
META FILEATTACHMENT attachment="sht30WebServer.png" attr="" comment="" date="1591294380" name="sht30WebServer.png" path="sht30WebServer.png" size="101898" user="UliRaich" version="1"
META FILEATTACHMENT attachment="thonnyWEB.png" attr="" comment="" date="1591295621" name="thonnyWEB.png" path="thonnyWEB.png" size="38111" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServer.tar.gz" attr="" comment="" date="1591295983" name="helloWorldWebServer.tar.gz" path="helloWorldWebServer.tar.gz" size="2558" user="UliRaich" version="1"

Revision 52020-06-04 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

A "Hello World!" WEB server

Changed:
<
<		Writing a WEB server from scratch is not a trivial task but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On MicroPython you find several WEB servers ready for deployment. I have selected picoweb because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the MicroPython binary making it available for immediate use.
>
>		Writing a WEB server from scratch is not a trivial task, but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On MicroPython you find several WEB servers ready for deployment. I have selected picoweb because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the MicroPython binary making it available for immediate use.

Implementing the Hello World! WEB server

  As examples we provide 3 different versions of the Hello World WEB server:
  • Version1 does not use picoweb at all but opens a socket and listens to requests. Once it sees a request it sends some HTML text, stored in the MicroPython source code
Line: 11 to 12
 
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well. space in its flash, it is interesting to compress the HTML file to save space.
Version 1
Changed:
<
<		Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. In the first version we will create a TCP server creating a stream socket and binding to port 80.

>
>		Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. You may add some HTML text if desired. In the first version we will write a TCP server creating a stream socket and binding to port 80.

 
Changed:
<
<		s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
s.bind(('',80))
except OSError as exception:
if exception.args[0] == uerrno.EADDRINUSE:
print("Socket is already bound, please reset the machine")
sys.exit()
>
>		s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
   s.bind(('',80))
except OSError as exception:
   if exception.args[0] == uerrno.EADDRINUSE:
   print("Socket is already bound, please reset the machine")
   sys.exit()
  The server then starts listening for an incoming connection request and establishes a connection by accepting it.

Changed:
<
<		s.listen(5)
print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
conn,addr=s.accept() print("GOT a connection from %s" % str(addr))
>
>		s.listen(5)
print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
   conn,addr=s.accept() print("GOT a connection from %s" % str(addr))
  Finally it reads an http request from the connection and answers with its Hello World page:

Changed:
<
<		 request=conn.recv(1024)
print("Content %s" % str(request))
request=str(request) response=html conn.send(response) conn.close()
>
>		request=conn.recv(1024)
print("Content %s" % str(request))
request=str(request)  response=html
conn.send(response)  conn.close()
 
Changed:
<
<		html is the http string to be sent.
>
>		html is the http string to be sent, e.g.

html = """ <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<title>Hello World </title>
<h1>The Hello World! HTML page</h1>
<p>Hello World!</p>

</body>
</html>
"""

  Please check https://docs.micropython.org/en/latest/library/usocket.html for more details.
Added:
>
>		 The complete code is here:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV1.py.txt

 
Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Studying example_webapp.py in the base directory of picoweb will show you how to do this.

Added:
>
>		 https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV2.py.txt
 
Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.

Changed:
<
<

>
>		 https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV3.py.txt
  and finally a screen dump of the WEB pages as seen by the browser

helloWorldWEBServerV1.png

Added:
>
>

Adding Temperature and Humidity Measurements

From the Hello World Web server to a server that actually shows measurements is only a small step. In the following example we create a table on HTML into which we insert the measurements taken with the SHT30 (see SHT30NopI2CTemperatureAndHumiditySensor) This is done with templates using the utemplate module in MicroPython. Have a look at the picoweb examples to see how this can be done.

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/sht30.tar.gz

The tar archive contains:

  • sht30Server.py: The WEB server, based on picoweb, that must be run on the ESP32.
  • templates/sensor.tpl: The template file that must be stored in the templates directory of the ESP32
  • setup.sh: a shell script that creates the directories needed on the ESP32 (if they do not exists already) and uploads the template file into its correct place
  • timeStamp.py: a test program creating a time stamp from the current time (not needed here)

sht30WebSite.png

 

Making the WEB page interactive

The WEB server above has one major flaw: for each measurement the complete page must be reloaded. Wouldn't it be nice if we could keep the table and only replace the measurement results and time stamp?

Changed:
<
<		Such types of actions can be accomplished with javascript. javascript is a full programming language for WEB programming running on the client side, in the browser. Teaching also javascript would largely exceed the scope of this course. However, if you don't know javascript well enough (as was the case for me!) here is a nice tutorial which will put you on track quickly:
>
>		Such types of actions can be accomplished with javascript, a full programming language for WEB programming running on the client side, in the browser. Teaching also javascript would largely exceed the scope of this course. However, if you don't know javascript well enough (as was the case for me!) here is a nice tutorial which will put you on track quickly:
  https://www.w3schools.com/js/DEFAULT.asp

Controlling the ESP32 User Led

Changed:
<
<		Before looking at how to display the SHT30 measurements on our WEB server let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off.
>
>		Before looking at how to display the SHT30 measurements on our WEB server, let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off. The icons for the LED are attached to this page:
 
Changed:
<
<		We will start off with the light bulb example from the introduction in this tutorial, replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.
>
>		led-blue-off-128.png and led-blue-on-128.png

We will start with the light bulb example from the introduction in the javascript tutorial, replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.

  dummyLED.png
Added:
>
>		Whenever you click the "Turn on the light" button the icon switches to led-blue-on-128.png showing a lighted blue LED while the other button shows the LED turned off. Just select the dummyLED.html in the tar archive with the browser and try.

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/ledControl.tar.gz

 Communication between the WEB client, on which javascript is running, and the WEB server on the ESP 32 can be accomplished with Asynchronous JavaScript And XML (AJAX). To understand this you will have to go through yet another tutorial: the AJAX tutorial.

Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript.

Line: 64 to 93
  
<--/commentPlugin-->
Deleted:
<
<
META FILEATTACHMENT attachment="wifi_connect_anonymous.py.txt" attr="" comment="" date="1588060975" name="wifi_connect_anonymous.py.txt" path="wifi_connect_anonymous.py.txt" size="390" user="UliRaich" version="1"
 
META FILEATTACHMENT attachment="wifi_connect.png" attr="" comment="" date="1588060975" name="wifi_connect.png" path="wifi_connect.png" size="199166" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWEBServerV1Log.png" attr="" comment="" date="1588079485" name="helloWorldWEBServerV1Log.png" path="helloWorldWEBServerV1Log.png" size="76274" user="UliRaich" version="2"
META FILEATTACHMENT attachment="helloWorldWEBServerV1.png" attr="" comment="" date="1588078557" name="helloWorldWEBServerV1.png" path="helloWorldWEBServerV1.png" size="67353" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.py.txt" attr="" comment="" date="1588079679" name="helloWorldWebServerV1.py.txt" path="helloWorldWebServerV1.py.txt" size="1652" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV2.py.txt" attr="" comment="" date="1588078598" name="helloWorldWebServerV2.py.txt" path="helloWorldWebServerV2.py.txt" size="736" user="UliRaich" version="1"
META FILEATTACHMENT attachment="dummyLED.png" attr="" comment="" date="1591261411" name="dummyLED.png" path="dummyLED.png" size="45510" user="UliRaich" version="1"
Deleted:
<
<
META FILEATTACHMENT attachment="led-blue-off.png" attr="" comment="" date="1591261513" name="led-blue-off.png" path="led-blue-off.png" size="49728" user="UliRaich" version="1"
META FILEATTACHMENT attachment="led-blue-on.png" attr="" comment="" date="1591261513" name="led-blue-on.png" path="led-blue-on.png" size="59783" user="UliRaich" version="1"
 
META FILEATTACHMENT attachment="pic_bulboff.gif" attr="" comment="" date="1591261513" name="pic_bulboff.gif" path="pic_bulboff.gif" size="2493" user="UliRaich" version="1"
META FILEATTACHMENT attachment="pic_bulbon.gif" attr="" comment="" date="1591261513" name="pic_bulbon.gif" path="pic_bulbon.gif" size="2554" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="led-blue-off-128.png" attr="" comment="" date="1591284651" name="led-blue-off-128.png" path="led-blue-off-128.png" size="18552" user="UliRaich" version="1"
META FILEATTACHMENT attachment="led-blue-on-128.png" attr="" comment="" date="1591284651" name="led-blue-on-128.png" path="led-blue-on-128.png" size="24353" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV3.py.txt" attr="" comment="" date="1591284768" name="helloWorldWebServerV3.py.txt" path="helloWorldWebServerV3.py.txt" size="789" user="UliRaich" version="1"
META FILEATTACHMENT attachment="sht30.tar.gz" attr="" comment="" date="1591285702" name="sht30.tar.gz" path="sht30.tar.gz" size="1872" user="UliRaich" version="1"
META FILEATTACHMENT attachment="sht30WebSite.png" attr="" comment="" date="1591287148" name="sht30WebSite.png" path="sht30WebSite.png" size="15849" user="UliRaich" version="1"
META FILEATTACHMENT attachment="ledControl.tar.gz" attr="" comment="" date="1591289001" name="ledControl.tar.gz" path="ledControl.tar.gz" size="160245" user="UliRaich" version="2"

Revision 42020-06-04 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

A "Hello World!" WEB server

Line: 17 to 17
  The server then starts listening for an incoming connection request and establishes a connection by accepting it.

Changed:
<
<		s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
conn,addr=s.accept() print("GOT a connection from %s" % str(addr))
>
>		s.listen(5)
print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
conn,addr=s.accept() print("GOT a connection from %s" % str(addr))
  Finally it reads an http request from the connection and answers with its Hello World page:

Line: 50 to 50
  Before looking at how to display the SHT30 measurements on our WEB server let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off.
Changed:
<
<		We will start off with the light bulb example from the introduction in this tutorial replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.
>
>		We will start off with the light bulb example from the introduction in this tutorial, replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.
  dummyLED.png

Revision 32020-06-04 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

Deleted:
<
<

WiFi

The WeMos D1 mini ESP32 CPU board offers WiFi access implementing a TCP/IP and full 802.11 b/g/n Wi-Fi MAC protocol (see the ESP32 data sheet) and the ESP32 port of MicroPython offers a network module with the necessary access functions.

Before looking into the WEB server we must first make sure we have Internet access through WiFi.The following screen dump shows an interactive MicroPython session where WiFi access is granted:

wifi_connect.png

Of course you must add your correct WiFi ssid and password. In the above case we also scan the WiFi network to see all access points available. If you use your WeMos D1 CPU at different locations with different WiFi networks you can use this function to figure out to which network you have access and connect to the right network automatically.

In the above screen dump wlan.ifconfig() shows you that you can connect to your ESP32 on the IP address 192.168.0.46.

Here is a small piece of Python code accomplishing network access when the ssid is known:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/wifi_connect_anonymous.py.txt

 

A "Hello World!" WEB server

Writing a WEB server from scratch is not a trivial task but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On MicroPython you find several WEB servers ready for deployment. I have selected picoweb because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the MicroPython binary making it available for immediate use.

Line: 27 to 11
 
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well. space in its flash, it is interesting to compress the HTML file to save space.
Version 1
Changed:
<
<		Here is the Python code of the WEB server:
>
>		Let's start simple and produce a WEB server that just sends "Hello World!" to the browser when called. In the first version we will create a TCP server creating a stream socket and binding to port 80.

s=socket.socket(socket.AF_INET,socket.SOCK_STREAM)
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1) try:
s.bind(('',80))
except OSError as exception:
if exception.args[0] == uerrno.EADDRINUSE:
print("Socket is already bound, please reset the machine")
sys.exit()

The server then starts listening for an incoming connection request and establishes a connection by accepting it.

s.listen(5) print("Starting the Hello World WEB server on IP address ",ipaddr,"port 80")
while True:
conn,addr=s.accept() print("GOT a connection from %s" % str(addr))

Finally it reads an http request from the connection and answers with its Hello World page:

 
Changed:
<
<		https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV1.py.txt
>
>		 request=conn.recv(1024)
print("Content %s" % str(request))
request=str(request) response=html conn.send(response) conn.close()
 
Changed:
<
<		and here the log output from the first version of the WEB server
>
>		html is the http string to be sent.
 
Changed:
<
<		helloWorldWEBServerV1Log.png
>
>		Please check https://docs.micropython.org/en/latest/library/usocket.html for more details.
Version 2:

In the second version we will separate the HTML text from the server and store it in the html directory (to be created with ampy: ampy mkdir /html) on the ESP32. Now we can use a ready made Web server for MicroPython, picoweb to serve the page. picoweb and utemplates (see exercise 2) are already included in the MicroPython binary.

Studying example_webapp.py in the base directory of picoweb will show you how to do this.

Version 3:

If we do not use an external SD card, then space for the HTML pages is rather limited. It may therefore be interesting to use gzip compresses pages. Modify your picoweb server to use gzipped HTML.

  and finally a screen dump of the WEB pages as seen by the browser

helloWorldWEBServerV1.png

Added:
>
>

Making the WEB page interactive

The WEB server above has one major flaw: for each measurement the complete page must be reloaded. Wouldn't it be nice if we could keep the table and only replace the measurement results and time stamp?

Such types of actions can be accomplished with javascript. javascript is a full programming language for WEB programming running on the client side, in the browser. Teaching also javascript would largely exceed the scope of this course. However, if you don't know javascript well enough (as was the case for me!) here is a nice tutorial which will put you on track quickly:

https://www.w3schools.com/js/DEFAULT.asp

Controlling the ESP32 User Led

Before looking at how to display the SHT30 measurements on our WEB server let's first try to give WEB control to the user LED on the ESP32 CPU board. We want to create a WEB page allowing to switch this LED on and off.

We will start off with the light bulb example from the introduction in this tutorial replacing the light bulb with a blue LED (simulating the LED on the ESP32 CPU board.

dummyLED.png

Communication between the WEB client, on which javascript is running, and the WEB server on the ESP 32 can be accomplished with Asynchronous JavaScript And XML (AJAX). To understand this you will have to go through yet another tutorial: the AJAX tutorial.

Essentially you must create aXMLHttpRequest, which you send from the client to the server and to which the server will respond. You use the answer from the server to update the HTML page using javascript.

  -- Uli Raich - 2020-04-28
Line: 51 to 70
 
META FILEATTACHMENT attachment="helloWorldWEBServerV1.png" attr="" comment="" date="1588078557" name="helloWorldWEBServerV1.png" path="helloWorldWEBServerV1.png" size="67353" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.py.txt" attr="" comment="" date="1588079679" name="helloWorldWebServerV1.py.txt" path="helloWorldWebServerV1.py.txt" size="1652" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV2.py.txt" attr="" comment="" date="1588078598" name="helloWorldWebServerV2.py.txt" path="helloWorldWebServerV2.py.txt" size="736" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="dummyLED.png" attr="" comment="" date="1591261411" name="dummyLED.png" path="dummyLED.png" size="45510" user="UliRaich" version="1"
META FILEATTACHMENT attachment="led-blue-off.png" attr="" comment="" date="1591261513" name="led-blue-off.png" path="led-blue-off.png" size="49728" user="UliRaich" version="1"
META FILEATTACHMENT attachment="led-blue-on.png" attr="" comment="" date="1591261513" name="led-blue-on.png" path="led-blue-on.png" size="59783" user="UliRaich" version="1"
META FILEATTACHMENT attachment="pic_bulboff.gif" attr="" comment="" date="1591261513" name="pic_bulboff.gif" path="pic_bulboff.gif" size="2493" user="UliRaich" version="1"
META FILEATTACHMENT attachment="pic_bulbon.gif" attr="" comment="" date="1591261513" name="pic_bulbon.gif" path="pic_bulbon.gif" size="2554" user="UliRaich" version="1"

Revision 22020-04-28 - UliRaich

Line: 1 to 1
 
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

WiFi

Line: 21 to 21
  Writing a WEB server from scratch is not a trivial task but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On MicroPython you find several WEB servers ready for deployment. I have selected picoweb because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the MicroPython binary making it available for immediate use.
Added:
>
>		As examples we provide 3 different versions of the Hello World WEB server:
  • Version1 does not use picoweb at all but opens a socket and listens to requests. Once it sees a request it sends some HTML text, stored in the MicroPython source code
  • Version 2 exports the HTML code to a separate HTML file. It uses picoweb and answers if either serverHost/ or serverHost/index.html is requested. The HTML file is read and its text returned to the caller
  • Version 3 works in a similar fashion to Version 2 but the HTML file is gzipped. Since the ESP32 has little free "disk space", well. space in its flash, it is interesting to compress the HTML file to save space.
Version 1

Here is the Python code of the WEB server:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV1.py.txt

and here the log output from the first version of the WEB server

helloWorldWEBServerV1Log.png

and finally a screen dump of the WEB pages as seen by the browser

helloWorldWEBServerV1.png

 -- Uli Raich - 2020-04-28

Comments

Line: 29 to 47
 
META FILEATTACHMENT attachment="wifi_connect_anonymous.py.txt" attr="" comment="" date="1588060975" name="wifi_connect_anonymous.py.txt" path="wifi_connect_anonymous.py.txt" size="390" user="UliRaich" version="1"
META FILEATTACHMENT attachment="wifi_connect.png" attr="" comment="" date="1588060975" name="wifi_connect.png" path="wifi_connect.png" size="199166" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="helloWorldWEBServerV1Log.png" attr="" comment="" date="1588079485" name="helloWorldWEBServerV1Log.png" path="helloWorldWEBServerV1Log.png" size="76274" user="UliRaich" version="2"
META FILEATTACHMENT attachment="helloWorldWEBServerV1.png" attr="" comment="" date="1588078557" name="helloWorldWEBServerV1.png" path="helloWorldWEBServerV1.png" size="67353" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV1.py.txt" attr="" comment="" date="1588079679" name="helloWorldWebServerV1.py.txt" path="helloWorldWebServerV1.py.txt" size="1652" user="UliRaich" version="1"
META FILEATTACHMENT attachment="helloWorldWebServerV2.py.txt" attr="" comment="" date="1588078598" name="helloWorldWebServerV2.py.txt" path="helloWorldWebServerV2.py.txt" size="736" user="UliRaich" version="1"

Revision 12020-04-28 - UliRaich

Line: 1 to 1
Added:
>
>
META TOPICPARENT name="InternetAccess"

A WEB Server on the ESP32

WiFi

The WeMos D1 mini ESP32 CPU board offers WiFi access implementing a TCP/IP and full 802.11 b/g/n Wi-Fi MAC protocol (see the ESP32 data sheet) and the ESP32 port of MicroPython offers a network module with the necessary access functions.

Before looking into the WEB server we must first make sure we have Internet access through WiFi.The following screen dump shows an interactive MicroPython session where WiFi access is granted:

wifi_connect.png

Of course you must add your correct WiFi ssid and password. In the above case we also scan the WiFi network to see all access points available. If you use your WeMos D1 CPU at different locations with different WiFi networks you can use this function to figure out to which network you have access and connect to the right network automatically.

In the above screen dump wlan.ifconfig() shows you that you can connect to your ESP32 on the IP address 192.168.0.46.

Here is a small piece of Python code accomplishing network access when the ssid is known:

https://afnog.iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/wifi_connect_anonymous.py.txt

A "Hello World!" WEB server

Writing a WEB server from scratch is not a trivial task but then the need of a WEB server is so common that you would expect that some kind soul has done the job for you. On MicroPython you find several WEB servers ready for deployment. I have selected picoweb because it is small enough to be easily studied and it has all the functionality needed for the projects in this course. On the other hand picoweb depends on several modules that are not installed in MicroPython by default. I therefore collected everything that is needed and compiled picoweb into the MicroPython binary making it available for immediate use.

-- Uli Raich - 2020-04-28

Comments 

<--/commentPlugin-->

META FILEATTACHMENT attachment="wifi_connect_anonymous.py.txt" attr="" comment="" date="1588060975" name="wifi_connect_anonymous.py.txt" path="wifi_connect_anonymous.py.txt" size="390" user="UliRaich" version="1"
META FILEATTACHMENT attachment="wifi_connect.png" attr="" comment="" date="1588060975" name="wifi_connect.png" path="wifi_connect.png" size="199166" user="UliRaich" version="1"
View topic | History: r8 < r7 < r6 < r5 | More topic actions...
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2025 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback