diff --git a/README.md b/README.md index 81fe766..61af124 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,10 @@ Done by Armando Vega, Eduardo Sanchez, Lily Saragoza and Gabriel Class: Digital Multimedia (Cst205) Created:4/22/2024 -The program can be run on terminal with the command flask --app weather.py --debug run +The program can be run on powershell with the command flask --app weather.py --debug run This will give you the link for the website Otter Weather. When you get to the home page it will ask you to enter any City you would like to search the weather conditions of and it will take you the details page where it will give you the detail such as temperature both in degrees Farenheight and Celsius as well as the wind speed. In the future we will like to enter functionality that doesn't require entering a city but rather use location where you can enter the route which displays how the weather conditions change throughout your trip. + +GitHub Link: https://github.com/Wei-HaiMing/WeatherProject diff --git a/__pycache__/weather.cpython-312.pyc b/__pycache__/weather.cpython-312.pyc index 4fb88ae..83b8cc3 100644 Binary files a/__pycache__/weather.cpython-312.pyc and b/__pycache__/weather.cpython-312.pyc differ diff --git a/templates/Weather_Details.html b/templates/Weather_Details.html index d0dccd7..3e3c148 100644 --- a/templates/Weather_Details.html +++ b/templates/Weather_Details.html @@ -1,4 +1,6 @@ - + + @@ -16,6 +18,8 @@ Otter Weather +
@@ -58,15 +65,16 @@

Otter Weather

Weather in {{city_name}}


- +

Temperature Fahrenheit:
{{(((weatherdata['main']['temp']) - 273.15) * 1.8 + 32) | round(2)}}°F

Temperature Celsius:
{{((weatherdata['main']['temp']) - 273.15) | round(2)}}°C

{% set temp_celsius = ((weatherdata['main']['temp']) - 273.15) | round(2) %}

Wind Speed:

+

{{weatherdata['wind']['speed'] | round(2)}}m/s or {{((weatherdata['wind']['speed']) * 2.23694) | round(2)}}mpH

-

Humidity{humidity}

-

Weather Condition: {weather_condition}

+

Humidity: {{weatherdata['main']['humidity']}}g/kg^-1

+

Weather Condition: {{weatherdata['weather'][0]['description']}}

{% if temp_celsius < 0 %} {% endif %} weather_icon + diff --git a/templates/detailStyle.css b/templates/detailStyle.css index c2e3fd3..bf36f0a 100644 --- a/templates/detailStyle.css +++ b/templates/detailStyle.css @@ -1,5 +1,7 @@ /* CSS file created 05/13/2024 - Liliana R. Saavedra credits: Codehal on YouTube +This CSS file was meant to be an extension to the current details page, and +would add functionality to the Parallax effect we wanted to add. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* { @@ -10,7 +12,7 @@ credits: Codehal on YouTube } */ body{ - background: #b40a0a; + background: #02ff24; } .parallax-1{ background-image: url('/templates/hot.jpg'); diff --git a/templates/home.html b/templates/home.html index b227b27..8f404de 100644 --- a/templates/home.html +++ b/templates/home.html @@ -1,4 +1,5 @@ - + + @@ -7,12 +8,13 @@ Weather +

Otter Weather

diff --git a/weather.py b/weather.py index e6264c9..7a333f5 100644 --- a/weather.py +++ b/weather.py @@ -2,9 +2,21 @@ Authors: Armando, Lily, Eduardo, Gabe Course: CST-205 Date: 05/14/2024 - +Summary: Runs a flask app that allows for the user to enter in a city name +and brings a second page with some weather information of that city currently. +GitHub Link: https://github.com/Wei-HaiMing/WeatherProject ======= Gabe and Armando mostly worked on this python file +Armando: I worked on understanding the parameters that the API we used +and how to retrieve the correct information in order for city name +searches to function properly. Also retrieved and displayed weather +icon on the weather details page. I attempted to retrieve a map from the +API, but was unsuccessful. + +Gabe: Coded app routes to each individual page. Took Armando's initial json and request code, and added functionality and test endpoints +for each individual data dump. Coded the form in home route such that it returned a string that was the user city search input. +Keying, API access and research in these aspects were done by Armando, and I built upon them by looking into json dumps and coding HTML +to display data from the requests. Added longitude and latitude data access directly for convenience. """ from flask import Flask, render_template, request, redirect from PIL import Image @@ -16,21 +28,23 @@ import requests import numpy as np -my_key = "77b4df041ddc47e427d8799ea237cb80" +my_key = "77b4df041ddc47e427d8799ea237cb80" # API key app = Flask(__name__) bootstrap = Bootstrap5(app) -@app.route('/', methods=['GET', 'POST']) +@app.route('/', methods=['GET', 'POST']) # route to homepage def homepage(): global city_name city_name = request.form.get('citytxtbox') return render_template('home.html', city_name = city_name) + # Defines the route to homepage, intakes city name via form in html named citytxtbox + @app.route('/details') -def link(): +def link(): # route to details page city_name = request.args.get('citytxtbox') limit = 1 @@ -39,6 +53,7 @@ def link(): # geo test endpoint: # https://api.openweathermap.org/geo/1.0/direct?q=Monterey&limit=1&appid=77b4df041ddc47e427d8799ea237cb80 + # retrieves longitude and latitude from GeoEncoder API try: greq = requests.get(geo_endpoint) geodata = greq.json() @@ -52,7 +67,7 @@ def link(): weather_endpoint = f"https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={my_key}" # weather test endpoint # https://api.openweathermap.org/data/2.5/weather?lat=36.600256&lon=-121.8946388&appid=77b4df041ddc47e427d8799ea237cb80 - + # retrieves the weather data to be displayed on details page try: wreq = requests.get(weather_endpoint) weatherdata = wreq.json() @@ -60,32 +75,15 @@ def link(): print("Weather Endpoint Fail Error!") - op = "clouds_new" - zoom = 2 - x = 2 - y = 2 + icon_code = weatherdata["weather"][0]["icon"] - map_endpoint = f"https://tile.openweathermap.org/map/{op}/{zoom}/{x}/{y}.png?appid={my_key}" - icon_url = f"https://openweathermap.org/img/wn/{icon_code}@2x.png" + # map_endpoint = f"https://tile.openweathermap.org/map/{op}/{zoom}/{x}/{y}.png?appid={my_key}" + icon_url = f"https://openweathermap.org/img/wn/{icon_code}@2x.png" #endpoint for icon retrieval urllib.request.urlretrieve(icon_url, "static/images/weather_icon.png") my_src = Image.open('weather_icon.png') - # my_src.show() - - # try: - # map_req = requests.get(map_endpoint) - # # print(f"request thing {map_data}") - - # # map_img = Image.open(map_img) - # # mapdata = map_req.json() - # # map_img.show() - # except: - # print("Map Endpoint Fail Error!") - - pprint(f"geodata->{geodata}") - pprint(f"weatherdata->{weatherdata}") - # pprint(mapdata.type()) + return render_template('Weather_Details.html', city_name = city_name, geodata = geodata, weatherdata = weatherdata, icon_name = "weather_icon.png")