Building The Ultimate Cat Watch
Tags: iot, cats, beginners, tutorial
Published: 2020-07-08 14:46:52

---
title: Building The Ultimate Cat Watch
published: true
description: I got my hands on a LilyGo T-Watch 2020 and decided to build the ultimate cat lover accessory. Join me as I take you through building the ultimate cat watch.
canonical_url: https://devopstar.com/2020/07/08/building-the-ultimate-cat-watch
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/l6rjsxi99vb9heijf8xb.jpg
tags: iot, cats, beginner, tutorial
---

If you've ever met me you'll know that I love my cats. You'll also know that a fair few of my past my tech projects have revolved around my furry family members. So when I got my hands on some brand new [LilyGo T-Watch 2020](https://www.tindie.com/products/ttgo/lilygor-ttgo-t-watch-2020/)'s recently I knew I had to build the ultimate cat loving accessory for myself.

### What Watch?

The LilyGo T-Watch 2020 is the recent revision of the LilyGo T-Watch line. These aren't your typical smart watches, as they are completely open source and fully programmable meaning that you have total control over the software that runs on the device.

![LilyGo T-Watch device](https://dev-to-uploads.s3.amazonaws.com/i/vckaswyalqnziaxulyfu.png)

Not only that but the watch has really awesome spec, especially given the ~$30 price tag. Some of the highlights are:

* **ESP32** - Regular readers will note how much I love this chip
* **1.54 inch LCD** - Color screen!
* **FT6236U Touch controller** - Because a smart watch without a touchscreen isn't really a smart watch
* **WiFi & Bluetooth** - Connectivity to keep us... errr... connected
* **Triaxial accelerometer** - Step counter
* Vibration motor, Speaker, Infrared signal sensor and a Real Time Clock (obviously)

All this compressed down into a nice wearable form factor that makes this unit truly awesome as a platform for wearable projects.

### The Plan

![Cat watch plan](https://dev-to-uploads.s3.amazonaws.com/i/xydhiwm0t9gvzjcv17kc.png)

I don't start any project without a clear vision of what I want the achieve. In this case it was simple; Two steps:

1. Take a picture of my cat and put it on the watch (**Critical**)
2. Display the current time (**Less Critical**)

### Programming The Watch

Getting started with programming on the T-Watch is done easiest through the use of [PlatformIO](https://platformio.org/). PlatformIO is a truly awesome echo-system for working with embedded devices as it handles all the annoying project configurations and dependency loading for you.

#### Setting up Platform IO

PlatformIO works best with [VSCode](https://code.visualstudio.com/download), so if you haven't already got the IDE installed go ahead and do that first. Then once installed, head over to the Extension manager and install [PlatformIO IDE](https://marketplace.visualstudio.com/items?itemName=platformio.platformio-ide)

![PlatformIO IDE extension install (taken from platformio.org)](https://dev-to-uploads.s3.amazonaws.com/i/nfpj2b21ah73085237po.png)

#### Importing the Project

Now for you guys following along at home, I'll cut to the chase and give you the code that you can pull down and follow along with. Clone the repo and open it up in VSCode.

```bash
git clone https://github.com/t04glovern/ultimate-cat-watch.git
```

The magic of PlatformIO means that everything else is handled for you! But lets take a look behind the curtains to see how it works. Checking out the `platformio.ini` file you can see that everything that is needed to setup your environment for flashing code to the watch is seen there:

```ini
[env:ttgo-t-watch]
platform = espressif32
board = ttgo-t-watch
framework = arduino

monitor_speed = 115200

lib_deps =
  TTGO TWatch Library
```

Have a look in the `src` folder for all the code related to this project that can be flashed to your watch. Lets dive into what the code does and how it can be changed to display my cat!

#### cat_font.c

`cat_font.c` is a C (the programming language) formatted font file. Since the watch has no concept of what a font is, we need to convert a font to a format that is basically a list of the pixels that need to be written to the screen to display each letter.

Luckily there's a fantastic tool that does this for us on the [LVGL website called fontconverter](https://lvgl.io/tools/fontconverter). Find a font that you like, I personally picked [Kurri Island - Måns Grebäck](https://www.1001freefonts.com/kurri-island.font) and downloaded a copy of the `.ttf` file.

Then navigate back to the **fontconverter** tool and upload the file. Copy down similar settings to what I've used, and define all the symbols you want converted (I've just used the numbers 0-9).

![LVGL fontconverter settings](https://dev-to-uploads.s3.amazonaws.com/i/d99q1keskeo86iping16.png)

> Note: *The settings you use might need some tweaking, you'll be able to adjust the settings later once you flash the code and see how it looks*

When you hit convert you'll be given an output file called `cat_font.c` which can be placed to override the existing file I had in the [ultimate-cat-watch](https://github.com/t04glovern/ultimate-cat-watch) project.

#### cat_png.c

`cat_png.c` is similar to the font file from above, however instead we're dealing with an entire image that needs to be converted to a C (the programming language) Array.

Luckily there's a tool for doing this as well on the [LVGL website called imageconverter](https://lvgl.io/tools/imageconverter). Find an image you want to display on the watch; **making sure it has a resolution of roughly 240x240**. You can use sites like [picresize.com](https://picresize.com/) to change the dimensions of your image.

Here's a picture of my cat if instead you just want to use her!

![Sample cat image](https://dev-to-uploads.s3.amazonaws.com/i/llz3jesup7l1783k1s7q.jpg)

Upload the image and use similar settings to what I have used below:

![LVGL imageconverter settings](https://dev-to-uploads.s3.amazonaws.com/i/yuzu9f0lh79x52r2rukb.png)

Click convert and you'll be given an output file called `cat_png.c` which, like before can be placed to override the existing file I had in the [ultimate-cat-watch](https://github.com/t04glovern/ultimate-cat-watch) project.

#### main.cpp

`main.cpp` is the heart of our code and is what brings everything together. Most of the code is copied from the excellent [BatmanDial example in the offical TTGO_TWatch_Library](https://github.com/Xinyuan-LilyGO/TTGO_TWatch_Library/tree/master/examples/LVGL/BatmanDial) but I've added my own spin.

We start out in the `setup()` function by initializing the watch, clock, and enable the backlight and set it to 150

```cpp
    Serial.begin(115200);
    watch = TTGOClass::getWatch();
    watch->begin();
    watch->lvgl_begin();
    rtc = watch->rtc;

    // Use compile time
    rtc->check();

    watch->openBL();

    //Lower the brightness
    watch->bl->adjust(150);
```

Then using the LVGL functions we can set the background source image to be the `cat_png` C file that was generated

```cpp
    lv_obj_t *img1 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img1, &cat_png);
    lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, 0);
```

The last important line that may change for you depending on if you changed the font (or the font name) is just below where the image background is set. We create a LVGL style and set the font C file and font color.

```cpp
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_text_color(&style, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_text_font(&style, LV_STATE_DEFAULT, &cat_font);
```

The rest of the code is simply laying out the format of the on-screen clock, and telling the watch how regularly to update the display

### Flashing the Code

We're finally ready to flash out code! You'll need to plug in the LilyGo T-Watch into your computer using the provided USB cable first obviously.

![LilyGo T-Watch connect USB cable to computer](https://dev-to-uploads.s3.amazonaws.com/i/1iwrqbiwmakvkd8at17i.png)

Head to the bottom of the VSCode screen and click the `->` arrow to begin compiling and uploading the firmware to the connected device

![PlatformIO Firmware upload button](https://dev-to-uploads.s3.amazonaws.com/i/bwoz9pf7v41bg5vedgfi.png)

Once the upload is complete, the watch should automatically start up and display the image of my (or your) cat.

![Unimpressed cat with watch](https://dev-to-uploads.s3.amazonaws.com/i/3337xnrnf95fx7mg0f3v.png)

## Conclusion

The LilyGo T-Watch 2020 is a fun little hobby device that hits the mark perfectly with the price point. Paired up with PlatformIO and you have a match made in heaven for beginners looking for something fun to do in the embedded space

I'm interested to hear what you think about the LilyGo T-Watch, hit me up on [Twitter @nathangloverAUS](https://twitter.com/nathangloverAUS) if you have any thoughts or questions