Scriptable-IOSWidgets

⛅ Dynamic Weather Widget

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: rushiofficial1205@gmail.com

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

This site is open source. Improve this page.