-
Notifications
You must be signed in to change notification settings - Fork 284
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[WIP] customizable export UI for DistortableCollection #485
Merged
Merged
Changes from 9 commits
Commits
Show all changes
18 commits
Select commit
Hold shift + click to select a range
96f69eb
in progress
jywarren 1905ca6
additions
jywarren 7df3d9f
rebased and adjusted for Promise use
jywarren af591e0
small changes/fixes
jywarren e7b9fd8
changed options param ref
jywarren ae8b316
almost working
jywarren 26c2065
built
jywarren 166c0bd
working export generation; need to handle response
jywarren 52afc9d
cleanup
jywarren 86bd88d
reverting unintended boxcollect changes
jywarren 5f9c13f
stop spinner on completion
jywarren fa624e1
version bump for customizable export processes
jywarren 667a6e4
cleanup
jywarren 8071e5c
resolve linting errors
jywarren 74a9713
resolve dumb error
jywarren 2396cc3
Merge branch 'main' into custom-export
jywarren 8a59031
v0.10.0
jywarren 5d0a1af
Merge branch 'main' into custom-export
jywarren File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <title>Leaflet.DistortableImage Example</title> | ||
| <meta charset="utf-8"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/> | ||
| <meta http-equiv="x-ua-compatible" content="ie=edge"/> | ||
|
|
||
| <script src="../node_modules/leaflet/dist/leaflet-src.js" type="text/javascript" charset="utf-8"></script> | ||
| <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" media="screen" title="no title"> | ||
| <script src="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"></script> | ||
| <link href="../node_modules/leaflet-toolbar/dist/leaflet.toolbar.css" rel="stylesheet"> | ||
|
|
||
| <!-- for full-res export --> | ||
| <script src="../node_modules/jquery/dist/jquery.js"></script> | ||
| <script defer src="../node_modules/webgl-distort/dist/webgl-distort.js"></script> | ||
| <script defer src="../node_modules/glfx/glfx.js"></script> | ||
|
|
||
| <!-- for EXIF geocode --> | ||
| <script defer type="text/javascript" src="../node_modules/exif-js/exif.js"></script> | ||
|
|
||
| <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" media="screen" title="no title"> | ||
| <script src="../dist/leaflet.distortableimage.js"></script> | ||
| </head> | ||
| <body style="margin:0;"> | ||
|
|
||
| <form id="test_form" > | ||
| <input type="file" class="ldi" id="inputimage" accept="image/*"> | ||
| </form> | ||
|
|
||
| <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div> | ||
|
|
||
| <script> | ||
|
|
||
| var map | ||
|
|
||
| (function(){ | ||
|
|
||
| map = L.map('map').setView([51.505, -0.13], 13); | ||
| map.addGoogleMutant(); | ||
|
|
||
| map.whenReady(function() { | ||
|
|
||
| img = L.distortableImageOverlay('example.jpg', { | ||
| corners: [ | ||
| L.latLng(51.52, -0.14), | ||
| L.latLng(51.52,-0.10), | ||
| L.latLng(51.50, -0.14), | ||
| L.latLng(51.50,-0.10) | ||
| ], | ||
| mode: 'lock', | ||
| }); | ||
|
|
||
| // create a second image | ||
| img2 = L.distortableImageOverlay('example.jpg', { | ||
| corners: [ | ||
| L.latLng(51.51, -0.20), | ||
| L.latLng(51.51,-0.16), | ||
| L.latLng(51.49, -0.21), | ||
| L.latLng(51.49,-0.17) | ||
| ], | ||
| mode: 'freeRotate', | ||
| suppressToolbar: true, | ||
| }); | ||
|
|
||
| var json = [{"nodes":[ | ||
| {"lat":"41.8200378187","lon":"-71.4034409085"}, | ||
| {"lat":"41.8199873593","lon":"-71.4030021564"}, | ||
| {"lat":"41.8196229772","lon":"-71.4029728831"}, | ||
| {"lat":"41.8198214546","lon":"-71.4034614433"} | ||
| ], | ||
| "cm_per_pixel":23.0934, | ||
| "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/312455/test.png"}, | ||
| {"nodes":[ | ||
| {"lat":"41.819898342","lon":"-71.4035387139"}, | ||
| {"lat":"41.819898342","lon":"-71.4028493862"}, | ||
| {"lat":"41.8195005594","lon":"-71.4028493862"}, | ||
| {"lat":"41.8195005594","lon":"-71.4035387139"} | ||
| ], | ||
| "cm_per_pixel":35.8578, | ||
| "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/320983/test.png"} | ||
| ]; | ||
|
|
||
| // customize the function that starts up the export | ||
| function fetchStatusUrl(opts) { | ||
| $.ajax({ | ||
| url: opts.exportStartUrl, | ||
| crossDomain: true, | ||
| type: 'POST', | ||
| data: { | ||
| collection: opts.collection, | ||
| scale: prompt("Choose a scale or use the default (cm per pixel):", 100) || opts.scale, | ||
| upload: true | ||
| }, | ||
| success: function(data) { opts.handleStatusUrl(data, opts) }, // this handles the initial response | ||
| }); | ||
| } | ||
|
|
||
| // receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json; | ||
| // this may be overridden to integrate with any UI | ||
| function handleStatusResponse(data, opts) { | ||
| console.log(data); | ||
| var statusUrl = data.split('please visit, ')[1]; | ||
|
|
||
| /* if we are getting status updates: | ||
| // repeatedly fetch the status.json | ||
| var updateInterval = setInterval(function intervalUpdater() { | ||
| $.ajax(statusUrl + '?' + Date.now(), {// bust cache with timestamp | ||
| type: 'GET', | ||
| crossDomain: true, | ||
| }).done(function(data) { | ||
| // do something with the response? | ||
| opts.updater(data); | ||
| }); | ||
| }, opts.frequency); | ||
| */ | ||
|
|
||
| // but in this example, we're not; we just get the URL of the finished image: | ||
|
|
||
| // we should stop the spinner | ||
|
|
||
| // and we should initiate the download? | ||
| window.location = statusUrl; | ||
| } | ||
|
|
||
|
|
||
| // initialize the collection: | ||
| imgGroup = L.distortableCollection({ | ||
| collection: json, // here we override the image data sent with a custom set | ||
| fetchStatusUrl: fetchStatusUrl, | ||
| handleStatusResponse: handleStatusResponse, | ||
| exportUrl: 'http://34.74.118.242/api/v2/export/', // used to | ||
| exportStartUrl: 'http://34.74.118.242/api/v2/export/' // used to initiate the export | ||
|
|
||
| // From this alternative exporter, we'll get a response like: | ||
| // "Your Image is exporting, to load Image please visit, http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153" | ||
| // So, we can splice like this: response.split("please visit, ")[1] | ||
| // and get http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153 | ||
| // Noting, however, later we will expect to get a full Google Cloud Storage URL. | ||
|
|
||
| // remaining defaults are as follows, in /src/edit/DistortableCollection.Edit.js: | ||
| // collection = opts.collection || this._group.generateExportJson(); | ||
| // frequency = opts.frequency || 3000; | ||
| // scale = opts.scale || 100; // switch it to _getAvgCmPerPixel ! | ||
| // updater: function(json) {} // a function to handle the result of repeated fetching of the status.json file | ||
| // handleStatusResponse = opts.handleStatusResponse || _defaultHandleStatusResponse; | ||
| // fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl; | ||
| // exportUrl = opts.exportUrl || 'http//export.mapknitter.org/'; | ||
| // exportStartUrl = opts.exportStartUrl || '//export.mapknitter.org/export'; | ||
|
|
||
| }).addTo(map); | ||
|
|
||
| imgGroup.addLayer(img); | ||
| imgGroup.addLayer(img2); | ||
| }); | ||
|
|
||
| })(); | ||
| </script> | ||
| </html> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here I'm showing one reason WHY we want to be able to customize; we have alternative export servers with slightly different requirements, which we'd like to be able to connect to the Exporter in a simple standardized way.