feature request: Animated png

[C-Makridis]

I know, this one must be a quite heavy, that you may have already thought of, but nevetherless I thought I should mention.

a sample file:

This has been created by exporting png's from derive, and converting them through https://ezgif.com/apng-maker

To actually manage something like this, I'm pretty sure that a much deeper handling of the gpx info is needed than now, adding a lot of complexity.

Steps that I can think of:

1. parse all gpx files to locate a rectangle that will be able to contain all the gpx files
2. keep a list of the files ordered by date
3. Probably, depending on the number of tracks, decide a numder of them that would be proccessed simultaneously. If the feeded tracks are thousands, a huge file would be created having one track per frame. Easy choises whould be to group the tracks by month / year, but given few tracks that could lead to a one frame non-animated animation. Maybe an approach could be targeting a 15 - 30 second animation)
4. create the file (sounds so simple :p).

Of course the output could be the much more widely used gif, avoiding problems that animated png seems to face (e.g. Edge and I.E. not rendering them), but... you already do export png, png does seem to be technically superior, it is an open standard... well I don't know, in practise whichever format would do :)

Thank you for listening,

Christos

[erik]

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.

[c-harding]

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

[erik]

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 🙂