Raspberry Pi Pico W Simple Web Server C Tutorial - HTTP Server with SSI & CGI
HTML-код
- Опубликовано: 14 июл 2024
- To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/LearnEmbeddedSys.... The first 200 of you will get 20% off Brilliant’s annual premium subscription.
In this video we teach you how to set up a simple webserver hosted on the Raspberry Pi Pico W. This webserver can present html pages to a user but can also interact with different functions on the Pico W such as reading live values of the ADC and turning the on board LED on and off. We do this by making use of server side includes or SSI and the common gateway interface or CGI.
GitHub Repositories:
Pico W Webserver: github.com/LearnEmbeddedSyste...
RP2040 Template Project: github.com/LearnEmbeddedSyste...
LWIP Wiki: lwip.wikia.com/wiki/LwIP_Wiki
Timestamps:
00:00 Intro
01:22 Brilliant
02:18 You will need
03:04 How it will work
05:24 Getting started - cloning template repo
06:56 CMakeLists File
08:38 Main.c
10:35 SSI.h
13:58 CGI.h
16:18 HTML Files
17:31 Building the project
19:09 Conclusion
You can find more embedded systems tutorials and projects on our website learnembeddedsystems.co.uk
-- Equipment we use regularly --
The following links are affiliate links where we may make a small percentage on qualifying sales through these links. Use the respective UK or US links listed.
Budget Soldering Iron: UK: amzn.to/3pQpvUu US: amzn.to/3bBawIJ
Breadboards: UK: amzn.to/3solZCe US: amzn.to/3dGsHiS
Jumper Cables: UK: amzn.to/37JfToi US: amzn.to/3r384S9
Camera: UK: amzn.to/3qKLwFr US: amzn.to/3pK0V7C
Lens: UK: amzn.to/380lQxp US: amzn.to/3knH3WL
Tripod: UK: amzn.to/37H0Nzw US: amzn.to/3byKHsV
All videos and tutorials on this channel and mentioned websites are for educational purposes only.
This video was sponsored by Brilliant.
To try everything Brilliant has to offer-free-for a full 30 days, visit brilliant.org/LearnEmbeddedSystems/. The first 200 of you will get 20% off Brilliant’s annual premium subscription!
-- Video Note --
Sorry about the video desync in the intro, I accidently reversed the screen rec of the webpage so it doesn't quite line up!
Thanks for this video, this is a topic which I couldn't resolve for some days, but now I can understand the basics.
You read my mind - just what I was looking for!
Great series! Very impressive how easily you share knowledge. Yet it would be great to have values refreshed without reloading the whole page.
You can add a meta tag into the head section of the HTTP page to auto refresh at a specific interval eg every 5 seconds. Something along the lines of this:
very cool
Thanks for a quick introduction into a web server on the Pi Pico!
If I'm not mistaken, however, I reckon you might have a bug in your code in the cgi_led_handler() function: you're dereferencing the first element in the pcParam array, but you're not checking whether there is any by checking the iNumParams variable.
Excellent job! I would love to see a REST API example as well do you have any plans to do that?
Based on this video and the Github I could re-compile and link this simple web server, it works as expected, I could switch on/off the LED, great! Thanks!
But!
I have a small hobby plotter project, my plotter's HW is more-or-less ready. I can handle the pen mechanism from the PicoW, I have the working C++ code for pen_up() and pen_down().
I use a SG90 servo motor, driving with a PWM pin. So I tried to combine the two knowledge, the Webserver and the pen_up, and pen_down fucntions.
I see that as far as the webserver CGI handler tries to use the PWM, and would like to wait some time (till the HW made the movement), the PicoW immediately hangs. Hangs mean send a "Panic" trhought the USB.
I found, that if I add a small sleep_ms(200); into the existing LED CGI handler, then it also hangs the PicoW! So not the PWM itself is the problem but waiting inside the CGI handler.
I know that the PicoW has two cores. The first core is which starts the Wifi web service, which (I assume) runs on the second core (because the forever loop at the first core's end).
I think that the CGI handlers runs also on the fist core, probably inside an interrupt handler. but I am not sure about this.
Someone has an idea how can I program the PicoW (C or C++) to handle commands form the Webserver (like the LED on/off) which needs more time than setting a pin?!
Handling motors, usually needs more time.
Please a video tutorial for Raspberry Pi Pico W - MQTT and AWS in C/C++
A video to send mqtt messages from pico to a server with a mqtt client would be great.
Got it! Thanks for the idea :)
Great video! I want to connect 2 rp via internet, so they do not share the same wifi. How could I do that?
Is it possible to print the ip address in the serial console?
For a very simple website, this could be useful. I wouldn't use it on any serious blog or ecommerce type of website or a mail server.
I know the idea is to be introductory and, but I was expecting to go through a bit the changes made on the lwip optionals that were changed.
Is there a way to let the pico send and receive data and commands without a HTML website? For example I send a request over WiFi to switch a GPIO pin on or the pico returns the temperature sensor readings in JSON format?
This is searching the HTML for strings, like a mini interpreter while the code is running?
Couldn't the python script convert the .html directly to C strings and function calls that return the string values that change like On/Off?
Hi, thank you very much for this beautiful tutorial ! I have just one question. I would like to modify the html page displayed. How to know what hexadecimal values to put in the htmldata.c file
Just edit the html files in the html folder. Then reconfigure the project and the htmldata.c file will contain the updated html files. Let me know how you get on!
@@LearnEmbeddedSystems Thanks for your answer. However i have a problem with the configuration. Here is the output :
[cmake] Using PICO_EXAMPLES_PATH from environment ('G:\Code\Pico-example\pico-examples')
[cmake] Running makefsdata python script
[cmake]
[cmake] Process failed because: The system cannot find the file specified
[cmake]
At the end, Cmake tell me that the configuration is done but the "htmldata.c" file didnt change.
Any idea ?
Nevertheless the "build" works perfectly
@@LearnEmbeddedSystems I finally succeeded! When configuring the project the .py file was not running. So I launched it manually so that it converts the html file into a hexadecimal value
Bonjour, Projet vraiment sympa mais sur Visual studio windows, Code message : build -G Ninja exited with code: 1
Essayé sur raspberry pi 4 et même message. Auriez-vous une idée? Merci
Hello, is it solely possible to use only C programming language to build a web server inclusive of the LED ON and LED OFF buttons on the website too?
And can i clarify if i am able to input form on the web browser and submit the textbox to output into the pico w serial monitor?
I want to do something similar using and old smartphone in place of the pi-pico-w. Preferably Android. Any advice anybody? Libraries, etc.
Thank you for this video! How did you get the IP of the pico, though? I'm not quite sure how you got to the HTML webpage.
did you ever figure this out?
I added in my own code to print out the IP address of the pico!@@petercolevas2179
@@petercolevas2179 I was having the same problem with finding the IP where the webpage is displayed. After the wifi connection is done, you can use:
char *ip = ipaddr_ntoa(netif_ip4_addr(&cyw43_state.netif[0]));
printf("WEBPAGE SERVED AT: %s
", ip);
I hope it helps!
This tutorial was very helpful but the concepts presented seems to be limiting what one can do, particularly since it seems the pages are provided through "files" that seem to be static.
How do you support multiple web pages, or pages that will have a variable # of elements, which needs to be built dynamically?
Example: present a page that is generated by a variable number of array elements that represent different display tests.
I had a big fight with ChatGPT on how to ask a client for a file, then read that file from the client in 256 byte chunks.
It originally wanted me to us an SDK library and function from SDK going back to 2022 where the HTTP callback itself is handled by the application, determining what the URI being requested is, and if what request it is: GET, POST, etc.
But I don't see how that can work with the approach in this tutorial.
I presented the approach for this tutorial, hoping a CGI call could be leveraged.
However ChatGPT had me construct a form with a submit action, which it expected would call the CGI. The client submit was interpreted by the Pico web server as a URI page request, where the page didn't exist. In order to be a CGI call, it has to be parameters in the URI, not in the post body.
So how do we ask for a file, obtain the file name, being sure it is a valid file type, then pull the file 256 bytes at a time?
Buyer? Buler?
is it posible to install dns resolver on sta mode?
huhu is the cgi handler the reason why the webserver is still triggered without putting it in an infinite loop? i just dont understand how it keeps on running
is it possible for the pico w to receive remote network requests? i can't get it to port forward
What are you trying to do with the Pico W? What do you mean by remote network requests specifically? The Pico W in this video doesn't have any port forwarding capabilities as it is simply a client on a network that is hosting a webserver
@@LearnEmbeddedSystems yeah, so how to access the website on the pico w from a remote(online) client? without using a forwarder/proxy like nginx. i've tried port forwarding on my router with no luck. perhaps NAT could be used?
I dont see why cyw43_arch_gpio_put is needed.. Can you not just use normal gpio_put functions along with any other logic youd want to do at that point?
The on board LED of the Pico is not connected directly to the GPIO on the RP2040. It is connected to the CYW43 network chip GPIO. The function cyw43_arch_gpio_put sends a command to the CYW43 device to toggle it's GPIO and turn that LED on. Hope this helps!
I get that you're probably doing it to simplify the video, but putting all that CGI and SSI code into .h header files instead of .c files is bad practice.