Redesign watchface with countdown bar and calendar support

- Force 24h time format; switch date to DD/MM (Gothic 28 Bold)
- Replace effect-layer invert with explicit black background + white text
- Add 8px top bar counting down to next :00/:30; preempts to nearest
  calendar appointment when one arrives via AppMessage within 30 min
- Add pkjs with Google Calendar API integration (falls back gracefully
  if no API key is configured)
- Move battery indicator to a 4px full-width strip at screen bottom
- Drop pebble-effect-layer dependency; add APPOINTMENT_MINUTES messageKey
- Write README with feature overview, build instructions, and calendar setup

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-23 12:39:07 +02:00
parent bfd88af248
commit eac496be0e
4 changed files with 223 additions and 74 deletions
+52
View File
@@ -0,0 +1,52 @@
# Countdown Watchface
A clean Pebble watchface with a top progress bar that counts down to your next half-hour mark or upcoming calendar appointment.
## Features
- **Time** — large 24-hour format (`HH:MM`) using the Roboto Bold 49 font
- **Date** — day/month number (`DD/MM`) in Gothic 28 Bold below the time
- **Countdown bar** — 8px bar across the top of the screen:
- Starts full at the top of each half hour and drains to empty as it approaches `:00` or `:30`
- If a calendar appointment is within the next 30 minutes, the bar counts down to that instead
- Requires Google Calendar API setup (see below); falls back to half-hour countdown without it
- **Battery bar** — thin 4px indicator along the bottom edge
## Supported platforms
`aplite`, `basalt`, `diorite`, `emery`, `flint`
## Building
Requires the [Pebble SDK](https://developer.rebble.io/developer.pebble.com/sdk/index.html) (version 3).
```bash
cd countdown_watchface
pebble build
```
Install on a connected watch or emulator:
```bash
pebble install --phone <watch-ip>
# or
pebble install --emulator basalt
```
## Calendar integration (optional)
The watchface uses Google Calendar API to detect appointments within the next 30 minutes. Without this, the bar simply counts down to the next `:00` or `:30`.
**Setup:**
1. Create a Google Cloud project and enable the **Google Calendar API**.
2. Generate an **API key** (restrict it to the Calendar API and your IP/app if desired).
3. In the Pebble phone app's JS console (or via a config page), run:
```javascript
localStorage.setItem('gcal_api_key', 'YOUR_API_KEY_HERE');
```
The calendar ID defaults to `primary`. To use a different calendar, edit `src/pkjs/index.js` and change the `CALENDAR_ID` variable.
The phone-side JS polls for events every minute and sends the minutes-to-appointment to the watch via AppMessage. If the API call fails or no key is set, the watch falls back to the half-hour countdown automatically.