Carbon - Pebble Weather Watchface

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.

Features

• 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).

Settings

• 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

To do

• 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)

---

Reporting Issues

You may choose to report an issue either through the "contact developer" link in the Pebble app store or by opening a new issue on the project's GitHub repository.

If you're experiencing unexpected behavior, the Debug section at the bottom of the settings page can help identify the cause and gives us a snapshot of everything the watchface knows at that moment. Ideally, bug reports should include this debug information to assist in troubleshooting.

To access it:

1. Open the Pebble app and tap the gear icon next to Carbon to open settings.
2. Scroll to the bottom of the settings page and expand the Debug section.
3. Review the data inline, or tap Copy debug info to clipboard to grab it all as JSON.

The clipboard JSON contains everything displayed in the Debug section, including:

• activeWatchInfo — watch hardware, platform, and firmware version
• buildInfo — build metadata including version, git commit hash, branch, dirty flag, and build date
• cache — the full weather payload including fetch time, expiry, and all hourly data
• settings — current Clay settings stored on the phone

Before sharing debug info in a GitHub issue, obfuscate the lat and lon values inside cache.payload and anything else you deem sensitive to protect your location privacy.

---

Development

Prerequisites

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

Code completion

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 & run in emulator

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.

Emulator config page

To test the config page with the emulator:

pebble emu-app-config

Install on your device

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 Build & Screenshots

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.

Project Structure

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

Debug Info

The settings page includes a Debug section (collapsed by default) powered by the debug-info custom Clay component in src/pkjs/config/debug.js. It reads the weather cache and current Clay settings from localStorage at the moment the settings page is opened, merges in the active watch info from the Clay runtime, and renders each key as a collapsible <details> block.

Build metadata is written to .buildinfo.json (gitignored) at the start of every pebble build and bundled into the JS. It contains:

{
  "version": "1.4.0",
  "hash": "abc1234",
  "branch": "main",
  "dirty": false,
  "buildDate": "2026-07-03T15:00:00+00:00"
}

To add new fields to the debug output, add keys to the object returned by formatDebugInfo() in src/pkjs/index.js. The component renders any key it receives without needing changes.

Icons

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).

---

License

GPL-3.0