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

hey robot makers have you ever tried building your own website using a raspberry pi pico w then you're probably doing it wrong so stop let me show you a better way using something called pew we're gonna have a look at this today this is the new web server and template templating engine from um pimeroni you can also use this on raspberry pi pcw's and any other micropython board but it's really designed for the pico w so let's dive straight into this my name is kevin come with me as we build robots bring them to life with code and have a whole load of fun along the way okay let's get over to our keynote and see what we're looking at today so this is all about building pico that's right a raspberry pi pico w which is a micro controller into a web server which is just nuts we've previously done this before this is a much much better smarter quicker easier way so what we're going to do today we're going to look at how you install pew um talk about what pew stands for as well using something called up this is a really neat thing you can do on the micropython boards that have network connectivity we're going to have a look at how you can really quickly connect to wi-fi using pew we're going to look at something called logging where we can log our results to text files on the pico w which is really really easy to do and just amazing if you're trying to troubleshoot or just have your system work and log important events we're going to look at how you can build a simple site using pew we're going to look at how you can use templates to uh to make some more complicated sites we're going to look at multi-part pages using the templating engine and then we're going to look at how we can build some forms to capture user data and then use it in our program and we're also going to be having a look at this thing on the uh the screen moment which is also my overhead uh which is the next cube this is such a cute thing to put your picow web server in so and then at the very end of the show we're also going to have a live q a for people watching this on the live stream so let's get over to what's over this about with pew so pew is either the pico or python http endpoint wrangler this has been created by pemeroni for their environment of products it's something that makes their captive um wi-fi work so when you plug this in power it up you see like a new wi-fi thing to pop in as like an access point and then all the nice screens and everything that flow through from there they created it just for that and it's really really nice so i wanted to share this with you today and show you how to use it yourself and your own projects so it's a really simple yet powerful web framework for building interactive websites on the pico w in micro python it's got like i say logging it's got a templating system and it has a built-in web server it could do more than that but that's what we're going to be looking at and focusing on today because that's quite a lot to cover off so just in case you don't know how the web works this is like a really naughty diagram of how this works so we've got our user user's computer on the left hand side we've got the internet in the middle there and we've got a web server on the right hand side um and this is typically how it works your browser will send a http get request for a web page the web server will get that response um and it will send it will get the request and then send a response response back to your computer including all the resources and files it needs to serve for that page um now there's a lot of things that go in between and nowadays we have https which is the secure version but we're going to be taking this right back to sort of 1990 when tim berners-lee invented the internet to make this a little bit easier to think about if we send a post request we can actually send data to the server and then get some information back so that's what we're going to do when we fill out forms we're going to send like a username and password for example we're going to send that to the server it's going to do something with that and then send a page back in response so that's the kind of flow it's the very first one that just requested a page that's called get request and then the post one is one where you actually ask send some information and it sends you back a response based on that so that's a really simple overview what's going to go on today so the first demo we're going to look at in a second is about installing pew so we're going to use something called up if you've used python before you probably come across pip which is the python packaging manager and up is the smaller version of that it's the packaging manager micropython and you can use it to install all kinds of libraries from pi pi on any type of micro python device that has network connectivity um so like i said it needs an active network connection so we need to make sure we connect to our wi-fi before we start trying to install stuff and it will automatically download the packages that you you specify onto your p code w so it's really really good uh way of doing this so let's get over to our first demo and have a play about with this so let me just bring up um funny and what i'm gonna do over here i'm just gonna restart um let's move that out of the way it's going to restart um funny so i have a uh a pico plugged into the computer it's actually this picot i'll just show you inside here so this is a pico w it's just been screwed to this little plastic base which has got some screws in it and some nice little feet and then i've got this really nice 3d printed um let's get that in the overhead shot for you this is the uh the cube that i've designed which is based on the uh the cube the next cube that tim berners-lee actually designed the internet software on so there we go that's that's what's going to be running all our code today so let's get back over to not the keynote to funny and we're going to start off with our very first piece of code so i've got a number of demos here i'm just going to type them out just to show you how easy this is to do so the very first thing i want to show you is if i just uh restart that i have a file or two on here just make sure that that's working sometimes it gets a bit fussy when i start moving things about so i'm just gonna disconnect and then reconnect and then just press stop on there we should have a python thing right so i've got a file that's called secret secret has got two variables in it it's got an ssid with my wi-fi um ssid in it and it has a password with the wi-fi password in it too and we can bring those in just by doing from secret import ssid and password so that's the first thing we need to do to get our password and ssid brought in the next thing i want to do is import network and i'm also going to bring in from time import sleep and this will just allow us to pause for a second or two and what we normally have to do when we're connecting to wi-fi is we do wlan network dot wlan which is the wireless lan interface we're going to connect to the uh the static interface on there so we just do that and then we do w will land active is true and then we do wlan.connect and then we have to pass in the ssid that we just brought in from that secret file and then password like so then what we'll then do is we'll say if the wlan is connected um equals false so if it's not quite connected yet we want it to sleep for for a second or two so i'm just going to say sleep for 0.1 of a second and then otherwise at that point it's actually connected so we can say print wi-fi connected something like that okay and then what we'll then do is we'll then do the thing that's going to import i'm going to say import up i'm going to say up dot install and then here's the magics for micro python this is the name of the package that we're installing pew like so so let's run this and see what happens so i'm going to run this on the picow let's just call this demo one and let's see what happens so the first thing it's going to do is it's going to connect to the wi-fi it's connected to the wi-fi it's now going to install into lib so this is creating a new folder on our pico it always complains about the ssl certificate being not valid i don't know why that is but now if i go over here and refresh the files because the program stopped running we've now got this new lib folder appeared and in here we have this pew library and these are all the different bits and pieces that make up the pew um library so that's the first uh piece of code that i need to show you let me get back over to my keynote so there's some helper functions we saw when we typed in all that stuff to try and connect to our wi-fi there's quite a few different steps that it's always the same steps so pimmeroni created this really cool connect to wi-fi helper function that just makes it so much easier uh so instead of being like you know four or five lines of code it's just one single line of code speeds up that whole process and just makes your code a bit more reliable so let's have a look at uh what we're gonna need to do there so let's go back over to um to here and what i'm gonna do now instead of doing these whole steps here which is like what one two three four five lines of code let's do a new one so now we've got pi pew installed this is going to make this so much easier let's get my second page all right so from pew i'm going to import connect to wi-fi like so and then we're also going to do that from secret import ssid and password and then all we need to do to connect to our wi-fi to say connect to wi-fi and then we just pass in the ssid and password and then that's it we can just say this is oh yeah this is the other cool thing this is auto automatically creating a log file with entries so let's have a look at this as well right so that's four lines of code let's run this i'm gonna call this demo two like so john's a the creator of a pew pew pew so you say it's not poo it's pu like for you as in the expressive available phew right so let's have a look what just happened so i run the connect to wi-fi and then i said print this is automatically creating log file entries so let's have a look down here it says debug connecting to wi-fi apple network extreme and then there's my ip address one one six one and then it says this automatically created a log file with entries so let's now just uh collapse that and then refresh the files that we have here and look we've got this log dot text so if i double click that we've got two entries so where did that come from and what what what is it doing there we'll have a look at that on our next uh our next piece so let's have a look at uh what this is all about so logging so yeah captain's little log stardate what's that 100255.82 so any trekies out there might know what that means so when you first start programming you'll find that you use the print function a lot to sort of display the current function sorry the current status of our value of variables in your code or maybe where something's got up to and you kind of use it as a debug tool to start problem poke what's going on within your program and that's okay to a point but sometimes if you're doing something that's on an embedded system so behind me is um i think it's just about there is the billy big mouth billy bass fish and that runs without anything connected to it's just got power going to it connects my wi-fi and it hosts the uh the website mouthpie.com and um that kept doing something strange every every midnight so at midnight it would stop working and i looked at the the back of the thing and it's flashing it's heartbeat saying it's still alive and everything's okay as far as it's concerned but clearly something's not right so i'm not able to understand what's going on there without being there at midnight with my computer plugged in and watching the console so log files solve that problem because they can log things with a time stamp of what's going on with the message that you've generated from your code and then at some other point in the future you can look at that log file and then log file and then do some diagnosis so it's a much better way especially for embedded devices that are not always connected to a console to log stuff to a file and the log file has four different uh levels to it so we've got debug which is used for when you're writing programs you're trying to debug your code so it's probably not something you want in your production environment it's just things to figure out what's going on you've got info which is useful in information and status messages maybe it's just telling the person who's going to be reading the log what's going on and then you have warm so something isn't quite right but it can continue so maybe um it like retried a few times and then connected on the third time so it could warn that maybe um it wasn't working quite the way expected and then you have error where some problem has occurred and it means it can't continue so they're the four different levels of logging and we can use those very very simply in our code so why would you want to log so like i said it helps you debug your code it saves the contents of your messages permanently to disk or to the filing system i should say disk is an old-fashioned concept now isn't it so the sequence and the time is stamped as well as the type of message so we can see if it's debug if it's info error or one the log file can grow and that might be a concern on something which is um a really small file system inside you know it's not got a livesmart capacity so a raspberry pi pico w for example might have you know eight meg two two to eight megs depending on um if it's if it's got some additional ram in there for storage so it's not a great deal of storage so we need to be some way of making sure that the log file doesn't just grow exponentially and then fill up the entire storage system we need some way of culling it so we can do that using the truncate command and the truncate command will chop off and it intelligently chops off it doesn't just chop off like part way through characters it does it sort of a line at a time chops off the the log file so that um it can keep growing like so and then it maintains a certain size we can specify what that size is to truncate at um and it means we can view those logs to then investigate what's going on so that's that's a really smart um part of this so if you like what i do and you want to help me grow the channel even more we're heading towards 10 000 subscribers uh i reckon it'll be about september 20th september thereabouts before we hit that so if you want to help me get there faster make sure you hit that subscribe button click the bell so you get notified whenever i go live uh drop me a comment as well on this video let me know if this is something that you've used or if you've used any frameworks in the past to view things like flask or ginger and yeah if you like this video give me a thumbs up um yes so and also i go live every single sunday at seven o'clock um uk local time so that's usually around greenwich mean time it's plus or minus one hour depending what time of year right when currently in daylight savings british summer time so we're actually uh gmt plus one but yeah go live every single sunday pretty much i think if it's christmas day i please still go live right so we're going to go on to logging now so let's have a look at our logging okay so let me just get to my next sheet so i've got the code next to me here that i'm just typing in right so what we're going to do now let's let's do a new file and what we're going to do is want to say from view import logging um so a lot we're going to do three different types just to show how this works logging dot info so i'm going to say hello world as is tradition we're going to say logging dot one and we'll say um hopefully this doesn't happen tomorrow houston we have a problem i'm very very excited about artemis one tomorrow who else is going to be watching that and then we're gonna have error which is the second we will fight club okay so that's what we're going to do there let's now run that code i'm going to save this as demo3 oops okay so uh let's see what happens so there we go it says info and it says at 202208 28 1922 and 13 seconds which is right now info message and then it says um a certain block size there hello world and then we see the next one is a warning houston we have a problem and then the third one is an error the second rule of fight club so if i now double click on that log file there let's see if that is going to open up me just make sure that's all good there we go um so you can see they're connected to wi-fi ip addresses blah blah that's from the previous time we ran the uh the uh the script so you can see there that was at quarter past seven and now you can see these new entries hello world houston we have a problem the second full rule of fight club and john is just confirming that um the slash is the free bites in memory i wondered if that was some kind of disc to storage just useful if you're uh trying to figure out what amount of memory you got i understand um is it doctor foot leg he was uh trying to get loads of different pieces of code to work on a project on a pico and it ran out of memory so if you use the logging system it's a nice easy way just to see what the current amount of memory is when you was running that piece of code um so that's really useful this just packed full of so many useful cool things right so that's how we if we do logs um so what else could we do let's try um truncating this so what i'll do now is i'll say for i don't actually need a variable there so i'm going to use the underscore and we'll just say range one two ten and let's just grab those three lines there and put them down here just need to indent those a little bit so what it's gonna do it's gonna lock those like 30 times i guess and then what i want to do then is i want to say logging.truncate and i'm going to truncate it to 12 12 bytes let's have a see what happens there so i'm going to run this you can see all the different messages there and now i'm going to double click on that log.txt and let's see what's in there so 12 is probably not a very good size to do that on let's just double click yeah so that's too small so let's do um 120 for example let's just run that again and then let's try looking at the log file there we go so you can see it hasn't got all 30 odd messages in there it's just got 120 bytes worth of records so it's a really good way of making sure that our log file stays a particular size now there's even some functions in the uh in view to make sure that your file system doesn't um run out of space you can just say is is the load disk space we can have a look at that as well okay so i think that's everything on that demo there so let's go back let's look at the next piece so the actual web server itself now we're talking so few has a built-in web server we can use we can create routes such as the slash or slash about we're going to use those in a second to display different pages based on those urls so this slash is what happens after the the the domain name that you normally type in this case we're going to type in the ip address of the pico w and we can also capture data that's sent to the server using the request object and we can send data back from the server to the client using the response object and then we can start the server by running server.run brackets so so there's a question there just on the other thing about logging is the truncate function first in first out so imagine it's like a scrolling window and you're always scrolling to the bottom of the file you're getting rid of what's on the the sort of head of the file so that the oldest um yeah first in is the first out that makes sense um so that's uh just a question there so let's have a look at this web server so let's create a very simple site so let me go over to here and let's create a new file and let's create ourselves a little site so from few import logging groups and server which is the new one and connect with two ends to wi-fi and then let's do that from secret import ssid and password and then let's just do that connect to wi-fi with our ssid and password and then what we're going to do now is we're going to create a um a root now there's a couple of ways we can do this i'll do the the easy way first of all i'll say the easy way this is the sort of long hand way actually so server.add root and what i'm going to do there is just do slash which is the root and then we're gonna have to create a file in a second that's called index.html but at the moment i'm just gonna say index which is the name of a function that we're gonna create and then the methods this is remember we had get and post this is what this means so we're going to put in there this is just a get and then we can just close that bracket there right so now we need to define a function that's got the same name as this thing here so this is index i'm just calling in the name of the root and we'll just put in there something that's like request um okay so what we're then going to do is just build up our response back to the uh to the browser so let's just say hello world and then let's return that response like so right down here we're going to say logging dot info started web server like so and then we're going to say server.run right so let's run this this is going to be demo 4 okay so let's see what happens down here connecting to wi-fi oops so index name not defined so let me just have a quick look what i've done wrong there is it just the sequence of that let's just move that above there just in case that's all it is let me just run that again um it's not liking the term methods so it's method with an s at the end john's cursing me here right and then that should do it there we go so starting web server web server started on port 80. so it's the ip address is that ip address there so that's let's just grab that what i'm going to do now i'm just going to open up a web page and i'm going to show you what that looks like so here's a web page with that that's running on that pico so hello world now we can interactively change this just to prove that is um let's just do a couple of exclamation marks and then run that and we'll see it reconnect and if i go over here and then just refresh once it's up and running let me just minimize that there there we go we've got all the exclamation marks there so hello world is working fine so that's how we create a really simple uh web page let's go back to our now you saw when i did that web page i basically just created um a string and sent that back to the browser now that's not really going to work as a real web server we want to actually build up like an index.html a real html file and send that across now if we did that we probably want to have some interactivity with the user so this is where templates come in and this is where few really really is just amazing so templates allow you to embed data from your program into the web page dynamically using variables we can you can send a page title content basically anything you want using templates and to use the templates we just use these squiggly brackets and the convention is used two squiggly brackets with your variable in the middle and that's the same approach um for things like other templates and engines like ginger flask uses ginger in the background ginger too it's a really common approach for doing variables embedded in web pages and then all we then need to do is use this new function called render underscore template we then pass it the page the template that we want to use and then we only need to put in commas after that all the different arguments so all the different key value pairs we want the variable and then the value to render the template so you can see on the right hand side there we've got a really simple web page we're going to create that in a second and we are then going to put in there a variable so let me show you how we can do that so let's go over to our next demo okay so let's create that html file first of all so if i do this as um i'm gonna i'm gonna hand code this uh i learnt html a very very long time ago so let's do body slash body and then let's do idle title or that being the head wouldn't it but we can keep this really simple so let's just do um name something like that and we can have like i don't know hello and then what the name is instead of this being a paragraph let's have it as a heading 1 style like so right so that's going to be our index.html let's save that let's just save it to this computer let's call this index dot html let's use html already exists whatever right and then what i'm going to do is i'm just going to copy this out just right clicking and uploading this to the uh the pico oh i actually need to stop it running the old program first it's going to complain about that so let me just stop that there we go let me just try uploading that again here we go right so that's uploaded we've got an index html there and then what we then need to do is create something that's actually going to run the templates so we'll get this demo five so this is going to be quite similar to the previous one so what i'm going to do is just cut and paste the code from there let's just copy all that and then what we're going to say is we're going to import a few extra things now from few so i'm going to save from view dot template import render template and i think that's it and then further down here we're going to have that um before i did the ad route there's actually a quicker way of doing this using decorators so instead of having to do the add root we can do the decorator server dot root and then we can pass in that slash and then we can actually put the index thing underneath it so request and then we can say return and this is where the new bit comes in render template and we pass in index.html and we can pass in the name and we can say equals kevin and then let's run this and see what happens i'm going to call this one demo five so we should see it connect to the wi-fi we should see starting up the web server oops and i didn't do server.run so let's just add that to the end miss that bit off there we go okay so if i now go back to that web page and i click refresh we can now see it says hello kevin i remember in that html file i put the variable and i put it within those curly braces so it can change that out with um whatever we want to pass in there now if we go back here we can actually pass in more variables so we could say um let's say message equals it's a nice day today and if we go back to our index.html we can add to that so we can say um p message slash p so that is the variable and that is the variable they're the two that we're actually passing in so what i need to do on both of these is i need to stop the program from running and i need to re-upload that index.html that we just tweaked because we changed it on the computer and not on the pico okay so now that i've done that if i go back to demo 5 and rerun that wait for it to connect there we go and if i refresh now wait for it to do its thing there we go it's a nice day today so it's passed in that message into the html file so these are looking quite boring as html files we can do a lot better than this i'm sure but um this is the sort of mechanics of how this works so let me go back to our keynote okay so we can take this a lot further this is where it really comes into its own so templates can be nested this is so cool this means you can build different parts of your pages and have render template construct the entire page based on those different parts this means we can reuse common parts of our pages such as the header the footer navigation all that kind of stuff and we can just have it build consistent web pages based on that so it's so much easier to uh to develop stuff based on this so let's have a play with this multi-part web pages okay let's get back over to here and what i'm going to do is i'm going to build on this i'm going to just save this as uh demo six so let's just call this demo six yep and let's open up demo 6. there we go right so what we're going to do now we're going to add a few extra bits and pieces to this um so let me just have a look so we're going to instead of being indexed let's call it index 2. instead of being a message let's call it title and then let's just call this something like kev's personal blog and what we'll do now is we'll add a few extra pages in here to show how we can make these consistent so let's say server dot root and let's have this as like an about page so slash about so then let's do about that's gonna have oops the request object in it again and i'm gonna return render template oops and we're going to put in there i know about html and we can pass in those same things that we did on the other one so let's just grab all that and then instead of this time this is going to be about this site something like that okay and then what we can also include on here is a catch-all so if there's any kind of problems where page are not found things like that we can actually put in here um a catch-all so instead of being root this will be catch all and then let's just define a little function for that so my catch all request and then let's return a string that just said no matching root something like that and then 404 which is the page not found error right so we need to create some extra bits and pieces here so let's open up that index.html that we've got there and what i'm going to do i'm actually going to flip over to visual studio code because this is so much easier to create websites and i'll show you why that is so let me go over here and let me just grab the right project which is this one here and let's just create a new page in here let me show you what i want to do so if i do index.index3.html and if i just open that up there we go so if i now press um exclamation mark and then tab i get an entire web page built for me with all the different headers and bits and pieces in there so what we can do instead of the title being called document let's let's use those curly braces and let's just call that one title and then down here i'm going to have another one which is just called content and we can build in some things like um divisions so we can say div we can wrap that in a division like so and let's just call that on a container now i like to use a framework called bootstrap for making my web pages look really nice it's a really simple web framework if we go over to bootstrap just find that get bootstrap they've got some examples in here of how to to make bootstrap work and so on but what i want to do is simply just install it so what they've got over here is some some links to the content delivery network so what i'm looking for in here is just where is that content delivery network link so for the css it's just that so if i just grab that link there and i go back over to my code and just include that somewhere within the heading thing and i think we need to wrap that in that script to source bit as well so let's just do that uh it's not a script that is it's a style sheet isn't it so um where have they got that i think it's called a link don't they link there we go i think that'll work so i'm just going to save that out and i can now go back to funny and i can see that i've got my html3 down here if i open this up in funny we can see that page is being built there what i want to do now is actually slice that page into a couple of different pieces because all i want to have in the the actual index.html is this content part this this section here this bit here i want to save that into a new file that i'm going to call header dot text and that means i can then break up my my code into several different pieces um so let me just have a look at that um well to begin with let's just run this one i think that will be fine for now just to make sure that this this works the way we expect so i'll call that one html3 in my code i'll call it two so let's just update that and now let's just make sure that html3 is copied to our our pico so let's just find that upload that and then let's just run our code as it is now then we can break it apart in a second right so there we go the web page is running let's go over to here let's click refresh and we didn't actually put any content in there so at the moment we're not actually seeing anything so this is where we need to start work on the the page a bit so what i'm going to do i'm going to create a new file which is like a navigation links file now rather than bore you to tears with creating that manual i'm going to show you here's one i made earlier so this is what a navigation bar looks like in html so we've got the nav class uh i've put in there some bootstrap navigation classes so that it it defines the look of this it'll make it sort of a bar at the very top of the screen with everything lined up horizontally and it'll have this nice orange background style as well and then we're going to have a link at the very top left that just says kev's blog so these a tags are anchor blocks anchor tags and what we need just to specify in there that means it's a clickable link so we can give it a class that defines the color so this is going to be a white one it's going to have some spacing either side of it that's what the margins x-2 means and then the href is the hyperlink reference which is just going to be slash so it's going to take us to the root of our site and then we're going to have a couple of other links within there so we've got an unordered list this is of the navbar type again it's got some classes in there just to make it format nicely we're going to have within that some list items that's what this li is and then list items that have to be opened and closed and then within that we're going to have another anchor tag so another link which is just to the same one as the blog so it's just one there that's called home we're going to have one that's called about we're going to have one that's called login that we'll look at in a minute when we do forms and then i've got some other ones to external web pages as well so we're going to include that nav nav dot html within our header so we can do this by going over to back over to thuny and in our index 3.html we're going to start slicing this up now so let's grab everything that's above body i'm going to cut that i'm going to create a new file i'm going to paste that in i'm going to save this one as let's save to the pico because i've already got it on the uh the computer i'm just going to stop that so we can save it save as on to the pico let's call this one header dot html because that's going to be our header section and then let's go back to index 3 and then let's cut everything beneath that div there so this is going to be body in html and let's create a footer so let's create a new file paste that in save that to our pico as footer.html and if we now go back to that header what i want to include just after the body tag i want to do those curly braces and we're going to include render templates within our web page so just like before we need to include what we want to include so nav.html we'll need to remember to copy that across to the picot and then we just need to pass in if there's any kind of variables or anything like that we wanted to pass in so let's pass in the title so title and title equals title and then i think that my name was included in the previous one so let's pass those through as well and then we need to just make sure that we copy that nav.html to our picot as well um so back on to our index we need to bring those headers and footers back in so just like we did in the header we can copy that we can go to our index three and then just at the very beginning of that we can include our header and then at the very bottom we can include our footer like so oops now we don't need to pass in the title on that particular one so we can probably just do that um i mean really yeah we can include the title in there we can probably get rid of name actually right okay and then content what is going to be brought in with whatever we passed to that from our main program so now let's go back to our demo six program and let's have a look where we render out this one so we've got the title um we might want to pass in some content so let's just say um content equals this is the content just so we've got something to pass in there right let's give this uh do i need to make sure i've got header footer index three nav right let's try running this and see what happens there's quite a lot going on there right so our web page just started up it's really really quick to do this let's click refresh so we've got this is the content being shown there so that means that i've got an error in my index and index three and it's probably spacing that i've got wrong there so let me go back over to index three and let me just check everything looks good there let me just check on the header that looks good there let me check on the footer that's fine because that doesn't include anything so that's where i would expect the render template now did i bring render template in to my demo program yes i did so that should should should work let me make sure index 3 has been updated to the pico as well so i'm just going to stop that that's probably what i've done wrong let me just upload that and let me run it again i always forget to upload it right there we go it's running once more let's go over to the pro to the web browser click refresh and i can see that it says it's parsing header footer and index but i'm not seeing the uh the styling come through so that's probably what's going wrong if we actually look at the page source we can have a see what's going on there so it isn't actually rendering the header or the it's rendering the header and it's rendering the footer it just isn't rendering the navigation link so let's have a see what's going on there so let me just go to the header where we bring that in nav.html which is there um is it that that i've got wrong there i think it is isn't it so they haven't included that at the end i think that's the problem so i've got the source i just hadn't terminated that string at the very end there right so that's in the header so what i'll need to do is just remember to upload that header so let's stop the program from working let's go to header uh that's why so header those little square brackets mean we're working from the one on the device not the one in the uh the computer so that should be fine in that case so let's go back to our demo six try that again see what happens now the good thing is it's really quick so um you get your updates really quickly i can see that it's parsing through these i'm just not seeing my um the content that i expected so what i can do to uh to make this a bit better if i just go to the place where i store all my micro python files pico now this is called a few demo i can basically just revert all the code that's in there i think that'll work fine yeah i'm just trying to get back to the to the good code because somewhere this has just gone wrong this is the last uh last but one program i just want to get right so let me just have another quick look and see what's going on there so let's have a quick look so we know the head and foot is working we can just see that this uh when the template footer is working fine and render template header is working fine so in the header i think it's just this content delivery thing isn't correct so let me just have a look and open up index two let's have a look what i've got going on in there let me open up the header all right so there's a bit extra i just need to include in there i'll explain what this is a go right so if i go back over to our header that's on the the devices need to stop it from running and after that i just need to include this extra block of code so i told it that it was a linked and here's the source to the link which is the content delivery network for bootstrap which will bring it all a nice color i missed off this rel which is um tells it that it's a style sheet and then this integrity thing this sh shar code here basically tells it this is the valid link so when when the server that's receiving this request you can see that it's a valid file request and this cross-origins thing is because i'm requesting from a different web page within my site some browsers don't like that so that's what that's to do with so let's just save that and let's go back to index there to demo six and try one more time and if this doesn't work i'll just move on to the next bit to be honest there we go so it's complaining about um that must be in that header have i got too many yes i've got too many of those let's just stop that save that and restart just want to try one more time so for some reason it isn't rendering out the last bit called i want it to so i can see it's bringing in the style sheets that looks fine and then it should that container thing should make it go into the middle of the page so let's have a see on there no that doesn't look like it's bringing in the bootstrap thing at all um where is that ah there's a file name that you entered in pt instead of py i'm not sure if that was just demo stuff let me just have a look at that well that was demo two i think that's fine to be honest um we're not actually running demo two at the moment so that should be fine this is just some problem with bootstrap green being brought in for some reason um you do put it in the header let me just have one last comparison with that index two so that's all i've done in there that's fine and let me just have a look at container yeah that looks right and the fact that it's bringing in the content shows that that bit's working as well and we're bringing in the title i could see that the page has actually got kev's personal blog as the title up here so we know that it's rendering out that bit correctly so it is just um something to do with with this piece here so what i'm going to do i'm going to go over to sometimes when my code is not working what i like to do is just check it out somewhere else because um i saved this a while ago if i go to like my downloads folder which i use is like a junk area so let's just go to uh downloads right and let's just um let's just do a git clone so basically it's going to grab my code off github just to a different area just i can compare and that's my name and then view demo there we go and then what i can do on here i can just navigate to that instance of it so i'm using visual studio just because it's a bit of a nicer interface than then funny right so let's have a look at our header and see what's going on in that one just by way of comparison so we've got a link so what i'm going to do it's going to copy that entire line there and then i'm going to go back and we've got render template now i've got html after that as well right let's go over to our thony to our header let's stop the code from running and let's just replace that entire line there with this new one and let's just do a bit of a comparison ah that's what's going on so instead of being source it's href that's all it was right so let's save that and let's go back to demo six and re-run let's see what happens now right so we've got something working better now so the fact that it's moved in and it's changed from times new roman font to this uh different font i'm not sure which one that is it looks like the dhana or something um that means that the the code is working better but i've got my navigation bar in there so i want to just troubleshoot that and let's go over to our header for that one so render template nav.html which is there and we don't need to include anything else in that let's stop that save that and let me just have a look inside nav.html to make sure that looks right that looks fine okay so in that case let's try running the program again i just want to get my navigation bar up there we go fantastic right so the reason why to show you this is because we can now build another page which is our about page and we can bring in that same parts that we've just been working on and just change out the content so we now go back over to thony and we create a new page and call this one like about dot html um so let's save it to this computer first about html yes replace and this one is just going to be like an about page so let's just do like a heading one style um this is an about page and let's just do a quick paragraph about that so we can say um this is something some text about the page right and then what we'll do above here we'll we'll use that same thing we just did where we did render template and we'll include in there the header html and we'll include the footer underneath that as well let's just change that to footer and let's just wrap this all in in a div so the container just centers it nicely on the screen and let's just end the div and i also like to make the color a little bit different so let's say uh background this is all bootstrap background color it background light which is like a color scheme and you can even make the corners of that rounded and we can say margin is three and the padding is three as well and i'll make it quite nicely within um within the thing we're after and then we can just say class equals display because display five right so that's our about page so let's just stop our thing from running let's upload that about page and let's try running again and see what happens this time so if i click run it's going to run our web page let's go over to the page now now we've got this link that says about if i click on that about button look at that we've now got an about page and it's routing to that slash about link that we created as the uh the route to that we can see that um some spurious text that i need to remove but this is an about page in heading one style and there's some text about this page and we can click back on the home we can use our navigation like so so we might want to have some kind of scenario where we log in to our website so let's create the code next for logging in so that's our multi-part pages so the last part is we want to look at forms and how we can capture some data from the user and then do something with it on our web page so we want to capture some new data from the user using forms and we use the request object to capture that data this stores it um the data from the user when they press the submit button and then we can use that data in our program to do things like change the bait you know the name of the page or the you know some variables within it or maybe save it to something else or maybe send it off to an mqtt server or flash some lights there's all kinds of things we can do with this and if you're quite good with javascript you can even bake into the page so you can get rid of like the submit button and just have it when people hit return on the password thing it goes straight to uh sending the form so let's create a form and uh look at how we we do that so we can keep all our existing pages the form is really really easy to create so let me just find that from let me just find the sheet that i've got that on so there it is right okay so let's go over to oops nope that's not that's not ready yet let's go over to the next piece so let's go to there so we're going to create a new file which is going to be our form so let's just bring in the header and the footer again in fact i got that render template and we're going to bring in the header and let's just do the same with the footer because we're going to need that at the end okay and what we're going to do now is we're going to create um the form itself so the way that we do that is we're using the form tag and we're going to use the method that's called post so we just say post like so and then let's just close that form i always find it's good practice to close the tags as you create them and you don't get in a in a twist with that now what we're going to do now is just create some divs so let's do div class equals and we're going to make this one so this is margin bottom three this means there's going to be a bit of a margin underneath the uh the div so let's just close that div tag and then we're going to create some things within this so the first thing we're going to create is a label so this is going to sit above our our form entry thing so we will say so this is for example input i technically need this bit but let's just include it um use a name something like that the class is going to be your form label which is a bootstrap thing and then what we'll have then is to say username so this is what we're going to appear on the screen just above the form control and let's just end that label and then so i don't need that there from label sorry that should say class form label so it just means i've not closed off that one there there we go okay and then the actual form control itself so this is going to be an input type equals text and the name is going to be username and that's going to be useful in a minute when we actually get the data back that's what we're going to see this data in so it's going to be called username and the class is just going to be it's just going to be a form control and again that's just for styling we can also include like an id in there if we need to do some specific styling with it so equals username and we can just do forward slash because it's a singular one so that's that one and then we could if we wanted to include some help text beneath that we could do as well i'm not going to do that on this case and then i want to have another one of these so what we're going to do this is kind of like a block of of input controls we want another block like that let me just grab that and copy the whole thing across and instead of this being like an example input user name this one is going to be password let's just change everything to password so let's change that to password the type is going to be slightly different on this one so this one is going to be type password it just means that it stars out that anything you type in there rather than showing it through so that's gonna be called password and that's also gonna be password okay and then the very bottom we then need to have that submit button so let's just have another input type submit and these are these in speech marks and value equals login something like that and then let's just have the word submit that's what's going to appear on the button and in fact it's not an input type this is a button slash button like so and we can wrap that in just a couple of divs again just to make it look pretty so let's just do div class equals container so this is a margin and it's on the y axis like which is up and down instead of left and right and we want three and we want it to be rounded as well like so so that means we need one down here to close that off and let's have another one within that and that'll be another container and this one is going to be bg light which is just that nice background it makes it ever slightly lighter and we just need another div at the bottom to close that out right i think that's everything we need in there we need to save that so let's save that to the picot let's stop the problem from running first and let's save that to the pico w and let's call this one login dot html right so did i have at the very bottom of that flutter yes i did right okay so let's make sure we've got that on the device i'll save it to the right so i don't need to upload it this time there we go log in let's go back to our demo six um in fact did we create a demo seven for this i don't think we need to because it's a new page and we've already got the link in the the uh program so let's just do run for now and we should be able to see well we'll need to create a demo seven sorry um what i want to do is just bring and see what it looks like before we do any code on this if i click on login the moment says no matching route because we haven't actually specified that new route to this so let's go back on here let's save demo six as demo seven so let's save demo six on the pico as demo seven dot pi and what i'm gonna do is just gonna open up demo seven from here so what i've essentially got on here we've got the uh the index and the about like we did before and what we're now going to do is a new type of route so log in and we're going to include post this time so this is where we can post some data to the server from our browser which is the the form that we're going to fill out excuse me so we create a login form um like we did create for all the other routes using the request type i just print out the request method just to show you what's in the request method and we can do two things here we can say if the request method is get so if somebody's just loading the page for the first time they haven't got any data to put in we want them to just render the login page which is empty and then we're going to return that so that that closes this this function if we're actually doing a post because we've hit the submit button it'll run the same thing because it's the same endpoint but this time we want to say username equals request.form.getusername and password equals request.form.password and we can say if the username is kevin and the password is password that's a secret then we want to render the template default welcome back and then my name otherwise we want to say invalid username or password so let's run this demo 7 and see what happens okay so hopefully you're with me so far right so we're going to go to here let's go to our regular web page first of all and what is it not happy with their so it's it's basically just throwing up an error there so line seven of template um blah blah blah what's it not happy with there let me just close out make sure um i tell you what we could actually run this from the other folder that i've created just to make sure that all the code's correct because as i'm going here if i make a single mistake it means that um nothing then works so let's just find a pew demo on here there we go a few demo even uh let's open up demo six and did i not include did i not include demo seven i've not actually written that out so let's just upload from there and then push that out and let's come back down here let's go into view demo and then just to get pull just to grab those changes right let's go back to funny and let's run demo seven now let's see if that's gonna work okay so it's running the web page i hit refresh so it's not happy with one of the uh the pages that i've got in there so what i'm going to do is just upload all the pages from that other repository that i know works well so just bear me with me while i do that so here we are what i want to do is stop the thing from running upload about yes let's upload the footer the header it's basically going to upload all the bits and pieces to the pico just to overwrite any problems i've created on the way uh okay and then index ah that's probably what it was so i was probably getting it to render index two and index two we were using index three that that's what the problem was right so if i run this it'll work fine in that case there we go let's go back over to here click run right so we can click on our about page now if we click on login we now get that nice form that we've just created and we can type in here let's type in a bad password first so uh bad robot and let's just type in one two three and click submit so we know that that's not the password that we're looking for um so it's going to crunch through that and it says down here that's got a problem um so i'm not sure what that was so let's try just doing login again and then this this time let's just do kevin and then password and click submit what we're looking for is that that nice message so it's not happy with something else there so what i'm going to do is i'm just going to stop that for a second and just upload login.html and run that demo 7 again just in case there was a bug in that that form that i created if i've not terminated something properly and we'll get that weird error right so let's continue now so it's not happy with something there that's a shame because i had this working before and i wanted to show you uh what's going on so let me just have another quick look through that let's just change that to index three for example let's run that and this is part of developing stuff sometimes things don't work the way you expect them to so let's try and close that let's click on login let's type in kevin password and it's saying down here there's a test exception received um and it's not giving me a lot of information there but i can see it's something to do with the template now but it's not actually telling me what the problem is there but it tells me that there's a problem with with the templating thing with you so if i go to our um if i go to our login page and let's have a look at that let's open that in funny have a quick look through see if there's anything untoward in there so that looks okay it looks fine to me so i'm not sure what's going on there so this is where i find funny isn't a great editor just in general i like to do my code editing in visual studio because if you're in like um a page and you click on like that login.html for example you can click on a tag there and see which tag it corresponds with to make sure everything's closed properly and that all looks correct let's have a look that's correctly terminated that is two that looks fine that does too so why is it not working render template header.html photo.html um what else is going on there that looks fine to me i don't know so what do we do next then okay okay so let me just have a quick look see if anybody's mentioned anything simple fix move on so mark says he's not happy with me not having a page seven a demo seven is that what we mean um so there is a demo seven i've just not uploaded that to uh to the code there so let me just have one more look and see what is going on there i'm really frustrated that this isn't working the way i want it to um i'm just going to run it one more time i've not changed anything it should still fail and let me have a quick look and see what is going on there so it's yes definitely not happy with that if we go into um if we click on that and then go into into the developer tools we might be able to see if there's anything in there that tells us but basically it's not returning anything and that's because the web server isn't handling the request properly now this is this is alpha software as pimroni have indicated on their website um so i'm really frustrated that that hasn't worked but might come back to that um in a minute or two but i want to move on from there right so so so that was the the demo to show how forms work and unfortunately that didn't work the way i wanted it to it does work i have had that working fine so what i have also created for today's show is the next cube so if you want to download one of these you can do i've released the stl files are completely for free and i've created this to home the uh to house the the pico w so i've got this on my my desk over here you can see the actual pico that we're using today is banana scale just in there i've got some nice little rubber feet on the bottom of there and this case simply just it goes on top of that and houses it like so so we've got a nice little uh usb connector like so uh let's go back to the keynote there and yeah tim berners-lee created the world wide web on a computer that looks just like this so this was on a next cube and when he was working at cern back in 1989 1990 his idea was to make information easier to navigate and discover using hypertext so before we had the worldwide web we had some other technologies like telnet we had archie and gopher and they were like before we had things like google they weren't very easy uh to navigate and required other quite poor security as well um so he developed the worldwide web um he developed a web server he developed the um a web browser and he also developed markup language all to make this work on that very computer so if you want to grab one of these you can head over to kevsrobots.com next.cube and you can grab the stl files from there so if we go over to that article over here you can have a quick look and you can just grab the the cube and the base and uh yeah print out your own cool cool um if you want to also join me on discord we have a growing discord community so just head over to action.smilesfan.com join discord and you'll be able to join the community that we have there of people who love raspberry pies computers or robots and so on and programming i'm sure they're all telling me what the problem is over there as well you wanna follow me on social media you can find me at kevin maclean on instagram and i tweet regularly as well on twitter using kev's mac so you can find me over there as well and i think that's um almost everything i've got for you today so if you want to help support the show you can do a super thanks a super chat so super thanks are if you're watching this on replay super chat is if you're watching live now i actually get those notifications live on my screen uh make sure those are all switched on yes they are um and if you want to buy me a coffee uh you can go to buy me a coffee.com slash kerry mclean as well and also we have you youtube memberships if you want to sort of support the channel i think that's only about three pounds a month something like that um there we go i think that's everything i've got for you today i'm really frustrated that that hadn't worked on the forms thing and i'm probably it's something really really simple but i haven't got time to figure that out now what it is um so yeah i'm really frustrated about that so this is the point in the video where if you're watching this on replay i'll say thank you so much for watching and i shall see you next time

Channel: Kevin McAleer

Views: 41,764

Keywords: Small Robotsthon, Kevin McAleer, MicroPython, PicoW, Raspberry Pi Pico W, Pico W, Jinja, Web Framework for MicroPython, Web Server, pico w, picow, raspberry pi, robots, robotics, robot, raspberry pi pico w, web server, raspberry pi with wifi, pi pico with wifi, wifi with micropython, raspberry pi website, raspberry pi to host website, host website on raspberry pi, raspberry pi html, django, flask, phew, Pimoroni, pimoroni phew!

Id: 0sPPxIq4hg8

Length: 73min 43sec (4423 seconds)

Published: Mon Aug 29 2022