Casio Watch Face

When it comes to smartwatches and fitness trackers, the Amazfit Bip is my flavor of choice. It’s cheap, replaceable, lasts 30+ days, and fulfills my needs for glancing at notifications and sleep/health tracking. A watch is a reflection and extension of you; it shows your style, fashion, and maybe even wealth status. The point is, it is highly customizable.

My all time favorite wrist watch was the Casio CA53W-1. Ever since I watched Back to the Future as a kid, I had to have that retro timepiece on my wrist. A smartphone has readily replaced the need to have a calculator on you at all times, but it still holds a dear place in my heart and I wanted to give my Bip an upgrade.

• 

• 

Luckily custom watch faces are readily available from a plethora of sources, but using somebody else’s design defeats the whole “reflection of you” thing. Not only that, but at the time I made this, not a single one existed that mimicked the Casio watch. I wanted to stay as true to the original as possible, but not leave out some of the Bip’s awesome features.

The most important part of this was using the proper color palette. The Bip supports a whopping 8 colors on it’s e-ink display (9 if you count transparent pixels). The secret is you can do a lot with those 8 colors using dithering and color indexing. In Photoshop, go to Image > Mode > Indexed Color. For the palette, select “Uniform” and for “Colors” type 8 and select “Transparency”. This will split the normal 256 8-bit colors into the 8 that we need. You can see the colors by going to Image > Mode > Color Table. You should see the 8 colors: White, Yellow, Fuchsia, Red, Cyan, Green, Blue, and Black. Try pasting an image and see what happens.

• 

• 

The first challenge was resizing and pixelizing the face to fit the tiny 176×176 screen. Using photos from online and a photo of my own Casio, I started shrinking and scaling to the square form factor. Once I had something to work with, I had to start manually editing pixels. For some things like the buttons, it was easier to just create a dithered pattern instead of using the image. For the fonts I found a few free pixel lcd fonts that seemed appropriate and worked well in small sizes. The Watch Face Editor tool also has a nice font sprite creator where you can upload a custom font. Most of the icons like the weather and symbols were stock. The “screen” of the Casio was one of my favorite parts. I removed black from the indexed palette and converted a yellowish-green block to match that famous LCD color. This was so that the numbers and icons could be black and would not interfere or have any weird edges when placed on top of the screen background.

• 

• 

• 

I would recommend unpacking a few of your favorite faces to see how they are built and utilize some of the assets for your own face. Using the Watch Face Editor you can load those image assets and JSON and start modifying.

I kept the time and date as close to the original as I could, but removed the seconds (as constantly updating the face kills the battery). Then filled in the spaces with other Bip feature icons like battery level, alarm status, screen lock, goal completion, DND mode, date, bluetooth status, weather and temperature. Now obviously I can’t implement the calculator functionality, but that’s not really the point.

The finishing touch was adding a custom watch band. Even though the stock rubber band was probably closer to the original, I decided to add a leather band (remember my customization rant). Luckily the Bip accepts any 20mm watch band, which includes the CA-53W’s original strap (Casio Part # 71604130).

• 

• 

The result is an awesome watch face that always gets questions and double-takes.

Helpful Resources:
Watch Face Editor (Newer)
Watch Face Editor
Tons of other free Watchfaces
Great General Guide
Another Helpful Guide
Breakdown of the JSON functions (Translated)
Bitbucket with packing/unpacking tools