Smart Parking
A geolocation web app that identifies parking spaces (2016)
Overview
Role
Skills
Parking ticket has always been an issue. Especially, when it comes to driving to a new area and needing to find parking, the driver usually has to check the street signs in order to ensure that they would not violate any parking codes.
Our product is designed to provide users with readily accessible repository of information regarding street-side parking, which will serve as a reminder to help drivers to avoid parking violations.
Designer
Front-End Developer​
System Analysis and Design​
Web Programming
Database Management
Google Cloud Platform​​
Adobe Photoshop
Challenge
Even though a machine learning solution may be appropriate – particularly given that we have a relatively easily accessible repository of street and satellite imagery available, there are still problems we cannot solve at the moment.
-
Image Recognition: Although research on object detection and classification of images has progressed significantly in recent years, it is still challenging to produce object recognition models for us to read street signs.
-
Limit Resource: Due to the limited resources that we can access from Google Map API for information, there are some contents that need to be compromised.
​
​
Reflection
In order to keep everybody on the same page, it is important to map out ideas while explaining to the team members. For instance, even as simple as “draw a circle” can lead to different results because each person will have a different perspective - such as using different color codes or fonts.
Teamwork is another valuable asset because each person has his/her own strength. We can maximize each team member’s potential by putting the right person in the right place, so people from different areas of expertise can work together to inspire each other.
​
​
​
System Design and Implementation
Our development process is agile. Project members meet bi-weekly to discuss issues and brainstorm as needed.
​
Flow Chart
From our previous discussions, I have sketched out a flowchart. This flowchart is the foundation of the project (Figure 1).
​
In our team, design and implementation decisions are discussed as a group during brainstorming sessions, but the final decision is still made by a single person who is in charge of the particular area.
Figure 2: Discussion Note
Figure 1: Flowchart
​
​
​
High-Level Product Structure
After defining and agreeing on the flowchart, we start to build the product structure from high-level (Figure 3) to detail pieces (Figure 4).
This project is divided into three main parts: Serving, Scraping, and Learning. As a front-end development leader, I am in charge of the Serving part and a section of the Scraping part, which includes building the database structure and data rendering on the web page.
​
Figure 3: Project Architecture
​
Figure 4: High-level Project Architecture
​
My team and I are focusing on the front-end, which covers the interactions between App Engine, Cloud SQL, and the Cloud Storage Bucket.
​
​
​
Implementation and Problems
Majority of the issue lies in the App Engine 2- Map Overlay in the front-end development process. The Map Overlay front end was first designed to be a line overlay as the image displays. The idea was from the google map traffic function. A colored line on each side of the street along with the sign information can best describe the parking restriction (Figure 5).
The sign information is set to be differentiated by colors. For example, four hours sign is green, two hours sign is purple, etc. This idea can be fulfilled by using Google Map Polyline API.
​
Figure 5: Line Overlay Illustration
However, I find it difficult to implement this idea because Polyline function requires me to link from one coordinate to another. It’s hard to differentiate whether I should link a sign or not. For example, when I have a sign at an intersection, I can’t decide whether to link the markers or not by the coordinates directly, I need to go into the map and take a look at the real situation. Hence, I substitute the lines with points, which means from polylines to markers (Figure 6).
​
Figure 6: Point Overlay Illustration
Result
A big part of this project is relying on Google Map API and Machine Learning. During this project, we encountered many obstacles with the limit of data access. However, our team is still able to deliver a handy tool for users around Santa Clara University and Downtown San Jose. Example are shown on Figure 7 and 8.
Figure 7: Result Searched by “500 El Camino Real”​
​
​
Figure 8: Result Searched by “Downtown San Jose”
​