UI for handling multiple images

[sashadev-sky]

Branching out some comments from #140 that have to do specifically with UI planning for multiple images to focus on it separately from the work on individual tools and toolbars that attach to a single image, which is a bit of a different case.

These updates may ultimately only apply to the MK repo, but we have been doing a lot of upstream planning and discussion from LDI so it makes sense to continue here.

The end goal is to have multiple image collection actions that are then managed by this UI. Original issue: https://github.com/publiclab/Leaflet.DistortableImage/issues/29

- Eventually we should consider a menu for the manipulation of image collections, for example initiating an export. This relates to publiclab/mapknitter#326, the new MapKnitter Exporter UI, but could also be used for simple things like dragging a group of images together. - and to perform actions using their collected image URLs or other properties.

Some relevant discussion topics

• Ideas around an "Image Manager" (a UI to manipulate a collection of images)

  • Implementation details:

    • a) Difference between this and the toolbar UI for single image selection will probably be creating a toolbar UI that wouldn't live inside the individual DistortableImage instances

    • b) Potentially built in React

    • c) "this is big enough that perhaps it belongs in its own library built on top of this one... like, Leaflet.DistortableImageToolbar or something??? Just thinking though in terms of keeping this library more universal" https://github.com/publiclab/Leaflet.DistortableImage/issues/140#issuecomment-468076162

    • d) Implementing the minimal interface in LDI first, then separating it out as an external UI for MK and potentially its own library? https://github.com/publiclab/Leaflet.DistortableImage/issues/140#issuecomment-469476889

• Generally, where we are planning to start is the ability to show a few images selected in multiple image selection and show how they'd appear in the sidebar

• Accessor function returning an array to iterate over: like featureCollection.getFeatures (most likely will be just a function to make this.eachLayer(function(layer) { .... }); more convenient to use https://github.com/publiclab/Leaflet.DistortableImage/issues/29#issuecomment-478625990

• Then focus in on a new Exporting UI - relates to publiclab/mapknitter#326

  • Including:

    • a) We could aim for a function that outputs the basic JSON format in publiclab/mapknitter-exporter-sinatra#1, called collection.getExportJson()? This would eventually be replaced/superceded by a fuller Export UI in React that @sashadev-sky has explored! https://github.com/publiclab/Leaflet.DistortableImage/issues/29#issuecomment-478625647

      • https://github.com/publiclab/Leaflet.DistortableImage/pull/158#pullrequestreview-214213297

    • b) New progress bar

• What additional priorities do we have for creating image collection actions, besides dragging multiple images and the exporter?

  • We can branch out separate issues for specific actions

  • Keybindings?

[sashadev-sky]

https://github.com/publiclab/Leaflet.DistortableImage/issues/140#issuecomment-467079304

• summary: (below is an initial example just for discussion, not scaled for size)

  • Toolkit would be the toggleable dropdown, login and resources, etc would go under information tab. Maybe the arrow on the right would turn down on click and give a little strip of extra tools, or, it would be a toolbar menu that would move right to present new icons. Not committed to the icon choices.

    • info: maybe include login, resources, there.
    • Images for uploads.
    • Then transform editing: anything that has to do with size and distorting the image, moving the image, etc.
    • Next to that photo editing features: brightness, opacity, etc.
    • Last is exports.

  • Legend can also live in the toolbar information if we want it to.

[sashadev-sky]

https://github.com/publiclab/Leaflet.DistortableImage/issues/140#issuecomment-477444112

saw this on a page on the Mapbox site and thought it was nice for future UI inspiration:

• On the right it looks like there is a toolbar for the map as a whole, then theres an exporter UI that also implements a search functionality, then on the left you can see a separate toolbar for an individual section

[sashadev-sky]

@jywarren How does this look? Please feel free to delete anything copied over here in the PR description that you think is extraneous - I think I copied over a bit too much. And make any other edits / suggestions !

@rexagod

[sashadev-sky]

https://github.com/publiclab/Leaflet.DistortableImage/issues/140#issuecomment-465115860

I already pitched this idea to @jywarren, it implements a mixture of what he has mentioned above, but @rexagod let me know what your thoughts are on this too!. I'm excited to work on this with you!!

@jywarren I have really cleared up the implementation details at this point for the modal menu so maybe we can weigh pros and cons?

I used the Google Maps JavaScript API and the Material UI Kit library as inspiration for this implementation plan:

1. we can provide a bare minimum toolbar as the initial default (with option to suppress as implemented by rexagod)

2. The toolbar could be a collapsible module that comes fully functional (as a class that handles its own state for switching tab panes, etc) and styled out of the box. We can define some very basic styling options on it but the main implementation will be to provide "feature types" options that the user can initialize it with or add on later. The feature types would be sensible collections of stand-alone modules such as "exports", "uploads" "image adjustments", "image manipulation", etc. also functional out of the box). Each collection could get its own content tab.

3. Once that works, we can create even smaller collections of "element types" that the user can select out of the features if they don't want all of them. I think that most design elements travel in some sort of pair (ie. Hue, Saturation & Lightness, Rotate & Scale, Sharpen & Blur)

@jywarren Also I am seeing now my idea is similar to yours but backwards. I would not mind starting bottom-up instead and isolating all of the modules first.

Anyway I definitely want to turn my attention to the export system now since it seems more priority so I am happy to just leave this here as an idea for now and come back to it

[jywarren]

I'll need to dive into this today/tomorrow to get caught up, but on the functional end of exporting, we now have an export URL that works, and accepts a JSON file/string of the images to be warped:

(note NOT https for now:) http://export.mapknitter.org/export?url=https://mapknitter.org/maps/ceres--2/warpables.json&scale=30

You can also run it as a POST or GET with a parameter called collection containing the JSON string.

This outputs a status.json URL -- all documented here! https://github.com/publiclab/Leaflet.DistortableImage/issues/203

[jywarren]

And here: https://github.com/publiclab/mapknitter-exporter-sinatra