this is a loose set of scripts that i use to generate a static website to present a slideshow of outdoorsy trip photos and GPS tracks.

it’s based on a basic gallery app called lightgallery, which supports photos, gifs, and videos (and also iframes i guess).

a map inset is provided by leaflet, which shows the location of the current photo, GPS tracks, waypoints, and other map annotations.

the outstanding missing feature is a separate inset for an elevation profile, with an indicator for the current photo.

process

simple DSLR photos template

to create a simple photo gallery, from a directory of DSLR photos, using template-simple-dslr.html

1. get photos in order. exif tag CreateDate is used, ensure this is accurate on all photos
2. run make_gallery_assets.sh (modify path first) - this creates thumbnails
3. run main.py (modify path first) - this creates the HTML page in one step, assuming no captions are needed

trip template

1. mkdir -p my-trip/{img,img-thumb,video,video-poster,video-thumb,gps}
2. get photos in order
   • copy photos into my-trip/img
   • ensure all photo timestamps and/or timestamp filenames are correct.
     • try scripts/exiftouch.sh, but be sure to check that the exif tag its using exists, and contains good data.
     • if using photos from multiple devices, check exif key/value for each device, each app, and each media type (e.g. still photo, motion photo, panorama, HDR, … and videos and gifs)
     • lots of notes on how fucked up this is in scripts/generate-metadata.py.
   • ensure all photo geotags are present (TODO don’t require this)
   • use convert to generate thumbnails
     • for f in *.jpg ; do convert $f -resize 5% ../thumb/$f ; done
3. get videos in order
   • copy videos into my-trip/video
   • ensure all video timestamps and/or timestamp filenames are correct
   • ensure all video geotags are present (TODO don’t require this)
   • use ffmpeg to generate “posters”
     • by frame: ffmpeg -i VID_20200902_193614.mp4 -vframes 1 VID_20200902_193614.jpeg
     • by timestamp: ffmpeg -i VID_20200902_193614.mp4 -ss 00:09 VID_20200902_193614.jpeg
   • use convert to generate thumbnails from the posters
4. copy tracks to my-trip/gps/*.gpx or maybe *.json
5. run scripts/generate-metadata.py
   • update/add new device-specific sections to the get_details function (TODO: switch behavior based on hardware name in exif tag - possibly unreliable)
   • (TODO: use tracks to interpolate position & elevation for each photo)
6. add comments to the metadata file (TODO pull from exif and/or load from a separate comments.csv file or something)
7. run scripts/generate-html.py. this is a separate script because metadata often requires some manual cleaning.
8. move resulting file to my-trip/index.html

also:

• add any new icons
• add waypoints file and annotations file
  • TODO: move to GeoJSON and load from server? might not make sense, not sure if all the data these need to contain make sense to put into GeoJSON
• copy track GeoJSON contents to my-trip/gps/tracks.js
  • TODO: load the GeoJSON files directly from the server

see the sample-trip directory for an example directory structure showing where to put images, videos, and map data.

data munging commands

convert gpx to geojson

ogr2ogr -f GeoJSON pecos1.json Pecos_Wilderness_Backpacking_Day_1.gpx tracks

convert svg icon to png with transparent background

convert -background none noun_summit_2674795.svg summit.png

frontend tools

research notes

photo gallery/slideshow

lightgallery

pretty straightforward except for a couple minor TODOs

reveal.jsx

UI is great, but just seems like it wasn’t made for this

https://stackoverflow.com/questions/20119488/how-to-embed-a-leaflet-map-into-a-reveal-js-presentation https://github.com/ralexrdz/reveals-leaflet/

mapping

leaflet

pretty straightforward

https://blog.mastermaps.com/2012/08/showing-gps-tracks-with-leaflet.html

more icons

https://github.com/lvoogdt/Leaflet.awesome-markers

google maps

https://developers.google.com/maps/documentation/embed/get-started

openlayers

https://openlayers.org/

didn’t try because leaflet worked fine

plotting elevation??

https://github.com/MrMufflon/Leaflet.Elevation