Communicating from an Arduino to an HTML/JavaScript Webpage

[Music] this video is going to have a lot of moving parts we are going to walk through the process of getting a web page interface to communicate with an iot arduino device now as far as i know you cannot have a javascript html page communicate directly with an arduino so we're going to use a small node.js server it's going to sit in the middle and help pass messages back and forth so the full process will be an html javascript web page using socket to communicate with node.js and then nodejs will use the serial port package to communicate with the arduino so to start let's create a basic arduino circuit all it's going to entail is a potentiometer attached to an analog port on arduino and then we're going to add some code that basically takes the status of that potentiometer and passes that back to nodejs [Music] our first step is to attach our potentiometer to our breadboard we're going to attach the left side of our dial to our 5 volt output we're going to attach the right side to our ground and finally we're going to attach the other side to our analog port and we'll just use analog 2. now this will look slightly different from the from the circuit diagram on tinkercad the diagram on tinkercad has the middle port on the same side as the other two so just notice that my green wire is attached on the other side whereas on the tickercad circuit it would be attached in here i'm going to use the online arduino editor to write our code so i've created a file here called arduino to node and this file is basically going to monitor the status for potentiometer and pass that on to our node.js server so to start i'm going to create a variable called percent set it to zero create a second variable called previous percent and set that to zero percent is going to store the current status of our potentiometer and previous percent is going to store the status that it was the last time it checked that way we only need to pass on the status of our potentiometer to our node.js server if a change has happened if the current status is different than the status was last time we checked then we pass it on to node.js so in our setup all we need to do is get our serial port connected and in our loop we are going to take our percent variable and calculate a nice clean percentage of the potentiometer in its current state so i'm going to take the current status [Music] i'm going to read port 2. i'm going to divide that by 10 24. that is the current the the full range of our potentiometer and then i'm going to multiply that by 100 just to get a nice clean percentage then we're going to check to see is the percent different than it was last time we checked and if they are different we'll pass it on so we'll take our serial port use the print line function and pass on our new percentage then i'm going to take the current percentage and place it into our previous percent variable so we can use that to check next loop and finally we don't want this running as fast as it can so we'll put a 100 millisecond delay on our loop then we can connect our arduino and once that's connected we should see our board right here i'm gonna click over to my monitor any any information that is written to our serial port will show up here and let's upload our new code okay so i have an error to spell serial wrong so we will try that again no errors this time so that looks good right and now if i turn my dial we get our percentage so there it is all the way up and all the way down our next step is to get our node.js server communicating with our arduino so to do that i need to install the noaa package serial port and i want version 9 0.0 0.1 then i can just do an npm install and download our serial package next create a file called app.js in this file all we're going to do for now is have this file listen to the serial port and console.log anything that it receives so create a new variable call it serial port and we will load in our serial port library [Music] next we need to create what's called a parser and using our parser we need to tell node.js how to receive data coming in through the serial port and in our case we want it to receive data anytime it receives a new line and the delimiter for a new line is slash r slash n next we want to open up a port now when we open up a port we need to specify the location of our port you can find the location using your command line and there are instructions in the github repository or you can go back to your online editor and inside the drop down you'll notice there is my arduino board and this strange string of characters here on a mac it usually starts with dev on a pc it'll have the word com in there somewhere we want to copy that and paste that in here next we just need to specify a bunch of settings [Music] [Music] okay and i just forgot a bracket up here now we want to attach our port to our parsers object lastly we want to take our parser and add an on data event so when our parser receives data it's going to run this function any data it receives will be placed into this data argument so for now let's just console.log whatever data we receive so i'm going to save that and start my app okay so we have an error here so we have an error here and what it's saying is that this resource is busy and what it's referring to is that the serial port is currently in use so you may not have this error but if you do go back to your online arduino editor and if you have the monitor open it is using the serial port so it won't allow a second application to also use that serial port so make sure we close that monitor you can do that just by going back to your sketchbook tab if you're using the offline editor same thing just close that monitor then go back to your nodejs file and we will restart it [Music] and now at this point we have no errors so go back to your dial on your arduino and as i turn you can see that that dial status is getting from our arduino to our nodejs server for the next step we're going to create the web page the front end all this is going to do for now is create a basic html page and have a place where we can display the current status of our potentiometer so if you haven't already create a new file and call it index.html and let's add in our basic html tag [Music] requirements and in our head section we need to include the socket library so i've already copied the cdn url so i'm going to paste that in there and then in our body section and for now let's create a div and give it the id sample we are going to be receiving a message using the socket library so i'm going to create a variable called socket and i'm going to take that socket variable and listen for an event called data and when the data event happens we are going to run this function and for now let's just log whatever data we are receiving [Music] and [Music] place that data into our sample div so i'm going to save that file now let's go back to our app.js and we need to get a server up and running so let's create a basic server again let's not use any external libraries for this we'll just use the built-in http library the file system library to grab our index page and let's just go ahead and grab our index right now then let's create a server so i'm going to call it app and this server will return a 200 response code and the context contents of our index.html file [Music] so if i save that and run my node app no error so that looks good and then open up my local host and there is my web page now at this point if i turn my dial nothing on my web page happens so i want to go back here notice we're still receiving data from on our arduino so now i want to include socket and when that data comes in from our arduino we want to pass it on to the browser using socket so go back to your package.json file and we're just going to add another dependency we want to include a socket and we want version 2.4 2.04 so save that do an npm install [Music] all right go back to our app.json and right here let's initialize socket and sorry this has to go after we initialize our app because i want to connect a socket to our app and then on our socket variable we're going to wait for the connection event and when the connection happens let's just console.log nodejs is listening [Music] okay and then when we receive data from our parser that is data coming from the serial port we want to emit a message that message is called data and the data we want to pass is this data variable [Music] right now we want to take this code here and i'm just going to move it to below our i o connection setup we need to do that because we don't want to reference io a variable that was only defined here i'm going to start my app again okay this time i have an error oh and this one here sorry that should be listen not apply so save that and try again okay no errors this time let's go back to our browser and refresh go back to our node.js and notice we now have someone listening that is our front end and if i turn my dial there is a couple numbers and now if i go back to my browser i should be seeing a number here so let's inspect element open up our console and we're getting an error on our getelentbyid so go back to our html and this should be inner html save that clear that restart our app go back to my browser and refresh okay no errors this time and if i turn my dial sorry this is not a function this is a property so we want to change that to inner html equals data save that again restart our node app okay and then back to our browser refresh and one more time let's try our dial here there we go so you can see there is our number so that number is successfully being transmitted from our arduino to our node.js server and then to our browser the last piece i want to add here is if we go back to our html instead of just displaying that data let's make something visual so i'm just going to add here a couple styles and i'm just going to take my sample i'm just going to make it a box and give it a background color of red [Music] okay and now this time instead of changing the inner html i want to change the opacity equal to data now data at this point is a number from 0 to 100 so i'm just going to divide it by 100 because opacity is set using 0 to one so now if i clear this restart my app go back to my browser and refresh and now as i turn my dial we can turn my div on and off [Music] you

Channel: Adam Thomas

Views: 86,730

Keywords:

Id: gQYsUjT-IBo

Length: 24min 14sec (1454 seconds)

Published: Tue Sep 22 2020