I have recently acquired a spark core and am currently undertaking a project in which I have a deadline in approximately 10 weeks (2.5 months). The aim of the project is to gather and send GPS data online and then interpret this data (distance travelled, speed etc.) Anyway, I’m not exactly where to begin! I’m new to the spark/particle world but have some knowledge of Arduino etc. I’ve done some of the sample projects and have some basic knowledge of how all this works. I also did some reading into the TinyGPS module and spark core (https://community.particle.io/t/tinygps-and-spark-core/4942) and feel as though this might be the way to go for my project? Anyone agree/disagree?
I currently have in my possession:
Spark Core
ublox NEO-6M
countless wires, resistors, breadboards etc.
Also on the way I have the Spark Core power shield. Which will hopefully make this all portable at the end.
Can anyone point me in the direction of where to begin? I believe I can wire up the GPS to the core rather easily (correct me if i’m wrong!) VCC to 3v3, GND to GND, RX on the core too TX on the GPS and vice versa.
Any help with where to start would be greatly appreciated! I’d love to be able to get this up and running in the next month or so and then hopefully displaying the data online will be the focus of the next month.
@k27, first you connect to the Spark Core and uBlox NEO-6M,
VCC to 3v3
GND to GND
Rx to Core Tx
Tx to Core Rx
The load the firmware from https://github.com/krvarma/TinyGPS_SparkCore. Place it where a clear sky is there. Please note that placing it indoor may not work since the almost all GPS Receivers needs a clear sky.
Once the GPS Receiver is up and running and GPS Data is received correctly then there should be some LED indication. I don’t have experience with uBlox receivers.
You can also add a webhook to route the “gps_data” events to a server of your choice. For example, I added a webhook to publish all “gps_data” events to HOSTNAME/api/events where it saves each location.
How do I go about using the code and executing it? I’m a new user to Github and am unfamiliar with how everything works.
I currently have in my project your .ccp .h and .ino files and ran your HTML and I get a nice auto updating location that i can use inside and outside (Powerful GPS it seems?)
Anyway, Now with that, how would i go about measuring speed or distance traveled since i opened the HTML file on my computer? as my ultimate goal, or at least one of is to have a GPS that measures current speed, and total distance traveled as well as the GPS location on a map currently.
@k27 I suggest that you take a step back and learn how to use the Web IDE, or the Particle Dev application.
You are not including the TinyGPS library correctly.
As a side note, if you are just starting with GPS, I really recommend just using an FTDI adapter to make sure that the GPS works by itself before trying to get it to talk to a microcontroller. By using an FTDI adapter, you see the output directly on a Serial port via USB. If you don’t know that your GPS receives a signal reliably, you don’t know where to start troubleshooting.
Thanks for your reply! I’ve since got a HTML file of an updating GPS coordinates, maybe you could point me in the right direction regarding how I would then display on the HTML file speed as well as distance travelled and other similar variables?
Apply some high school physics. Speed = distance/time. Since you’ve got both those variables, calculating speed shouldn’t be rocket science.
The same is true for the distance travelled. If you want a straight line from start to current position/end, you’d take the first coordinates, the latest coordinates, and apply some math. The Pythagorean theorem springs to mind.
For calculating the actual distance travelled, you’d do the same thing, but this time do it in intervals. Only calculate the distance between the N and N-1 reading, then add that to the previous.
You could do this in either the HTML page, or on the photon itself. That gives you the option between C/wiring and JavaScript, depending on which you’re more comfortable with.
Thanks Moors! Was going to apply this very thing, one issue, I can’t see the variables using Krvarmas example code, I understand they appear buried in the .h and .cpp file but do need a hint/example on where too begin.
Another aspect i’d love to start with is been able to store the co-ordinates in a evergrowing table in HTML, as in each time the spark updates it location it writes the time in column A, latitude in column B and longitude in column C with the rows ever expanding. I’d appreciate some pointers on how to do this in HTML, as well as the current displaying of the location on a google map.
Again, i’m a massive rookie when it comes to spark! But can feel the community vibe from here! Already overwhelmed with the assistance I’ve got!
The script above gives you 4 pieces of data already in the form of “gps.xxx.yyy”.
For example, you have a value “gps.location.lat” that gives you the last read latitude as a floating point number. For ease of understanding you can copy that value to a regular variable name (for example):
float lastLatitude = gps.location.lat();
There are several other GPS values that you can get from TinyGPS… you need to read the library code to see what they are.
After that it is just a question of mathematics and geometry.
As far as logging the travel, you have a problem in the sense that you can only connect to the Internet as long as you can talk to your Internet Access point (AP). So if you are using your house router, as soon as you walk a couple of houses away the system will lose connection and logging will fail. So you need to use a mobile access point, for example ‘tethering’ to your smartphone. But your phone already has GPS and there are many geotracking apps that are free, so building a GPS device is futile.
You can also log your travel to an SD card and read it later.
To display a location on a map, you can do HTML like this https://www.google.com/maps/place/38.900274 -77.014008
where the numbers are latitude and longitude.
You can also upload a file of numbers and goggle will plot that for you. Look up how.
Since you mentioned you got the webpage working, that means you've already got the necessary variables on the webpage. It's then a matter of using those variables that are already there to calculate your desired values. The webpage uses the co-ordinates, so they must be there. You, too, can use those to do your own thing.
As far as adding things to a table goes, I'd recommend this tutorial:
You could also have a look at the source of this page to see how I did it: http://jordymoors.nl/interface If not, then try a google search for "append table javascript", that should work.
Particle Well, we're all here to help/learn something, so glad to have you
Attempted the “Multiple cores publishins to one web page” But still having trouble actually reading the variables within the HTML. I currently have the google map updating fine and have added a table with variables like: longitude, latitude, speed, distance and time. Yet am having trouble actually displaying these variables within the HTML code.
The table part of my code looks something like this with some poor attempts at displaying variables.
<html>
<head>
<title>GPS Location</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
}
h1
{
text-align: center;
margin-left: auto;
margin-right: auto;
}
#map-canvas
{
width: 50%;
height: 50%;
margin-left: auto;
margin-right: auto;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var marker;
var loc;
function initialize() {
var mapOptions = {
zoom: 18,
minZoom: 10,
maxZoom: 18,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(0.0, 0.0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({position: new google.maps.LatLng(0.0, 0.0), map: map});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
function start() {
var deviceID = "xxxxxxxxxxxxxxxxxxxxxxxx";
var accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var eventSource = new EventSource("https://api.spark.io/v1/devices/" + deviceID + "/events/?access_token=" + accessToken);
eventSource.addEventListener('open', function(e) {
console.log("Opened!"); },false);
eventSource.addEventListener('error', function(e) {
console.log("Errored!"); },false);
eventSource.addEventListener('gpsloc', function(e) {
var parsedData = JSON.parse(e.data);
var data = parsedData.data.split(",");
console.log( parsedData.data);
console.log(data[0]);
console.log(data[1]);
loc = new google.maps.LatLng(data[0], data[1]);
var lat = data[0];
var lng = data[1];
marker.setMap(null);
marker = new google.maps.Marker({position: loc, map: map});
marker.setMap(null);
map.panTo(loc);
marker.setMap(map);
}, false);
}
window.onload=start;
</script>
</head>
<!body>
<h1>GPS Location</h1>
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;border-color:#aaa;margin:0px auto;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}
.tg .tg-p7ly{font-weight:bold;font-size:20px;text-align:center}
.tg .tg-4kyz{font-size:20px;text-align:center}
</style>
<table class="tg">
<tr>
<th class="tg-p7ly">Speed M/s</th>
<th class="tg-p7ly">Longitude</th>
<th class="tg-p7ly">Latitude</th>
<th class="tg-p7ly">Altitude</th>
<th class="tg-p7ly">Distance Travelled</th>
<th class="tg-p7ly">Time</th>
</tr>
<tr>
<td class="tg-4kyz">"lat"</td>
<td class="tg-4kyz">'lat'</td>
<td class="tg-4kyz">lat</td>
<td class="tg-4kyz">"data[0]"</td>
<td class="tg-4kyz">'data[0]'</td>
<td class="tg-4kyz">sample</td>
</tr>
</table>
<div id="map-canvas">
</div>
</body>
Seeing as you’ve not included the relevant JavaScript, it’s pretty much impossible to tell why it’s not working. Also, what’s up with the comments, that makes it a lot harder to read IMHO?
Alright, I’ve got a demo here which updates a variable every second and displays it in an HTML element. Right click to see the source, copy it to an blank HTML file, add your own credentials, and open it. See if that works.
I’d love to be able to get this up and running in the next month or so and then hopefully displaying the data online will be the focus of the next month.
Well, we're all here to help/learn something, so glad to have you 