The first step in the entire process is to connect our power source, which is a 14500 3.7V 600mAh Li-ion cell with a PCM.

The PCM has a DW01 Circuit that gives the cell low and high cut features, which are necessary for charging and discharging the cell correctly without causing a blast.

• First, we connected the lithium cell's positive and negative terminals to the TTGO Board's positive and negative battery terminals.
• Next, we attached a switch between the TTGo board and the battery connections. We soldered one end of the positive wire from the battery to the switch's NO terminal, and the switch's NC terminal is linked to the TTGO battery terminal's positive terminal. To break power between the battery and the TTGO board, we installed this switch between them.

This was the code we used in this project, and it’s definitely not the simplest one. First, I want to give a shout-out to the absolute legend nikthefix—thanks to the repository he made for this display, we were able to work with it without relying on the code provided by TTGO.

We mostly followed the code structure from nikthefix’s repo and kept the AXS15231B header and implementation files, which handle communication with the display hardware, including sending pixels, drawing shapes, and initializing the screen.

#include "AXS15231B.h"
#include "pins_config.h"

#include <WiFi.h>
#include <NTPClient.h>
#include <WiFiUdp.h>

#define SCREEN_W 640
#define SCREEN_H 180
uint16_t frameBuffer[SCREEN_W * SCREEN_H];

#define RECT_WIDTH  (SCREEN_W / 3)
#define RECT_HEIGHT SCREEN_H

int scale = 6;  // bigger numbers

#define GREEN 0xE007
#define BLACK 0x0000

const uint8_t font5x7[][5] = {
  {0x3E,0x51,0x49,0x45,0x3E}, // 0
  {0x00,0x42,0x7F,0x40,0x00}, // 1
  {0x42,0x61,0x51,0x49,0x46}, // 2
  {0x21,0x41,0x45,0x4B,0x31}, // 3
  {0x18,0x14,0x12,0x7F,0x10}, // 4
  {0x27,0x45,0x45,0x45,0x39}, // 5
  {0x3C,0x4A,0x49,0x49,0x30}, // 6
  {0x01,0x71,0x09,0x05,0x03}, // 7
  {0x36,0x49,0x49,0x49,0x36}, // 8
  {0x06,0x49,0x49,0x29,0x1E}, // 9
};

// WiFi credentials
const char* ssid = "add your SSID";
const char* password = "add your PASSWORD";

// NTP Client
WiFiUDP ntpUDP;
NTPClient timeClient(ntpUDP, "pool.ntp.org", 19800); // IST

void drawCharScaled(uint16_t *buf, int w, int x, int y, char c, uint16_t color, uint16_t bg, int s){
    if(c<'0' || c>'9') return;
    int idx = c - '0';
    for(int col=0; col<5; col++){
        uint8_t line = font5x7[idx][col];
        for(int row=0; row<7; row++){
            uint16_t px_color = (line & (1<<row)) ? color : bg;
            for(int dx=0; dx<s; dx++){
                for(int dy=0; dy<s; dy++){
                    int px = x + col*s + dx;
                    int py = y + row*s + dy;
                    if(px<w && py<SCREEN_H) buf[py*w + px] = px_color;
                }
            }
        }
    }
}

void drawTextScaled(uint16_t *buf, int w, int x, int y, const char* text, uint16_t color, uint16_t bg, int s){
    while(*text){
        drawCharScaled(buf, w, x, y, *text, color, bg, s);
        x += (5+1)*s;
        text++;
    }
}

void fillRectBuffer(uint16_t *buf, int w, int x, int y, int rect_w, int rect_h, uint16_t color){
    for(int j=0;j<rect_h;j++)
        for(int i=0;i<rect_w;i++)
            buf[(y+j)*w + (x+i)] = color;
}

void drawRectBuffer(uint16_t *buf, int w, int x, int y, int rect_w, int rect_h, uint16_t color){
    for(int i=0;i<rect_w;i++){
        buf[y*w + x + i] = color;
        buf[(y+rect_h-1)*w + x + i] = color;
    }
    for(int j=0;j<rect_h;j++){
        buf[(y+j)*w + x] = color;
        buf[(y+j)*w + x + rect_w-1] = color;
    }
}

void setup() {
    pinMode(TFT_BL, OUTPUT);
    digitalWrite(TFT_BL, HIGH);
    axs15231_init();

    Serial.begin(115200);
    WiFi.begin(ssid, password);
    Serial.print("Connecting to WiFi");
    while(WiFi.status() != WL_CONNECTED){
        delay(500);
        Serial.print(".");
    }
    Serial.println("\nWiFi connected");

    timeClient.begin();

    // Draw static rectangles once
    fillRectBuffer(frameBuffer, SCREEN_W, 0, 0, SCREEN_W, SCREEN_H, BLACK);
    drawRectBuffer(frameBuffer, SCREEN_W, 0, 0, RECT_WIDTH, RECT_HEIGHT, GREEN);
    drawRectBuffer(frameBuffer, SCREEN_W, RECT_WIDTH, 0, RECT_WIDTH, RECT_HEIGHT, GREEN);
    drawRectBuffer(frameBuffer, SCREEN_W, RECT_WIDTH*2, 0, RECT_WIDTH, RECT_HEIGHT, GREEN);
    lcd_PushColors_rotated_90(0,0,SCREEN_W,SCREEN_H, frameBuffer);
}

int prevHours=-1, prevMinutes=-1, prevSeconds=-1;

void loop(){
    if(timeClient.update()){
        int hours = timeClient.getHours();
        int minutes = timeClient.getMinutes();
        int seconds = timeClient.getSeconds();

        char buf[3];
        int y_center = (SCREEN_H - 7*scale) / 2;

        // Only update digits that changed
        if(hours != prevHours){
            sprintf(buf,"%02d", hours);
            fillRectBuffer(frameBuffer, SCREEN_W, 0, y_center, RECT_WIDTH, 7*scale, BLACK);
            drawTextScaled(frameBuffer, SCREEN_W, RECT_WIDTH/2 - scale*6, y_center, buf, GREEN, BLACK, scale);
            prevHours = hours;
        }

        if(minutes != prevMinutes){
            sprintf(buf,"%02d", minutes);
            fillRectBuffer(frameBuffer, SCREEN_W, RECT_WIDTH, y_center, RECT_WIDTH, 7*scale, BLACK);
            drawTextScaled(frameBuffer, SCREEN_W, RECT_WIDTH + RECT_WIDTH/2 - scale*6, y_center, buf, GREEN, BLACK, scale);
            prevMinutes = minutes;
        }

        if(seconds != prevSeconds){
            sprintf(buf,"%02d", seconds);
            fillRectBuffer(frameBuffer, SCREEN_W, RECT_WIDTH*2, y_center, RECT_WIDTH, 7*scale, BLACK);
            drawTextScaled(frameBuffer, SCREEN_W, RECT_WIDTH*2 + RECT_WIDTH/2 - scale*6, y_center, buf, GREEN, BLACK, scale);
            prevSeconds = seconds;
        }

        lcd_PushColors_rotated_90(0,0,SCREEN_W,SCREEN_H, frameBuffer);
    }
}

The code begins by adding Libraries and the custom header files that are required for Wi-Fi, NTP Server, pin definitions and Display initialization.

The AXS15231B library handles the AXS15231 display, including initialization and drawing functions.

pins_config Contains your pin definitions for the display, backlight, and other hardware connections.

Wifi.h is the ESP32 Wi-Fi library for connecting to a wireless network.

NTPClient is used for getting the current time from an NTP server over the internet.

the WiFiUdp is the UDP protocol library required by NTPClient to fetch time.

Display and Graphics Setup

#define SCREEN_W 640#define SCREEN_H 180uint16_t frameBuffer[SCREEN_W * SCREEN_H];#define RECT_WIDTH (SCREEN_W / 3)#define RECT_HEIGHT SCREEN_Hint scale = 6; // scaling factor for bigger digits#define GREEN 0xE007#define BLACK 0x0000

This section specifies the height and width of the screen, the rectangle width, the pixel buffer, and the digit scaling. Frame Pixel colors are saved in a buffer before being sent to the LCD. The RGB565 16-bit format is used to define colors.

Font Definition

const uint8_t font5x7[][5] = {  {0x3E,0x51,0x49,0x45,0x3E}, // 0  {0x00,0x42,0x7F,0x40,0x00}, // 1  {0x42,0x61,0x51,0x49,0x46}, // 2  {0x21,0x41,0x45,0x4B,0x31}, // 3  {0x18,0x14,0x12,0x7F,0x10}, // 4  {0x27,0x45,0x45,0x45,0x39}, // 5  {0x3C,0x4A,0x49,0x49,0x30}, // 6  {0x01,0x71,0x09,0x05,0x03}, // 7  {0x36,0x49,0x49,0x49,0x36}, // 8  {0x06,0x49,0x49,0x29,0x1E}, // 9};

The numbers 0–9 are represented by this 5x7 pixel representation, which was used to manually draw the digits on the framebuffer.

WiFi & NTP Setup

const char* ssid = "ADD YOUR SSID";const char* password = "ADD YOUR PASS";WiFiUDP ntpUDP;NTPClient timeClient(ntpUDP, "pool.ntp.org", 19800); // IST (UTC+5:30)

This part connects to WiFi and sets up an NTP client to fetch time in Indian Standard Time.

Drawing Functions

void drawCharScaled(...) {...}void drawTextScaled(...) {...}void fillRectBuffer(...) {...}void drawRectBuffer(...) {...}

A single character scaled by scale is drawn using the drawCharScaled function.

A string of characters is drawn using the drawTextScaled method.

A rectangular region in the framebuffer is filled using the fillRectBuffer function.

A rectangular border is drawn using the drawRectBuffer function.

Setup Function

void setup() {  pinMode(TFT_BL, OUTPUT);  digitalWrite(TFT_BL, HIGH);      // Turn on backlight  axs15231_init();                 // Initialize LCD  Serial.begin(115200);  WiFi.begin(ssid, password);      // Connect to WiFi  while(WiFi.status() != WL_CONNECTED){ delay(500); }  timeClient.begin();              // Start NTP client  fillRectBuffer(frameBuffer, SCREEN_W, 0, 0, SCREEN_W, SCREEN_H, BLACK);  drawRectBuffer(...) // Draw 3 green rectangle borders for HH:MM:SS  lcd_PushColors_rotated_90(0,0,SCREEN_W,SCREEN_H, frameBuffer); // Send framebuffer to LCD}

This section sets up the NTP, WiFi, and display. After that, it sends the first framebuffer to the screen and draws static green rectangular boundaries for the hours, minutes, and seconds.

Loop Function

void loop(){  if(timeClient.update()){ // Update time from NTP    int hours = timeClient.getHours();    int minutes = timeClient.getMinutes();    int seconds = timeClient.getSeconds();    ...    // Only redraw digits if they have changed    lcd_PushColors_rotated_90(0,0,SCREEN_W,SCREEN_H, frameBuffer); // Refresh display  }}

This part sends the new framebuffer to the display after continuously updating the time via NTP and verifying that each digit (hours, minutes, and seconds) has changed. It then only redraws the altered digits to minimize flicker.

The main code file must be saved in a folder and the included header files, such as AXS15231B.h, pins_config.h, and AXS15231B.cpp, must be added to set up the sketch.

• We now start the project's Body build, which starts with setting up the project's Base. We fasten the main body with the lower clamp part using M2.5 bolts.
• The extension part is then positioned over one side of the main body, its mounting hole is aligned with the main body, and an M2 screw is used to fasten them together.
• The nameplate, which essentially holds the main body and extension section together with four screws positioned in corners, is installed in place once the extension part has been placed.
• Next, we add tiny magnets with a diameter of 5 mm to the main body and clamp part. Our first step is to apply a drop of super glue to the magnet's clamp mounting place. This will ensure that the magnet remains in place permanently.
• Similar to this, we add magnets to the main body by following the same process, but we make sure to face them in the correct direction since this section employs two magnets to create a magnetic lock, and magnetism is crucial in this situation; utilizing the same poles on the same side will break the entire system.

• Now that the TTGO Display is positioned over the screen holder, the screen side of the TTGO T Display board is facing out.
• We apply hot glue to the entire board's perimeter to keep it in place. This will create a connection between the display and the screen holder.

We now proceed to the battery assembly phase of the build, where we insert the lithium cell into the main body and secure it in place with hot glue

After positioning the screen holder over the main body, we fasten it to the main body and extension part using eight M2 screws.

• The next step was the lid assembly, which starts with desoldering the wires from the rocker switch so that we can insert the rocker into the opening on the lid part. After positioning the rocker switch, we reattach its wires.
• After that, the lid is pushed into place and fastened with two M2 screws to the extension part.

• The cushion support on the inside of the hand clamp is one of the last finishing touches that we need to add to this project, which is almost finished. This thin foam sheet was included with the TTGO T Display package; we will cut it into pieces and place it inside the clamp part.
• We completed the assembly process by first applying two long foam cutout pieces to the clamp part using hot glue, followed by the addition of a rectangular foam piece to the main body.

This small project Resulted into a fully functional PIP WATCH PROJECT, a PIP Boy-inspired watch built from scratch that connects to the internet using an ESP32 and an NTP server to retrieve time data, which is then displayed on a Liligo TTGO T-DISPLAY S3 LONG.

In order to wear this device, we have to first fully open the clamp, place our hand between the clamp and the main body, then use the super magnets to close the clamp part, latching the wristwatch.

If you enjoy Fallout as much as I do, this PIPWATCH is a great way to keep track of time in a Fallout style. I personally like Fallout: New Vegas over Fallout 4, but that's just my take on things. I also thought the new TV show did a fantastic job of capturing the essence of the game.

Overall, this PIP-WATCH has been completed, but I would like to get back to it soon to continue working on the clock's graphical design. Due to an issue I encountered throughout the code process, I created a basic clock interface with borders between HH, MM, and SS. this may be further improved into a matching aesthetic of an actual pip boy, furthermore i will make a separate article about performing a Paint Job on this project to give it a post-apocalyptic military look.

I will be addressing all of these topics in the upcoming updates. You can download and create your own PIP WATCH using the code, connection diagram, and CAD files that are all attached.

I appreciate you getting this far, and I'll be back soon with a new project.

Peace.