Difference: AWEBServer (9 vs. 10)

Revision 102022-11-12 - UliRaich

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

A WEB Server and the HTTP Protocol

Exercise 1: Write a Hello World WEB Server

Line: 26 to 26
  microdot_import.png
Changed:
<
<
For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb itself. The examples demonstrate most of picoweb's features.
>
>
For more information on the use of picoweb you will have to study the examples distributed with the github repository or picoweb code itself. The examples demonstrate most of picoweb's features.
microdot eases your task because it provides the necessary documentation as well as the examples.

 
  • Modify the hello.py example from microdot to display your own WEB page
  • Separate the HTML code into a separate file and upload it to the "html" folder on the ESP32. Create this folder if it does not exist yet.
Changed:
<
<
  • Compress the HTML with gzip and use the compressed file instead. You must specify
    Content-Encoding" : "gzip"
    for this to work
>
>
  • Compress the HTML with gzip and use the compressed file instead. You must specify
    Content-Encoding" : "gzip"
    in the response header for this to work
 

Exercise 3: Provide Measurement Data on the WEB Page

Modify the WEB server to provide temperature and humidity measured with the SHT30. The easiest way to accomplish this is static text, like in the Hello World HTML page, into which the measurements can be inserted. This can be done with utemplates, which are provided in the MicroPython firmware. Have a look in the utemplates README.MD and at the hello_utemplate_async.py example of microdot to understand how this is implemented.

Line: 47 to 46
  To improve your program even further, you can plot the incoming measurements with the Highcharts JavaScript library.
Added:
>
>
HighCharts.png

Add a program that controls the user programmable LED on the CPU via the WEB. Use two buttons to switch the LED on or off and an image to show its current state.

ledControl.png

Exercise 5: Server Side Events

In case of AJAX it is the client (browser) who repeatedly asks for new measurement, and it is therefore the browser who determines the timing. Often however, the server should send its data as soon as they are ready. This can be achieved with "server side events". Please see this tutorial for more details: https://www.w3schools.com/html/html5_serversentevents.asp]].

Modify exercise 4 to use server side events instead of AJAX for the communication between server and browser.

Exercise 6: Web Sockets

While AJAX and server side events depend on the cmd/response protocole off HTML, web sockets use the own protocol and provide full duplex communication.
See https://www.tutorialspoint.com/websockets/index.htm for more details.

First study the websocket examples given in the microdot examples section and then rewrite exercise 4/5 using web sockets.

 -- Uli Raich - 2020-05-27

Comments

Line: 58 to 74
 
META FILEATTACHMENT attachment="helloWorldWebServerV1.png" attr="" comment="" date="1664785325" name="helloWorldWebServerV1.png" path="helloWorldWebServerV1.png" size="39692" user="UliRaich" version="1"
META FILEATTACHMENT attachment="picowebInstallation.png" attr="" comment="" date="1664791079" name="picowebInstallation.png" path="picowebInstallation.png" size="13656" user="UliRaich" version="1"
META FILEATTACHMENT attachment="microdot_import.png" attr="" comment="" date="1668262786" name="microdot_import.png" path="microdot_import.png" size="5752" user="UliRaich" version="1"
Added:
>
>
META FILEATTACHMENT attachment="HighCharts.png" attr="" comment="" date="1668277852" name="HighCharts.png" path="HighCharts.png" size="96871" user="UliRaich" version="1"
META FILEATTACHMENT attachment="ledControl.png" attr="" comment="" date="1668278598" name="ledControl.png" path="ledControl.png" size="52502" user="UliRaich" version="1"
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback