Cornell University ECE4760
Access point and web server with FatFS
as Control Panel and HTML server
Pi Pico RP2350

Access point and web server with FatFS
This version builds on the dynamic control-page server previously built. The code brings up a stand-alone WIFI access point, with DHCP server, DNS server, and a small web server using FatFS to store pages. The previous code serves two pages with real-time controls to control an application, using VGA as the test app. This version adds the ability to serve the following filetypes (mime-types) from a FatFS file system on an SD card:

• HTML 1.1 text/html with standard formatting tags.
• JPEG and PNG images
• SVG scalable vector graphics files
• CSS sytle files
• ICO icon files

The files must each be small, currently less than 20 Kbytes. That may change as I get better with TCP/IP memory managment.
Remember that outside links from this server will not work because it is not connected to any other network.

This example is intended to show how to set up simple web pages for process control, and to serve system documentation, not to produce a general web server. Web pages are written in raw HTML. The pages may be embedded in the C code as strings, or placed into the file system.

For C-embedded pages, text has the usual formatting tags and can be modifed on the fly by the server for text-based output. The example has input interactors (HTML forms) for text input, number input, graphic sliders to set numerical values, and drop down select menus. HTML form input events oninput and onchange are used to produce better interaction. Output includes simple SVG graphics and a meter construct for ranges of numerical values.

Pages in the file system are static and not modifiable at run time, but support standard HTML constructs. This makes it easy to serve small graphics and javascript. You would typically edit the content files on a PC, then write them to a SDcard, which is plugged into a rp2350 SPI channel. There is support for HTML error 404 (missing file), 413 (file too big), and 415 (unsupported media type). Supported types are text/html, JPEG, PNG, SVG, and the optional ICO icon type.

The web pages displayed correctly on Android Chrome, iPad Safari, and iPad Firefox. The application code running on the rp2040 was just a video thread running on core1 which displayed the status of the server and browser variables. LWIP is running on core0, along with a serial thread for debugging and a thread to make a software 100 Hz PWM. My Android phone and iPad connected to the pico2W with no complaints. The code runs without a serial monitor or VGA attached, but obviously then you can only interact via browser.

Demo functionality:

• You will neeed to generate a SDcard with the html contents you wish to link up.
  For the demo code, unzip the project below, and copy the
  web_server_sd_card/web_pages folder to the SDcard on your PC, then transfer the SDcard
  to the reader on the pico2w as explained on the SD card page.
  The project ZIP has all the FatFS dependencies.
• You will need to connect a VGA display to view the real-time server state. (optional)
  The project ZIP below has all the VGA driver dependencies.
• You will need a serial terminal open to see the debugging information. (optional, but userful)
• After the system boots you should be able to point your device WIFI to:
  access_point_ssid = picow_test
  password = password using WPA2
  IP address = use 192.168.4.1 as the URL
  The IP address should appear as 192.168.4.1/introduction.html
  At least two phones can attach to the page at the same time.
  
  
• Each dynamic browser page is written as a string to be used as a format string for an sprintf that inserts the runtime
  variables, one for each '%' format designation. The scheme is quite powerful. It can dynamically change the name of displayed controls, set control options (e.g. selected parameter in the LED control), and display user input/output. More details about the dynamic pages are here.
  • Control Test 1  dynamic page
    • The page has a link to Control_test_2 page.
    • The browser can set a select drop-down list to toggle the on-board LED. An SVG filled circle changes dynamically to show the LED status (green if on, black if off). LED status is also echoed back to the browser text, and displayed on the VGA. When the drop-down list option is touched, the selection is auto-submitted back to the server.
    • The browser can set a text box to any integer which is displayed as red text and as a meter output when the submit button is pressed.
    • The brower can set a graphical slider control to a range of integer values fom 1-99. On the server the number becomes a PWM percentage to control the brightness of an LED attached to GPIO2. The current value is changed in realtime as the slider is moved via a one-line javascript attached to the oninput event and also displayed on the VGA when the slider is released using auto_submit onchange. The one-line javascript is hacked slightly from
      https://stackoverflow.com/questions/74320571/inserting-oninput-to-an-input-field
  • Control test 2 dynamic page
    • The has a link back to Control_test_1
    • There is a slider intereactor to set the 4-bit color for a rectangle on the VGA screen attached to the rp2350. The oninput event is used to update the input number as you slide your finger. The onchange event auto_submits the number to the server which signals the graphics thread.
    • A small SVG rectangle approximates the 4-bit VGA color set, but is extended in the browser to standard 24-bit web colors and is therefore slightly different.
    • The internal rp2040/2350 temperature sensor value is displayed. It should be a few degrees above room temperature.
      
      
• Each static pages is usually written on a PC, maybe in Notepad++, but some HTML editors may work also. The usual text formatting tags are used, as well as most other HTML tags, such as simple SVG graphics. You can find a list of the many HTML tags at W3Schools. The pages I wrote mostly test the file system and mime-types. The testpage.html page uses a CSS file for formatting.

An image of the introduction.html html source shows the structure. Note the embedded CSS in the header.
The displayed web page is below.
The page includes two jpg images and two png images.

CODE, ZIP of project

VGA driver and LWIP considerations
Both the VGA driver written by Hunter Adams and the LWIP supplied as part of the C SDK use significant hardware to accelerate operations. The VGA driver uses three DMA channels and three state machines in one PIO. The LWIP uses 2 DMA channels and two PIO state machines. LWIP defaults to PIO1 (see cyw43_bus_pio_spi.c), so the VGA must use PIO0. The LWIP uses the claim mechanism to grab DMA channels. This means that any unused channel may be grabbed. The VGA driver was modified to use the claim system so that it does not step on the channels used by LWIP. Once this small change was made, the two libraries played nicely together. Siunce all threee PIO state machines must be on one PIO, the VGA hard-claims all three. Therefore, the VGA must be initialized before LWIP.

Copyright Cornell University September 19, 2025