Skip to content

Commit

Permalink
XMerge branch 'develop' of https://github.com/ProjectSidewalk/Sidewal…
Browse files Browse the repository at this point in the history 
…kWebpage into #456-Share-to-social-media

Pulled all changes
  • Loading branch information
@rpechuk
rpechuk committed Jul 5, 2022
2 parents 2c33dc6 + c52a1ab commit 0db8b35
Show file tree
Hide file tree
Showing 21 changed files with 146 additions and 231 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ On Windows, we recommend [Windows Powershell](https://docs.microsoft.com/en-us/p
1. Email Mikey ([email protected]) and ask for a database dump 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](https://developers.google.com/maps/documentation/javascript/get-api-key) yourself). Rename the database dump `sidewalk-dump` and put it in the `db/` directory (other files in this dir include `init.sh` and `schema.sql`, for example).
1. Modify the `GOOGLE_MAPS_API_KEY` and `GOOGLE_MAPS_SECRET` lines in the `docker-compose.yml` using the key and secret you've acquired.
1. Modify the `SIDEWALK_CITY_ID` line in the `docker-compose.yml` to use the ID of the appropriate city. You can find the list of IDs for the cities starting at line 7 of `conf/cityparams.conf`.
1. 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. 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:
1. 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]
Expand All @@ -71,8 +71,8 @@ On Windows, we recommend [Windows Powershell](https://docs.microsoft.com/en-us/p
docker exec -it projectsidewalk-db psql -c "CREATE ROLE sidewalk_<city-name> SUPERUSER LOGIN ENCRYPTED PASSWORD 'sidewalk';" -U postgres -d postgres
```
1. Run `make import-dump db=sidewalk` from the root project directory outside the Docker shell. 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](https://github.com/ProjectSidewalk/SidewalkWebpage/wiki/Docker-Troubleshooting). 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.
1. Run `npm start` from inside the Docker shell. 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).
1. Run `make import-dump db=sidewalk` 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](https://github.com/ProjectSidewalk/SidewalkWebpage/wiki/Docker-Troubleshooting). 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.
1. 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:
Expand Down
84 changes: 11 additions & 73 deletions app/views/index.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,37 +178,19 @@
<div class="im-centered3">
<div class="row" style="width: 450px;">@Messages("landing.ml.title")</div>
<div class="row" id="content-text-4"><p>@Messages("landing.ml.content")</p></div>
<br>
<img id="mlgif" src="@routes.Assets.at("assets/MLGraphic.gif")">
</div>
</div>



<div class="container" id="quotebox-container" style="min-height: 500px;">
<div id="quotearea">
<div class="im-centered3">
<div class="row">@Html(Messages("landing.what.people.are.saying"))</div>
</div>
<div class="row" style="padding-top: 40px;">
<div class="col-sm-6">
<div class="quotebox">
Using machine learning, big data, & civic kindness, <a href="https://twitter.com/projsidewalk" target="_blank" id="microsoftdesign-author-twitter">@@projsidewalk</a> is making D.C. more accessible one mile at a time
<br>
<span class="quoteauthor">@@microsoftdesign</span>


</div>
</div>
<div class="col-sm-6">
<div class="quotebox">
<a href="https://twitter.com/projsidewalk" target="_blank" id="kpkindc-author-twitter">@@projsidewalk</a> is mapping accessibility in DC. Looks like C St NE and Oklahoma Ave need work!
<br>
<span class="quoteauthor">@@kpkindc</span>
</div>
</div>
<div class="gif-container">
<img id="mlgif" src="@routes.Assets.at("assets/MLGraphic.gif")">
<p id="mlgif-bottom-text-1" class="ml-gif-header-1">@Messages("landing.ml.gif.you")</p>
<p id="mlgif-bottom-text-2" class="ml-gif-header-1">@Messages("landing.ml.gif.machine.learning")</p>
<p id="mlgif-bottom-text-3" class="ml-gif-header-1">@Messages("landing.ml.gif.outcomes")</p>
<p id="mlgif-label-text-1" class="ml-gif-header-2">@Messages("landing.ml.gif.user.labels")</p>
<p id="mlgif-label-text-2" class="ml-gif-header-2">@Messages("landing.ml.gif.machine.labels")</p>
<p id="mlgif-semicircle-text-1" class="ml-gif-header-3">@Messages("landing.ml.gif.better.city.planning")</p>
<p id="mlgif-semicircle-text-2" class="ml-gif-header-3">@Messages("landing.ml.gif.better.temporal.tracking")</p>
<p id="mlgif-semicircle-text-3" class="ml-gif-header-3">@Messages("landing.ml.gif.interactive.visualization.tools")</p>
<p id="mlgif-semicircle-text-4" class="ml-gif-header-3">@Messages("landing.ml.gif.smarter.routing")</p>
</div>
</div>
</div>

<div class= "container" id="collaborators-container">
Expand Down Expand Up @@ -262,50 +244,6 @@
</div>
</div>

<div class="container" id="press-header">
<div class="im-centered3">
<div class="row"><br>@Messages("landing.press.title")<br></div>
</div>
</div>
<div class="container" id="press-container">
<div class="row" id="press-image-row">
<div class="col-sm-4">
<a class="newslink" href="http://technical.ly/dc/2016/11/30/project-sidewalk-accessibility/" id="technically-img-link">
<img src='@routes.Assets.at("assets/technically.png")' height="70" alt="Technically Logo">
</a>
</div>
<div class="col-sm-4">
<a class="newslink" href="http://dc.curbed.com/2017/2/20/14669990/project-sidewalk" id="curbed-img-link">
<img style="position: relative; left:10px; top: -30px;" src='@routes.Assets.at("assets/curbed.jpg")' height="100" alt="Curbed DC Logo">

</a>
</div>
<div class="col-sm-4">
<a class="newslink" href="https://dbknews.com/2016/10/13/university-of-maryland-app-washington-disability-access/" id="diamondback-img-link">
<img src='@routes.Assets.at("assets/diamondback.png")' height="70" alt="Diamondback Logo">
</a>
</div>
</div>
<div class="row" id="press-blurb-row">
<div class="col-sm-4">
<a class="newslink" href="http://technical.ly/dc/2016/11/30/project-sidewalk-accessibility/" id="technically-text-link">
How Project Sidewalk is making DC more accessible
</a>
</div>
<div class="col-sm-4">
<a class="newslink" href="http://dc.curbed.com/2017/2/20/14669990/project-sidewalk" id="curbed-text-link">
Make D.C.'s sidewalks more accessible with this crowd-sourced map
</a>
</div>
<div class="col-sm-4">
<a class="newslink" href="https://dbknews.com/2016/10/13/university-of-maryland-app-washington-disability-access/" id="diamondback-text-link">
A UMD team made an app highlighting D.C. areas inaccessible to people with disabilities
</a>
</div>
</div>
</div>
</div>


<script type="text/javascript" src='@routes.Assets.at("javascripts/common/detectMobileBrowser.js")'></script>
<script src='@routes.Assets.at("javascripts/homepage.js")'></script>
Expand Down
7 changes: 2 additions & 5 deletions app/views/labelingGuide.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,21 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>

<div class="container help">
<div class="row">
<div class="col-md-3">
<div class="col-md-3" id="sidebar">
<div id="help-panel" class="panel panel-default">
<div class="panel-heading">
Labeling Guide
</div>
<div class="panel-body">
<ul id="questions-list">
<!--This list will be automatically filled-->
<li><a href="#introduction">Introduction</a></li>
<li><a href='@routes.ApplicationController.labelingGuide'><strong>Introduction</strong></a></li>
<li><a href='@routes.ApplicationController.labelingGuideCurbRamps'>Curb Ramps</a></li>
<li><a href='@routes.ApplicationController.labelingGuideSurfaceProblems'>Surface Problems</a></li>
<li><a href='@routes.ApplicationController.labelingGuideObstacles'>Obstacles</a></li>
Expand Down
10 changes: 4 additions & 6 deletions app/views/labelingGuideCurbRamps.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>
Expand Down Expand Up @@ -37,13 +35,13 @@
</div>
</div>
<div class="col-md-9 maincontent">
<div class="help-item" id="corners-with-only-one-curb-ramp">
<div class="help-item">
<h2>Curb Ramps</h2>
<p>
@Html(Messages("labeling.guide.curb.ramp.summary"))
(<a href="https://www.ada.gov/pcatoolkit/chap6toolkit.htm">ADA</a>).
</p>
<h3 class="question">How should I label corners with only one curb ramp?
<h3 class="question" id="corners-with-only-one-curb-ramp">How should I label corners with only one curb ramp?
<a href="#corners-with-only-one-curb-ramp" title="Permalink to this sub-section" class="permalink-anchor">
<img src='@routes.Assets.at("assets/link.png")' alt="A link" class="permalink-icon">
</a>
Expand Down Expand Up @@ -555,8 +553,8 @@ <h3 class="question" id="debris-on/around-ramp">What should I do about debris on
<div class="col-sm-12">
<p>
If a curb ramp has a large amount of dead leaves or other debris on it, the severity
should be >1 (<a href="https://safety.fhwa.dot.gov/ped_bike/tools_solve/fhwasa13037/chap3.cfm">FHWA Guide for Maintaining Pedestrian Facilities for Enhanced Safety 3.2.2</a>).
In general, this should not result in severity >3 if the debris is the only issue. Debris could cause
should be >1 (<a href="https://safety.fhwa.dot.gov/ped_bike/tools_solve/fhwasa13037/chap3.cfm">FHWA Guide for Maintaining Pedestrian Facilities for Enhanced Safety 3.2.2</a>),
and you can add the "surface problem" tag. In general, this should not result in severity >3 if the debris is the only issue. Debris could cause
slippery conditions or could slow down wheelchair users in extreme cases. You should not
place a <i>Surface Problem</i> label along with the <i>Curb Ramp</i> label. You should
only place <i>Surface Problem</i> labels on the sidewalk, not on curb ramps.
Expand Down
2 changes: 0 additions & 2 deletions app/views/labelingGuideNoSidewalk.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>
Expand Down
8 changes: 3 additions & 5 deletions app/views/labelingGuideObstacles.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>
Expand Down Expand Up @@ -182,7 +180,7 @@ <h3 class="question" id="temporary-obstacles">Do I label temporary obstacles as
</div>

<div class="help-item">
<h3 class="question" id="non-obstacles">Do I label non-obstacles as obstacles?
<h3 class="question" id="non-obstacles">Do I label all objects as obstacles?
<a href="#non-obstacles" title="Permalink to this sub-section" class="permalink-anchor">
<img src='@routes.Assets.at("assets/link.png")' alt="A link" class="permalink-icon">
</a>
Expand All @@ -191,8 +189,8 @@ <h3 class="question" id="non-obstacles">Do I label non-obstacles as obstacles?
<div class="col-sm-12">
<p>
Any objects that are not directly on the path of a pedestrian route (as in the first
three examples below) should not be marked as obstacles. Perhaps more obviously, things
like moving cars and other pedestrians are not obstacles either, so these should not be marked.
three examples below) should not be marked as obstacles. Things like moving cars and
pedestrians are not obstacles either, so these should not be marked.
</p>
</div>
<div class="img-container">
Expand Down
4 changes: 1 addition & 3 deletions app/views/labelingGuideOcclusion.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>
Expand Down Expand Up @@ -70,4 +68,4 @@ <h2 class="question" id="occlusion">Can't See the Sidewalk</h2>
</div>
</div>
</div>
}
}
13 changes: 7 additions & 6 deletions app/views/labelingGuideSurfaceProblems.scala.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@
<script type="text/javascript" src='@routes.Assets.at("javascripts/common/labelingGuidePanelResize.js")'></script>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/help.css")'/>
<link rel="stylesheet" href='@routes.Assets.at("stylesheets/labelingGuide.css")'/>

<link rel="stylesheet" href='@routes.Assets.at("stylesheets/magnific-popup.css")'/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='@routes.Assets.at("javascripts/lib/jquery.magnific-popup.js")'></script>

<div class="spacer20"></div>
Expand Down Expand Up @@ -428,10 +426,13 @@ <h3 class="question" id="problems-in-a-crosswalk">How should I label problems in
<div class="row">
<div class="col-sm-12">
<p>
Even though problems in a crosswalk are not part of the sidewalk, they are part of the route
that pedestrians are meant to follow, so you should label problems on a crosswalk in the same
manner as other surface problems. The example below is severity 2 because it could still be avoided
while remaining in the wide crosswalk.
If a surface problem exists on a crossing between curb ramps that is not visually marked
in some way (typically with white paint), then you should simply add a Surface Problem
label and label it in the same manner as other surface problems. Even though problems at
a crossing are not part of the sidewalk, they are part of the route that pedestrians are
meant to follow. If there is a marked crosswalk, then you can simply add a
<i>Crosswalk</i> label, add the 'surface problem' tag, and rate severity in the same way
that you would for a surface problem.
</p>
</div>
<div class="col-sm-12">
Expand Down
Loading

0 comments on commit 0db8b35

Please sign in to comment.