Add precipitation probability display and update documentation

Features:
- Add precipitation probability in top-left header (2-digit percentage)
- Move pollen display to top-right header for symmetry
- Both use bold font with inverted colors for header visibility
- Auto-update colors when switching themes

Technical Changes:
- Add PRECIPITATION_PROBABILITY message key to package.json
- Fetch current hour's precip probability from Open-Meteo hourly data
- Display with leading zero format (%02d): 01, 10, 89, etc.
- Add persistence support (PERSIST_KEY 25)
- Update apply_color_theme() to handle pollen and precip layers

Documentation:
- Update README.md with new header layout diagram
- Add precipitation probability to features list
- Update claude.md with detailed technical documentation
- Add new screenshots showing updated layout (normal + inverted themes)
- Update annotated screenshot with precipitation and pollen labels

UI Layout:
- Header now: [Rain%] [City Name] [Pollen]
- Clean 2-digit percentage shows chance of rain
- Pollen moved from time box to header for better balance

Author: devindudeman

README.md

@@ -34,10 +34,14 @@ A high-density, data-rich watchface for the Pebble 2 Duo (B&W, 144x168), featuri
   - Extrapolates additional arrivals from bus interval when API returns fewer predictions
   - Configurable route, stop, and direction
   - Syncs with API every 30 minutes alongside weather data
+- **Precipitation Probability**: Current hour's chance of rain displayed as 2-digit percentage (e.g., "01" = 1%, "89" = 89%)
+  - Shown in top-left corner of header
+  - Updates every 30 minutes from Open-Meteo hourly forecast
 - **Weather Icons**: Current conditions + tomorrow's forecast icons
 - **Temperature Data**: Current, low, and high with visual indicators
 - **Wind & Environmental**: Wind speed, UV Index, Air Quality Index (AQI)
 - **Pollen Tracking**: Tree, grass, and weed pollen levels (0-5 scale) with type indicator
+  - Displayed in top-right corner of header (e.g., "T4" = Tree pollen level 4)
 - **Tide Information**: Next high/low tide with wave icon from NOAA
 - **Sunrise/Sunset Times**: Daily solar data with arrow indicators
 - **Configurable**: Show/hide individual data fields via settings
@@ -182,10 +186,10 @@ Optimized for Pebble hardware:
 
 ```
 ┌─────────────────────────┐
-│    San Francisco        │  ← Header: City Name (centered)
+│ 01  San Francisco   P0  │  ← Header: Rain% | City Name | Pollen
 ├─────────────────────────┤
 │ ☀  Wed, Nov 6      ☁    │  ← Today/Date/Tomorrow Weather Icons
-│ P0   19:09              │  ← Pollen (bottom-left) | Large Time Display
+│      19:09              │  ← Large Time Display
 │  High UV 11AM-3PM       │  ← Weather/Health Alert (dynamic, only when active)
 ├─────────────────────────┤
 │ 3,12 │  58°  │ 40|68    │  ← 3x3 Grid Row 1: MUNI | Current Temp | Lo|Hi
@@ -195,6 +199,11 @@ Optimized for Pebble hardware:
 └─────────────────────────┘
 ```
 
+**Header (Top Bar):**
+- **Left**: Precipitation probability (2-digit percentage, e.g., "01" = 1%, "89" = 89%)
+- **Center**: City name from GPS
+- **Right**: Pollen level (type + index, e.g., "T4" = Tree pollen level 4, "P0" = no pollen)
+
 **Grid Layout (3x3, 48px × 24px cells):**
 - **Row 1 (Temp)**: MUNI countdown | Current temp | Low|High temps
 - **Row 2 (Data)**: Wind speed | UV index | Air quality
@@ -262,6 +271,7 @@ Communication between C and JavaScript:
 - `TEMPERATURE`, `TEMP_MAX`, `TEMP_MIN`
 - `WIND_SPEED`, `WIND_MAX`
 - `UV_INDEX`, `AQI`
+- `PRECIPITATION_PROBABILITY`
 - `WEATHER_CODE`, `WEATHER_CODE_TOMORROW`
 - `SUNRISE`, `SUNSET`
 

claude.md

@@ -115,10 +115,10 @@ fitzface/
 
 ```
 ┌────────────────────────────┐  y=0
-│     San Francisco          │  Header: City Name (centered)
+│ 01  San Francisco      P0  │  Header: Rain% (left) | City Name (center) | Pollen (right)
 ├────────────────────────────┤  y=20 (DIVIDER)
 │ ☀    Wed, Nov 06       ☁   │  Today/Date/Tomorrow icons
-│ P0      19:09              │  Pollen (bottom-left) | Large Time (centered)
+│        19:09               │  Large Time (centered)
 │     High UV 11AM-3PM       │  Weather/Health Alert (y=80, dynamic, only when active)
 ├────────────────────────────┤  y=96 (DIVIDER - 3x3 GRID STARTS)
 │ 3,12 │  58°  │ 40|68       │  Row 1: MUNI buses | Current temp | Lo|Hi
@@ -130,6 +130,11 @@ fitzface/
 └────────────────────────────┘  y=168
 ```
 
+**Header Bar (y=0-20):**
+- **Left (x=4)**: Precipitation probability - 2-digit percentage (e.g., "01" = 1%, "89" = 89%)
+- **Center**: City name from GPS reverse geocoding
+- **Right (x=110)**: Pollen level - type + index (e.g., "T4" = Tree pollen level 4, "P0" = no pollen)
+
 **3x3 Grid Layout (48px × 24px cells):**
 - Top-left cell: MUNI bus countdown (e.g., "3,12" for 3 and 12 minutes)
 - All cells aligned and centered for balance
@@ -381,7 +386,41 @@ if (code >= 66 && code <= 67) { /* Freezing rain */ }
 - **Empty response**: Bus may not be running (late night, holidays, route changes)
 - **Stale JavaScript**: Phone caches JS separately from .pbw - do full uninstall/reinstall if changes don't appear
 
-### 9. **Pollen Tracking System**
+### 9. **Precipitation Probability Display**
+
+**Data Source**: Open-Meteo hourly forecast
+- Automatically fetched with weather data every 30 minutes
+- Uses current hour's precipitation probability (0-100%)
+- No additional API calls required
+
+**Display** (`src/c/fitzface.c:376-383`):
+- Top-left corner of header (position: 4, 3)
+- Shows 2-digit percentage with leading zero (e.g., "01" = 1%, "89" = 89%, "100" = 100%)
+- Format: `%02d` ensures consistent width
+- Uses bold font (GOTHIC_14_BOLD) with inverted colors for header visibility
+
+**Data Processing** (`src/pkjs/index.js:849-852`):
+- Extracts `precipitation_probability[0]` from hourly forecast array
+- Sends as integer (0-100) via `PRECIPITATION_PROBABILITY` message key
+- Falls back to 0 if data unavailable
+
+**Persistence** (`src/c/fitzface.c:71, 560-561, 618`):
+- Stored in `PERSIST_KEY_PRECIPITATION_PROBABILITY` (key 25)
+- Survives watchface reloads
+- Updates every 30 minutes with weather sync
+
+**Color Theme Support** (`src/c/fitzface.c:846`):
+- Automatically updates text color when switching themes
+- White text on black header (normal mode)
+- Black text on white header (inverted mode)
+
+**Update Frequency**:
+- Syncs every 30 minutes with weather, AQI, tide, MUNI, and pollen requests
+- Always shows current hour's probability for immediate relevance
+
+---
+
+### 10. **Pollen Tracking System**
 
 **Configuration** (`src/pkjs/config.js:180-210`):
 - Enable/disable toggle for pollen display
@@ -402,11 +441,12 @@ if (code >= 66 && code <= 67) { /* Freezing rain */ }
   - 4: High
   - 5: Very High
 
-**Display** (`src/c/fitzface.c:344-370`):
-- Bottom-left of time box (position: 11, 64)
+**Display** (`src/c/fitzface.c:385-409`):
+- Top-right corner of header (position: 110, 3)
 - Shows highest pollen type with level (e.g., "T4", "G3", "W2")
 - Type indicators: T=Tree, G=Grass, W=Weed, P=Pollen (when all types are 0)
 - Always displays pollen field when pollen data is available (shows "P0" when all are 0)
+- Uses bold font (GOTHIC_14_BOLD) with inverted colors for header visibility
 
 **Alert Integration** (`src/pkjs/index.js:727-751`):
 - Triggers alert when any pollen type ≥4

package.json

@@ -40,6 +40,7 @@
       "SUNSET",
       "WIND_MAX",
       "AQI",
+      "PRECIPITATION_PROBABILITY",
       "TIDE_NEXT_TIME",
       "TIDE_NEXT_TYPE",
       "TIDE_NEXT_HEIGHT",

screenshots/annotated.png

@@ -12,6 +12,7 @@
 #define KEY_SUNSET MESSAGE_KEY_SUNSET
 #define KEY_WIND_MAX MESSAGE_KEY_WIND_MAX
 #define KEY_AQI MESSAGE_KEY_AQI
+#define KEY_PRECIPITATION_PROBABILITY MESSAGE_KEY_PRECIPITATION_PROBABILITY
 #define KEY_TIDE_NEXT_TIME MESSAGE_KEY_TIDE_NEXT_TIME
 #define KEY_TIDE_NEXT_TYPE MESSAGE_KEY_TIDE_NEXT_TYPE
 #define KEY_TIDE_NEXT_HEIGHT MESSAGE_KEY_TIDE_NEXT_HEIGHT
@@ -68,6 +69,7 @@
 #define PERSIST_KEY_POLLEN_TREE 18
 #define PERSIST_KEY_POLLEN_GRASS 19
 #define PERSIST_KEY_POLLEN_WEED 20
+#define PERSIST_KEY_PRECIPITATION_PROBABILITY 25
 
 // Configuration persistence
 #define PERSIST_KEY_CONFIG_TEMP_UNIT 50
@@ -112,9 +114,12 @@ static GBitmap *s_temp_arrow_high_bitmap;
 // MUNI bus tracking (top-left grid cell)
 static TextLayer *s_muni_layer;
 
-// Pollen display (bottom-left of time box)
+// Pollen display (top right of header)
 static TextLayer *s_pollen_layer;
 
+// Precipitation probability (top left of header)
+static TextLayer *s_precip_layer;
+
 // Footer
 static TextLayer *s_tide_layer;
 static TextLayer *s_sunrise_layer;
@@ -136,6 +141,7 @@ typedef struct {
   int temp_max;
   int temp_min;
   int aqi;
+  int precipitation_probability;  // 0-100%
   int tide_time;
   int tide_type; // 0 = low, 1 = high
   int sunrise;
@@ -367,7 +373,16 @@ static void update_weather_display() {
   // MUNI bus countdown updated separately (recalculated every minute)
   update_muni_display();
 
-  // Pollen display (bottom-left of time box) - show worst type + level
+  // Precipitation probability display (top left corner) - show as 2-digit percentage
+  static char precip_buffer[8];
+  if (s_weather_data.precipitation_probability >= 0) {
+    snprintf(precip_buffer, sizeof(precip_buffer), "%02d", s_weather_data.precipitation_probability);
+    text_layer_set_text(s_precip_layer, precip_buffer);
+  } else {
+    text_layer_set_text(s_precip_layer, "");
+  }
+
+  // Pollen display (top right corner) - show worst type + level
   static char pollen_buffer[8];
   if (s_weather_data.pollen_tree >= 0 || s_weather_data.pollen_grass >= 0 || s_weather_data.pollen_weed >= 0) {
     // Find highest pollen count
@@ -543,6 +558,8 @@ static void load_persisted_data() {
                                    persist_read_int(PERSIST_KEY_POLLEN_GRASS) : -1;
     s_weather_data.pollen_weed = persist_exists(PERSIST_KEY_POLLEN_WEED) ?
                                   persist_read_int(PERSIST_KEY_POLLEN_WEED) : -1;
+    s_weather_data.precipitation_probability = persist_exists(PERSIST_KEY_PRECIPITATION_PROBABILITY) ?
+                                                persist_read_int(PERSIST_KEY_PRECIPITATION_PROBABILITY) : 0;
   } else {
     // Default values
     s_weather_data.temperature = 0;
@@ -599,6 +616,7 @@ static void save_weather_data() {
   persist_write_int(PERSIST_KEY_POLLEN_TREE, s_weather_data.pollen_tree);
   persist_write_int(PERSIST_KEY_POLLEN_GRASS, s_weather_data.pollen_grass);
   persist_write_int(PERSIST_KEY_POLLEN_WEED, s_weather_data.pollen_weed);
+  persist_write_int(PERSIST_KEY_PRECIPITATION_PROBABILITY, s_weather_data.precipitation_probability);
 }
 
 // Load configuration
@@ -639,6 +657,7 @@ static void inbox_received_callback(DictionaryIterator *iterator, void *context)
   Tuple *weather_code_tuple = dict_find(iterator, KEY_WEATHER_CODE);
   Tuple *weather_code_tomorrow_tuple = dict_find(iterator, KEY_WEATHER_CODE_TOMORROW);
   Tuple *aqi_tuple = dict_find(iterator, KEY_AQI);
+  Tuple *precip_prob_tuple = dict_find(iterator, KEY_PRECIPITATION_PROBABILITY);
   Tuple *temp_max_tuple = dict_find(iterator, KEY_TEMP_MAX);
   Tuple *temp_min_tuple = dict_find(iterator, KEY_TEMP_MIN);
   Tuple *tide_time_tuple = dict_find(iterator, KEY_TIDE_NEXT_TIME);
@@ -674,6 +693,7 @@ static void inbox_received_callback(DictionaryIterator *iterator, void *context)
   if (weather_code_tuple) s_weather_data.weather_code = (int)weather_code_tuple->value->int32;
   if (weather_code_tomorrow_tuple) s_weather_data.weather_code_tomorrow = (int)weather_code_tomorrow_tuple->value->int32;
   if (aqi_tuple) s_weather_data.aqi = (int)aqi_tuple->value->int32;
+  if (precip_prob_tuple) s_weather_data.precipitation_probability = (int)precip_prob_tuple->value->int32;
   if (temp_max_tuple) s_weather_data.temp_max = (int)temp_max_tuple->value->int32;
   if (temp_min_tuple) s_weather_data.temp_min = (int)temp_min_tuple->value->int32;
   if (tide_time_tuple) s_weather_data.tide_time = (int)tide_time_tuple->value->int32;
@@ -822,7 +842,8 @@ static void apply_color_theme() {
   text_layer_set_text_color(s_uv_layer, get_foreground_color());
   text_layer_set_text_color(s_aqi_layer, get_foreground_color());
   text_layer_set_text_color(s_tide_layer, get_foreground_color());
-  text_layer_set_text_color(s_pollen_layer, get_foreground_color());
+  text_layer_set_text_color(s_pollen_layer, get_background_color());  // Inverted for header
+  text_layer_set_text_color(s_precip_layer, get_background_color());  // Inverted for header
   text_layer_set_text_color(s_sunrise_layer, get_foreground_color());
   text_layer_set_text_color(s_sunset_layer, get_foreground_color());
 
@@ -899,6 +920,17 @@ static void main_window_load(Window *window) {
   );
   layer_add_child(window_layer, text_layer_get_layer(s_location_layer));
 
+  // Precipitation probability (top left corner of header) - inverted colors for black header
+  s_precip_layer = create_text_layer_colored(
+    GRect(4, 3, 30, 14),
+    GTextAlignmentLeft,
+    fonts_get_system_font(FONT_KEY_GOTHIC_14_BOLD),
+    get_background_color(),  // Inverted: white text on black header, or black on white header
+    GColorClear
+  );
+  layer_add_child(window_layer, text_layer_get_layer(s_precip_layer));
+  text_layer_set_text(s_precip_layer, "");  // Empty by default
+
   // === TIME SECTION (26-80) ===
   // Date (centered) - smaller, above time (add this FIRST so icons appear on top)
   s_date_layer = create_text_layer(
@@ -928,11 +960,13 @@ static void main_window_load(Window *window) {
   );
   layer_add_child(window_layer, text_layer_get_layer(s_time_layer));
 
-  // Pollen display (bottom-left of time box)
-  s_pollen_layer = create_text_layer(
-    GRect(11, 64, 30, 14),
-    GTextAlignmentLeft,
-    fonts_get_system_font(FONT_KEY_GOTHIC_14)
+  // Pollen display (top right corner, next to city name) - inverted colors for black header
+  s_pollen_layer = create_text_layer_colored(
+    GRect(110, 3, 30, 14),
+    GTextAlignmentRight,
+    fonts_get_system_font(FONT_KEY_GOTHIC_14_BOLD),
+    get_background_color(),  // Inverted: white text on black header, or black on white header
+    GColorClear
   );
   layer_add_child(window_layer, text_layer_get_layer(s_pollen_layer));
   text_layer_set_text(s_pollen_layer, "");  // Empty by default
@@ -1127,6 +1161,7 @@ static void main_window_unload(Window *window) {
   text_layer_destroy(s_aqi_layer);
   text_layer_destroy(s_tide_layer);
   text_layer_destroy(s_pollen_layer);
+  text_layer_destroy(s_precip_layer);
   text_layer_destroy(s_sunrise_layer);
   text_layer_destroy(s_sunset_layer);
 }

screenshots/inverted.png

@@ -846,6 +846,11 @@ function sendDataToWatch(location, weatherData, aqiData, tideData, muniData, pol
     message.WEATHER_CODE = weatherData.current.weather_code || 0;
   }
 
+  // Current precipitation probability (from hourly data - use current or next hour)
+  if (weatherData && weatherData.hourly && weatherData.hourly.precipitation_probability) {
+    message.PRECIPITATION_PROBABILITY = weatherData.hourly.precipitation_probability[0] || 0;
+  }
+
   if (weatherData && weatherData.daily) {
     message.TEMP_MAX = Math.round(weatherData.daily.temperature_2m_max[0]);
     message.TEMP_MIN = Math.round(weatherData.daily.temperature_2m_min[0]);