search

ProjectSidewalk / SidewalkWebpage

Project Sidewalk web page
http://projectsidewalk.org
MIT License
84 stars 24 forks source link

Add example images for new tags #2968

Closed misaugstad closed 3 months ago

misaugstad commented 2 years ago
Brief description of problem/feature

On the Explore page, when placing a label, the context menu shows a tooltip over each tag with an example image. We don't have these tooltips for the new tags that we've added over the past few months, and getting example images for these is super important!

Here's the list of tags that need example images

Please record all your screenshots in this slide deck!

Before going around to audit, please

  1. Read through our labeling guide
  2. Watch this video where Jon gives an example of how to label diligently
  3. Start auditing on a test server, getting feedback from me until I let you know that I think you're ready to head to a prod server! But you can start taking screenshots while on test servers :)

While auditing, when you come across a good example for one of these things, open the browser console and

  1. Save the output of svl.map.getPanoId(); in the speaker notes section of the slide deck; this allows us to go back and take another screenshot from a different angle later if we need
  2. Save the output of svl.taskContainer.getCurrentTask().getStreetEdgeId(); to the speaker notes section of the slide deck as well
  3. You can hide the navigation arrows using svl.panorama.set('linksControl',false); and then put them back after by setting to true
  4. You can hide the road names using svl.panorama.set('showRoadLabels',false);
  5. Add the label in a location where you can still see the issue, but it's clear that that's what you're labeling. If that's difficult or impossible to do, you can take another screenshot without the label there. We can edit the image later to add an arrow pointing to the issue.
  6. Take your high quality screenshot! Zoom in in your browser so that the image is blown up pretty well. Use the GSV zoom (there are buttons on the interface for this). Try and keep only as much info in the frame as is necessary to give the context for what you're taking a pic of. The tooltip images have to be tiny, so we can't fit tons of detail. But it also needs to be clear that it's an example for the tag! It's a tricky balance :)

When using Gallery to find example images,

  1. Make sure to use the expanded view of the label by clicking on the image
  2. If you want to remove the label so that it's easier to see what's underneath it, open up Chrome's dev tools, hit ctrl-shift-C to inspect elements on the page, and click on the label icon. It should highlight some HTML in the dev console. Right click on that HTML and click "hide element".

And if you find any good examples for other tags where you think that you could take a better pic than what we currently have, that would be super helpful as well! Both because we don't necessarily have the best example images yet, and the ones we have are using our old icon design, so it would look better redone anyway ;)

misaugstad commented 2 years ago

I forgot to mention that we want to get the label_id from labels that you find through Gallery. You can find it by using the Chrome dev tools, using the "select an element" tool, and selecting the smaller GSV image. The label_id is in the ID for the HTML element, as seen below.

Screen Shot 2022-08-02 at 8 52 06 AM
misaugstad commented 2 years ago

@hawksFTW also for any picture you include, please include which city you got it from!

misaugstad commented 1 year ago

@kevinjtwu I just shared the slideshow with you: https://docs.google.com/presentation/d/185zU4H_ykC7vJlDPi5yCmYvsDqKZHi09X7fAgAhzKsA/edit#slide=id.g1457e913458_0_145

Sorry it took me so long to get back to this, and we really appreciate your help on this one!!

In the slide deck, you'll find a bunch of images that were collected for each tag (often using our Gallery tool). In the speaker notes, I gave feedback on the images. For some of the tags, I honed in on a single image that I thought was a good candidate.

Here's what needs to happen:

  1. Take high quality screenshots to include in tooltips. The pictures should clearly show the thing that is being tagged with enough context so that it's clear what you're looking at. But the tooltips are pretty small, so we can't have it too zoomed out! Here are some rough steps for getting the screenshots:
    1. Go to the Explore page on one of the test servers.
    2. Go to the panorama ID that is noted in the speaker notes in the slide deck: svl.map.setPano('<pano-id>'); (hopefully the imagery is still available)
    3. Check the nearby panoramas to see if there is one that has a better angle
    4. Hide the nav arrows (svl.panorama.set('linksControl',false);) and road names (svl.panorama.set('showRoadLabels',false);)
    5. Try taking a screenshot both with and without a label on the issue. When including a label, make sure that you can still clearly see what's being tagged.
    6. Resize the image to be the same dimensions as our other tag images, and to be approximately the same file size
    7. Add it into the appropriate folder and test it out!

I would strongly suggest that you start by picking one of the images that looks pretty simple, and go through the entire process for that one image. You might be surprised at how difficult it is to get the right zoom/framing of the example so that it looks okay within the tooltip. Once you think you have something good, commit it and send me the branch name so that I can test it out!

I would start out by just going through this process for tags where we already found good images to crop, they just need the cropping. If you aren't exhausted by the end of that process, then we would of course welcome you to search for some images for the other tags that are still missing pics! Just don't let perfect be the enemy of the good: having some more pics will be better than having no more!

Let me know if you have questions on anything else here, I wrote it in haste :)