TTN Tracker Locator - see where a GPS tracker is located relative to your location

Hey,

I made a small, open source, github.io hosted, HTML5 application that shows you in real-time where a GPS tracker is located relative to your location. This is useful if you are outside with your phone and there is a LoRa tracker somewhere nearby (your kid, dog, car, bike, etc) and you want the app to take you to the target.

The information about the tracker is pulled from TTN through the Storage integration.

This is just an early release so some things might not work correctly. I am looking to get feedback and to see if this is useful to anybody besides myself.

Other clients I tried to use for this purpose only show the absolute position of the target and donā€™t respond quickly enough in real-time.

Usage instructions:
You need to have a working LoRa tracker (such as LGT-92) that reports to a TTN application.
You need to have Latitude and Longitude information in the payload.
You need to enable ā€œData Storageā€ integration for the application.
Next go to https://ayavilevich.github.io/TTN-tracker-locator/
In ā€œsettingsā€, provide the relevant TTN application id, TTN device id and a TTN access token.
Best practice would be to create a dedicated access token for this use. The settings are stored locally in the browser. This app has no back-end of its own.
Adjust other optional properties in ā€œsettingsā€, save and reload data in the main screen.

If everything is working you would get the recent path of the tracker relative to your position and orientation. If something doesnā€™t work, troubleshoot in the ā€œdataā€ screen or using TTN console. If you want to report an issue please do so in the repository.

Regards, Arik.

3 Likes

Looks great, Iā€™ll have a good go with it over the weekend!

Cool. What kind of tracker do you use?

RAK7200 for convenience, assuming itā€™s still in one piece, my bench built ones tend to be variable due to specific use case.

1 Like

Very coolā€¦ I already export the data to my own mysql so looked at your ā€˜customā€™ option where you add a URL, but I couldnā€™t find documentation on how to use this, i.e. what format for the custom url

Regarding the custom data source option, you can use any url. There is no specific format for the url. The format of the data needs to be the same as the format of the TTN Storage Integration, just a JSON array where each item of the array is the payload. Simple.

for example:

[
  {
    "altitude": 69,
    "device_id": "x-v11",
    "hdop": 1.44,
    "latitude": 1.771449,
    "longitude": 1.637163,
    "raw": "x",
    "sats": 6,
    "time": "2020-06-21T06:38:50.916274439Z"
  },
  {
    "altitude": 79,
    "device_id": "x-v11",
    "hdop": 1.35,
    "latitude": 1.771473,
    "longitude": 1.637107,
    "raw": "x",
    "sats": 7,
    "time": "2020-06-21T06:39:50.919876996Z"
  }
]

One last thing to note, you need to have cross origin access between the domain of the data source and the domain with the UI. If you are not familiar with CORS and CORS headers you might want to learn more about that, use a CORS proxy or ask me about your specific setup. In any case, use the ā€œnetworkā€ tab in the ā€œdeveloper toolsā€ of the browser to troubleshoot data retrieval.