feature request: Animated png about derive HOT 3 OPEN

Oh that animation is very cool!

Let me think about the implementation of this for a bit. I like the idea of APNG, and it might be feasible to support, at least for a very constrained subset of features. If it seems possible to get a barebones version of this working without much effort I'll give that a shot when I get some time.

For now, I had a similar idea a little while back, and ended up rewriting the project as a command line app in Rust. Check it out: https://github.com/erik/derive.rs

Unfortunately it doesn't work with map tiles right now, but theoretically that could be supported.

edit:
This seems like a good option https://github.com/photopea/UPNG.js

Would need to capture the contents of the canvas as an array of pixels (easy enough) every N datapoints / activities (either user defined or scaled to target a certain length, as @C-Makridis suggested). Probably would want control over output size as well.

from derive.

From a technical point of view, the image could be generated using code such as this: http://javascriptexamples.info/snippet/create-apngjs_qzb_javascript

The time can easily be retrieved from the GPX parser: the code is already there but commented out. However, this is per point: the first point could be taken, but make sure to check for empty paths, which could occur when exporting workouts without location data from Strava.

My concern would be that apngs can be quite huge. A video may be better (but longer to export), with a very low frame rate. I wonder if a timeline/date could be overlaid too? https://github.com/Kagami/webm.js

from derive.

Yeah, I think file size is my main concern. For my derive.rs project, the raw frame data before being converted to a real video format is in the 10s of GB. Using PNG should shrink the file size a bit, but we'd still need to be careful about accidentally blowing up the browser.

For files more than a couple frames, I think you're right about using something like WebM.

@xsanda if you want to take a crack at implementing this, be my guest 🙂

from derive.