Skip to content

Commit ac0ae7f

Browse files
rushhiiirushhiii
authored
Merge pull request #1 from rushhiii/test
Create README for AirQI widget
2 parents 4d8f4d7 + 1e25170 commit ac0ae7f

1 file changed

Lines changed: 119 additions & 0 deletions

File tree

‎AQI Widget/README.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
# Smart Air + Temp Widget
2+
3+
![Scriptable](https://img.shields.io/badge/Scriptable-Compatible-purple)
4+
![Widget Size](https://img.shields.io/badge/Supports-Small%2C%20Medium%2C%20Large-blue)
5+
![Data Source](https://img.shields.io/badge/Data-OpenWeatherMap-brightgreen)
6+
![Customization](https://img.shields.io/badge/Configurable-Temperature%20%2B%20AQI%20%2B%20City%20%2B%20Icon-orange)
7+
![Offline Support](https://img.shields.io/badge/Fallback-Offline%20Cache%20%2B%20Auto%20Sync-lightgrey)
8+
![Status](https://img.shields.io/badge/Status-Stable-brightgreen)
9+
![Last Updated](https://img.shields.io/badge/Updated-June%202025-yellow)
10+
11+
![air widget](../.src/air_widget_showcase.png)
12+
13+
A dynamic and customizable air quality and temperature widget built using the [Scriptable app](https://scriptable.app), powered by OpenWeatherMap. This widget displays the air quality index (AQI) and temperature for your location directly on your iOS home screen.
14+
15+
> **Mention:** Air quality and temperature widget
16+
> If the links don't work, check the [backup](./backup) folder.
17+
18+
## ✨ Features
19+
20+
* 🌡️ **Temperature Display**: Displays current temperature, high, low, and hourly changes.
21+
* 🌍 **Air Quality Index (AQI)**: Real-time AQI for your location, with color-coded severity.
22+
* 🌬️ **Pollution Data**: PM2.5, PM10, and other pollutants.
23+
* 🎨 **Customizable Layout**: Select small, medium, or large widget sizes.
24+
* 📶 **Offline Fallback**: Automatically switches to cached data when offline.
25+
26+
## 🚀 How It Works
27+
28+
The widget fetches data from the OpenWeatherMap API to display:
29+
30+
* **Current Temperature** and weather details.
31+
* **Air Quality Index** based on the OpenWeatherMap AQI scale.
32+
* **Pollution Levels** for PM2.5, PM10, etc.
33+
* Customizable icon and color scheme based on AQI severity.
34+
35+
## 🔧 Setup
36+
37+
### 1. Get OpenWeatherMap API Key
38+
39+
1. Go to [OpenWeatherMap](https://openweathermap.org/).
40+
2. Create an account and generate an API key.
41+
42+
### 2. Update the Script
43+
44+
In the `air_widget.js` script, update the `API_KEY` variable with your OpenWeatherMap API key.
45+
46+
```js
47+
const API_KEY = "YOUR_API_HERE"; // OpenWeatherMap API key
48+
49+
### 3. Add the Script to Scriptable
50+
51+
1. **Option A – Upload Method**:
52+
53+
* Download the [`air_widget.js`](./air_widget.js) script.
54+
* Move it to the `Scriptable` folder in your **iCloud Drive**.
55+
56+
2. **Option B – Manual Method**:
57+
58+
* Open Scriptable, tap the **+** icon, and paste the script content.
59+
* Name the script (e.g., `Smart Air Widget`).
60+
61+
### 4. Add Widget to Home Screen
62+
63+
1. Long-press your iOS Home Screen to enter "jiggle mode."
64+
2. Tap the **+** icon, scroll to add a **Scriptable** widget.
65+
3. Choose the desired widget size (Small/Medium/Large).
66+
4. Edit the widget settings:
67+
68+
* Select the script (`Smart Air Widget`).
69+
* Configure widget parameters (temperature, AQI, etc.).
70+
71+
## ⚙️ Configure Parameters
72+
73+
You can modify the following parameters:
74+
75+
| Option | Defaults | Change to |
76+
| ------------------- | ---------------- | ---------------------------------- |
77+
| Script | Smart Air Widget | Your script name |
78+
| Parameters | Text | For example, `temp`, `aqi`, `city` |
79+
| Temperature Display | `temp` | `true` or `false` |
80+
| AQI Display | `aqi` | `true` or `false` |
81+
| City | Automatically | Set a specific city |
82+
83+
> Note: The widget will show the temperature and AQI data for your current location by default. You can configure the widget to display specific cities or data.
84+
85+
## 📷 Screenshots
86+
87+
> *Small Widgets*
88+
89+
| <img src="../.src/air_widget_s.png" width="160"/> | <img src="../.src/air_widget_s_2.png" width="160"/> |
90+
| :-----------------------------------------------: | :-------------------------------------------------: |
91+
| Temperature Display | AQI Level |
92+
93+
> *Medium Widgets*
94+
95+
| <img src="../.src/air_widget_m.png" width="260"/> | <img src="../.src/air_widget_m_2.png" width="260"/> |
96+
| :-----------------------------------------------: | :-------------------------------------------------: |
97+
| Air Quality Info | City & Pollution |
98+
99+
> *Large Widgets*
100+
101+
| <img src="../.src/air_widget_l.png" width="360"/> | <img src="../.src/air_widget_l_2.png" width="360"/> |
102+
| :-----------------------------------------------: | :-------------------------------------------------: |
103+
| Full Data View | Detailed City Info |
104+
105+
## 🙌 Feedback
106+
107+
Have suggestions or issues? DM me on [Instagram](https://www.instagram.com/the.tirth12) or email at [rushiofficial1205@gmail.com](mailto:rushiofficial1205@gmail.com).
108+
109+
## 📜 License
110+
111+
This project is licensed under the **MIT License**.
112+
113+
Feel free to fork, build upon, and remix with attribution.
114+
115+
##
116+
117+
<p align="center">
118+
Enjoy using this widget ~ RP
119+
</p>

0 commit comments

Comments
 (0)