Build your own web server using a Raspberry Pi Pico W using Phew!

Подписаться 32 тыс.

Просмотров 47 тыс.

50% 1

*Thank you to Ian, who spotted the error in the forms demo - I hadn't copied the default.html file from the repository onto the Pico, and that's why it wasn't working! Great spot and thanks Ian!*
Did you know your Raspberry Pi Pico W can actually host websites? Using the new web server and templating library from Pimoroni you can build interactive and useful sites into your projects.
💁‍♂️ For more information on SMARS Robots, tutorials and more visit: www.smarsfan.com
🎖To join the membership at 🥉bronze, 🥈silver or 🥇gold levels, head over to
www.smarsfan.com/membership
Join me on Discord - action.smarsfan.com/join-discord
Join the list - action.smarsfan.com/join-the-...
☕️ Enjoy this video? Buy me a coffee! www.buymeacoffee.com/kevinmca...
📸 Follow me on Instagram - @kevinmcaleer / kevinmcaleer
🐦 Follow me on Twitter - @kevsmac / kevsmac
🙂📘 Join the Facebook group - Small Robots / smallrobots
👩‍💻 Phew demo MicroPython Code on GitHub: www.github.com/kevinmcaleer/p...
🎵 Music by Epidemic Sounds www.epidemicsound.com/referra...
#Pico #MicroPython #Robotics
00:00:00 Introduction
00:00:46 Session goals
00:01:57 What is Phew?
00:02:43 How The Web Works
00:04:01 Installing Phew
00:04:45 Demo 1 - Installing Phew
00:08:37 Helper Functions
00:09:02 Demo 2 - Quick connect to Wifi
00:11:12 Logging
00:13:27 Why Log?
00:15:40 Demo 3 - Logging
00:19:53 Web Server
00:20:57 Demo 4 - Simple Site
00:24:26 Templates
00:25:52 Demo 5 - Templates
00:30:16 Template - going further
00:30:46 Demo 6 - Multi-part pages
00:34:29 Bootstrap
00:52:30 Simple Blog page
00:53:43 Forms
00:54:49 Demo 7 - Forms
01:10:31 Next Cube Model

Развлечения

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@iancrowe8384 Год назад

Hi Kevin Good intro to web serving on the pico. I think your final bug comes from the fact that there is no default.html file on the pico (see the directory listing on the lower left at 1:14:22). unless I've misunderstood your coding whether the username/password pair is correct or not default.html is called with different text. As the file is not on the pico this will cause a problem. It would have been nice to get a "File not found" message somewhere. As far as I can tell you never uploaded it to the pico but all the other .html files are. Hope this helps Ian

@kevinmcaleer28 Год назад

Ian - I think you’ve nailed it! I didn’t copy that over did I and it’s right there in the repository. Great spot, and thanks!

@iancrowe8384 Год назад

@@kevinmcaleer28 You're welcome. I did a bit of digging around and discovered that in earlier versions of Micropython instead of getting "OSError: [Errno 2] ENOENT" there was a message "could not open file 'xxxx.yyy' for reading". This has since been "improved" to the current cryptic version. Love the "Cube" model. Might be interesting to re-jig it for a Pi Zero W 2 and see if there is a port of NeXTStep to run on it 🙂 Glad I could be of some help

@aroldo1959 2 месяца назад

Phew! is an awesome HTML Server library. I saves you a lot of time. An Kevin did a great job explaining how to use it.

@renobodyrenobody Год назад

Thank you so much. I am a programmer (very old guy here) and was struggling to much with thonny (linux with arm64 here, I hate Microsoft and Apple, LOL). I finally managed to use the Thonny version 4, was able to install upip and then the IDE is ok, there was so much disconnections with Thonny 3... Your video is clear and very instructive, I found a lot of answers. Thank you Kevin.

@NikoKun Год назад

I'm really glad you introduced me to Phew, it's allowed me to create a bunch of nifty Pico projects lately! From a web interface for my wifi enabled alarm-clock and room messaging device, to a mobile Access Point, that hosts a guestbook or group email signup, simple message room, and info or coordination page for use at "activism" events. heh I did have to fix a couple bugs within phew's code, nothing too major, tho I'm still trying to figure out what's causing an odd error: "need more than 0 values to unpack" or similar, which sometimes crash the server.. Phew doesn't seem to give me enough info to figure it out on my own.

@cursoderobotica Год назад

This Framework is amazing!! Thanks Pimoroni!! And Thank you Kevin to make this tutorial!! 😁👍cheers!!

@danahuff6823 Год назад

Great overview, Kevin, well worth a cup of coffee. I'm sure you found your missing default.html file. The framework is very similar to Flask which I have been using for a few months. And this is so much simpler and yet more feature rich than the standard web package.

@kevinmcaleer28 Год назад

Thanks for the coffee too!

@coder_one Год назад

Amazing job Kevin! Greetings from Poland!

@cursoderobotica Год назад

Hi Kevin!! Thanks for this amazing tutorial!! Great Job

@deadeye1982a Год назад

Hint: the render_template() is a generator. You must return a Response object, where the body could be a str or a generator. Instead of return render_template(...) you do return Response(render_template(...), status=200, {"Content-Type": "text/html"})

@TomParish Год назад

Very cool. I'm thinking I'll try this PHEW out but I would like to see a follow up video that shows it working and what issues to look out for regarding what went wrong. Thank you btw for producing these. I know they take a lot of work.

@kevinmcaleer28 Год назад

Thanks Tom - Ian Crowe spotted my mistake - I hadn't uploaded the default.html file from the repository. I tried after the show and it of course worked fine then!

@TomParish Год назад

@@kevinmcaleer28 Thank you I SO know how that goes. No worries. Will you have a complete write up on this on your site? Thank you for your note back.

@vynylPooh Год назад

Kevin, thank you a lot! great stream!

@Keeping_IT_Simple 10 месяцев назад

Am interested if this could be also used to setup the PicoW as an Access point so that i could use the PHEW web-server to control device such as a robot via direct Wifi connection to the PicoW? That way students could learn about & use the robot without needing to use a router

@fvgoya Год назад

Finally!!! A small version kind of Flask. Pretty cool!!!

@madeinfonddugarage5988 Год назад

hello, thanck you for your tutorial. really helpful, just a question, how can we add css or other file like js? in microdot we can add it with a route.

@neilvermeulen5283 Год назад

Thanx mate. You explained well.

@JohirulIslam-lm2vz Год назад

@Kevin, you forget to upload the 'default.html' to Pico for the "Demo7 - Form" chapter @1:02:45. The render_template fails to render the page when the POST method for the '/login' url wants to send data to the 'default.html' (since it is missing).

@kevinmcaleer28 Год назад

Well spotted!!

@parihar-shashwat Год назад

I wanted to create a web config page for the pico based device. Basically updating the ssid/password for the wifi during run time. View log event of certain pin. For that the tutorial was good. Just out of curiosity does this phew server has some middleware request forwarding for every request for basically auth handling ?

@hiddencat3785 Год назад

Wow! Pico W is a great thging!

@mytechnotalent Год назад

Great job Kevin!

@kevinmcaleer28 Год назад

Thanks Kevin!

@mytechnotalent Год назад

@@kevinmcaleer28 welcome Kevin love your work!

@repsej74 Год назад

Great video, Thanks !

@benid696 Год назад

Interesting stuff thank you 👍

@kevinmcaleer28 Год назад

Thanks @Beni D! I’m still a bit frustrated the last demo didn’t work properly

@Goman1244 10 месяцев назад

Love your video

@marcdurbach7036 7 месяцев назад

Hi Kevin, thanks for the interesting content you create . I have a question : is it possible to run a phew server and a mqtt client at the same time on the same pico w ? I want to build a module consisting of a pico w and a PCA9685 providing both a mqtt as well as an api interface. I build the mqtt, and the api on seperate PICO's but i run into probblemns when trying to run both on the same device. Would be a nice project.

@nickatchison9906 10 месяцев назад

COOL stuff.

@JoshF151Tech Год назад

Would I be able to use a Raspberry Pi Pico W as a Backup DNS Server to keep my Internet Online if my Raspberry Pi 4 goes Offline? My problem is my Router makes me put in two DNS Addresses so I set them both as the PiHole DNS Addresses I've tried setting the Secondary DNS as Google's DNS but if I do that and turn off my Raspberry Pi 4 it doesn't allow me to connect to the Internet unless I turn the Raspberry Pi 4 back on and with the Prices of Raspberry Pi 4 and even the Raspberry Pi 3 right now I don't really want to spend that amount of money on another one right now if I don't have to?

@gerrardhickson9471 Год назад

Hi Kevin, Is it possible to use Phew to stream sensor data similar to the tutorial you did with the MPU9250/6050? - Can we call render_templates in a loop to update the index.html variables?

@kevinmcaleer28 Год назад

Yes - the way you would do this is to change a json file and have the page poll that file via a JavaScript script using jQuery. I’ll add that to my blog ideas page as it’s a good thing to cover.

@gerrardhickson9471 Год назад

@@kevinmcaleer28 Thanks - I ended up figuring out a similar solution. I created a new endpoint, then polled that and returned a text string. Might not be best practice, but its functional.

@johnmuller5056 Год назад

I am trying to send a a JSON object from the Phew server to a java script function, How does one send JSON in a request or Template, I tried and it failed, Great instruction video, it took me 90% of the way with PHEW. Thanks in advance for any help!

@kevinmcaleer28 Год назад

Its kind of the other way round - the Javascript function should make a call to an API endpoint, which is just a route for phew to provide data via. does that make sense?

@kevinmcaleer28 Год назад

Have a read of this article: www.kevsrobots.com/blog/simple-robot-arm.html#the-web-ui

@johnnijholt5480 Год назад

Hi Kevin, I did connect the ordinary way to connect to my wifi without any problems but, if i use the Phew line, i got only get "got ip address" any ideas how this is happening?

@devinalmanirwasita524 Год назад

Hello Bro, Im from Indonesia. Amazing Phew... I have been try flask, but i think phew more simple .. I Try your tutorial from demo 1 until 3 success. in demo 4 no error Sir, But no respon on web and error.. please help me :)

@JustinWolliesWollies Год назад

hi Kevin if i wanna put a button on the web to trigger a pin on the pico w using phew please ad want to know if its possible if the button show off its red and when pressed it change to on and button turns green ?

@kevinmcaleer28 Год назад

Totally possible

@Bubby9767 Год назад

closing body tag ?

@Davidmorehouse1991 Год назад

Cheers!

@jcork3460 Год назад

Kevin, Can you copy the PHEW directory onto another Pico rather than doing the uPip install?

@kevinmcaleer28 Год назад

Absolutely - you can download it and copy it across using Thonny, or even install via the Thonny package manager

@kyberzyler Год назад

Thanks

@peterwadsworth5994 Год назад

I notice your logfiles have the correct timestamp, when I run the demos with logging, the timestamp starts at Jan 1st midnight 2021?

@kevinmcaleer28 Год назад

Thats a great spot Peter - you'll need to sync the real time clock with a network time provider - check the code in big mouth billy bass, as I do that just after connecting to wifi github.com/kevinmcaleer/bigmouth_wifi/blob/main/billy.py line 62 to 104

@peterwadsworth5994 Год назад

@@kevinmcaleer28 , cheers Kevin, now syncs the time correctly

@OleBSrhus 7 месяцев назад

Takk!

@kevinmcaleer28 7 месяцев назад

Thank you! I really appreciate your support

@britishtechguru Год назад

Where do I get Phew?

@slavauchitel8014 Год назад

Kev, just in case you have not figured what the problem was - it's one of the "content =" statements, it looks like content = f"xxx", Cheers.

@compubyte2010 Год назад

I noticed to install phew, you typed microphython-phew as the name of the file to install? does that mean this wont work on CircuitPython? and only with MicroPhython ? (Phew?)

@kevinmcaleer28 Год назад

I asked Pimoroni and they think Phew will work fine on CircuitPython

@compubyte2010 Год назад

@@kevinmcaleer28 SO would I type CircuitPython-phew within CircuitPython? or do I still type Micophython-phew within circuitpython?

@kevinmcaleer28 Год назад

@@compubyte2010 I think you’ll still type micropython-phew when installing it. It’s compatible with both. It’s just that the name ‘phew’ was already taken.

@jazzjohn2 Год назад

If an app is created with the intent of giving the hardware to an end user with a different LAN, how would they get their wifi credentials in without using the development environment?

@kevinmcaleer28 Год назад

You can create a captive portal so you connect to that device and it can scan for Wi-Fi hotspots and then let’s you enter the password and stores it to flash

@kevinmcaleer28 Год назад

How to build a captive portal with MicroPython - the easiest way EVER! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2Y42DSZpR0w.html

@ronaldwernecke9981 Год назад

I am a beginner in Raspberrys, and tried the install process. It says "upip not found" - I am lost. Are ther other things to be installed up front?

@user-vh3lm3qo4t 7 месяцев назад

mpy replaced upip as the package manager

@tubeDude48 Год назад

You were all over the place!

@kevinmcaleer28 Год назад

What do you mean?

@swedishpsychopath8795 Год назад

Yeah - he fell over board rather quickly after he (for no reason what-so-ever) suddenly jumped into VS - code. Continuing without correcting the error was the biggest no-no however. But everything was nice and good until he fell out of the boat.

@allancarey8038 Год назад

Q - Hi Kevin from Vancouver Island B.C. Canada - any pointers to where I can get programming doc for PHEW? Old farts like me need written instructions! Thanks

@kevinmcaleer28 Год назад

Sure - check out GitHub.com/Pimoroni/phew

@allancarey8038 Год назад

@@kevinmcaleer28 thanks Kevin!

@gandalfsVater Год назад

Hello, i tried to import upip but it just throw the error: ImportError: no module named 'upip'

@stevemorse5052 Год назад

Hi Gandalf, I have the same problem and have been unable to find a solution. Were you able to solve it, if so how?

@kevinmcaleer28 Год назад

What version of micropython are you using? upip does require the Pico W microcontroller as well as the version of MicroPython firmware for the Pico W

@stevemorse5052 Год назад

@@kevinmcaleer28 The latest 'W' one, the one that jokingly says comes bundled with upip! rp2-pico-w-20221123-unstable-v1.19.1-713-g7fe7c55bb.uf2 I am pretty sure that I am using a Pico W, I have 3 'normal' ones and 4 'W' ones, and Phew is working fine on one of them. Ha, I let the cat out of the bag! Yes, thank you very much, Phew is working fine. It took me a long to figure out upip, then I found a video yesterday that showed me how to install it via Thonny. So thanks for the reply and a great video. Oh, and thanks to your code, I was able to solve another couple of problems, most of the videos up to now, only display 1 webpage, now thanks to the Nav bar I can display as many as I want, also I was able to figure out how to make a working hyperlink. If you have a minute, when I installed some other libraries via Demo1, they installed into a folder called .frozen. Any ideas why they installed there and not .lib?

@danahuff6823 Год назад

The latest releases of Micropython have replaced "upip" with "mip". I have found I cannot install the latest version phew package the usual way without errors so I installed from the Pimoroni/phew github page and that works.

@pranavnivas4905 Год назад

Hi this is Pranav, I am unable to use upip, when using the line import upip it is showing me a error - " ImportError: no module named 'upip' "

@danahuff6823 Год назад

Hi Pranav, the latest releases of Micropython have replaced "upip" with "mip". I have found I cannot install the latest version phew package the usual way without errors so I installed from the Pimoroni/phew github page and that works.

@pranavnivas4905 Год назад

@@danahuff6823 Thank you so much that works perfectly. 😊😊😊

@clivebarrell6448 Год назад

Q is it phew pronounced "few", which would be the usual English, or "pew" as in church pew, which sounds strange here?

@kevinmcaleer28 Год назад

Jon says is Phew as in ‘phew that’s a relief’ and not as in pew ‘pew pew’ Han shot first

@DamjanDimitrioski Год назад

have you benchmarked how many clients can be accepted as a connection on the server on a single Pico?

@kevinmcaleer28 Год назад

I don't have any benchmarks, other than the page count, and the number of visit I track via Cloudflare. I think it only accepts a single connection at a time, but handles them so fast its within any browsers timeout.

@DamjanDimitrioski Год назад

@@kevinmcaleer28 I see, so it can be mostly to edit some settings, one family member of a house, probably can use it at a time.

@imrichmorvay2227 Год назад

great video just i didnt learn nothing

@christopherlyons7613 9 месяцев назад

upip no longer supported, need to use the mip library.

@schlingelgen Год назад

With my Raspberry Pi Zero, I was able to set a hostname before connecting to a network. Afterwards I was able to access the hosted web app with hostname.local which was very convenient. I can't find a way to get this behaviour on the pico. Although the wlan.config(essid=...)-method is - according to the documentation - only for setting the name of an access point, I tried in anyway, but it didn't work.

@ixxeon Год назад

your tutorial doesn't work as the version of Micropython that Thony 4.0.1 installs which is the same as on the Micropython website v1.19.1-782-g699477d12 on 2022-12-20 Raspberry Pi Pico W with RP2040 doesn't have upip module after trying to manually copy upip, i eventully found there is a package manager in Thony and tried all of the 3 upip options availble. Only the first one worked without an error, but it installs phew to ./frozen folder which then isn't visible i will manually try download phew next and see if i can continue

@ixxeon Год назад

ok back on track - i downloaded micropython-phew-0.0.3.tar.gz and used the Thony package manager to install it from my download folder.

@danahuff6823 Год назад

@martinnash007 Год назад

Did you manage to fix the code?

@kevinmcaleer28 Год назад

Yes - Ian spotted it, I hadn't uploaded the default.html which is a template file I created but hadn't copied to the Pico. default.html is file with just three lines that imports the header, footer and content