Realtime GPS Tracker Using Raspberry Pi, Python and Javascript

vlg to the new video and in this video we're going to make a real and respect with Raspberry Pi which looks something like this and also you are going to make this webpage from which we can take our les verify from anywhere in the world so we will click in the star tracking and it will track our - beep I like this and we will click in a stop tracking and to stop tracking so without wasting any time les the starter we need to use a Raspberry Pi so you can use as baby by 0 or as 3 PI 3 Raspberry Pi poor as you want as the procedure is same but I recommend it to use as 3 PI 0 as it's very much small and we also need a GPS module I will use new 6 M GPS module as it's quite cheap and also very much accurate but you can use any other GPS module if you want so if you don't know how to use a new 6 M GPS module or any other GPUs for various berry pie then you can watch my previous video where I have shown how to use a new 6 and GPS module test very fine and also I have shown you how to write a simple Python code using which you can access the GPS data so make sure that you have watch that video so now let us get you to code now in this video we are going to make this webpage where we will take our Raspberry Pi so basically our less believe I will send the data to this web page and we can track it from here so if you click in the Star Trek button it will start tracking like this and as soon as we click in the stop that button it will stop the track ok so at the end of it it will you will know how to make this webpage okay so here I am going to use a API called PubNub so I am going to use pop num because I'm actually PubNub is a real-time Peter caspin et ID so using this I am going to send the GPS data from raspberry pi to our web page now obviously we can use the simple sockets in JavaScript but for a beginner it will be a bit difficult and I want to make this ritual as simple as possible and there so I am going to use this API and is is totally free Andalucia so it's really good and also you have advantage that in normal if you use a normal socket in this webpage then we have proposed this webpage into a server and then only it will work but in case of PubNub we don't need to host it which is write the code and open in any browser it will work perfectly so we'll see all that later so at first let's get into port okay so here I am using bracket to write a port so I am creating a new file so as you can see I appear a new file and now what you can do is one go to our website the link will be in the description as always and you both report section and copy this code okay so copy the whole port and now paste it here and make sure that you have saved with dot says dot HTML okay now this food is not going to work if you just copy paste like that for example if I just save this and for example map dot HTML and I'm saving in extra so I just save this page save this code and now if I just open this in browser okay as you can see nothing is working we are just saying this thing okay so nothing is saying here so we need to change few things in the code so stay in this video and watch it okay so that you can do that so at first Here I am including the J's file a pop-up in this line then I am also including some bootstrap so that we can style it little bit so as you can see my web page so I have various style parameters here so that's why I am using bootstrap okay and you don't need to know boost Seventeen's like this anyway because I am I have just used that first time you can style it in your way and and as you can see here there is important thing which is a button this button using each we can start the tracking and stop the tracking so here the ID section because in future we are going to use this ID - so that we can add Funds lady in this switch okay and from here it is a main part the JavaScript part okay and we have to understand it okay now at first we are declaring the latitude and longitude variable so it is the initial length of longitude so as you can see if we just open the file for the first time it will initially it will locate to this position okay for example in my case it is in San Francisco this is because I have given the San Francisco's geo location so when our map will be initialized it will leave it with a location and it is a location so here you can change the location with anything you want and our mayor will it deserves that location now here are some variables and now it is an important part and this is the function initialized due to which our map is loading when we are actually opening the webpage the map is loading and this is due to this function so in this question we are getting two objects map and mark so map is the object which is holding the whole map and mark is the object which is holding this mark okay and we have few parameters the important ones are here the latitude longitude so here we are passing this latitude and longitude in this fund so in this object and that's why he is initializing with that location and also here is the super ammeter so as you can see you can definitely manually zoom it and zoom out but still when you load it there will be a initially initialization zone so you can change the zoom here so if we give it zero then like people give it zero then it will be it will show you the whole art and if we keep it like tell you like 15 or 20 it will show you even the buildings and the road so here I am giving 12 because it's doing your results and the second on JIT is Mark also in the mark we are giving the last chip longitude so that it can mark that position and one important thing is center here using this Center thing because we want our map to be centered on our location so for example instead of this point he power point is here then our mayor centered like this okay now now here we are calling initialize function and then here we are defining a function called read drum and it is the most important thing because whenever - if I will send a new value our map will be like like this if you start as you can see when a new will become it will draw the part and also will change the marker so this is a function which is doing all this so basically we will pass a pub nap object in this function so what is the object will see later so inside the object will get the latitude and longitude so in saving in the variable at Ln and LNG and then again we are calling using those objects like map and mark and use the function sets inserts it Center subsets Center basically centers the map here so Center the map in the location and then set position are not set position is going to mark that patient with this marker and then and then the only thing we need to do is to draw this line now what is line we need an array so here I am defining a empty array as you can see line cords and then when we will get a new position for our less beef I will push the new position in the array okay so as our map will like for example when you get a new point like this like new points we are going to add those points in this is and then here we are making a new object for polyline and polyline is the object which is going to this light line coordinates part is the name of the object which is going to win draw this part okay and in this in this object we are giving the a as you can see we are passing the line course array in which all the coordinates are say B and here is the color of the color of this line so obviously you can change that and in this way is creating the path now here there is two and this is how he is eating the markers and parties like that now this is some PubNub stop so basically here is the chair in name so channel name is where basically like our des brief I will - its going to send the data in this channel okay so the only thing you should you see bother it is make sure that you remember this name because we need to use the same channel and in orders verifying also and here you need this public key and subscribe key now now we to get this piece you need to sign up in pub now but it's totally free so to sign up we need to go to this side admin.com numbered palms let's register so it will look something like this okay you here you p then you account and then you go to admin dot dot dot form so if you go here here you can login with your credentials so here I login and here as you can see in the left side you have a key option click on the key and then you create a new key set give it a name for example there and it will give you a new key set ok now you copy it now obviously don't rewrite this key in your board because I am going to delete this after this tutorial so make your own key and then use that ok in the same procedure so pop it is 2 keys from here and paste them here like this and you have turn now here is the button so as I have said you that we are going to use that action ID of this button so as you can see we have mention here button ID and we are going to used it but an ID so that we can pick it at the first varieties and animate that so when we will click that button click that button and as you can see it is starting so basically when you take that mathematics start dragging so if we see that a text start taking we are going to subscribe to that TN channel now engine is this cs5 paper so such music when our this object is going to subscribe the channel it will receive the messages the messages which are published on that channel so basically are as bleep I will publish the messages and our dis object is going to receive those specific messages after it's subscribe so when we click the start lagging it will subscribe to the channel and then we are adding a listener so that list what the listener will do it will simply pass that object or the message he is getting from raspberry pi to the replay function and as we know that video function is going to going to make the new marker and also going to like draw the path using that new point so basically as soon as we click in the start making our webpage we'll get a new message if pres by sending it and then it will send the message send this message to pass a message to video function and leave your first enjoy okay and when after start blinking if it is stop dragging then what will you do that it will like it will unsubscribe from the channel and as soon as it will unsubscribe you will know what is eveni message okay so that it will no more add those coordinates and also hear a few lines so these lines are for this animation and changing the text like as you can see green to red and changing the text things like that okay and finally here we are adding the Google API duel maybe pH so here you need clear your API key okay so now to get the API key you have to go to this link the link will be in the description anyway and if you open this link you will get something like this here you so I have already open but you search for the X and you will get Maps JavaScript API you click it and it will open like this so here you have been able key if you have not enable it already so enabled and then go to tennis shoes and then create financial API key and it will give you a new API key and again make your own because I am going to do a PID after this tutorial now pages in this you will API key place and like this and then save this file okay now we are done the JavaScript file so this is as simple as this and you also need the CSS file support that you go to our site and here this is the CSS file you copy that I'm not going to explain your CSS because it's up to you how you want to style your site so create a new file save this and make sure that you name it may not ceases because I have used at my linking and saving the same folder I have saved here you have saved that map that HTML so in my case desktop sorry CSIS CSS save that and finally we are done now list is open place open our this file dot HTML so now I have opened this and is loading as you can see we have got a map now now as you can see initially we are not getting it but after adding all those we are getting this but if we click on start dragging nothing is happening and why because no one is singing the data to every page now how to check that if is working or not we have to do a simple click you just go over it page and from there you just pop it is simple javascript code and paste it in your paste it in your site like this and here and as you can see it is a very small edit so as you can see we have we added a function by new point and inside that function we are creating two variables X Y which is some random here changing some random small numbers in this x and y and then we are adding this x and y with our PBS that is a longitude the values we have initially we have declared like in my case san francisco gps coordinates and then we are publishing like I already have said in real is less beep I will publish this data but just for testing here I am just writing this code and our dis partner object will publish just speak random GPS data on the same Channel so on in after each 500 millisecond interval and then if we subscribe to this here if we click in that button and if our if our this object subscribe to the channel then it will receive this messages and they need to send those messages to this function and then the replay function will draw the coordinates so in simple basically this function is going to create some random coordinates then we'll send those coordinates to this one here and then in this in this problem object and here it will sin pass those coordinates to the regular function and let those function in produce lines okay so now if we refresh it now if we click in the Strad lacking as you can see it's working properly so it's our dead function creating some new points and then that it will function is flying them so it's working properly now so in the next video what we have to do is we have to write a simple Python program which will like in which we have to write a pod like this which will get the GPS data from the GPS sensor and then we'll publish search data in the channel so this video is quite long and I think you should do that in the next video and so thank you for watching this video and if you want to know more visit their official blog ok so Lily will be in the description and also make sure you have subscribed to my channel for upcoming videos and please hit the like button and thank you

Channel: SPARKLERS : We Are The Makers

Views: 40,059

Keywords: robotics, raspberry pi, neo 6m gps module, sparklers the makers, gps tracking, gps tracking with raspberry pi, pubnub, google map api, javascript, python, geolocation api

Id: NDgTUIwGMS4

Length: 17min 26sec (1046 seconds)

Published: Wed Jul 31 2019