BRUTAL

12 min read Original article ↗

Brutal is free an open source watchface for Pebble smartwatch created during Hackathon #002 organized by Rebble at the beginning of March 2025.

Watchface on Pebble 2 When Quick View is active

Watchface is available in Pebble Appstore for each platform:

tl;dr

Backstory

Pebble, the company, is dead since December 2016, RIP. But with the end of January 2025 Pebble Operating System got open sourced by Google. In practice this means that anyone can now produce smartwatch using this OS. With that resurrection of Pebble began. Eric Migicovsky (founder of Pebble) started working on new devices and second Rebble Hackathon was announced. A great place to get stronger and test once skills as designer and programmer. Challenge accepted.

First rule of Hackathon is: you do not talk about Hackathon. At least not all the time. Apologies to those that had to listen me talking about it way too often. Rules are simple: sign in, work on anything related to Pebble smartwatch for a full week, post progress on Discord and release project before deadline. I participated in first Hackathon few years ago, which lasted only a single weekend, creating pRebble watchface. It was a great success but that project imitated already established design patterns. This time I was about to make my own design rules ... then break them, hehe.

Brutalist architecture

Idea

When using Pebble daily I always eventually ditch fancy watchfaces in favor of simplest, as big as possible, digital time in black and white. Examples of those are: Big Shadow, Pixwag, Metro Watch and Glow. Those are some of the Pebble timeless classics but I have few issues with them, like: lack of support for Quick View (it's a small popup on main screen), no customization, no date, too stylized font decreasing readability. I wanted to tackle those problems by making my own, ultimate, big text, no bullshit watchface.

Also there is an ongoing discussion whether the new Pebble should have color or 1-bit black and white (BW) display. I wanted to comment on that by making a watchface that looks great on BW display, where colors don't add much to it. I agree that color is fun, but 1-bit BW display is more practical and IMHO fit's Pebble more making it even more unique.

Plan:

When targeting 1-bit displays I'm limiting myself to straight lines and 45 degree angles (watch this to understand why) which makes font very geometric. All of that made me think about Brutalist architecture that supposed to be simple, honest, with focus on function and purpose. Buildings in that style are usually big, bold, made from simple geometric shapes. There was no better theme for my project. I was onto something.

Pebble Steel black on white Pebble Steel white on black

Design

Someone said:

I‘d love to know why BRUTAL is „stunning“ or „looking great“.

The secred ingreedient of my secred ingreedient design is perfect grid layout:

  1. 5px gap from edges, between each row and column
  2. Big proportional font build from 5x5px blocks
  3. Big font build from thick 20px thick lines
  4. Big font with 5px wide gaps
  5. Small monospace font build from 6x8px blocks
  6. Small font characters separated by 2px gaps
  7. Tiny font from 4x5px blocks
  8. Tiny font characters separated by 2px gaps

watchface grid layout Screenshot of design

Besides the grid, other things that make this design work are:

  1. Building big font from uniform blocks make it feel strong
  2. Big size contrast between big and small fonts helps make big font feel even bigger
  3. Big numbers are not monospace, this helps make shapes more diverse and by that easier to read
  4. Use of only uppercase letters in small and tiny fonts helps create straight lines
  5. Importance of information is emphasized by font sizes, time is most important, then maybe date, but not essential, lastly tiny font which is mostly for decoration and balance

Main font deliberately covers big area and have small gaps to looks like massive building. Accidentally this solve issue of Quick View covering 1/3 of the screen. First row can be faded to background with dithering effect. To make information about current hour still fully available, a small font is used in corner.

Dither effect with Quick view Shadow effect Second shadow effect

During hackathon dithering effect used in Quick View became a favorite of many who tried the watchface when it was in early stage of development. I liked it too. It helped fill empty space with gentle noise and add depth, almost like third plan. So I made it a part of main view and called it "the shadow". Shadow prints the same numbers from given row but from left to right. So it's only visible when there is at least one number in row that is not as wide as 0.

Picture of dithering effect Picture Quick view

Code

I just have to render 4 lines of text. What can possibly go wrong? Right? RIGHT? Well, here is a list of problems to solve:

  1. I have to load 3 custom fonts
  2. Rendering text from right to left is more difficult
  3. Rendering dithering effect inside font
  4. Oldest of Pebbles has only 128KB of memory and 24KB of RAM
  5. Because of memory issue big font is scaled down 5 times
  6. Scale up big font in runtime preserving 45 deg edges
  7. Content of both text lines has to be customize by user

I had working basic watchface on day one. It was the support for Quick View, memory issue, custom runtime font scaling and settings with customization options that took almost whole week of coding for many hours a day to complete. The Pareto principle at it's best. Good think I took a holiday at work for hackathon.

BTW Pebble is an interesting platform because front-end is written in C but back-end in JavaScript. 

// Dithering secret technique
static const uint8_t map[8][8] = {
	{   0, 128,  32, 160,   8, 136,  40, 168 },
	{ 192,  64, 224,  96, 200,  72, 232, 104 },
	{  48, 176,  16, 144,  56, 184,  24, 152 },
	{ 240, 112, 208,  80, 248, 120, 216,  88 },
	{  12, 140,  44, 172,   4, 132,  36, 164 },
	{ 204,  76, 236, 108, 196,  68, 228, 100 },
	{  60, 188,  28, 156,  52, 180,  20, 148 },
	{ 252, 124, 220,  92, 244, 116, 212,  84 }
};

Overall everything went smoothly. Even writing the custom scaling algorithm was not too difficult. It was only the memory issue that took me so much time. There was no apparent error or mistake in code. Only after laborious debugging through experimentation I found out that it is the resource image with font glyphs that was the problem. Big thanks to user @NiVZ for helping me with debugging.

Here you can see how big font looks:

  1. before resizing
  2. after resizing without 45 deg edges
  3. and after I broke it <sigh>

Screenshot from development Screenshot from development Screenshot from development 

// Detecting 45 deg edges
neighbors = 0;

if (GET_BIT(*pixels, x-1, y-1)) neighbors |= 0b10000000;
if (GET_BIT(*pixels, x  , y-1)) neighbors |= 0b01000000;
if (GET_BIT(*pixels, x+1, y-1)) neighbors |= 0b00100000;
if (GET_BIT(*pixels, x-1, y  )) neighbors |= 0b00010000;
if (GET_BIT(*pixels, x+1, y  )) neighbors |= 0b00001000;
if (GET_BIT(*pixels, x-1, y+1)) neighbors |= 0b00000100;
if (GET_BIT(*pixels, x  , y+1)) neighbors |= 0b00000010;
if (GET_BIT(*pixels, x+1, y+1)) neighbors |= 0b00000001;

switch (neighbors) {
case 0b11010000: tile = CORNER0; break;
case 0b01101000: tile = CORNER1; break;
case 0b00001011: tile = CORNER2; break;
}

Below is an image used as glyphs atlas for 3 fonts, web developers know such images as sprites. The same principle, parts of single image are used as font glyphs. First image was used until I discovered that it's too big for oldest Pebble. Second is packed version with big font scaled down 5 times. It was possible to scale it down as it was build from 5x5px blocks but I also had to store 45 deg angles (next to big number 4) to restore them in runtime. Incredible how much information can fit in such small space. And this tiny image looks so cute AWWW.

Glyph atlas before optimization Glyph atlas after optimization

Round

Yeaa, there is also a Pebble Time Round ... with, you know, round display. I was hoping that no one will ask me to make this watchface work on Pebble Round, but sure they did. And I tried, I rly tried to make it work. But in the end round display works very poorly with text. And this design is a text and text with some text on the side. I did my best but in the end the Pebble Round version is mostly the same as Quick View but with everything centered.

Photo of Pebble Time Round

I don't want to talk about it. It's ffffine

Config

It's true that I broke my own no decorations design rule. You can fix that yourself.

  1. Set background color to white, reduce shadow density to 8
  2. Set side text to empty value and shadow to 0
  3. Hide leading 0 in hours and remove day name
  4. Remove bottom text entirely (which is probably too much)

You can also add more stuff like battery charge percentage and daily steps counter. The choice is yours. Choose wisely.

Summary

I'm very happy with the results. Even tho on the surface it looks just like a basic digital watchface with 4 lines of text it was much more than that. Many composition and typography problems had to be solved, drawing each font by hand many many times, testing, fixing memory issue by implementing clever optimization, testing, preparing screenshots and videos for releases, testing, deploying new versions with new features, adjusting design after making new discovery and did I mentioned testing?

But more then that I could observe other hackathon projects like:

I can safely say that BRUTAL watchface was very well received by the Pebble community. I got many likes in App Store and many comments on Discord. Thank you for the support, and thanks to the organizer @Will for making this happen. Here are few pictures of my watchface send to me during Hackathon:

Pictures by: @lavender, @Heiko, @ramabary, @irek, @Logoman, @Nikki, @Ryan D., @Chris Lewis, @ericmigi, @Flynn, @shaunlangers

Version 4 release

I was quietly enjoying all the fortune and glory, thinking I'm done with this project. But gods laugh at me once more as Eric Migicovsky launched Pre Order website with "Core Time 2", Pebble with bigger screen, of different resolution ... eh. Thank you Eric, thank you.....

Very soon people started asking about support for this platform (called Emery) in Brutal watchface. But I don't have vector fonts, it's all bitmap and pixel perfect. One pixel can disturb delicate structure of design. I was not emotionally prepared to go back and redesign layout for bigger display. Thought about Brutal not working on the newest hardware was bothering me for few days and this week I finally did it. Yes! Brutal watchface supports all Pebble devices, again (-_- )

Different emulators running Brutal

At first I couldn't get it to work. Big font was either too big or too small. Took me few days to realize that if I sacrifice margin on the edges of the screen then I can fit everything just by scaling main font 7 times. It is scaled up 5 times on other platforms. Originally in my perfect grid layout the margin between screen edges and each font layer, and each big font digit was the same. On the Emery platform margin on the edges is smaller. Honestly, it's for the better. And it all just works.

Almost, hehe (^^ )

I had to cleanup code a lot to make spacing and sizes more configurable. But in the end it was that simple. Making custom scaling code paid off. Can't wait to see it on real hardware.

Few more things happened in v4. Someone wanted to display seconds in Bottom or Side text layers. This is already possible thanks to standard date/time string formatting used in settings. But the problem was that refresh rate was not fast enough. Screen is redrawn only when necessary. Hours on each hour, minutes each minute, date each day, battery charge percent when needed etc. So we decided to make it refresh screen each second for 5 seconds when on Tap event. Tap happens when you shake your Pebble to light up the display. Idea works great. You can add seconds to Bottom text layer and every time you shake your wrist you will see the seconds updating but then it stops to preserve battery.

Another addition was the spread feature. It allows to divide Bottom or Side text content into two parts that are spread apart with spaces as much as possible. With that you can for example have date in bottom left corner and seconds in bottom right corner. Or in the side layer have date at the top and battery charge percent on the bottom.

That's all for the v4 release. My mind is finally at peace. I will go rest now. I can fix a bug or two when necessary, but no more feature request! And please no more platforms. BTW if I ever make another watchface it will be all in vectors. Pixels are so last season.

Comment on Reddit

Changelog: