A weather-focused, highly readable-at-a-glance Pebble watchface for the day ahead, with live weather via the free Open-Meteo API.

There are several other weather-focused Pebble watchfaces that might look similar, but I found most of those too maximal for my needs (forecast for more than 24 hours, too visually busy, etc.). I wanted something focused just on the things that are most relevant to me over the next 24-hour period that I can grok at a glance.

• The current time, of course, with a large, high-contrast font.
• The current date and day of week in the system locale's language.
• The current location and timezone.
• Current temperature and high/low for the day.
• 24-hour temperature graph with secondary apparent temperature line.
• 24-hour precipitation probability graph with cloud cover.
• Daylight indicator with sunrise and sunset times.
• Moon phase on the midnight indicator.
• Current weather condition icon.
• Battery level and charging status.
• Bluetooth disconnect indicator.
• Respects system 12/24-hour time format.
• Temperature unit detection based on locale (defaults to Celsius, but Fahrenheit if you're in the US).

• Temperature unit: Auto (default), Celsius, or Fahrenheit
• Date format: "Monday, 1/15" default, several other presets (please open an issue if your preferred date format isn't available)
• Battery indicator: Icon (default), Percentage, or Off
• Show Timezone: On (default) or Off
• Show AM/PM / 24h Indicator: On (default) or Off

• Settings page for customizations
• Customize date format
• Custom date format string
• Customize battery indicator (e.g. show percentage instead of icon)
• Customize temperature unit
• Customize color scheme (e.g. light mode, accent colors)
• Localization (system locale)
• Custom locale support
• Bluetooth disconnect vibration
• Quiet time indicator
• Support round watches (e.g. Pebble Round 2)

• Pebble SDK (includes the pebble CLI tool)
• Node.js (for PKJS dependencies)

For code completion and linting, you can use clangd with the compile_commands.json generated by the Waf build system. To get the most out of it, you'll want to have clangd 22+ for better docblock support. I had to install llvm via Homebrew and add it to my PATH to get a new enough version of clangd on MacOS.

Build the watchface using the Pebble CLI:

pebble build

Then install it on the emulator of your choice:

# Pebble Time 2 (rectangular, 200×228)
pebble install --emulator emery --logs

# Pebble 2 Duo (rectangular, 144×168)
pebble install --emulator flint --logs

Note that adding/removing messageKeys in package.json will require a pebble clean before the next build to avoid stale generated code.

To test the config page with the emulator:

pebble emu-app-config

If you want to be able to run the watchface on your device, you'll also want to log in with GitHub after installing the Pebble SDK:

pebble login

This will enable the --cloudpebble option:

pebble install --cloudpebble

Demo builds with different weather conditions can be created with the DEMO environment variable. See src/c/modules/demo.c for the available demo scenarios.

DEMO=1 pebble build

To take screenshots of a particular demo scenario you can use the Pebble CLI's screenshot command, which saves to ./screenshots:

DEMO=1 pebble build && pebble screenshot --all-platforms

Note: you may need to run pebble wipe if the emulator stalls and try again.

resources/      # Static assets (e.g. icon font)
scripts/        # Utility scripts (e.g. icon generation)
src/
  c/            # C code
    generated/  # Generated C code (e.g. from generated icons)
    modules/    # C modules (settings, weather, etc.)
    ui/         # Custom UI widget implementations (e.g. graph, event layer)
    main.c      # C entrypoint
  pkjs/
    index.js    # Phone-side weather & location data fetching

This watchfaces uses icons from the Carbon icon set, which has the most exhaustive set of weather icons I could find. The name is a coincidence, I named the watchface Carbon before I found the icon set.

Icons are included as a custom font generated from IcoMoon. The src/embeddedjs/assets/icons.icomoon.json file can be imported into IcoMoon to edit the icon set. When icons are added, removed, or rearranged, the font must be re-exported from IcoMoon (with font family set to "IcoMoon"), and both the TTF and the JSON selection file must be replaced.

Move the downloaded TTF font file to resources/fonts/IcoMoon-Regular.ttf (the -Regular suffix is important!) and the JSON selection file to resources/fonts/icons.icomoon.json, then regenerate the reference table:

npm run gen-icons

This will update src/c/generated/icons.h with the icon names and codepoints, which can be used in C code as ICON_<NAME> (e.g. ICON_SUN).

GPL-3.0