Giter VIP home page Giter VIP logo

fitplotter's Introduction

fitplotter

A simple one-page tool to plot parameters recorded in the *.fit file used by Garmin and Suunto.

Starting from 2021-03-03, it also works with *.tkl format (watch models: GPSmaster, navrun-500, ultrasport, etc).

Version online. If you have no own fit files at the moment, you can download them from examples.

From 2021-03-08 you can download *.fit file from your Garmin Connect account, for how to do it read Usage section below.

Check the wrapper for fitplotter is fitalyser - parallel project.

Check GChandler - download automatically new activities from Garnmin Connect to the local storage

Alt text

Motivation

Garmin device does recording the measured paremeters into a binary .fit file as a function of time and distance. Then, in Garmin Connect you can visualise these metrics in graphs. I found Garmin Connect a bit inconvenient for everyday analysis. For instance, I could not check heart rate efficiency (HRE) (if you do not know read about HRE here and in Russian here) during the run. Then, the data from different days could not be visualised in one plot. Also, it is not convenient in Garmin Connect to see simultaneously a pointer in the plot and on the GPS track. Moreover, Garmin Connect is slow, and it's always better to keep your files in your local storage and have opportunity to check them. And finally, I wanted to learn JS programming.

Features

  • Work with any *.fit file (Garmin, Suunto);
  • Work with *.tkl (sport watch models: GPSmaster, navrun-500, ultrasport, etc);
  • Plot data from different files in one plot;
  • Independent y-axes;
  • hide/unhide curves by clicking on curve's name in the below legend;
  • Synchronization of the plot pointer at the left with the map marker on the right;
  • zoom of plot area by mouse click;
  • Automatically calculate an average of the plotted parameters in the zoomed area;
  • Visualise laps;
  • Can remove spikes and make noisy data smooth;
  • Calculate breath_rate during the run, if HRV is on in the settings;

Installation

Installation for non-programmers who found this program in github

  • click on the green button and download everything as zip file
  • unzip
  • Double click on index.html

Installation for programmers who found it in github

git clone https://github.com/karaul/fitplotter.git

Usage

Press button "Choose file" and select a *.fit file to analyse. In the Garmin unit, *.fit files are in the folder "activities", which can be seen when you connect Garmin with PC via USB. Or you can download your fit files from Garmin Connect. Also, you can play with *.fit files located for the demonstration purpose in the folder examples

If everything works fine, after you open the .fit file, you will see a graph on the left and map on the right. Few screenshots are in the folder screenshots. Play with droplists: x-axis, y-axis, automode/manual add. Zoom area in the left graph and then see the averaged over the zoomed area on the right map. Click on the legend with different choice in the bottom droplist.

In order to download *.fit file from Garmin Connect account

  • Login to Garmin Connect (GC) account;
  • Navigate to the activity URL https://connect.garmin.com/modern/activity/xxxxxxxxxx;
  • The latest 10-digits number xxxxxxxxxin the Garmin Connect URL is acitvity ID;
  • Type in the fitplotter's URL field the noticed activity ID;
  • Click Download, wait a bit and save your zipped activity taken from Garmin Connect into the local folder;
  • Unzip the activity in your local folder;
  • Click "Choose file" and load the activity as a local file into fitplotter

Russians may also check ЧАВО

Contributors

fit-file-parser by Dimitrios Kanellopoulos. This was taken and modified to get it working with HTML5 but with http static server.

BackFitClientSide by Gordon Moore who demonstrated how to work without a server

Sarah Lucke who explained me how to make an online fitplotter version based on the github repository

Thanks are to CanvasJS and Leaflet libraries for smooth work of the application.

License

MIT license

(c) Evgeny Votyakov aka karaul (about me in Russian), Nicosia, Cyprus, 2021

fitplotter's People

Contributors

karaul avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

ladariha

fitplotter's Issues

Incorporating more values

Hi,

obviously your project was tailormade for you needs (running) which is perfectly fine. I want to add some additional values from my activities, especially "rear_gear_change" (cycling). Problem is, that this is not found in "records" but in "events". Events have their own timestamp, so I would have to somehow add these timestamps to the timestamps of "records" and display "rear_gear_change" then in the map. To be honest I would need some push in the right direction from you .... If needed I can provide the relevant part of my fit file. Thanks a lot!

What is "Median filter size" and "Average moving size" doing?

First of all thank you for this project. As I am new to Garmin devices, I am very glad to have a tool running on my own server instead of Garmins servers.

I know that you are not working on fitplotter anymore, but I hope nevertheless to get some information from you: I am currently adapting fitplotter and fitalyser to my needs and stumbled upon "Median filter size" and "Average moving size". To be honest: I have no clue what both of them are doing. I did play around with the values but saw no differences in the plot area nor in the map. I did some superficial investigation in main.js, but this did not help me either, Can you please briefly explain what the two variables do? Thank you!

Strange map glitches on edited fit file

image

So what I did was edit a fit file because it had a speed glitch near the start. I edited it in Golden Cheetah and when displaying the changed file I got these vertical lines on the graph.

I've attached a before and after file.
Downloads.zip

I haven't debugged your code as I've got busy with something else, sorry.

This is great. VS Code usage: Just one issue with port and my firewall.

Hi, cloned the repo into VS Code. I had an issue with the port numbers you chose being blocked on my BitDefender firewall.

I changed the line (12) in http-server-static.js file to read:

portscanner.findAPortNotInUse(**3000**, 4021, '127.0.0.1', function(error, port) {  

That is to allow port 3000, rather than 4000 and it all worked wonderfully.

Because it wasn't working, I also opened a command prompt at the folder and did an:

npm ci

or you could do

npm install

To ensure the node modules were installed. Not sure this was necessary, though it doesn't do any harm (afaik).

This is a great program, it works really well and you've done some great things with the graphics - very professional.
(I might have stuck the css into a separate folder perhaps.)

Kudos!!!
Gordon

Oh you can close this, it's just for reference if anyone else has issues.

Also, nice of you to include my name in the credits, but really the credit s should go to Jimmy Kane https://github.com/backfit/backfit and the original Pierre Jacquier https://github.com/pierremtb/easy-fit

All I did was hack their code by removing imports, exports :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.