How to create a GUI for a 1.14 inch 240x135 display?

How to Create a GUI for a 1.14 inch 240x135 Display

To create a GUI for a 1.14 inch 240x135 display, you need to select a microcontroller with enough RAM and flash memory, wire up the SPI interface, and write code that renders graphics on a 240x135 pixel matrix. The typical approach involves using a driver IC like the ST7789V (common for these small IPS panels), which supports 16-bit color depth (65,536 colors) and operates at SPI clock speeds up to 62.5 MHz. For a practical example, the 1.14 inch 240x135 ips display from DisplayModule uses the ST7789V driver and requires a 4-wire SPI connection plus a reset and data/command pin. Here’s the hard data: the display’s active area is 14.9mm x 24.9mm, with a pixel pitch of 0.1035mm, and it draws about 20-30 mA at 3.3V. You’ll need a microcontroller like an ESP32 (240 MHz dual-core, 520 KB SRAM) or a Raspberry Pi Pico (133 MHz, 264 KB SRAM) to handle the frame buffer—240x135 pixels at 16-bit color means 64,800 bytes of RAM just for a single buffer. If you want double buffering for smooth animations, that jumps to 129,600 bytes, which is feasible on an ESP32 but tight on a Pico without external PSRAM.

Start with the hardware setup. The SPI interface uses four pins: MOSI (Master Out Slave In), SCK (Serial Clock), CS (Chip Select), and DC (Data/Command). You also need a RESET pin and a backlight control pin (usually PWM-capable). For the 1.14 inch 240x135 ips display, the pinout is standard: pin 1 is VCC (3.3V), pin 2 is GND, pin 3 is CS, pin 4 is RESET, pin 5 is DC, pin 6 is MOSI, pin 7 is SCK, pin 8 is BL (backlight), and pin 9 is GND. Connect these to your microcontroller’s GPIO pins—for example, on an ESP32, you might use GPIO5 for CS, GPIO18 for SCK, GPIO23 for MOSI, GPIO2 for DC, GPIO4 for RESET, and GPIO22 for BL. Use a logic level shifter if your microcontroller runs at 5V, because the display is strictly 3.3V tolerant. The SPI clock frequency should be set to 40 MHz or lower to avoid signal integrity issues; at 40 MHz, you can refresh the entire 240x135 frame in about 2.5 ms (assuming 16-bit color and no overhead). That’s a theoretical 400 FPS, but in practice, the ST7789V’s internal timing and command overhead limit it to around 60-100 FPS for full-screen updates.

Now, the software side. You need a graphics library that can handle the ST7789V controller. Popular choices include Adafruit’s ST7735 library (with modifications for ST7789V), TFT_eSPI (optimized for ESP32), or LVGL (Light and Versatile Graphics Library) for complex UI elements. For a bare-metal approach, you can write your own driver using the ST7789V datasheet. The initialization sequence is critical: send a software reset (0x01), wait 120 ms, then configure the display with commands like 0x36 (memory data access control) for orientation, 0x3A (interface pixel format) set to 0x05 for 16-bit color, and 0x21 (display inversion on) for better contrast. You also need to set the column and page addresses for the 240x135 resolution: column address from 0 to 239 (0x2A command), page address from 0 to 134 (0x2B command). The ST7789V has a default resolution of 240x320, so you must use the 0x2A and 0x2B commands to restrict the window to 240x135. Without this, the display will show garbage in the unused rows. Here’s a table of the essential initialization commands:

Table 1: ST7789V Initialization Commands for 240x135

| Command (Hex) | Description | Data Bytes | Notes |
|---------------|-------------|------------|-------|
| 0x01 | Software Reset | None | Wait 120 ms after |
| 0x11 | Sleep Out | None | Wait 150 ms after |
| 0x36 | Memory Data Access Control | 0x00 | Default orientation; change to 0x70 for landscape |
| 0x3A | Interface Pixel Format | 0x05 | 16-bit color (RGB565) |
| 0x21 | Display Inversion On | None | Improves contrast |
| 0x2A | Column Address Set | 0x00, 0x00, 0x00, 0xEF | Start col 0, end col 239 |
| 0x2B | Page Address Set | 0x00, 0x00, 0x00, 0x87 | Start page 0, end page 135 |
| 0x29 | Display On | None | Wait 50 ms after |

After initialization, you can write pixel data using the 0x2C RAM Write command. For each pixel, send two bytes (high byte first, low byte second) in RGB565 format. For example, to draw a red pixel, send 0xF8 0x00 (red channel 5 bits, green 6 bits, blue 5 bits). To fill the entire screen with a solid color, you’d send 64,800 bytes (240x135x2). On an ESP32, this can be done in a single SPI transaction using DMA (Direct Memory Access) to avoid CPU overhead. The TFT_eSPI library, for instance, uses a 32-bit buffer for SPI transactions, achieving about 15-20 ms for a full-screen fill at 40 MHz SPI clock. If you’re using LVGL, you need to create a display buffer, typically a 1/10th screen buffer (6,480 bytes) for partial updates, which reduces RAM usage. LVGL’s rendering engine handles touch input (if you add a capacitive touch controller like the FT6336) and widget management, but for a non-touch display, you can use buttons and sliders controlled via physical inputs or a rotary encoder.

For a real-world GUI, consider the pixel density: 240x135 at 1.14 inches gives a PPI (pixels per inch) of about 240, which is sharp enough for small text and icons. A 12-point font at 16 pixels per character will fit about 15 characters per line and 8 lines on the screen. For icons, 24x24 pixel icons are readable, allowing 10 icons per row and 5 rows. You can use a font library like Adafruit GFX or embed custom bitmaps. If you’re displaying sensor data (e.g., temperature, humidity), use a 7-segment-style font for readability. The backlight brightness can be controlled via PWM on the BL pin; a 1 kHz PWM frequency with 8-bit resolution gives 256 brightness levels. At full brightness, the display consumes about 25 mA, but you can drop it to 5 mA at 10% brightness for battery-powered projects.

One common pitfall is the SPI bus speed. The ST7789V datasheet specifies a maximum SPI clock of 62.5 MHz, but with long wires (over 10 cm), signal reflections can cause data corruption. Keep the SPI traces under 5 cm and use a 100 nF capacitor between VCC and GND near the display. Another issue is the frame buffer—if you’re using a microcontroller with limited SRAM, like the ATmega328P (2 KB SRAM), you can’t store a full frame buffer. Instead, use a “write-only” approach where you send pixel data directly to the display without buffering, but this limits you to simple shapes and text. For complex GUIs, you need at least 64 KB of SRAM, which is why the ESP32 (520 KB SRAM) or Raspberry Pi Pico (264 KB SRAM) are recommended. If you’re using the Pico, you can also add external PSRAM (up to 8 MB) via the PIO (Programmable I/O) interface, but that adds complexity.

For a touch-enabled GUI, you can pair the 1.14 inch 240x135 ips display with a capacitive touch overlay like the FT6336, which communicates via I2C. The touch resolution is typically 240x135, matching the display, so you can map touch coordinates directly to pixel coordinates. The FT6336 supports up to 2 touch points and has a scan rate of 100 Hz. You’ll need to handle touch interrupts and debounce in software. For a non-touch GUI, use a rotary encoder with a button for navigation—common in smart watches and small IoT devices. The encoder’s quadrature signals can be read via GPIO interrupts, and the button press can be used for selection. The GUI should be designed for a 240x135 portrait orientation (default), but you can rotate it to landscape using the 0x36 command with 0x70 (MV, MX, MY bits set). In landscape mode, the display becomes 135x240, which is better for text-heavy interfaces.

Performance optimization is key. Use SPI transactions with DMA to offload the CPU. On the ESP32, the SPI driver supports DMA on channel 2, which can transfer 64,800 bytes in about 1.5 ms at 40 MHz. For partial updates, only send the changed region—for example, if you’re updating a text field, set the column and page address to the bounding box of that field. This reduces SPI traffic and improves responsiveness. The ST7789V supports “windowed” updates via the 0x2A and 0x2B commands, so you can update a 32x32 pixel area in 2,048 bytes instead of 64,800 bytes. For animations, use double buffering: allocate two 64,800-byte buffers in RAM, render to one while the other is being sent to the display, then swap. This prevents tearing, but requires 129,600 bytes of RAM, which is available on the ESP32 but not on the Pico without external RAM.

Power consumption is another angle. The display’s backlight is the biggest power hog—at 3.3V and 25 mA, it’s 82.5 mW. The ST7789V itself draws about 1-2 mA in active mode and 0.1 mA in sleep mode. For battery-powered devices, use the sleep command (0x10) to turn off the display when not in use, and wake it with the 0x11 command. The wake-up time is about 150 ms, so plan for that in your UI. You can also reduce the SPI clock speed to 10 MHz to save power, but that increases refresh time to 10 ms per frame. For a GUI that updates every second, that’s fine.

For a complete project example, consider a weather station GUI. The display shows a 48x48 pixel weather icon (sun, cloud, rain) in the top-left, a 24x12 pixel temperature reading in the center, and a 24x12 pixel humidity reading below. The background is a gradient from blue to white. The code uses TFT_eSPI on an ESP32, with the SPI pins defined in the User_Setup.h file. The initialization sequence is the same as Table 1, but you also set the rotation to 1 (landscape) for a wider view. The temperature is updated every 5 seconds via a DHT22 sensor, and the icon changes based on the weather API data. The entire GUI fits in 64 KB of RAM, and the frame rate is 30 FPS for smooth animations. You can find the exact wiring and code examples on the product page for the 1.14 inch 240x135 ips display, which includes a schematic and Arduino library.

One more data point: the display’s viewing angle is 170 degrees (IPS technology), so it’s readable from almost any direction. The contrast ratio is typically 800:1, and the brightness is 300-400 cd/m². For outdoor use, you might need a polarizer film to reduce glare, but for indoor projects, it’s fine. The SPI interface is also compatible with 3.3V logic only—do not use 5V directly, or you’ll damage the driver IC. If your microcontroller runs at 5V, use a level shifter like the 74LVC245. The operating temperature range is -20°C to +70°C, so it’s suitable for most indoor and some outdoor applications.