Arduino - Temperature Web App with Raspberry Pi

welcome back as you know i am eli the computer guy and in today's class we're going to be doing a nifty neat little project to show you how values can be transferred between devices and between different programming languages so basically in today's class we are going to have the same basic setup we've had in numerous other classes where we're going to have our arduino connected to our raspberry pi using a usb cable and they are going to be communicating using the serial connection i am then going to be connecting an an analog temperature sensor to the arduino the arduino is going to read the value that is coming in from that temperature sensor and is going to turn that into a degrees fahrenheit from there it will then send that information to the raspberry pi the raspberry pi will use python in order to read the value coming in through that serial connection from that point what is going to happen is that value is then going to be saved into a file where a php script is then going to pick up that value and it's actually going to be able to dynamically create a web page based off of whatever that value is so on the raspberry pi we will install apache and we will install php and then php will be able to look into that file where we're storing the value that we got from the arduino it will be able to grab the number then based off of whatever number that is it then we'll determine whether the color that should be presented on a web page should be red green or blue so basically is the temperature too hot is the temperature just right or is it cold and then out on a web page it will dynamically be able to write what the temperature is and that web page will refresh ought every five seconds so the important thing to understand with this particular project today is the real world utility of this project is probably pretty pretty nil pretty nil right even if i was going to do a project like this where i wanted the same end results i would probably just connect the analog temperature sensor directly to the raspberry pi and skip the arduino the important thing i want you to understand today is basically how we are transitioning these values from an arduino to the raspberry pi how we're able to use that value in a python script and then how we're able to save that value so a php script can pick it up and then how that php script can then do something dynamically based off of whatever that value is the today's class again is pro is not necessarily very useful in the real world but the understanding of how you can basically take those values send those values store those values read those values from other scripts i think that type of thing is very valuable so that's what we're going to be doing in the class today so for the warning warnings today there's two hiccups that might cause you a problem when you actually go to run this project one make sure that you actually run the python script right so you install apache you have php you have the arduino but if the python script itself is not running then basically when the arduino is sending the communication to the raspberry pi nothing will happen past that and everything else doesn't really matter uh also on top of that do remember with the pi python script we are going to be writing to a file uh so in the class when we actually go to the raspberry pi i'll show you how to do this but make sure you change the html directory so that the owner of that directory is going to be pi the default user for your raspberry pi so they were actually able to write to the file so if you create a file but basically you know whoever is trying to write to it doesn't have permission to write to the file then everything will fail out so the the big concerns for today is just make sure you hit that run button that you're actually running the python script and then also just make sure that the permissions are correct so that you can actually write to the file from the python script with that basically you would just change own to pi for slash var slash www.html past that we're actually dealing with a lot of different subjects at a very low level so you're going to have to understand how the arduino works how the arduino ide works and how to be able to code in order to make the temperature sensor work you're going to need to know the basics about python so you can actually write the basic python script uh beyond that we're then going to install apache so when we install apache we're not doing anything additional we're just assault installing default apache so you don't have to worry about any configurations there we are then going to be installing just the default php so we're not going to install any other modules or anything else we're just going to be installing php we are then going to be using php to write the dynamic web page and so you're going to have to understand a basic of basic bit of php and when it's writing that dynamic web page is going to be writing out in html obviously and also css so you should have a decent little understanding of css nothing that we're doing is very high level today this is all incredibly like introduction across the board but this is where i say like in the technology world you take a lot of introductory classes or a lot of introductory concepts you kind of glue them all together into a project that becomes much more complicated so basically if you get confused with anything do make sure to go take a look at the code examples um and that should be the only problems that you might have so with that let's go over to the workbench i can show you how this project looks once we're finished then i will show you the physical build of this project and then we'll go through i'll show you the arduino code and then i'll show you the show you the raspberry pi code and what you need to do to set up the raspberry pi so here we are this is what the project looks like once we've completed it so we have our arduino uno like we normally do and that is connected to our standard analog temperature sensor beyond that we have the usb cable this is then connected to the raspberry pi and so then on the raspberry pi we've installed apache and we've installed php and so that allows us to present a website to any client computers that come to the server so this is now also a web server so if we go here uh basically i'm on my demonstration computer and so on the demonstration computer i've gone to 192.168.1.4 that is the ip address of this raspberry pi and i have this temp app.php script sitting in the var www.html folder so that we can take a look at it when we're actually taking a look at this webpage basically i'm just printing out a title at the top to say where this particular project is and then right here this is this is what we're showing uh for what the temperature is so every five seconds uh this page will auto refresh basically the idea being is if the temperature is above 70 degrees the font will be red if the temperature is between 70 to 60 degrees it will be green and if it is below 60 degrees it will be blue as it is so if i go over here and i simply put my finger on the temperature sensor uh after five seconds this uh basically refreshes and now we can see it goes up to 70.32 degrees and it's red then after that it goes down to 67 degrees and it's green and so this is just a basic example here of how that php is able to take the number and then basically be able to do an if else statement based off of that number in order to create this dynamic web page so with that i will show you the actual physical build for this project then i'll show you the arduino code and then the raspberry pi code and setup so this is the physical build for this particular project there's not a lot to it it's the same standard thing i do for so many of these arduino projects where we're simply using the analog temperature sensor as a way of getting a dynamic input to the arduino so we simply have our standard arduino uno here so any arduino board will work for this this is connected to the analog temperature sensor this goes to the basically the output for the analog temperature sensor it goes to a0 and then past that i'm simply using a usb cable to connect to the raspberry pi and that's all there is to it so let's go over and take a look at the arduino code so here is the arduino sketch for you you will notice it's very simple it's only about 16 lines of code and the reason is is all we are going to be doing is we're going to be sending out the value for the temperature fairy and height using the serial.print line command so that it can be picked up by the raspberry pi and that's it the raspberry pi will not be sending any commands back we'll not be sending any information back so all we need to do here is we simply need uh to be able to configure the temperature sensor uh start the serial monitor and then be able to get what the the temperature value is and be able to print that out uh so if we go up here all we're going to be doing is we're simply going to define the sensor pen to be pin a0 so the analog temperature sensor will connect to digi or analog pin a0 on the board and that's it past that we're then going to go here to serial.begin and we're then going to begin the serial speed at 9600. the most important thing here is that this speed is the same as what you have in your python script the default standard i would just leave it at 9600 but that's what we're going to be doing here that's all there is for the setup then we're going to go into the loop the loop is something you should be you should recognize a lot at this point again just a copy paste thing what we're going to be doing here is we're going to be taking the value coming in from the analog sensor and then we're going to be turning it into a value for temperature fahrenheit then we are simply going to be doing serial dot print line whatever that value is so that's going to get printed out and that is going to be able to get grabbed by the raspberry pi for processing i'm simply going to delay this for one second here just so it's not looping as fast as it can you could theoretically delay it longer or delay it less depending on you know how how accurate how up-to-date you want the value to be for a project like this one second or maybe even five seconds or ten seconds is probably okay but i'm just putting this at one second so this is what the sketch looks like so let's go over and take a look at the raspberry pi python code okay so here we are at my raspberry pi and again this is a pretty stock standard raspberry pi the only additional things that i have done at this point is i've installed apache 2 i have installed php and i changed the ownership of the html directory under var www to pi so let me just show you how to do that real quick uh so the first thing is is you do need to install a web server in order to be able to present a website to a client again i'm going to be showing you how to do it with apache 2 because as they say i'm a boomer so you do sudo apt hyphen get install and then you're going to do apache 2. so apache 2 here this is you know the old the old go-to for a web server and so that is what i will be installing then the next thing after that so basically with this so just hit enter and go through and actually install it since i've already installed it i won't do that the next thing that i need to do is then do sudo apt hyphen get install php so this will install the php scripting language so that that web server software can go in and actually interpret a php script in order to be able to to build that dynamic web page and so i will simply install that again i'm not installing any additional modules or anything else that is all i'm going to be installing now once i have installed apache 2 one of the things we are going to get is we are going to get a new folder right so basically if you go um basically here in the folder structure what you're going to do is you're going to go to var www and then you're going to get this html folder so when you install apache 2 it will add the www folder and it will install the html folder the html folder this is where all of your public web pages will be so basically any scripts any pages you want to be able to access from an external uh web browser this is where everything has to get dumped the thing is when you initially uh install apache 2 pi is not the owner of this particular folder why that's important is because then pi is not allowed to write into the folder so html by default is readable by everybody is not writeable by everybody so if you create your python script that you're going to be running under yourself under the username of pi and you don't give yourself ownership or if you don't change the permissions at least basically the python script will not be able to write into that html folder so in order to fix that what we're then going to do is we're simply going to go sudo c-h-o-w-n pi so pi is the default username for the user account on the raspberry pi now if you're using a different user account use that different user account i'm using pi because i'm just using the default here right and then you're going to forward slash of r for slash www forward slash html and what this is going to do is it's going to change the ownership of that html folder so that pi owns it so that when you run the python script you will actually have permissions to be able to write into that folder and create your data.txt file so these are the first things that you need to do to do a setup again beyond the the initial raspberry pi setup beyond that again this is the stock standard i simply installed the raspberry pi os using the raspberry pi imager and so these are the only additional things so past that let's now go and actually take a look at the python script so when we're looking at the scripts today we're going to have a python script the python script we're going to be dealing with anathony and then we're going to be dealing with the php script and we're going to be dealing with that in the other ide that is on raspberry pi called genie just so you understand what's going on there so this is what we're going to be doing and it looks pretty similar to what we've done in the previous projects right there's only about 14 lines of code here and frankly it could be shorter if i wanted it to be uh so the first thing that we're going to be doing is importing the serial module so that we can actually have serial communication with the the python script we're going to import serial we're then going to do this if name equals main that normal thing and then we're going to do the serial ser so we create the variable for serial serial dot uppercase s the rest arial lowercase we're going to connect at forward slash dev forward slash tty acm1 so that is currently aware my oh my raspberry pi is connected again this may iterate up or down on you depending on when you're plugging and unplugging your uh your arduino into the raspberry pi so it may be either acm 1 or acm 0. if the script fails just change this and that's probably the problem there uh then we put the bot speed 9600 again that has to be the same as what is on your arduino and then we do a timeout in seconds so one second so if there's not a communication or if everything locks up just timeout uh reset after one second this keeps your entire entire system from freezing up because of some weird glitch then we're going to simply flush out the buffer here again this is the stock standard stuff we've been doing with all of these serial projects then we're going to come down here and we're going to say while true so basically this is going to be a loop uh and it's always going to be true so therefore it's always going to continuously loop bloop bloop if uh ser that serial connection in weighting is greater than zero so basically if there's some kind of serial communication then what i want to do is we're going to have a variable called line it is going to equal the serial read line so this is a function that reads the line coming in from the serial communication decodes the utf hyphen 8 so basically what this does is actually decodes what's coming in into text into a normal readable format that we can deal with and then our strip is going to strip out any extraneous white spaces this can be very important again right now basically what we're going to be doing is we are going uh to be sending uh floats so floats are variables with decimal points and so if you're testing against an int or a float or any kind of number and then you have weird extra white spaces around that number you can run into nasty problems when you deal to get to the conditionals of you know if if the number equals x then do something else do something else right because you can run into a problem where uh basically since you have that additional white space nothing ever equals what it's supposed to equal and you get into a mess so that's why we do strip out the white space here the next thing we're going to do is we're going to create a variable called file and what we're going to do with that is we're going to have a function and this function is going to open or create so this will create the file if it doesn't already exist we're going to say in var www.html we are going to create a file called data.txt now it is important again we're dealing with the linux world the web world the extension here doesn't really matter you could do data.dat so this is actually what you see in a lot of applications essentially they have text files they just end it with a dat extension so that you don't mess around with it now we're going to leave it as a dot txt just to make it easier on you but you can you can name this essentially whatever you want you know something you know temp dot dat or something like that uh then we're going to do the comma here and then we're going to do a write so with the w with this particular option right here this particular argument what this is going to do is it's going to overwrite the file very important if you put an a you put an a that will append the file what we want to do is overwrite the file so what's going to happen is the value for the temperature is going to come from the arduino that value is going to be processed by this python script and that value is going to be dumped into the text file the next time a value comes in from the arduino that the first value will be overwritten and the new value will be put in and then it will be overwritten and then it'll be overwritten and then it'll be overwritten what we're simply doing with this data.txt file is we're just simply using this as a very very very very simple datastore to allow us to store a variable value so that we can pass it off to a different type of programming language so we're just going to be doing w here if you did like a instead you probably get a whole bunch of mess because basically that would then append it will keep adding additional numbers uh to to this data.txt file and then again you're just going to get a mess out of that so we're going to do right then what we're going to do here is we're going to do file write and then line so basically with file all right that's opening in this particular file and so then what we're going to do now is that particular file we're going to write to and we're going to write the value of line to it past that we're simply going to do file dot close so this is a function that closes the file do make sure that you close the file and then for troubleshooting purposes we're going to do print the value of line and that is going to print down here so that we can verify that values are actually getting uh passed properly uh past that we can then go over to the html folder in the html folder we can see we have this data.txt file if i double click on the data.txt file we can see the last temperature um that this this particular system read before i turned it off and so the last value it read was 69.44 right so basically as we have the python script running this will get overwritten every time a new number comes in the old one will get overwritten the new one will get put here and that's how that is so then past that we are then going to have the temp app.php so this is going to be the script the php script that's actually going to to process uh the value coming in and turn that into that dynamic web page if we open that up this is what it looks like it's a pretty pretty simple uh php script if you take a look at it with some uh if if else if else statements and it's a little bit of css a little dynamic cns css to make this interesting so the first thing we're going to do up here is this is one of my little duct tape things i do for kind of like these dynamic projects a lot a lot of old timers complain you could do this better in javascript you could do this better with probably different programming languages but this is html it works really really well and so again if you don't need to do anything too complicated you basically just need an auto updating web page this is the best i think this is one of the best ways to do it and so what this is and so you'll notice the php script starts down here so this isn't print i'm simply i'm simply writing out the html code on this particular uh page and it's before the php script so what we're doing here is this is is uh allows the web page or basically it sets the web page to auto refresh itself every five seconds so meta for metadata http hyphen quiv equals refresh so what you want to do is refresh the content every five seconds so this will dynamically basically it will reload the web page every five seconds when it reloads a web page then it will pull the new value from the data.txt process that and do everything else again do do do realize this is outside the php script we're then going to open up the php script first thing that we're going to do is we do need that value for the temperature variable so we're going to create a variable dollar sign temp so uh so that's again how you create a variable in php do remember to make sure you have that dollar sign that's important then we're going to use the function file underscore get contents underscore contents and we're going to go to that data.txt file since the php script is in the same directory as the uh as the data.txt file i don't have to put a full folder structure there so basically we're just going to get the get the contents of data txt and the value of that is now going to be the value for temp and so that's that's why it's important that you don't append right so when you overwrite you're only going to get you know 69.44 or 80.21 right you know what you're gonna get if you did append you'll get 69.41 80.55 55.66 right it would append all of that and then all of that would get turned into a value for temp so that's why you have to make sure you do that right that overwrite in the python script then we're going to come down here uh pretty simple so we're going to say is if a dollar sign temp is greater or equal to 70 then we're going to do is we're going to change the value of a variable color to red so this is the variable that we're going to use for the css for the color for the css else if uh temp is greater or equal to 60 and uh temp is greater than 70 we're going to change the color to green else if temp is less than 60 color is going to equal blue else so i just put an additional else in case i do something stupid in case it's just the number doesn't make any sense again like if i appended and so it's a really crappy number or a string comes through you know you can get all kinds of weird problems with code and so i'm just putting that additional little else in so we can do color equals black so if i'm getting a weird output you know then then it's text it's for it's formatted it's black and i can go okay that's not a color i'm supposed to be seeing let's see what the issue is okay past that we're then going to go down here and within php so again this up here is outside of php so i do not need the print this is inside php so i do need the print theoretically i guess you could put this outside php but i like i like keeping everything kind of together logically like when i'm doing my code i like to keep everything logically within blocks and so that's why i'm printing out here you know you do you uh print and then we're going to do h1 style text the line center and the arduino raspberry pi temp web device so basically what that looks like is if we go here to the actual web page this this is what we're looking at right there so then we go back uh and we we do a break so we give us an additional little line a break and then we do print and this is where we are going to dynamically format uh and print out uh the temperature right so basically we're going to do here is p style so for css text hyphen align equals center font size equals 200 pixels uh margin top and margin bottom equals 10 pixels so with css it's useful to go in and modify the margins here so i put this pretty small to 10 pixels because basically if you take a look at the web page right you you get generally you get a margin about the size of whatever text you're writing so if i have a 200 pixel uh size for the font i'll get 200 pixels of white space below it and 200 pixels of white space above it so basically this number right here if i don't modify the margin will will show up somewhere down here a lot lower on the page so i don't like that so i'm simply modifying the margin so that it shows a little bit closer to where the title is uh so one of those things again you just go in there you tweak you adjust you you adjust then we come down here to color right so uh surpass the the margin hyphen bottom that's for 10 pixels then we do color colon and then we're going to concatenate in uh that color value so whatever value we've determined uh from these if else if else statements that is the value that's going to get printed out here so cut the color we close the double quotation mark we close the double quotation mark we then do a period for the concatenation we do dollar sign color so the value for color green blue red or black will come here we then concatenate back in to uh to this this this print the string that we're printing and so we do another period at the end and then we do the double quotation marks so basically all of this has to be wrapped within the double quotation marks and you basically and the variable value has to be wrapped within the periods too then here then we're going to close the semicolon and then we're going to close the css this is where you can get very it can get very very confusing very quickly uh when you're building a dynamic web pages because you have so many things opening so many things closing so much different stuff going on it's very easy to forget one of these things right because you have to whenever you give a value for something in css you have to close that with a semicolon whenever you concatenate in you have to contain that within the double quotation marks and the periods when you're only closing the css then you're going to have to close with a single quotation mark and so this can get complicated so if you run into any problems if you run into any problems i would bet 90 percent you screwed up something in this little typing right here then we're going to go and we we're going to close out the opening p tag there and then we're going to concatenate in what the temperature is so double quotation marks uh so we're coming out of this print string again we're doing period whatever the value for temp is then period and then the double quotation marks so we can come back in close the p tag then we're going to close this print statement and then we're going to go to close the semicolon so that php notes to process all of this and this is basically what the script looks like so what we have here is the python script is then going to be sending the value to the data.txt file then you're going to have the php script it is going to be opening that file doing an if else if else statement based off of what is in there and then it will be dynamically creating our web page for us and this is how it works so one of the troubleshooting things that we can do to make sure everything is working properly is if we go here what i can show you is since i'm going to be printing out since i actually print out a line in the shell when i hit the run script one of the things i can do is i can verify that it's actually printing out a value here and then it's actually dynamic because sometimes i might get something screwed up like with the arduino or whatever else and so i can i can touch the temperature sensor here i can then see the value is going up approximately how it should so that's looking good and then i can go over here and i can take a look at the actual dynamic web page itself again it refreshes every five seconds so i can see that that's looking good and then what i can do again i say from that troubleshooting perspective i can just simply go back and forth and try to determine what the problem is right if i go back let's say to the raspberry pi one of the things i can do is i can look at the data.txt file and so let's say if i stop this and it's a 70 32 i can go to the data.txt file and i can see what's in there and so it's 732 right so this way i can see that the python script is able to be is able to get the variable value from the arduino and it's able to print out here i think you can go to the data.txt and i can verify that it's actually writing appropriately to that data.txt file and then i can go and i can take a look at the webpage itself and make sure that it's showing up there how it's supposed to so like with this right now like this is all locked up right see so it got to 70 32.32 and now it's not refreshing so it's like i can sit here and i can go well wait a minute so it's 7 32 but it's not refreshing it's all it's not changing okay let me go and let me see what's going on and then i can see oh wait a minute i turned off i stopped my python script maybe that's a problem let's see if i start my python script again okay now that's actually processing new stuff and then if i go over to my web page okay now the web page is actually changing like it's supposed to so again a very important thing with all these kind of coding projects is actually building in troubleshooting routines especially when you're new and you're not really sure how this crap is supposed to work to begin with by adding those troubleshooting routines it'll make your life a lot easier for fixing problems so that's basically how this project works so there you go now you understand how to make more complicated systems so with this we have the arduino the arduino is getting a value from the temperature sensor sending that value to the raspberry pi raspberry pi is processing that value in python saving that value into a file php is then picking up that value and dynamically printing out a web page again for any of the 20-year experienced veteran programmers out there yeah there's a lot better ways to do this particular project what i want you to start understanding though is how you can connect these devices how you can connect these different programming languages basically to hand off tasks from different subsystems different systems basically hand off tasks from from one programming language to another so that you can build more complicated things this may also start to give you an idea of what it means when people start talking about being front end developers or back-end developers and how that works in projects imagine if you made this project a hell of a lot more complicated here what you could do is you could have one person simply working on the sensor array for the arduino and making sure that the arduino is sending out the proper values to the raspberry pi right so you can have one engineer that sits down and they spend a day a week a month a year designing a sensor array and making sure that the values that it's sending are what you know that the raspberry pi engineer would would need in order to do something and then you could have the person that's responsible for the raspberry pi or essentially somebody who's responsible for the compute and what you can do is you can have them they can create the python script uh they can they can install apache they can install the php they they can be responsible for that component and basically of taking the values coming in from the arduino and then what to do with them past then does it take those values and put them into a database does it take those values and sends something off to an api does it take those values and simply write it into a text file right you can have one engineer you can have one technical professional and that's what they're focused on then you can have another technical professional on what to do with the data past that once you've actually been able to store the data into some kind of data store that people can interact with that's where you could have somebody else and they then will though will go and configure their own dashboards their own system so imagine let's say you have a company like within inventory control systems or again like hvac or environmental sensor systems basically you can have the first two engineers create the system to dump the data into a database or into into a file or something like that and then you can have a different engineer or multiple different engineers all then be able to grab that data from that single data store and then be able to to make some kind of visualization that they find valuable then beyond that again i showed you with the html and the css i showed you very basic formatting but in a larger project you would have a front-end developer and the front-end developer the ui ux person would be responsible for making sure everything is pretty making sure all the fonts are perfect making sure the background is perfect making sure all the margins should it be a 10 pixel margin or a 15 pixel margin or a 11 and i don't know it can do 11.5 i don't know like 11 pixel margin right they can make sure all of that is together and so with this particular project it shows you how you can start compartmentalizing different components of projects and so you can build something really cool or you can compartmentalize it in such a way that you can start handing off tasks to other people okay you you're going to create the arduino sensor array and from the arduino sensor array this is what the data output looks like all we care from you is that the data output is correct and that it's formatted in this fashion then i can go to the next engineer it's like okay you are going to be getting data formatted in this fashion and so what we need you to do is we need you to process that data and then put it into a data store or something else and then we go to the next person we say okay once that data is in a data store we need you to be able to create visualizations dashboards whatever else to be able to make that useful to the end user and then you go to the final person you get okay you have all this in front of you now make it look pretty right that's that's how these large projects look at the end of the day we're just using something very simple here to explain that concept so go uh play with this uh see see what you can do again if you know anything about databases you can dump the information into databases if you know anything about apis you can you can do something with an api go play with this see what you can do the main thing here is just again understanding how things are handed off so that you can create these bigger systems so as always i enjoy teaching this class i look forward to seeing the next one

Channel: Eli the Computer Guy

Views: 9,728

Keywords: Eli, the, Computer, Guy, Repair, Networking, Tech, IT, Startup, Arduino, iot

Id: 3Gutsd3IEAM

Length: 34min 41sec (2081 seconds)

Published: Wed Dec 16 2020