libbum/odyssey

Next generation gallery. Exceptional images deserve an exceptional presentation.

Odyssey

A photoblog of my adventures. https://odyssey.neophilus.net

Usage

If you wish to use something similar, there are a few conventions you need to abide by.

Directory structure

Odyssey assumes all images reside in dist/gallery under a directory structure that follows <year>/<month>/<country>/<location>, for example 2015/04/Norway/Oslo. Places and countries with spaces in their names should be rendered as Ho_Chi_Minh_City. Image files can be named however you wish.

odyssey.yaml

Once your files are stored correctly in the gallery structure there is one important file to maintain. manifester/odyssey.yaml takes care of two lists: places and trips.

---

Places requires a list of all countries in the gallery with sub-lists of locations in the gallery. As Odyssey is targeting English, local names can be stored here and will be incorporated into the gallery. The local name for a country should be a sub-list element:

Norway:
  Local: Norge

Locations can be the value corresponding to the sub-list's key: Gothenburg: Göteborg. So a complete example could be:

places:
  Sweden:
    Local: Sverige
    Are: Åre
    Gothenburg: Göteborg
    Stockholm:

---

The Trips list is a little more involved, but needs to be so that the paths that are traced on the globe look like you'd anticipate.

Here's an example from my trip list to study:

trips:
  - name: S16
    description: Summer 2016
    cities:
      - Gothenburg
      - Frankfurt
      - Vienna
      - Yerevan
      - Vienna
      - Frankfurt
      - Gothenburg
      - Tallinn
      - Helsinki
      - Gothenburg
      - Stockholm
      - Gothenburg
      - Copenhagen
      - Crete
      - Athens
      - Frankfurt
      - Freiburg
      - Frankfurt
      - Gothenburg
    dates:
      - 2016/05
      - 2016/06
      - 2016/07
      - 2016/09

• name is an identifier that is used internally to identify each trip. Choose a short but unique ID.
• description is the one that shows up in the filter list in the menu, as well as the URL.
• cities is a list of locations visited, in order on your trip. You can easily see that I was living in Gothenburg in 2016, since I start and end there, as well as stopped by multiple times during Summer 2016. The world map traces this list and puts a line between each pair in the list. It makes sense that my day trip to Stockholm is sandwiched between two Gothenburgs—otherwise the world map would show me jumping from Stockholm to Copenhagen, which didn't happen.
• dates is a crude but effective method of filtering trips. Simply list the months your trip was on here, and the gallery will grab all images from the list of cities within the time-frame of the months listed here.

.desc files

The manifester generates empty .desc files for each image if one doesn't exist. If you wish to add a short description to a photo, write it in this file and the manifester will add it next pass. This file is not escaped, so please use \" if you need quotations in your description.

attribution.yaml

If you wish to assign a license to the images in your gallery, use the manifester/attribution.yaml file. Initially, you'll want to rename the manifester/attribution.example.yaml file to manifester/attribution.yaml. I've done this so that users just trying this repo out, don't apply my personal attribution to their photos accidentally.

By default, Marked will be set to false, thus skipping this step in the manifest building process. Switching this value to true will turn on a routine the will inject xmp metadata into each of your images. It will not alter any other exif data, but will overwrite any licensing data that may exist on your image already. This is not ideal and will be fixed in the future. In general though, this allows you to play around with your attribution file and each manifest build will change the agreement metadata in your images.

Choosing a license

I'd recommend a Creative Commons license. Many of which allow copying freely, but also have options for a non-commercial use clause. This is what I choose: Creative Commons Attribution-NonCommercial-Share Alike 4.0 International License

Creative Commons have a great selector on their website with ample information about each choice.

At the moment, the routines herein only support the CC scheme, so if you'd like to include something other than their licenses, please file an issue.

Updating a gallery

Once your files are organised, you can build your manifest by calling make manifest. This will generate all needed code for the updated world.json and Manifest.elm files. make build will generate all the javascript for the app, so you can preview the gallery before deployment: make serve will do this for you. deploy is a one-command update and upload trigger, so if you've just added images and nothing else, this is the only tool you want.

Development

Assumes you're using a modern linux distro with Elm 0.19 and Rust installed. As well as the inclusion of elm-live, uglifyjs and crass in your toolchain.

make debug gives you the Elm time-travelling debugger when live-previewing your changes.

License

Images in this gallery are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Contact me directly if you wish to use an image for commercial purposes.

---

Code for this gallery is released under the BSD 3-Clause "New" or "Revised" License, in line with most Elm libraries used within.

odyssey's Issues

Mobile optimisations

There are a few css issues that could be fixed on mobile.

Partition breakage in some cases.

602a2ad introduced a fix for the single photo case, but has killed us somewhere else.

Choose by location. Are, then resize to smaller window widths. The wider images are not handled in this case and overflow.

We need to either revert 602a2ad and find another way, or identify the fault and add an extra case that handles both instances.

Map not drawing in optimised mode

When in debug mode, the drawMap port works fine, when in optimised, we don't. WTF.

Escape from Zoom does not redraw map

Press escape in zoom, map doesn't show. Press X, all good. We've missed a command

Map is currently d3 v3

The map is going to be difficult to get functioning like we'd like.

Currently it's v3 of D3 and everything has been changed and updated in the latest d3-geo class of packages. Updating it to the latest versions is going te be rough.

The path that doesn't involve js has started, but it's going to be long. I have a TopoJSON parser built, but getting the d3-geo stuff functioning in Elm may be more work than I'd like at this point in time.

Set rayon threads from num_cpus

Threadpool is hardcoded to Brahmans true count, this is not optimal for Jnana for example.

Fully automated backend

For the moment there's stuff we need to copypasta and there's a number of steps involved at that.

Still to go:

• Don't rebuild cities.json, read it in from file, then only search for new data.
• Add trip info to odyssey.yaml, construct trips.json automatically by converting citiesToCoords.js to rust. This will allow us to drop tripcities.json.
• systemcall topojson from the manifester.
• At this stage, all data should be available to complete the Manifest.elm. I think things like the sorting, filtering and extra helpers should be moved out to a separate module (or into Main), so what gets autogened is minimal.
• Try to use the diff of the cities.json data to append to Manifest.elm, this should reduce a lot of work. Actually, this doesn't make sense, we should check everything for updates.
• Thread this sucker. There's a lot of parallel tasks going on and the wait times for search along with the string disk I/O takes too long to run at the moment.

Greedy is not precise enough

The right edge is a little jaggered when using greedy. It's pretty damn fast, but probably need to implement a better KPartition at some point.

Partitions need to return images not just weights

Probably. It's great and all to figure out how to partition things, not so good if we don't know where to render them.

Rethink scrollWidth bug fix

The current scrollWidth fix is not good enough.
Consider loading All, then filtering to a set with only a few images (i.e. no need for scrollbars) e.g. ByLocation Melbourne. This fits, now filter back—this fails.

What we need to do is keep scrollWidth throughout, and test if it exists at the current time or not, and compare against how many rows we need to fill the screen. That may mean double calculating optimalRowCount.

Revamp trips filtering

At the moment we would require trip values to be fed in by the manifester, then filter them out based on our listings.

Since trips have complete dates and locations in their records, we can dump the need for images to have trip values at all, then just filter the list with trip.dates and a unique of trip.locations.

Navigation

Let's move out of the sandbox and make some urls. Would be good to just go to /Australia/Melbourne and be filtered directly.

Generate a seed for odyssey.min.js

This should force a refresh if we change the name of it each deploy.

Ajax call for PHP email sender

We'll need to write a port to fire off the ajax call for the contact form.

Multiple camera file naming issue

Filename arrangement is problematic since naming conventions aren't the same across all cameras. We need to fix that.

Pull in json

Generate a default gallery set and load its data into the model.

Poor initial width

The initial width of the gallery div is returning the 'wrong' value. I've asked about this on discourse

Small (filtered) sets don't display

If the set of images we have is small they don't show up when filtering. I know this is the case for sets of length 1, but my assumption is that it's when the list is below three, since greedyK wont be able to split that correctly. Actually, I'm not sure what that even returns...

Zoom

Figure out best method of blur etc.

Manifest rebuild fails when adding new cities

One json file is malformed somewhere on rebuild. Investigate this next time a city is added.

Handing of exisisting xmp data

Currently we clear any xmp data on the off chance that attribution.yaml has been updated.
This is not the best solution. If users are attempting to license files not owned by them (either in accordance with a cc0 or some other license scheme, or attempting to illegally re-license), this will indescrimantently allow this possibility.

Update elm-live

4 alpha was released with external ssl options.

Replace send form with Akasha Notifier

Well, build the Akasha Notifier, then replace the send form.

Resize does not fire if change occurs when zooming

Zoom, maximise, close - fail.

A better manifest

We know that the path is our url and that thumbnails are file _small .extension, so we could separate this a bit better and minimise the overhead

{ "gallery": [ "2017": { name: "a.jpg", desc: "" }
                 , "2018": { name: "b.jpg", desc: "" }
                 ]
}

etc.

Consider graphQL instead, and also check up on the use dicts as tables talk.

Flex is borked in firefox in the modal

:/ fine in chrome.

Pull in viewport data to identify correct number of rows to partition with.

Add Potsdam and Bergen to world.json

I forgot. Do this tomorrow.

Map div is destroyed when zooming

We need to figure out how to make the map div persistent or make a port which calls the init function again once we return from zoom.

Repartition on filter

At any time when we call a filter the partition is going to fail. It's fine to sort whenever though.

Start UI

elm-ui has some useful starters, including a lazy image loader that could be investigated...

Consider a Waypoint Filter

The locations dropdown lists all locales in Manifest.locations, but there may be places with no photos associated with them. These exist as waypoints for the may (e.g. Yass), but serve no other purpose until filled in (if ever). We should filter these out instead of having empty galleries.

License page is hardcoded

The frontend doesn't read attributes.yaml at the moment. gallery.com/license/ is where a license page is displayed, but the licenseView in src/Main.elm is hardcoded with my information. This should perhaps be altered to be a better solution.

Two image lists not displaying

Example: Iceland/Vik

Implement Lazy

Think we can still do a bunch with Elm.Lazy, good starting point is to shove a bunch of debugs everywhere and note what shouldn't be reloading on refresh.

https://ellie-app.com/5vcMQQkM7xSa1

Map not displaying on load in Firefox

Try to use waitForMap instead of requestAnimationFrame?

Relax css for map hiding

In Firefox, if I have the bookmarks toolbar active on a 1920x1080 screen, we don't see the globe. This shouldn't happen, we need to relax the breakpoint a bit.

ToggleFilter and Partiton need to merge somehow

We have to make the above an atomic operation, otherwise we get interface jumps. Basically because we show/hide the scrollbar during the change.

Lazy load images

Or maybe more specifically: pre-load nearest neighbours to speed up display time on slow connections.

CSS on form send is wrong

Not sure if this is a code minifier issue or not, but when using the sending form (on success at least), the font is far too large for the container.

License page has CSP issues

We hotlink two images, so that's failing due to img-src: 'self'. Also, text seems to be larger than what it should be, but there might even be a runtime issue???

Basically, check all the bloody license page again.

Coords logic

There may be some shit going on with LocationInformation, Will need to test again next time I add photos. I corrupted this round for another reason, so can't confirm this is good or not yet on non-synthetic data.

CSS minify

Forgot to put the css minifer in the pipeline. Do that.

Preload for touch

I haven't done anything for preloading on mobile outside of zoom, but since we have touch start and end messages, we can use the start one to fire a preload.