Waybar Weather Widget

A detailed and customizable weather widget for Waybar, powered by the Open-Meteo API.

waybar_weather_demo.mp4

📸 Screenshots

Features a tooltip with multiple modes that can be cycled through via click to view more weather data.

🤓 Nerd Fonts

Default Tooltip Current Details, Hourly, Daily

Week Details Sunrise/Sunset, Day/Night Length, Moon Phase, 3-Hour Snapshot

😄 Emojis

Default Tooltip Current Details, Hourly, Daily

Week Details Sunrise/Sunset, Day/Night Length, Moon Phase, 3-Hour Snapshot

✨ Features

The only weather widget you'll ever need. Feature rich, customizable, and clean with multiple tooltips.

• Current Weather: Displays the current temperature and a weather icon for current conditions.
• Geolocation: Automatically detects your location via your IP address, or you can set a manual latitude/longitude.
• Dynamic Icons: Weather icons change for day and night.
• Detailed Tooltips:
  • Default View:
    • Current weather details
    • Hourly forecast (default 12 hours, max 24)
    • Multi-day forecast (up to 16 days).
  • Week View::
    • Sunrise/sunset times with day/night length
    • Moon phases
    • A snapshot of the next few days via 3-hour intervals (default 2 days, max 3)
• Customizable:
  • Celsius or Fahrenheit
  • 12-hour (AM/PM) or 24-hour time format
  • Change hour display: icons, numbers, or both.
  • Use Emojis or Nerd Font icons for UI and weather conditions.
  • Customize total hours and days for each forecast type.
  • All colors are customizable.
  • Weather-specific icon coloring for Nerd Fonts.
• Moon Phase: Displays the current moon phase icon in the weekview tooltip.
• Day/Night Length: Shows the duration of day and night in the weekview tooltip.
• Command-line Interface: A simple CLI to toggle between tooltip views.

⬇️ Installation

1. Clone the repository or download the files into your ~/.config/waybar/ directory. Your structure should look something like this:

   ~/.config/waybar/
   ├── config.jsonc
   ├── style.css
   └── scripts/
       └── weather/
           ├── get_weather.rb
           ├── weather_icons.json
           └── weather_settings.jsonc
   

2. Make the script executable:

   chmod +x ~/.config/waybar/scripts/weather/get_weather.rb

⚙️ Configuration

1. Add the module to your Waybar config.jsonc:

   Add "custom/weather" to your modules-left, modules-center, or modules-right section. Then, add the following module configuration:

   "custom/weather": {
       "format": "{}",
       "tooltip": true,
       "return-type": "json",
       "exec": "~/.config/waybar/scripts/weather/get_weather.rb",
       "on-click": "~/.config/waybar/scripts/weather/get_weather.rb --next", // Cycle views
       "interval": 900 // Every 15 minutes
   },

2. Configure the weather script:

   Edit ~/.config/waybar/scripts/weather/weather_settings.jsonc to customize the widget.

   {
     "latitude": "auto", // e.g., 40.71 or "auto" to detect from IP address
     "longitude": "auto", // e.g., -74.01 or "auto" to detect from IP address
     "unit": "Fahrenheit", // "Fahrenheit" or "Celsius"
     "time_format": "24h", // "24h" or "12h"
     "hour_display": "number", // "icons", "number", or "both"
     "hourly_number_of_hours": 12, // Number of hours to show in hourly tooltip (max 24)
     "daily_number_of_days": 10, // Number of days for forecast (max 16)
     "snapshot_number_of_days": 2, // Number of days for week view snapshot (max 3)
     "refresh_interval": 900, // Seconds between API calls (e.g., 900 = 15 min)
     "icon_type": "nerd", // "nerd" or "emoji"
     "icon_position": "left", // "left" or "right"
     "font_size": 14, // Base font size in px
     "colors": {
       "primary": "#42A5F5", // Default Nerd Font icon color
       "cold": "skyblue", // Temp cold
       "neutral": "#42A5F5", // Temp neutral
       "warm": "khaki", // Temp warm
       "hot": "indianred", // Temp hot
       "pop_low": "#EAD7FF", // Precipitation low
       "pop_med": "#CFA7FF", // Precipitation medium
       "pop_high": "#BC85FF", // Precipitation high
       "pop_vhigh": "#A855F7", // Precipitation very high
       "divider": "#2B3B57", // Divider color
     },
     "color_weather_icons": true, // Enable weather-specific icon colors for nerd fonts (false = use primary color)
     "weather_colors": {
       "clear_day": "#FFAC33", // ☀️
       "clear_night": "#FAC629", // 🌙
       "partly_cloudy_day": "#D89C4C", // ⛅
       "partly_cloudy_night": "#A88E3A", // ☁️
       "overcast": "#B0B0B0", // ☁️
       "fog": "#D3D3D3", // 🌫️
       "drizzle": "#87CEEB", // 💧
       "rain": "#4A90E2", // 🌧️
       "heavy_rain": "#1E90FF", // 💦
       "freezing_rain": "#00CED1", // 🌧️❄️
       "snow": "#87CEEB", // 🌨️
       "heavy_snow": "#B0E0E6", // ❄️
       "thunderstorm": "#9370DB", // ⛈️
     },
   }

💡 Usage

• Hover over the widget to see the detailed weather tooltip.
• Click on the widget to cycle between the default and weekview tooltips.

You can also manually set the view from your terminal:

# Cycle to the next view
~/.config/waybar/scripts/weather/get_weather.rb --next # --toggle is an alias

# Cycle to the previous view
~/.config/waybar/scripts/weather/get_weather.rb --prev

# Set a specific view
~/.config/waybar/scripts/weather/get_weather.rb --set default
~/.config/waybar/scripts/weather/get_weather.rb --set weekview

📦 Dependencies

• Ruby: The script is written in standard Ruby with no external dependencies.
• Nerd Font: A Nerd Font is required to display the weather icons correctly. You can download one from nerdfonts.com.

🙏 Credits

• Weather Data: Open-Meteo
• Geolocation: ip-api.com