Insert custom updater function into Leaflet.DistortableImage for displaying export status

[jywarren]

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 102 to 108 in 5f59c7e

	var img = new L.DistortableImageOverlay(
	warpable.srcmedium,
	{
	keymapper: false,
	corners: corners,
	mode: 'lock'
	}).addTo(window.mapKnitter._map);

This will build on publiclab/Leaflet.DistortableImage#310 by @sashadev-sky !

This is initialized here too, for images added later:

mapknitter/app/assets/javascripts/mapknitter/Map.js

Lines 165 to 170 in 5f59c7e

	var img = new L.DistortableImageOverlay(
	url,
	{
	keymapper: false
	}
	);

[jywarren]

We'll have to bump an LDI version to get this code onto MapKnitter, though!

[jywarren]

Or would it be code like this, where we'd pass in the function for a customized updater?

https://github.com/publiclab/Leaflet.DistortableImage/blob/c2bf3def17149735ab5790ae5f4a09fa9be513eb/examples/select.html#L95

[sashadev-sky]

_removeOverlay: function () {
    var overlay = this._overlay,
      eventParents = overlay._eventParents;

    if (this._mode === "lock") { return; }

    var choice = this.confirmDelete();
    if (!choice) { return; }

    this._hideToolbar();
    if (eventParents) {
      var eP = eventParents[Object.keys(eventParents)[0]];
      eP.removeLayer(overlay);
    } else {
      overlay._map.removeLayer(overlay);
    }
},

[jywarren]

So ok - let's aim to have the updater function passed into each image as a constructor option, and when you have a collection selected, a new button for Export selected images appears on the toolbar (bonus points if it's a different color!) and this will initiate startExport with the selected collection AND the passed-in custom updater function.

[jywarren]

OK, so new plan:

1. we insert an HTML button labeled Export images into the map on the left, but hide it
2. the button has click function that contains the custom updater() code for the exporter process
3. when a DistortableCollection is selected, we show the button
4. the button is clicked, and through window.distortableCollection (or whatever) it runs distortableCollection.startExport(customUpdater) using the updater function it has
5. the updater() function displays a spinner on the button
6. on completion, the button changes text to Download JPG

[jywarren]

OK - so, first, we'll need to create a DistortableCollection in our MapKnitter code, which I believe we do at this line:

https://github.com/publiclab/Leaflet.DistortableImage/blob/d9347144917d60c3cd81694c3f38131dc33f0902/examples/select.html#L102-L104

But @sashadev-sky - why do we add images to it from the HTML file? Aren't we going to be adding them dynamically, by selecting them?

In any case, we have several functions we can pass in as overrides:

imgGroup = L.distortableCollection({
  actions: [Exports],
  updater: function updater(data) {},
  scale: 100, // optional cm per pixel scale, defaults to 100
  frequency: 3000, // optional frequency to request status, defaults to 3000ms, or 3 seconds
}).addTo(map);

And for this updater() function, we can provide an override one which will handle the UI in the MapKnitter context, something like:

function updater(data) {
  // here we can display data.jpg, data.tif, data.status, data.tms, and data.zip, as they become available
  console.log(data);
  // this code segment doesn't work, actually: 
  if (data.hasOwnProperty('status_url') && statusUrl !== data.status_url && data.status_url.match('.json')) { statusUrl = data.status_url; }      if (data.status === "complete") {
    clearInterval(updateInterval);
  }
}

Code reference:

https://github.com/publiclab/Leaflet.DistortableImage/blob/d9347144917d60c3cd81694c3f38131dc33f0902/src/DistortableCollection.js#L346-L401

In terms of how we display it, let's just get it running first, and then we can decide to insert data.jpg, data.tif (geotiff), data.zip (tiles), and display data.status in MapKnitter. I recommend using a modal for the time being because it's simple and gives us space to show the user that they do have to keep the window open (for now, until we start saving things in the db):

https://getbootstrap.com/docs/4.3/components/modal/#modal-components

Let's keep it simple for now, and just display the export status and exports as Badges: https://getbootstrap.com/docs/4.3/components/badge/

Sound good?

---

(cc @divyabaid16 because we're going to start thinking about how we reconcile this system with the multiple image select and export system you're working on in parallel! We should be able to construct a similar collection object locally and then pass it in the same way; the JSON constructor is shown here)

[jywarren]

And linking to @divyabaid16's work in #693

[jywarren]

@divyabaid16 this is part of the ongoing process of moving all exporting work off or the MapKnitter application. Your interface work will interface with the new cloud export service in almost the same way as Sasha's!

[sashadev-sky]

@jywarren we add them in the HTML file because its a demo! We can add them anytime. In regard to this:

imgGroup = L.distortableCollection({
  actions: [Exports],
  updater: function updater(data) {},
  scale: 100, // optional cm per pixel scale, defaults to 100
  frequency: 3000, // optional frequency to request status, defaults to 3000ms, or 3 seconds
}).addTo(map);

I haven't exposed the Exports actions yet so that we can manipulate what we pass to it. I am thinking about how to do that. It seemed unnecessary to make each action its own class. I was thinking maybe just an exports class? Definitely a decision to discuss what would make most sense, but that is why I held off on documentation exporting for now.

But I was thinking for now setup would be:

imgGroup = L.distortableCollection({
  actions: [<insert-custom-action-here>],
}).addTo(map);

And we would just rewrite the exports action? And when we're rewriting it well be able to access it and pass whatever.

[sashadev-sky]

@divyabaid16 let me know if you need to walk through the custom collection passing!

[sashadev-sky]

Starting now. The new MK front page looks so good

[sashadev-sky]

@jywarren if you don't like the idea of reewriting I can go back and expose Exports however would make most sense (see first commnt above) I was imagining once it would be exposed it would be passed something more like:

updater = function updater(data) {};
exportCustom = L.export(updater);

imgGroup = L.distortableCollection({
  actions: [ExportCustom],
}).addTo(map);

[jywarren]

This is fine for now!