Line: 1 to 1 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
A WEB Server on the ESP32A "Hello World!" WEB server | |||||||||||
Line: 9 to 9 | |||||||||||
As examples we provide 3 different versions of the Hello World WEB server:
| |||||||||||
Changed: | |||||||||||
< < |
| ||||||||||
> > |
| ||||||||||
Version 1Let'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://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://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://iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/helloWorldWebServerV3.py.txt | ||||||||||
and finally a screen dump of the WEB pages as seen by the browser | |||||||||||
Added: | |||||||||||
> > | You can download the code here: https://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 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 MeasurementsFrom 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 pageWith 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://iotworkshop.africa/pub/IoT_Course_English/WEBServerPicoweb/highCharts.tar.gz. | ||||||||||
Added: | |||||||||||
> > | The plot shows temperature and humidity data taken at intervals of 30s during a whole night. It allows to
| ||||||||||
-- Uli Raich - 2020-04-28
Comments | |||||||||||
Line: 106 to 123 | |||||||||||
| |||||||||||
Changed: | |||||||||||
< < |
| ||||||||||
> > |
|