Git Product home page Git Product logo

sidewalkwebpage's Introduction

Welcome to Project Sidewalk! Project Sidewalk is an open source project aimed at mapping and assessing every sidewalk in the world using remote crowdsourcing, artificial intelligence, and online satellite & streetscape imagery.

If you use or reference Project Sidewalk in your research, please cite:

Manaswi Saha, Michael Saugstad, Hanuma Teja Maddali, Aileen Zeng, Ryan Holland, Steven Bower, Aditya Dash, Sage Chen, Anthony Li, Kotaro Hara, and Jon Froehlich. 2019. Project Sidewalk: A Web-based Crowdsourcing Tool for Collecting Sidewalk Accessibility Data At Scale. In Proceedings of the 2019 CHI Conference on Human Factors in Computing Systems (CHI '19). Association for Computing Machinery, New York, NY, USA, Paper 62, 1–14. https://doi.org/10.1145/3290605.3300292

Want Project Sidewalk in Your City?

Want a Project Sidewalk server set up for your city/municipality? You can read about things we consider when choosing new deployment cities on our Wiki including geographic diversity, presence of local advocates, funding, etc. You can also read some past discussions here, here, and here.

If you would like to suggest that we deploy in your city/municipality, please email us at [email protected]!

Development Instructions

Setting up the development environment

If you run into any problems during setup, check the Docker troubleshooting wiki page and the Github issues tagged as "Dev Environment". If you don't find any answers there, then post in the "core" or "intern" channels on Slack! We prefer posting to channels vs. DMs to Mikey to enable all of us to help each other.

Linux (Ubuntu)
  1. Install Docker. You will probably want to install rootless Docker to make development easier in the future, though it is a bit more complicated. Talk to Mikey if you're having issues.
  2. Install docker-compose separately (the docker daemon and docker-compose are only bundled on Mac/Windows).
  3. Run git clone https://github.com/ProjectSidewalk/SidewalkWebpage.git in the directory where you want to put the code.
Mac
  1. Install Docker Desktop. Make sure to select "Download for Mac—Apple Chip" if you have an Apple M1, M2, etc. or "Download for Mac—Intel Chip" if you have an Intel chip (older Mac models).
  2. Run git clone https://github.com/ProjectSidewalk/SidewalkWebpage.git in the directory where you want to put the code.
Windows (WSL2)
First time setup

There are two methods to set up your Docker dev environment with Windows: with WSL2 and without. We recommend and only support the WSL2 installation process.

WSL2 provides an actual Linux kernel running within a lightweight VM, unlike the older WSL which tried to emulate a linux kernel within the Windows kernel—see Docker's official WSL2 overview. WSL2 offers faster compile times and is better supported by Docker.

  1. Install Docker Desktop. Follow the official Docker Windows Install Guide. When prompted, ensure the Use WSL 2 instead of Hyper-V option on the Configuration page is selected
  2. Install WSL2 using the default Linux distribution (Ubuntu). Open PowerShell in administrator mode by right-clicking and selecting "Run as adminstrator" then enter wsl --install, which will use WSL 2 to install Ubuntu by default (see Microsoft's WSL instructions). We recommend pinning Ubuntu to your taskbar to open up the shell easily but you can easily find it in the future by searching "Ubuntu" from the Windows Start menu.
  3. Make sure you are also running the latest version of WSL. Again, in PowerShell, run wsl --update
  4. Enter the Docker Dashboard and click the settings gear icon in the top right. From there, click the "General" tab and select the "Use the WSL 2 based engine" check box (this will be grayed out and pre-checked if you're running Windows Home).
  5. Proceed by clicking Resources → WSL Integration and making sure that "Enable integration with my default WSL distro" and "Ubuntu" are checked.
  6. Open your Linux VM shell and navigate to where you would like to set up your Project Sidewalk repository. For me, that's /home/jonf/projects/.
  7. From your Linux VM shell, run git clone https://github.com/ProjectSidewalk/SidewalkWebpage.git.
Starting/Shutting down WSL2 and Docker when you're done working

WSL and Docker can take up lots of memory in the background. If you aren't working on Project Sidewalk, you can shut down Docker and WSL to prevent unnecessary memory consumption on your computer by following the steps below. If you shut them down, you will need to start them back up again before working on Project Sidewalk!

Shut down Docker/WSL
  1. Close any apps using Docker or WSL. Make sure to shut down Project Sidewalk and any other apps that might be using Docker or WSL. If you don't, WSL will start up again automatically.
  2. Shut down Docker. Open the hidden icons button on the toolbar, right-click the Docker symbol, and click "Quit Docker Desktop".
  3. Shut down WSL. Run wsl --shutdown.
Start Docker/WSL
  1. Start WSL. From the terminal, run wsl -d Ubuntu. Starting an IDE using WSL will also automatically boot it up.
  2. Start Docker. Search for Docker Desktop in the start menu and run the app. You can then freely run make dev to begin development.
Transferring files from Windows to Linux VM

One issue you may encounter when setting up your dev environment within the Linux VM is transferring files (like the database dump) into the VM itself.

  1. A simple solution is to open File Explorer. Check the left sidebar. Open Linux -> Ubuntu -> home -> \<username\> -> SidewalkWebpage. This will connect you to the file system within your Linux VM. We recommend right-clicking on this folder and choosing "Pin to Quick access" to make it easy to find in the future.
  2. You should now be able to drag and drop files into that folder like you normally would.
  3. When you copy over files, a :Zone.Identifier file is typically also created. You can safely delete those, and you should!

A command-line alternative: From you Linux VM, you can find your Windows files from the /mnt directory. This folder is where your Windows drives are mounted. For example, /mnt/c will let you access the files in your C: drive; from here you can use commands like cp <source> <destination> to move files from your C: drive to your Linux VM's file system.

Running the application locally

Here are the instructions to run Project Sidewalk locally for the first time. If you've already run through this list and gotten Project Sidewalk to run locally on your machine, but you just want to run it again (e.g., after a machine restart), then type make dev in the root SidewalkWebpage directory.

Make sure Docker is running on your machine. You should see a Docker whale in your Mac or Windows tray. You can also configure Docker to run at startup (see Preferences).

On Windows, we recommend Windows Powershell (built in to Win10). On Mac, use the basic terminal or, even better, iTerm2. On Linux (or if you're using WSL2 on Windows), the default Linux Shell (such as Bash) is a great choice.

  1. Email Mikey ([email protected]) and ask for a database dump, a Mapbox API key, and a Google Maps API key & secret (if you are not part of our team, you'll have to create a Google Maps API key yourself).

  2. If your computer has an Apple Silicon (M1 or M2) chip, then you should modify the platform line in the docker-compose.yml, changing it to linux/arm64.

  3. Modify the MAPBOX_API_KEY, GOOGLE_MAPS_API_KEY, and GOOGLE_MAPS_SECRET lines in the docker-compose.yml using the keys and secret you've acquired.

  4. Modify the SIDEWALK_CITY_ID line in the docker-compose.yml to use the ID of the appropriate city, listed here (it's the city that matches your database dump, so check the name of the db dump file).

  5. Modify the DATABASE_USER line in the docker-compose.yml, replacing "sidewalk" with the username from the table linked above.

  6. Rename the database dump file that you got from Mikey to "<database_user>-dump" (using the name from the prev step) and put it in the db/ directory (other files in this dir include init.sh and import-dump.sh).

  7. From the root SidewalkWebpage dir, run make dev. This will take time (20-30 mins or more depending on your Internet connection) as the command downloads the docker images, spins up the containers, and opens a Docker shell into the webpage container in that same terminal. The containers (running Ubuntu Stretch) will have all the necessary packages and tools so no installation is necessary. This command also initializes the database, though we still need to import the data. Successful output of this command will look like:

    Successfully built [container-id]
    Successfully tagged projectsidewalk/web:latest
    WARNING: Image for service web was built because it did not already exist. 
    To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
    root@[container-id]:/home#
    
  8. Run make import-dump db=<database_user> (needs to be the same thing you set for DATABASE_USER) from the root project directory outside the Docker shell (from a new Ubuntu terminal). This may take a while depending on the size of the dump. Don't panic if this step fails :) and consult the Docker Troubleshooting wiki. Check the output carefully. If it looks like there are errors, do not skip to the next step, check the wiki and ask Mikey if you don't find solutions in there.

  9. Run npm start from inside the Docker shell (the terminal where you ran make dev). If this is your first time running the command, everything will need to be compiled. So, it may take 5+ minutes initially, but will be orders of magnitude faster in the future (~10 secs).

    The behavior of npm start is dictated by what start is supposed to do as defined in package.json file. As per the current code, running this command will run grunt watch & sbt compile "~ run" (the ~ here is triggered execution that allows for the server to run in watch mode). This should start the web server. Successful output of this command will look like:

    > grunt watch & sbt clean "~ run"
    
    Running "watch" task
    Waiting...
    [info] Loading project definition from /home/project
    [info] Set current project to sidewalk-webpage (in build file:/home/)
    [success] Total time: 78 s, completed Dec 20, 2018 8:06:19 AM
    [info] Updating {file:/home/}root...
    [info] Resolving it.geosolutions.jaiext.errordiffusion#jt-errordiffusion;1.0.8 .[info] Resolving org.fusesource.jansi#jansi;1.4 ...
    [info] Done updating.
    
    --- (Running the application, auto-reloading is enabled) ---
    
    [info] play - Listening for HTTP on /0.0.0.0:9000
    
    (Server started, use Ctrl+D to stop and go back to the console...)
    
  10. Head on over to your browser and navigate to localhost:9000 (or try 127.0.0.1:9000). This should display the Project Sidewalk webpage. It might take time to load initially.

Setting up another database or city

  1. Acquire another database dump, put it in the db/ directory, and rename it to "<database_user>-dump", using the appropriate database user from this table.
  2. Run make import-dump db=<db_user> (using the name from the prev step) from the root project directory outside the Docker shell.
  3. Update the DATABASE_USER variable in the docker-compose.yml to the same name.
  4. Modify the SIDEWALK_CITY_ID line in docker-compose.yml to use the appropriate ID from this table.
  5. Rerun make dev.
  6. To switch back and forth between databases going forward, you will need to close the Docker shell (if you ran make dev, that just means running exit in that terminal), update the DATABASE_USER and SIDEWALK_CITY_ID, and rerun make dev.

Additional tools

  1. SSH into containers: To ssh into the containers, run make ssh target=[web|db]. Note that [web|db] is not a literal syntax, it specifies which container you would want to ssh into. For example, you can do make ssh target=web.

Programming environment

We recommend the IntelliJ IDEA IDE for development. You should be able to get a student license to get the "ultimate" edition of IntelliJ IDEA.

IntelliJ IDEA Setup

  1. Download and install from here, and make sure to get a student license, which you should use during the install proces!
  2. On the first run of IntelliJ IDEA, you'll want to choose the 'Open' option (not the 'New Project') option, and choose the folder that holds the Project Sidewalk code (it is probably called SidewalkWebpage, it should be one level above the app/ directory).
  3. Now let's hide some build files so that searching through your code is easier/faster. Go to File -> Project Structure and click on Modules in the left sidebar. You should have a module there with the Project Sidewalk code; if you don't, try to make one and let me know how it goes!
    1. For each of the directories below, right click on it and click 'Sources' to mark it as source code:
      • app
      • conf
      • db
      • project
      • public
    2. Then for each of these directories, right click on it and click 'Excluded' so that it doesn't show up in search, so that you hopefully don't accidentally edit these files!
      • Any other top-level directory that you didn't mark as 'Sources'
      • project/project
      • project/target
      • public/fonts
      • public/javascripts/Admin/build
      • public/javascripts/Gallery/build
      • public/javascripts/Help/build
      • public/javascripts/Progress/build
      • public/javascripts/PSMap/build
      • public/javascripts/SVLabel/build
      • public/javascripts/SVValidate/build
  4. We then recommend installing a few plugins. To do so, go to File -> Settings. Select the Plugins option on the left sidebar and then Marketplace (on top menubar). For each of the following plugins, enter their name in the "search area" (textfield next to magnifying glass), find the plugin, and click Install: Play 2 Routes, i18n support, HOCON, and Scala (if you haven't already). You will then need to restart IntelliJ to install the plugins.
  5. Finally, let's install a Java SDK to help with syntax highlighting in Scala/Java. Open File -> Project Structure and click on Project in the left sidebar. Under SDK, choose Add SDK -> Download JDK. Choosing version 1.8 is necessary. The default "Amazon Corretto" version works, but presumably others should as well. Click Download. Then set the Language Level to 8. It may take a bit of time to install Java.

Database tools

To look at and run queries on your database, you will want to install a database client. Valentina Studio is a good cross-platform database client. People also like using Postico for Mac or PGAdmin on Windows/Mac.

You'll connect to the database using the following credentials:

Host: localhost:5432
User: postgres
Password: sidewalk
Database: sidewalk

Making changes

  1. Before making changes, check out our style guide and process for contributing new code wiki pages.

  2. If you make any changes to the build.sbt or the configs, you'd need to press Ctrl+D and then sbt clean and then npm start from inside the Docker shell.

  3. If you make any changes to the views or other scala files, these changes will be automatically picked up by sbt. You'd need to reload the browser once the compilation finishes. For example, a change to index.scala.html file results in:

    [info] Compiling 1 Scala source to /home/target/scala-2.10/classes...
    [success] Compiled in 260s
    
    --- (RELOAD) ---
    
    [info] play - Shutdown application default Akka system.
    [info] play - database [default] connected at jdbc:postgresql://db:5432/sidewalk
    [info] play - Starting application default Akka system.
    [info] play - Application started (Dev)
    [success] Compiled in 124s
    
  4. If you make any changes to the assets (look in Gruntfile.js under watch block), these changes will be picked up by grunt. You'd need to reload the browser once the compilation finishes. For example, a change to public/javascripts/HELP/src/tableOfContents.js file results in (output has been trimmed):

    >> File "public/javascripts/Help/src/tableOfContents.js" changed.
    Running "concat:dist_audit" (concat) task
    Running "concat:dist_progress" (concat) task
    Running "concat:dist_admin" (concat) task
    Running "concat:dist_help" (concat) task
    Running "concat:dist_validate" (concat) task
    Running "concat_css:dist_audit" (concat_css) task
    File "public/javascripts/SVLabel/build/SVLabel.css" created.
    Running "concat_css:dist_validate" (concat_css) task
    File "public/javascripts/SVValidate/build/SVValidate.css" created.
    
    Done.
    Completed in 23.905s at Thu Dec 20 2018 09:31:45 GMT+0000 (Coordinated Universal Time) - Waiting...
    
    [success] Compiled in 5s
    

sidewalkwebpage's People

Contributors

adevdash avatar aileenzeng avatar amethystgear avatar andrew4699 avatar bnelson05 avatar danzzyy avatar davphan avatar dylanbun avatar gitsage avatar hoominchu avatar jonfroehlich avatar jstadeusiak avatar kotarohara avatar kumararoosh avatar leonli33 avatar manaswisaha avatar mattj12 avatar michaelduan8 avatar misaugstad avatar nomichka avatar paarig avatar rpechuk avatar sbower213 avatar shokiami avatar soben713 avatar sriharikrishnaswamy avatar timvng avatar tongning avatar uditpatwal avatar z-setiadi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sidewalkwebpage's Issues

Colors of the "Achievement" icons

Jon's feedback: The color in these icons are distracting. Can you reduce brightness and/or saturation a bit. I also worry about the overall design language in your design. These icons don’t seem to fit the general iconic aesthetic that you developed.

Duplicate labels from multiple angles

Am I supposed to label the same thing multiple times but from different viewpoints? My compulsion is to label it… but I’m not so sure. I guess we deal with this issue via good training/onboarding.

duplicate

Should a user label less severe problems?

Matt's comment: I’ve found some “surface problems” like a manhole and an obstacle like a tree branch (temporary)… but I am not really sure if this is exactly what you’re looking for… I just think it’s what you’re looking for but I don’t think you could trust an inexperienced user to know this.

Design of the top page

Matt's comment: First page, looks nice but I don’t really know what the little indicators under the map mean… is this map supposed to be interactive? Okay, sometimes it is… when I hover over the right spots, but it doesn’t do anything which is something I sort of expected. The description, or call to action, leaves me asking what accessibility problems? And, what am I actually getting involved with? Some kind of image carousel instead of the map that explains the project visually and what I need to do might be helpful.

Onboarding: Explaining Click & Drag

The second part of onboarding when you click and drag on the map. It was very difficult to understand when I done something correctly. You suggest with the "Hand Icon" to click and turn left... but the bottom right corner says "turn right", which is what I initially did and couldn't figure out why I was being directed to "move forward" or why I couldn't perform this action. I ended up going in a full circle until I found the second curb ramp:

image

We need more options for "Jump"

Jon's comment: Actually, neither of these options apply. We need a third option: “I cannot go the direction that you want me to walk…” (or something like that) Perhaps we also add in a write-in blank here…. So a 4th option

jumpoptions

Context menu design enhancement

Jon's feedback

  1. Do we need this checkbox? If so, I think we need to redesign this pop-up UI… it has three parts: rating, temporary problem checkbox, and textfield. The layout/organization feels weird. I don’t like the aesthetic.
  2. I like the consistency of having the pop-up interface come up for every label type but I think ‘passable’ feels weird for the curb ramp category —instead, maybe the far left should be something like ‘perfect’ or something.
  3. Change this to “Short optional description” – keep the rest.

contextmenu

No link available

Jon's comment: Hmm, actually, I can’t go the way the interface wants me to go… In these cases, we should not penalize someone for jumping. They should get credit for everything they labeled up to hitting jump. I’m gonna jump now 

nolink

An idea for motivating users to retain in the system

In terms of motivation… I like the idea of clearing a neighborhood. So, can your routing algorithm like make it so that I walk throughout this whole neighborhood and audit it before going to another neighborhood? Then we could track the number of neighborhoods audited as well.

usermotivation

Should a user inspect both sides of road?

Jon's comment: As I am auditing this road, I am starting to get confused—am I supposed to try and audit both sidewalks (on both sides of road) or just one… I’ve largely been focusing on the sidewalk closer to me (and I’d imagine most will do this too). How should we deal with this?

labelingbothsides

Feedback after completing a mission

Jon's comment: After finishing the mission, I again, feel like we don’t do enough to tell the person what to do next. I still think some animation telling the person where to turn would be useful and then some info on their next mission (something like “now help us assess 7th street!”)

Overly boisterous "yay" sound effect

Jon's comment: The ‘yay’ sound effect at end is overly boisterous and a bit annoying. I think we should save such a HUGE celebration to completing like 10 missions or something.

The context menu for rating curb ramps

Matt's comment: I found a curb ramp and put a label on it… it asked me to rate it and I gave it a 1 because it is a perfect curb ramp… but it also asked for the type of problem… I didn’t enter anything in the field… am I only supposed to indicate issues?

Modal window design enhancement

Matt's comment: I think the popup boxes need an explicit close button… it’s confusing without it and then somehow I accidentally deleted the label I just created… not sure why that happened.

Labels not saved (bug?)

Matt's comment: When I go back to my dashboard… it doesn’t look like all my labels got saved (shows 1 surface problem, but I labeled at least 2).

User is transported to new Street View location after logging in

When a user logs into the system, it refreshes the browser and it sends them to a different location in Google Street View. This (i) throws away the accessibility data that was collected but not yet submitted to the server and (ii) throws the user off from the context because the Street View scene changes.

One potential solution is to store the current data in the Storage.js as a cache when log in happens.

Enhancements to the status pane

Jon's comment:

  • I think we should try to fit in there is a zoomed-out view of the map that shows the current neighborhood i'm in and shows the labels being added as i audit. I'm always curious what part of dc i'm in when i audit--i think it would be fun to know!
  • It would be nice to provide a real-time distance tracker for how far you've audited in the current session (i.e., since you logged in).
  • Below "current mission" but above the progress bar, i think you need to tell me what my current mission is

Rubrics for assessing the severity of the issues

  • It's still unclear how to score issues in the application (e.g., 1, 5); in the onboarding you actually suggest labeling something a "3" that I would assume is a "5".
  • It isn't required to score an issue and I noticed that I was frequently forgetting to do this.

Create an onboarding

We need to create an onboarding tutorial to instruct how to use the interface.

Short mission

I just walked two steps in this mission and then it was completed… seems strangely short…

shortmission

Error submitting data after onboarding

I get the following error when I submit data right after the onboarding. It seems like there is a problem only for onboarding submission:

"{"status":"Error","message":{"obj[0].interactions[8].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[18].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[25].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[26].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[39].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[45].note":[{"msg":"error.expected.jsstring","args":[]}],"obj[0].interactions[68].note":[{"msg":"error.expected.jsstring","args":[]}]}}"

Street View links not available

Jon's feedback: Interface is telling me to go straight here but GSV doesn’t allow me to do that… as a user, not sure what to do… should we prevent people from going in wrong directions (I think yes, I know you told me that you want people to get alternative perspectives to avoid occlusion… but I think most won’t actually do this)

walkingdirection

Collected accessibility data should be uploaded more frequently

We should upload the collected accessibility data more frequently. Currently, we send the data when (i) a user reaches the end of the current street segment s/he is auditing or (ii) after after walking long distance. This prevents us from collecting data from users who uses the system for a very short amount of time.

Onboarding "Mission Complete" Error

After labeling the 3rd curp ramp and trying to move forward to get a better view of the "washed out" curb ramp, I received the following message:

image

I believe this is what Jon was mentioning earlier.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.