Public Lab Research note


GSoC Upadate - Upload Interface

by xvidun | July 31, 2014 17:41 31 Jul 17:41 | #10999 | #10999

What I want to do

I've been working on the upload interface for Mapknitter in the past week. In the coming weeks I'm looking to add more features to the interface based on points discussed earlier

I think Justin has completed his work on Leaflet.Illustrate, it might be necessary to discuss on integration.

My attempt and results

Features implemented

  1. GPS "indicators" for images that indicate if EXIF GPS is available for a uploaded image.
  2. "Disable auto-placement" option.
  3. New bootstrap modal.

It looks like this!

UI.png

I know it looks dirty and having all "GPS indicators" might seem like an overkill, instead we could also simply have just "GPS". Having all indicators was necessary for testing auto-placement, based on feedback I can change them.

Planned features

  1. Need to work on necessary communication between knitter and the upload interface(show/hide, delete image.
  2. Listing images from the current region, possibly with a tabbed UI to list both "My images" and "Images from viewport".

Questions

I'd be happy to hear what you'd like to see in the interface, or any other suggestion.


17 Comments

Looking good! Is there a live demo we can experiment with?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Yes, here is the link - beta.

Reply to this comment...


Hmm, Vidun - how shall I test this? When i try to make a new map at /beta, i get:

No private key specified. RAILS_ROOT: /home/p4/mapknitter Application Trace | Framework Trace | Full Trace /home/p4/.rvm/gems/ruby-1.8.7-head/gems/recaptcha-0.3.6/lib/recaptcha/verify.rb:16:in `verify_recaptcha'

http://107.178.213.64/beta/create

I think you have to get a recaptcha key here: https://www.google.com/recaptcha/intro/index.html

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


You've gotta log in-- I got the same error before logging in.

Reply to this comment...


oh yeah! ok cool

Reply to this comment...


Hmm, i seem to be logged in though.

Reply to this comment...


@warren, oops I forgot to add my recaptcha keys. trying to create a new map from http://107.178.213.64/beta seems to work fine for me without loggin in, but links like http://107.178.213.64/beta/view/autoplace-test dont work, need to upload the keys. I'll do it in some time. Is'nt "create map" working? thanks!

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Hi, Vidun - ok, i'm at http://107.178.213.64/beta/maps/autoplace-test and it seems to work now. But I'm still stuck on this screen after uploading an image -- what am I supposed to click or do next?

Screen_Shot_2014-08-04_at_3.09.37_PM.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Hmm, ok, I just closed that window (perhaps the links on the image and filename should take you to where those images are in the map?)

and went to "view images" to get to where it was placed, but it says:

Uncaught SyntaxError: Unexpected token , 107.178.213.64/beta/maps/autoplace-test:1

Its oddly placed too:

Screen_Shot_2014-08-18_at_3.20.56_PM.png

However, when i upload, the console says:

Zoom for image1.212696391871741 cartagen.js:9417 Placing Image 33 at Lat:42.94540022222222, Long87.8989181388889 cartagen.js:9451 Using Image direction: -0.03490658503988659 cartagen.js:9452 Using image altitude: 0 cartagen.js:9453 hh,wh:77.30706599637952, 103.07608799517268

The response to the AJAX request from the upload was:

{"files":[{"name":"IMG_20140420_180322.jpg","thumbnail_url":"/warpables/0000/0033/IMG_20140420_180322_thumb.jpg","url":"/warpables/0000/0033/IMG_20140420_180322_medium.jpg","delete_type":"DELETE","delete_url":"/warpables/0000/0033/IMG_20140420_180322_#<Warpable:0x7fd20979ad00>.jpg","size":1417132,"id":33}]}

I think perhaps it's not seeing GPS info or something? since it doesn't seem to send any back. Or is GPS determined in Javascript?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


@jeff, the GPS is determined in javascript completely client-side. That image shows altitude as "0.0" - if it the same image that you linked on the wiki. Because of the altitude(from your console) it is not possible to handle the scale, does that image have altitude EXIF? maybe try verexif.

Apart - I'm unable to "preview" from edit comment on publiclab.orgm it just displays blank.

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


This is what I see in exiftool: https://gist.github.com/jywarren/4524b8ed092dc639c2e6

GPS Altitude : 0 m Above Sea Level

But can we have a better default for that? It was just an android phone photo from a Nexus 5, so perhaps many android phones do not provide altitude. Can we default it to, say, 500ft or something? Or perhaps once you upload it, it could prompt you for how high it was? It could:

  1. check older photos on that map for existing altitude
  2. ask the user if there are none, providing a default value of 500ft, or maybe 500,1000,1500 feet options?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


I also don't know if GPS altitude will be that useful when not at sea level -- since it's measured from sea level. We would have to do something like this: http://stackoverflow.com/questions/1995998/android-get-altitude-by-longitude-and-latitude and that's too much at this point. Let's try to come up with some good defaults for starters?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


Oh - the link looks interesting, never thought about this. Yes for now I'll think about providing default altitudes when the altitude is not "usable". thanks!

Reply to this comment...


I'm seeing a few interface issues. I can't make the window large enought to read "disable GPS placement"

Once they're in the upload window, how do I place them? when I click on them it starts a download. I'm not sure how I actually get images into the map, is that the "show/hide" image feature you are adding?

Screen_Shot_2014-08-20_at_12.59.22_PM.png

When I open a new map instance in your demo, I get the old upload interface.

Screen_Shot_2014-08-20_at_12.54.48_PM.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


@mathew I see some UI issues there. In the new upload modal, images are automatically placed when uploading is done, for now you might need to manually close the upload modal. The new interface is available at "beta pages", I might have missed some links to point to beta pages. Did you try creating a new map from http://107.178.213.64/beta ?

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


yeah, I did, but I'm not seeing them. The map is starting at a very high zoom level. is that it? http://107.178.213.64/maps/autoplace-test--mathew

the "view" view still doesn't show the images I uploaded. http://107.178.213.64/map/view/autoplace-test--mathew

Screen_Shot_2014-08-20_at_1.23.07_PM.png

Screen_Shot_2014-08-20_at_1.29.38_PM.png

Is this a question? Click here to post it to the Questions page.

Reply to this comment...


@mathew I've had some issues fixing the map to the correct zoom level, so if you are uploading from a very high altitude your image might get lost.

Currently you can try doing the following.

  1. When creating a new map from the home page, try using the "Use Image" button so the the map is centered to the correct location using GPS data from the image.
  2. At the mapknitter interface zoom in from the "centered" location to the approximate zoom level of the image so that the images might be visible.
  3. Upload images and close modal when done. For some reason sometimes after uploading and closing, the images are not displayed on map, the images appears on the map when the mouse is moved.

Certain issues with the UI and others need a fix, will be looking into these later.

Reply to this comment...


Login to comment.