build in full-resolution image export using webgl-distort

[jywarren]

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

---

https://github.com/jywarren/webgl-distort -- there's example code there! However, we'll need to be able to reference the original quality image -- we're currently doing this now in MapKnitter but we should build this function into this library itself, as it's a common desire:

https://github.com/publiclab/mapknitter/blob/8d94132c81b3040ae0d0b4627e685ff75275b416/app/assets/javascripts/mapknitter/Map.js#L47-L82

Making this a button in the menu would be great -- button code is here; this excerpt is a single button on the menu:

Leaflet.DistortableImage/src/edit/DistortableImage.EditToolbar.js

Lines 12 to 25 in 3714b06

	ToggleTransparency = EditOverlayAction.extend({
	options: { toolbarIcon: {
	html: '<span class="fa fa-adjust"></span>',
	tooltip: 'Toggle Image Transparency',
	title: 'Toggle Image Transparency'
	}},
	addHooks: function() {
	var editing = this._overlay.editing;
	editing._toggleTransparency();
	this.disable();
	}
	}),

Any help much appreciated! This could be broken into several pieces for first-timers, possibly.

[John905]

I'll give this one a try.

[jywarren]

awesome, thank you!!!

…

On Tue, Mar 20, 2018 at 1:05 PM, John905 ***@***.***> wrote: I'll give this one a try. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#83 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6V-ajViuy5pFYJuzuDrHeAAzKSuks5tgTbPgaJpZM4RV0Ov> .

[John905]

Hey, I just got back to this yesterday and I'm having a problem with dependencies. I went ahead and put webgl-distort in src/edit, but even then I have to use window.webgl-distort to get Grunt to pick up the reference. Maybe one file isn't a big deal, but then there's glfx and that's quite a bit more. Should I just force it through and see what happens or am I missing something? package.json does have the dependencies for both projects but Grunt doesn't seem to see them.

[jywarren]

Hi! Hmm, could you open up a PR so I can see exactly where you're putting things? I think we could include webgl-distort in the HTML, then rely on it being in the global namespace... but let's see!

Thank you!!!

[John905]

Another question: should warpable.rb be included or should I being snipping it out?

[jywarren]

Hmm, from which line?

[John905]

If you look at the mapknitter code it has references to warpables - those are defined in models/warpable.rb - at least that how it appears to me. I was assuming we'd switch those for references in distortableimage.

[jywarren]

aha, yes -- the "warpable" in MapKnitter parlance is just an image, indeed.

…

On Wed, Apr 25, 2018 at 2:50 PM, John905 ***@***.***> wrote: If you look at the mapknitter code it has references to warpables - those are defined in models/warpable.rb - at least that how it appears to me. I was assuming we'd switch those for references in distortableimage. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#83 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ_3Ga9hesVET8EHpZqHOrrS_Yoyhks5tsMWCgaJpZM4RV0Ov> .

[John905]

Ok, I've been testing but all I get is this:

whether I distort it or not.
I'm expecting:

Any thoughts?

[jywarren]

Hmm, can you console log out the coordinates and the pixel positions before and after to compare ? Just to check the artithmetic. If any is zero, NaN, things like that?

…

On Wed, May 9, 2018, 5:23 PM John905 ***@***.***> wrote: Ok, I've been testing but all I get is this: [image: result] <https://user-images.githubusercontent.com/36971784/39840442-a997d776-539c-11e8-9874-4f75a974b77b.png> whether I distort it or not. I'm expecting: [image: example] <https://user-images.githubusercontent.com/36971784/39840475-c205ca34-539c-11e8-82cd-0fa4fdc3529e.jpg> Any thoughts? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#83 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ2niBjdFh-JLBAzhrut7LhVWH0XEks5tw15BgaJpZM4RV0Ov> .

[John905]

ok

[John905]

img class="leaflet-image-layer leaflet-zoom-animated" src="http://localhost/images/example.jpg" alt="" style="z-index: 1; transform: translate3d(901px, 394px, 0px) matrix3d(-0.466, 0, 0, 0, 0, 0.498667, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0px 0px 0px;"
This is the before - I'm not seeing positions in the after, just the image. I'm looking through the properties.

[jywarren]

Maybe double check that these values change when you distort, and you could also log out the actual webgldistort() command parameters to confirm they're passed along.

Looking very close! Great work here! 👍 💪

[jywarren]

Just noting relation to #97