Weather Widget

Scriptable

Widget Size

API

Location

Theme

Status

Last Updated

A clean and elegant iOS weather widget built with Scriptable, fetching real-time data from the OpenWeather API. The widget adapts layout and font size based on weather conditions and city names for improved readability.

✨ Features

• 📍 Auto Location Detection: Fetches your current coordinates using iOS GPS.

• 🌤️ Real-Time Forecast: Displays current temperature and condition.

• 🏙️ City Recognition: Dynamically detects and displays the city name.

• 📐 Responsive Typography: Adjusts font size based on widget size, text length, and content.

• 🎨 Gradient Backgrounds: Custom gradients for stylish appearance.

• 🔁 Auto Refresh: Refreshes every 30 minutes to stay updated.

⚙️ Setup Instructions

Step 1: Get Your Free OpenWeather API Key

1. Go to https://openweathermap.org/api

2. Create a free account or log in.

3. Visit the API Keys page.

4. Click Generate to create a new key.

5. Copy the generated key.

Step 2: Add Your API Key

In the script file, replace this line:

const API_KEY = "YOUR_FREE_API_KEY";

With:

const API_KEY = "your_actual_key_here";

Step 3: Add the Script to Scriptable

1. Open the Scriptable app on your iPhone or iPad.

2. Tap the + button to create a new script.

3. Paste the entire code into the editor.

4. Save the file with a name like Weather Widget.

Step 4: Add the Widget to Home Screen

1. Long-press the Home Screen to enter edit mode.

2. Tap the + button at the top.

3. Search for and select Scriptable.

4. Choose a widget size (Small, Medium, or Large).

5. Tap Add Widget.

6. Long-press the widget and tap Edit Widget.

7. Set the Script to your saved weather widget script.

8. Leave parameters blank (it auto-detects location).

🌈 Customization Options

You can tweak the following parts of the script to personalize the widget:

Background Themes

Update this line to switch between preset themes:

createGradientBackground(widget, testGradientClr);

Other options include:

• blackBlueGradientClr

• lightDarkBlueGradientClr

Units

Choose between Celsius and Fahrenheit:

const WEATHER_UNITS = "metric"; // or "imperial"

🧠 How It Works

• Location is retrieved using Location.current().

• The weather API uses your coordinates to return:

  • feels_like temperature

  • weather description

  • city name

• The widget parses this and smartly adjusts the text layout.

  • E.g., long descriptions like "scattered intensity rain" will wrap.

  • City names like "New York" will only display "New" to keep layout clean.

🔄 Refresh Logic

The widget is set to automatically refresh every 30 minutes:

widget.refreshAfterDate = new Date(Date.now() + 30 * 60 * 1000);

📸 Screenshots

NOTE: The the values may differ bassed on your current location, the above are just some examples

🙌 Feedback & Credits

Have questions or want to request a feature? DM me on Instagram or email: [e-mail]

This widget is a reflection of clean UI and practical design. If you'd like to expand it (e.g., 3-day forecasts, icon-based UI), feel free to fork it.

📜 License

This project is licensed under the MIT License. Feel free to remix, reuse, and modify with attribution.

Stay informed, stay stylish – RP