Hug O’Clock

Introduction

Hug O'Clock is a cute and cozy smart desk clock designed to keep long-distance couples feeling close, no matter the miles between them. Like any regular desk clock, it displays the time, date, temperature, and humidity, but what makes it special is its ability to show sweet messages from your partner. Whether it's a virtual hug, a little motivational boost, a funny joke, or a heartfelt "I miss you, " Hug O'Clock brings warmth and connection to your day with every glance.

Story

We’re starting off by building a fully functional desk clock that shows time, date, temperature, and humidity just like any standard smart clock. Once that’s up and running, we’ll take things to the next level by adding a communication system using MQTT. This will let the clock receive messages remotely, so your partner can send virtual hugs, sweet notes, or even a little joke to brighten your day. The idea is to make Hug O’Clock not just a clock, but a tiny, always-there connection between you and your loved one, no matter the distance.

Desk Clock

To build this clock, I started by searching for a 3D design of a Wio Terminal stand. Luckily, I found one pretty easily on Thingiverse. After downloading the file, I moved on to the next step—printing it using a 3D printer. The process took some time, but it was exciting to see the stand slowly take shape. And now, here’s the final result.

Thanks to felse for amazin 3d stand: https://www.thingiverse.com/thing:6352130

After that, I moved on to building the clock in a simple way. Here, I’m using several libraries that are already well-developed and easy to use, which I found on Seeed Studio’s official wiki. For measuring temperature and humidity, I’m using the Grove SHT4X sensor to display the data on my desk clock. If you’re interested in making one yourself, here are some tutorials you can check out.

RTC = https://wiki.seeedstudio.com/Wio-Terminal-RTC/

Basic Graphical = https://wiki.seeedstudio.com/Wio-Terminal-LCD-Graphics/

Grove SHT4X = https://wiki.seeedstudio.com/Grove-SHT4x/

I believe that if you want to build a simple desk clock, you’ll eventually be able to make one yourself. By combining the tutorials from those three pages, we can put together a fully functional desk clock just the way we want it. The one I’m making will display the time, date, day, temperature, and humidity. And here’s the final result.

What makes this clock unique is that I added a function to change the color theme, so you can customize it however you like. I’ve provided 15 different themes to choose from, but of course, you can always add your own if you want something more personal. To switch themes, I’m using the three buttons on top of the Wio Terminal—one for next, one for restart, and one for previous. This makes it super easy to cycle through the themes and find the one that suits your mood. If you want to learn how to access the buttons on the Wio Terminal, you can check out this tutorial.

Button = https://wiki.seeedstudio.com/Wio-Terminal-Buttons/

And here’s a description of all the themes available on the Wio Terminal. Of course, you can always tweak them or create your own to match your personal style.

// List of color themes
struct Theme {
    uint16_t background;
    uint16_t text;
    uint16_t highlight;
};

Theme themes[] = {
    {TFT_WHITE, TFT_BLACK, TFT_BLUE},    // Default
    {0x07FF, TFT_BLACK, TFT_RED},        // Navy Blue
    {0x0008, 0xFFD6, TFT_YELLOW},        // Elegant
    {TFT_BLACK, 0x07E0, 0x0320},         // Neon Green
    {0xF4E1, 0x5B5F, 0xFFC8},            // Pastel
    {0xCE79, 0x0000, 0xF800},            // Maroon
    {0x07E0, 0xFFFF, 0x001F},            // Fresh Green
    {0xF81F, 0x07E0, 0xFFE0},            // Neon Pink
    {0x8C51, 0xF800, 0x07FF},            // Yellowish Brown
    {0xA514, 0xFFFF, 0xF81F},            // Pastel Purple
    {0x7BEF, 0x5AEB, 0x07E0},            // Soft Gray
    {0xFFDF, 0x3B5F, 0xBDF7},            // Warm Yellow
    {0x028A, 0xFFFF, 0xFF3C},            // Bright Tosca
    {0x0451, 0xFFC0, 0x001F},            // Sky Blue
    {0xE73C, 0x0410, 0x0FF0}             // Dark Magenta
};

And here’s the final result! Just a quick note, if you’re only interested in the desk clock itself without the messaging feature, I’ve also provided a separate code just for the clock function. This way, you don’t have to deal with the data transmission system. All you need to do is rename the clock and upload the code to your own Wio Terminal. Simple and hassle-free!

Send Data using MQTT

Next, I’ll be working on a system to handle data transmission. For this, I’ll be using the MQTT communication protocol. I chose MQTT because it’s easy to use for sending data and can be expanded or integrated with other systems in the future. This makes it a great choice for building a flexible and scalable messaging system for the clock.

This time, I’ll be using a ready-made app that I downloaded from the Play Store called MQTT Dash. This app provides a simple way to create basic applications using the MQTT communication system. If you’re familiar with Blynk, then you’ll have no trouble using MQTT Dash, it works in a similar way and is super easy to set up. And here’s a look at the design I’ve created within the MQTT Dash app.

We can write a simple piece of code to subscribe to broker.hivemq.com, a free-to-use MQTT broker. Next, we’ll create a topic called wio/terminal. Once the topic is set up, we can subscribe to it, allowing the Wio Terminal to listen for incoming messages. So, whenever we send data from the MQTT Dash app, the message will be received and displayed on the Wio Terminal in real-time. Pretty cool, right?

Here, I’m using four different messages, each acting as a unique trigger to execute a different piece of code. The message with number 1 triggers a virtual hug, number 2 sends a keep fighting message, number 3 is for fun words, and number 4 delivers a missing you message. This way, each message has its own special meaning and action on the Wio Terminal.

Next, we’ll modify the existing clock code by adding functionality to display the different messages triggered by each command. This modification will allow the Wio Terminal to show the appropriate message whenever a specific trigger is received. Below is a snippet of the modified program that we’ll insert into the void loop section.

else if (flag_status == 4){
    tft.setRotation(3);
    tft.fillScreen(tft.color565(200, 200, 255)); // Warna biru muda lembut

    tft.setFreeFont(&FreeSansBoldOblique18pt7b);
    tft.setTextColor(TFT_BLACK, tft.color565(200, 200, 255));  // Teks hitam di latar biru muda

    tft.drawString("I miss you!", 80, 80);
    tft.drawString("Thinking of you", 30, 120);
    tft.drawString("all the time!", 70, 160);

    // Gambar simbol hati yang berdetak
    int heartX = 160;  // X-center hati
    int heartY = 50;   // Y-center hati
    // Gambar dua lingkaran untuk bagian atas hati
    tft.fillCircle(heartX - 6, heartY, 6, TFT_RED);
    tft.fillCircle(heartX + 6, heartY, 6, TFT_RED);
    // Gambar segitiga untuk bagian bawah hati
    tft.fillTriangle(heartX - 12, heartY + 2, heartX + 12, heartY + 2, heartX, heartY + 18, TFT_RED);
    delay(10000); // Delay before returning to main UI
    flag_status = 0;

    // --- Fix: Refresh UI Properly ---
    applyTheme();  // Restore theme background and text color
    for (int i = 0; i < 255; i += 15) {
    tft.fillScreen(themes[themeIndex].background);
    delay(10);
}

And here’s the final result! These are some of the messages that will be displayed for each trigger:

• Virtual Hug : Hey You! Here's a big virtual hug!
• Keep Fighting: Keep Going! You're doing amazing!
• Fun Words: Life is shord, smile while you have teeth!
• Missing You: I Miss you! Thinking of you all the time!

Testing

In the end, Hug O’Clock is more than just a desk clock—it’s a little reminder that love knows no distance. With every glance, you’ll not only see the time but also feel the warmth of a message from someone who cares about you. Whether it’s a virtual hug, a sweet note, or just a simple “Keep going!” this clock keeps the connection alive in a fun and heartfelt way. Because sometimes, a little message is all it takes to make your day.

Documentation

Scroll to the right side! There are lots of documentation photos.