•
[個人專案] OBS Weather Widget - 可愛風 OBS 天氣小工具
8 分鐘閱讀 •
![[個人專案] OBS Weather Widget - 可愛風 OBS 天氣小工具](https://xn--jgy.tw/SideProject/obs-weather-widget/preview.png)
OBS Weather Widget - 可愛風 OBS 天氣小工具
https://weather.obs.琳.tw/
一個適用於 OBS Studio 瀏覽器來源的可愛風格天氣小工具，顯示明日天氣預報並支援多個地點輪播。
起源
這個專案的緣由要從上次看 阿奈奈 的直播說起。
昨天阿奈在直播中提到想要買一個能在 OBS 上顯示天氣的小工具。我聽到之後跟她說，實作這個其實很簡單，於是這小專案就誕生了。核心功能大概花了兩個小時，剩下的時間都花在美術素材和介面調整。
我想要一個天氣的啊，天氣的很酷誒，你不覺得嗎
天氣的到底誰會需要
可是...可是你們不覺得很酷嗎！...可是很酷誒！
你想你想你想你想你想，在看主播的時候旁邊還可以有一個天氣預報，而且主播常常都開台到晚上十二點，你就可以看明天的天氣耶，不覺得很酷嗎？
...不酷嗎？
太酷了吧
關於美術素材
這個專案的圖像素材是與 Nano Banana Pro by Gemini 3 協作完成。
Gemini 3 幫我產生了可愛風格的天氣圖示和小工具設計。在裁切圖示的時候，由於使用美術軟體做去背圖檔超出我跟 AI 的能力範圍，是請阿奈幫忙處理的。
功能特色
明日天氣預報
小工具會顯示 「明日」 的天氣預報，包含天氣狀態圖示、最高溫度、最低溫度與天氣描述。
多地點輪播
支援設定多個地點，自動循環輪播顯示。循環間隔時間可以自訂，預設為 5 秒。
透明背景設計
小工具採用透明背景設計，放入 OBS 瀏覽器來源後不會遮擋到直播畫面。配合可愛的手繪風格，讓天氣資訊成為直播畫面的一部分而非干擾元素。
友善的設定介面
專案提供了完整的設定頁面，使用者可以透過地名搜尋功能找到想要的地點，自訂每個地點的顯示名稱，並在內嵌的 iframe 中即時預覽小工具效果。設定完成後只需一鍵複製產生的 Widget URL，再貼到 OBS 的瀏覽器來源即可。
使用方式
步驟一：設定地點
- 開啟設定頁面：https://weather.obs.琳.tw/
- 在「地點搜尋」區塊輸入想要的地名（例如：台北、東京）
- 從搜尋結果中選擇正確的地點
- 調整顯示名稱後按「新增到清單」
- 可重複上述步驟新增多個地點
- 複製產生後的 Widget URL
步驟三：加入 OBS
- 在 OBS Studio 中新增一個「瀏覽器來源」
- 將設定頁面產生的 Widget URL 貼入 URL 欄位
- 設定寬度為 500、高度為 300
- 完成，小工具會以透明背景顯示在直播畫面上
技術細節
技術堆疊
這個專案採用純靜態網頁技術開發，前端使用純 HTML5 搭配 Tailwind CSS 快速打造現代化介面，以 Vanilla JavaScript (ES6+) 實作。字型方面使用 UoqMunThenKhung 營造可愛氛圍。
天氣資料來源
本專案使用 Open-Meteo 的 API：
| API | Endpoint | 用途 |
|---|---|---|
| 天氣預報 | https://api.open-meteo.com/v1/forecast | 取得每日天氣資料 |
| 地理編碼 | https://geocoding-api.open-meteo.com/v1/search | 將地名轉換為座標 |
WMO 天氣代碼
小工具根據 WMO（世界氣象組織）天氣代碼來選擇對應的圖示：
| 代碼 | 狀態說明 |
|---|---|
| 0 | 晴朗溫暖 |
| 1, 2, 3 | 多雲時晴 |
| 45, 48 | 霧氣朦朧 |
| 51, 53, 55 | 細雨綿綿 |
| 61, 63, 65 | 輕柔降雨 |
| 71, 73, 75 | 浪漫飄雪 |
| 80, 81, 82 | 陣雨來訪 |
| 85, 86 | 陣雪飄落 |
| 95, 96, 99 | 雷雨活力 |
URL 參數格式
Widget 頁面透過 URL 參數接收設定：
| 參數 | 類型 | 說明 |
|---|---|---|
| locations | JSON | 地點陣列，包含 name、lat、lon |
| interval | number | 輪播間隔（毫秒），預設 5000 |
| unit | string | 溫度單位：celsius 或 fahrenheit |
OBS 和使用者慣用的瀏覧器是兩個獨立的環境。透過 URL 參數傳遞設定資料，使得使用者可以在慣用瀏覧器中搞定所有設定，然後再將產生的 URL 貼到 OBS 中使用。
開源授權
本專案採用 AGPL-3.0 授權開源。程式碼完整公開在 GitHub 上，歡迎自由使用、修改與分享。
若讀者對專案有任何建議或發現問題，歡迎到 GitHub 提出 Issue，或由以下 Fediverse 回覆我。
回覆
你可以使用 Misskey 或其他 ActivityPub/Fediverse 帳號來公開回覆此文章。現有的公開回覆顯示在下方。