WordPress Plugin to show .fit files
I’ve recently finished writing a WordPress plugin to display .fit (Flexible and Interoperable Data Transfer) files. These are files from fitness devices, such as Garmin watches & bike computers. This is a personal project that I’ve wanted for quite a while. I’ve often posted in my personal blog (stuarttevendale.com) about the cycling, running & triathlon events I’ve taken part in, but including data from the event wasn’t straight-forward. While other plugins have existed to display routes from .gps file or other formats, this meant the additional hassle of converting the files. The data from the files also had to be entered manually.
For this plug-in, simply upload the .fit file to the media library in WordPress and add single shortcode to your post. The plugin has various options to set the colour of the route line, units (imperial or metric), and to determine in the map can be zoomed or not. The plugin also shows a summary of the event; start time, distance and time taken.
For full details of the plugin, see my post here: https://stuarttevendale.com/wordpress-plugin-for-garmin-fit-files/
If you’re interested in using Yellow Field Technologies for developing your next WordPress plugin, please get in touch.
The plugin is based on LeafletJS maps and uses phpFITFileAnalysis from https://github.com/adriangibbons/phpFITFileAnalysis, php-geometry from https://github.com/gregallensworth/PHP-Geometry and https://github.com/pointhi/leaflet-color-markers.
Some Examples:
The Methlick Cycle Challenge – https://stuarttevendale.com/2019/07/19/methlick-cycle-challenge/
Show the basic route map + summary data using plugin defaults:
[showfitfile file = "2019-07-14-10-32-10.fit"]
Time: 14-Jul-19 10:32 am |
Duration: 03:37:44
| Distance: 63.14 km |
Loch Ness Marathon – https://stuarttevendale.com/2017/10/26/loch-ness-marathon/
Shows the route on an interactive map, with a blue route line & the session details in miles.
[showfitfile file = "Loch-Ness-Marathon.fit" interactive="yes" colour="blue" units="imperial"]
Time: 24-Sep-17 10:03 am |
Duration: 05:17:03
| Distance: 26.28 miles |
Is this findable somewhere on github?
If interactive is left to the default, on mobile it is not possible to scroll the page, if tapped on the leaflet container
Hi Timo,
The source code is here: https://github.com/tevendale/ShowFitFile
Regards
Stuart
Hi Timo,
Apologies for the time it’s taken to get this revision released, but the latest release of the plugin fixes this bug – you’ll see a notification that you’ll need to use two fingers to scroll the map on mobile devices.
Cheers,
Stuart
Hola amigo,
I will be walking for two weeks and I will like to display in my web site my heart rate and the amount of steps along the day, hopefully in real time.
Can I do this with your plugin? Garmin watch or any watch with the .fit extension will do?
I can show myself walking in real time in my website. I will be great to show a “podometer counter” on the website too.
Thanks for your help.
(website under construction now)
Adrian
Hey Adrain,
Thanks for the comment. At the moment, the plugin doesn’t display heartrate data, only the route that you’ve run/walked/cycled along. It should work with .fit files from any source – if you’ve got problems with one, just send it over to me and I’ll have a look at it.
The plugin doesn’t work in real-time. You could upload your .fit file at the end of each day to your site, and it would display your route, distance and time taken.
Anyway, good luck with the walk, and let me know if you’ve got any further queries.
Cheers,
Stuart