Skip to content

Commit c8c4c04

Browse files
committed
Add extra visualizations on Review page
1 parent 823a0a1 commit c8c4c04

File tree

5 files changed

+153
-43
lines changed

5 files changed

+153
-43
lines changed

README.md

Lines changed: 41 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
11
# Geo50x
2+
23
It's like _Where's Waldo?_ but for houses
34

45
## Description
5-
Geo50x is an online carto-architectural scavenger hunt originally designed and implemented by Gerard Bul-lalayao for the final project assignment of [CS50x: Introduction to Computer Science](https://cs50.harvard.edu/x/2023/) (HarvardX, 2023).
66

7-
The gameplay is simple. Given a photo of a house somewhere in the world, you are tasked with locating that house on Google Maps. It's that straighforward. Although the search might not be.
7+
Geo50x is an online carto-architectural scavenger hunt. The gameplay is simple: Given a photo of a house somewhere in the world, you are tasked with locating that house on Google Maps. It's that straighforward, although how you will go about searching might not be.
88

99
Geo50x is inspired by such childhood games as _[Where's Waldo?](https://en.wikipedia.org/wiki/Where%27s_Wally%3F)_ and _[Where in the World is Carmen Sandiego?](https://en.wikipedia.org/wiki/Carmen_Sandiego)_. And the simple pleasures of looking out through vehicle windows and just gazing at the passing landscapes and cityscapes.
1010

11-
<picture><img alt="Geo50x" src="static/images/geo50x_5.jpg"></picture>
11+
![Screenshot](static/images/geo50x_5.jpg)
12+
1213
More screenshots below.
1314

1415
## Disclaimer
15-
ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.
16-
17-
## Learning Objectives
1816

19-
### Requirements
20-
_[Assignment brief](https://cs50.harvard.edu/x/2023/project/) for CS50x's Final Project (as of September 2023)_
21-
22-
_"The climax of this course is its final project. The final project is your opportunity to take your newfound savvy with programming out for a spin and develop your very own piece of software. So long as your project draws upon this course’s lessons, the nature of your project is entirely up to you. You may implement your project in any language(s). You are welcome to utilize infrastructure other than the CS50 Codespace. All that we ask is that you build something of interest to you, that you solve an actual problem, that you impact your community, or that you change the world. Strive to create something that outlives this course."_
23-
24-
### Personal Goals
25-
Apart from what was to be gained from implementing the requirements, this project was used as a vehicle to further learn and/or practice the following:
26-
27-
* Working with Google Maps API
17+
ALL CONTENTS IN THIS REPO ARE FOR EDUCATIONAL PURPOSES ONLY.
2818

2919
## Getting Started
3020

@@ -40,34 +30,41 @@ Apart from what was to be gained from implementing the requirements, this projec
4030
### Usage
4131

4232
Clone it!
43-
```
44-
$ git clone https://github.com/ggeerraarrdd/geo50x.git
33+
34+
```bash
35+
git clone https://github.com/ggeerraarrdd/geo50x.git
4536
```
4637

4738
Go into the project directory and run the command:
48-
```
49-
$ flask run
39+
40+
```bash
41+
flask run
5042
```
5143

5244
Open the URL after 'Running on'.
5345

5446
### Notes on Google Maps
5547

5648
For the embedded maps to work, you need to use your own API Key. Before you can create one, you will need to create a Google Cloud project, for which you need a Google Cloud account.
49+
5750
* [Set up a Google Cloud account](https://cloud.google.com)
5851
* [Set up your Google Cloud project](https://developers.google.com/maps/documentation/javascript/cloud-setup)
5952
* [Using API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key)
6053

6154
In your terminal window, execute:
55+
56+
```bash
57+
export MAP_API_KEY=value
6258
```
63-
$ export MAP_API_KEY=value
64-
```
59+
6560
where `value` is your API key.
6661

6762
Check to confirm if environmental variable is saved by executing
63+
64+
```bash
65+
echo $MAP_API_KEY
6866
```
69-
$ echo $MAP_API_KEY
70-
```
67+
7168
### Database
7269

7370
You can recreate the database using the queries in `sql.txt`. Then populate the `locs` table with data in `geo50data.csv`. Use of the `geoids` table is not yet implemented (as of v1.0.0).
@@ -76,37 +73,50 @@ You can recreate the database using the queries in `sql.txt`. Then populate the
7673

7774
You can use the following credentials to log in to access a Search History with existing data.
7875

79-
```
76+
```text
8077
username: carto
8178
password: carto
8279
```
8380

8481
## Author(s)
82+
8583
* [@ggeerraarrdd](https://github.com/ggeerraarrdd/)
8684

85+
## Initial Release
86+
87+
The [initial realease](https://github.com/ggeerraarrdd/geo50x/releases/tag/v1.0.0) of Geo50x was submitted as the final project for [CS50x: Introduction to Computer Science](https://cs50.harvard.edu/x/2023/) (HarvardX, 2023).
88+
89+
[Project brief](https://cs50.harvard.edu/x/2023/project/) as of September 2023:
90+
91+
_The climax of this course is its final project. The final project is your opportunity to take your newfound savvy with programming out for a spin and develop your very own piece of software. So long as your project draws upon this course’s lessons, the nature of your project is entirely up to you. You may implement your project in any language(s). You are welcome to utilize infrastructure other than the CS50 Codespace. All that we ask is that you build something of interest to you, that you solve an actual problem, that you impact your community, or that you change the world. Strive to create something that outlives this course._
92+
8793
## Version History
94+
8895
* See [https://github.com/ggeerraarrdd/geo50x/releases](https://github.com/ggeerraarrdd/geo50x/releases)
8996

9097
## Future Work
98+
9199
* Add functionalities to Search History page such as ~~reviewing submitted locations~~ _(Update Nov 2, 2023: Done)_ and ~~more easily re-try locations attempted but not yet found~~ _(Update Nov 2, 2023: Done)_.
92100
* Add administration interface for data management.
93101
* Deploy app on AWS Lightsail.
94102

95103
## License
104+
96105
* [MIT License](https://github.com/ggeerraarrdd/large-parks/blob/main/LICENSE)
97106

98107
## Acknowledgments
108+
99109
* The distribution code for CS50's Finance problem served as a template for the app.
100110
* The documentions for the Google Maps Platform were a daily, often hourly, read.
101111
* Too many StackOverflow [Q&As](https://meta.stackoverflow.com/questions/267822/if-stack-overflow-doesnt-have-threads-what-the-heck-should-they-be-called) and Medium articles to mention but a couple proved immensely useful in developing two key functions
102-
* [Offset Latitude and Longitude by some meters accurately - Reverse Haversine](https://gis.stackexchange.com/questions/411859/offset-latitude-and-longitude-by-some-meters-accurately-reverse-haversine)
103-
* [Algorithm for offsetting a latitude/longitude by some amount of meters](https://gis.stackexchange.com/questions/2951/algorithm-for-offsetting-a-latitude-longitude-by-some-amount-of-meters)
112+
* [Offset Latitude and Longitude by some meters accurately - Reverse Haversine](https://gis.stackexchange.com/questions/411859/offset-latitude-and-longitude-by-some-meters-accurately-reverse-haversine)
113+
* [Algorithm for offsetting a latitude/longitude by some amount of meters](https://gis.stackexchange.com/questions/2951/algorithm-for-offsetting-a-latitude-longitude-by-some-amount-of-meters)
104114
* The folks at CS50 for a mind-altering course.
105115

106116
## Screenshots
107-
<picture><img alt="Geo50x" src="static/images/geo50x_6.jpg"></picture>
108-
<picture><img alt="Geo50x" src="static/images/geo50x_7.jpg"></picture>
109-
<picture><img alt="Geo50x" src="static/images/geo50x_8.jpg"></picture>
110-
<picture><img alt="Geo50x" src="static/images/geo50x_9.jpg"></picture>
111-
<picture><img alt="Geo50x" src="static/images/geo50x_10.jpg"></picture>
112117

118+
![Screenshot](static/images/geo50x_6.jpg)
119+
![Screenshot](static/images/geo50x_7.jpg)
120+
![Screenshot](static/images/geo50x_8.jpg)
121+
![Screenshot](static/images/geo50x_9.jpg)
122+
![Screenshot](static/images/geo50x_10.jpg)

app.py

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,12 @@ def review():
599599
# Get offset latitude to position infowindow on map
600600
loc_lat_game_offset = latitude_offset(float(loc_info["loc_lat_game"]), float(loc_info["loc_lng_game"]))
601601

602+
# Print to debug
603+
# print(f"locations_right = {len(locations_right)}")
604+
# print(f"locations_wrong = {len(locations_wrong)}")
605+
# print(f"locations_none = {len(locations_none)}")
606+
# print(f"locations_quit = {len(locations_quit)}")
607+
602608
# Print to debug
603609
# print(f"loc_info = {loc_info['loc_lat_game']}")
604610
# print(f"locations_right = {locations_right}")

static/styles.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,12 @@ li {
436436
text-decoration: none;
437437
}
438438

439+
.container-bottom-image-markers-label {
440+
margin: -5px 0 5px 0;
441+
padding: 0;
442+
font-size: 14px;
443+
}
444+
439445
.container-bottom-image-buttons {
440446
width: 400px;
441447
display: flex;

templates/about.html

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,9 @@
5858
<i>It's like "Where's Waldo?" but for houses!</i>
5959
</div>
6060
<div class="container-bottom-genpage-main-content-body-main-text">
61-
Geo50x is an online carto-architectural scavenger hunt created by Gerard Bul-lalayao and submitted as his
62-
final project for HarvardX's <a href="https://cs50.harvard.edu/x/2023/" target="_blank">CS50's
63-
Introduction to Computer Science</a> (v2023).
64-
</div>
65-
<div class="container-bottom-genpage-main-content-body-main-text">
66-
The <a href="/howto">gameplay</a> is simple. Given a photo of a house somewhere in
67-
the world, you are tasked with locating that house on Google Maps. It's that
68-
straighforward. Although the search might not be.
61+
Geo50x is an online carto-architectural scavenger hunt. The gameplay is simple: Given a photo of a house
62+
somewhere in the world, you are tasked with locating that house on Google Maps. It's that straighforward,
63+
although how you will go about searching might not be.
6964
</div>
7065
<div class="container-bottom-genpage-main-content-body-main-text">
7166
Geo50x is inspired by such childhood games as <a
@@ -109,7 +104,11 @@
109104
Version History
110105
</div>
111106
<div>
112-
<a href="https://github.com/ggeerraarrdd/geo50x/releases" target="_blank">https://github.com/ggeerraarrdd/geo50x/releases</a>
107+
The initial release of Geo50x was submitted as the final project for HarvardX's
108+
<a href="https://cs50.harvard.edu/x/2023/" target="_blank">CS50's Introduction to Computer Science</a> (v2023).<br>
109+
<br>
110+
New features developement is ongoing:
111+
<a href="https://github.com/ggeerraarrdd/geo50x/releases" target="_blank">https://github.com/ggeerraarrdd/geo50x/releases</a>.
113112
</div>
114113
</div>
115114

templates/review.html

Lines changed: 92 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,95 @@
3636
<a href="{{ location.loc_source_url }}" target="_blank">source</a>
3737
</div>
3838

39-
<!--
40-
<div class="container-bottom-image-buttons">
39+
<div class="container-bottom-image-markers-label">
40+
Attempts: {{ locations_right|length + locations_quit|length + locations_wrong|length + locations_none|length }}
41+
</div>
42+
43+
<!-- Attempt with Correct Answer -->
44+
<div class="container-bottom-image-markers-images">
45+
{% if locations_right|length == 1 and locations_quit|length == 0 %}
46+
<?xml version="1.0" encoding="UTF-8"?>
47+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
48+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px"
49+
height="35px" viewBox="-0.5 -0.5 45 65"
50+
style="background-color: #ffffff;">
51+
<defs />
52+
<g>
53+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
54+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
55+
<path
56+
d="M 22 0 L 40.74 30.48 C 42.87 33.94 44 37.93 44 42 C 44 47.83 41.68 53.43 37.56 57.56 C 33.43 61.68 27.83 64 22 64 C 9.85 64 0 54.15 0 42 C 0 37.93 1.13 33.94 3.26 30.48 Z"
57+
fill="#D95040" stroke="#B31312" stroke-width="0.5" stroke-miterlimit="10"
58+
transform="rotate(-180,22,32)" pointer-events="all" />
59+
<ellipse cx="22" cy="23" rx="9" ry="9" fill="#FFFF00" stroke="none" pointer-events="all" />
60+
</g>
61+
</svg>
62+
{% else %}
63+
{% endif %}
64+
65+
<!-- Attempt with Quit -->
66+
{% if locations_right|length == 0 and locations_quit|length == 1 %}
67+
<?xml version="1.0" encoding="UTF-8"?>
68+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
69+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px"
70+
height="35px" viewBox="-0.5 -0.5 45 65"
71+
style="background-color: #ffffff;">
72+
<defs />
73+
<g>
74+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
75+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
76+
<path
77+
d="M 22 0 L 40.74 30.48 C 42.87 33.94 44 37.93 44 42 C 44 47.83 41.68 53.43 37.56 57.56 C 33.43 61.68 27.83 64 22 64 C 9.85 64 0 54.15 0 42 C 0 37.93 1.13 33.94 3.26 30.48 Z"
78+
fill="#D95040" stroke="#B31312" stroke-width="0.5" stroke-miterlimit="10"
79+
transform="rotate(-180,22,32)" pointer-events="all" />
80+
<ellipse cx="22" cy="23" rx="9" ry="9" fill="#000000" stroke="none" pointer-events="all" />
81+
</g>
82+
</svg>
83+
{% else %}
84+
{% endif %}
85+
86+
<!-- Attempts with Wrong Answers -->
87+
{% for _ in range(locations_wrong|length) %}
88+
<?xml version="1.0" encoding="UTF-8"?>
89+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
90+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px"
91+
height="35px" viewBox="-0.5 -0.5 45 65"
92+
style="background-color: #ffffff;">
93+
<defs />
94+
<g>
95+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
96+
<rect x="0" y="0" width="44" height="64" fill="#ffffff" stroke="none" pointer-events="all" />
97+
<path
98+
d="M 22 0 L 40.74 30.48 C 42.87 33.94 44 37.93 44 42 C 44 47.83 41.68 53.43 37.56 57.56 C 33.43 61.68 27.83 64 22 64 C 9.85 64 0 54.15 0 42 C 0 37.93 1.13 33.94 3.26 30.48 Z"
99+
fill="#D95040" stroke="#B31312" stroke-width="0.5" stroke-miterlimit="10"
100+
transform="rotate(-180,22,32)" pointer-events="all" />
101+
<ellipse cx="22" cy="23" rx="9" ry="9" fill="#D95040" stroke="none" pointer-events="all" />
102+
</g>
103+
</svg>
104+
{% endfor %}
105+
106+
<!-- Attempts with No Answers -->
107+
{% for _ in range(locations_none|length) %}
108+
<?xml version="1.0" encoding="UTF-8"?>
109+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
110+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="25px"
111+
height="35px" viewBox="-0.5 -0.5 45 65"
112+
style="background-color: #FFFFFF;">
113+
<defs />
114+
<g>
115+
<rect x="0" y="0" width="44" height="64" fill="#FFFFFF" stroke="none" pointer-events="all" />
116+
<rect x="0" y="0" width="44" height="64" fill="#FFFFFF" stroke="none" pointer-events="all" />
117+
<path
118+
d="M 22 0 L 40.74 30.48 C 42.87 33.94 44 37.93 44 42 C 44 47.83 41.68 53.43 37.56 57.56 C 33.43 61.68 27.83 64 22 64 C 9.85 64 0 54.15 0 42 C 0 37.93 1.13 33.94 3.26 30.48 Z"
119+
fill="#FFFFFF" stroke="gray" stroke-width="1.5" stroke-miterlimit="10"
120+
transform="rotate(-180,22,32)" pointer-events="all" />
121+
<ellipse cx="22" cy="23" rx="9" ry="9" fill="#FFFFFF" stroke="none" pointer-events="all" />
122+
</g>
123+
</svg>
124+
{% endfor %}
125+
126+
127+
<!--
41128
<div class="container-bottom-image-buttons-left">
42129
<div class="container-bottom-image-buttons-new">
43130
<form name="submit" action="/traffic" method="post">
@@ -48,8 +135,10 @@
48135
</form>
49136
</div>
50137
</div>
138+
-->
139+
51140
</div>
52-
-->
141+
53142
</div>
54143

55144
{% endblock %}

0 commit comments

Comments
 (0)