Introduction

Building a reliable 7‑inch touchscreen UI for an ESP32-based vending machine requires choosing the
right hardware and software tools. The display must meet the 4‑year MTBF target, withstand the
operating environment (indoor vs outdoor), and interface cleanly with the ESP32. At the same time, we
need an easy UI development workflow (given existing skills in HTML/CSS/JS but no embedded UI
experience). Our plan: first compare candidate displays (size, resolution, interface, touch type,
brightness/lifetime), then recommend UI design tools (e.g. embedded GUI libraries and editors). We
address whether web-style (HTML/CSS/JS) interfaces can be used on an ESP32 screen, then walk
through a step-by-step UI development process and how to wire the display to the ESP32.

Comparison of Suitable Displays

For a 7″ vending machine UI, we want a rugged, capacitive or resistive touchscreen with ample
resolution (~800×480 or 1024×600). Key factors include interface type (SPI, parallel/RGB, or HDMI),
required GPIO, brightness, touch controller, temperature range, and lifetime (MTBF). MTBF: Industrial/
sunlight-readable LCDs often quote backlight lifetimes of 50,000–70,000 hours (~6–8 years) 1 2 ,
exceeding our 4-year target. For example, Xenarc’s 7″ high-bright LCD (600 cd/m²) guarantees 55,000
hours MTBF 1 ; Litemax’s 7″ sunlight-readable panel (1000 cd/m², 1024×600) uses an LED backlight
with 70,000 hours MTBF 2 . Ensure the display’s temperature spec covers your environment (many
support roughly –20°C to +70°C 3 ).

• Integrated ESP32 HMI Modules: Products like the Elecrow CrowPanel 7″ and Makerfabs MaTouch
7″ combine a TFT LCD plus an ESP32-S3 on one board. These typically have an 800×480 or
1024×600 IPS panel, a capacitive touch controller (e.g. GT911), and USB power/signal connectors.
For example, Elecrow’s CrowPanel 7″ (800×480) uses an ESP32-S3 and is “compatible with the
LVGL graphics library” 4 . Makerfabs’s MaTouch 7″ offers two versions (800×480 or 1024×600)
with RGB 565 parallel LCD interface and 5‑point capacitive touch 5 . These modules handle
wiring (just power + USB) and come demo-ready. Pro: minimal wiring and built-in demos; Con:
you buy the whole board (but prices can be reasonable).

• Standalone 7″ Touch LCD Modules: Companies like BuyDisplay (Waveshare) or generic

manufacturers sell 7″ TFT panels (e.g. SSD1963 controller for 800×480) with resistive or
capacitive touch. These often require many GPIO for a parallel bus (8‑ or 16‑bit) or use SPI
(slower). For example, some 7″ modules use the SSD1963 chip with a parallel 16-bit interface.
Resolutions are typically 800×480 or 1024×600; brightness 250–600 cd/m². Pro: can pair with any
MCU; Con: complex wiring (especially 16-bit bus), careful power (often 5 V and >0.6 A). Note
Makerfabs warns their 7″ draw over 600 mA and may reboot if undervolted 6 .

• Nextion HMI Displays: Nextion offers 7″ “intelligent” displays. These are 800×480 resistive-touch
TFTs with a built-in ARM MCU. You design the GUI in the free Nextion Editor (WYSIWYG), then
upload the design to the screen’s flash. The ESP32 communicates via a serial UART (Tx/Rx) using
a simple command protocol. Pro: very easy drag-and-drop UI design, only 4 wires (5 V, GND, Tx,
Rx) needed. Con: proprietary (Nextion Editor), limited performance (no fancy animation),
resistive touch only, and additional cost. Nextion modules target 4.3″–10.1″ and can work with
Arduino/ESP32 via serial 7 .

1
 • Environmental Considerations: If the vending machine is indoor-only, a standard 300–600 cd/
m² panel is fine. If it might see direct sun (kiosk/outdoor), choose a high-bright (≥1000 cd/m²)
sunlight-readable panel (often with tempered glass and anti-reflective coatings). Litemax’s 7″
module (1000 cd/m², 1024×600) 8 is one example of a rugged outdoor display. Also ensure
operating temperature (–20 to +70 °C is common on industrial screens 3 ).

• Touchscreen Type: Capacitive touch (finger or gloved hand, multi-touch) is preferable for a
modern feel. Many cheap modules use resistive touch (stylus or gloved finger). Capacitive
controllers include GT911 or FT5x06 (often over I²C); resistive controllers like XPT2046 use SPI.
ESP32 can handle either, but capacitive usually gives a better UI experience.

In summary, for ease of use and reliability, an integrated ESP32+7″ HMI module (e.g. Elecrow CrowPanel
or Makerfabs MaTouch) or a Nextion HMI display are beginner-friendly. They handle the heavy-lifting
of display interfacing and leave the ESP32 code fairly simple. These options exceed the 4-year MTBF
(their backlights are rated for ~50k+ hours 1 2 ) and operate across industrial temperature ranges.

Software Tools for UI Design

Given existing knowledge of HTML/CSS/JS but no embedded experience, it’s best to use an embedded
UI framework rather than trying to shoehorn web tech onto the microcontroller. Two main approaches
stand out:

• LVGL (Light and Versatile Graphics Library): An open-source C library for embedded GUIs,
LVGL is widely used on ESP32 and other MCUs. It provides buttons, sliders, charts, and
animations out of the box, with a CSS‑like style system 9 10 . LVGL is hardware-independent
and runs on very small MCUs, written in C for portability 10 . You design the UI either by code or
with GUI builders like SquareLine Studio (free, web-based). SquareLine lets you drag-and-drop
screens and widgets, then export C source for LVGL that you include in your Arduino project 11 .
LVGL can even run as a PC simulator (SDL) so you can develop and test the UI on your desktop
before uploading to the ESP32 12 . This aligns somewhat with web skills: LVGL “styles are heavily
inspired by CSS” 9 , and you can define properties like color, padding, fonts, etc. LVGL supports
rendering images, animations, and touch input. (For example, in LVGL you might write C code
like lv_obj_t *label = lv_label_create(lv_scr_act());
lv_label_set_text(label, "Hello"); lv_obj_align(label, LV_ALIGN_CENTER, 0,
-40); to put a text on-screen.) The RandomNerdTutorial LVGL guide shows how to install LVGL
in Arduino IDE and initialize it with a TFT driver 13 . LVGL would make full use of the ESP32 (often
with PSRAM for framebuffers).

• Arduino Graphics Libraries: Simpler alternatives exist, such as Bodmer’s TFT_eSPI library (for
SPI or parallel TFTs) or Adafruit GFX, which let you draw pixels, text, and simple shapes in C/C++.
These are lower-level (no GUI widgets), but can be used if you only need basic UI or want to code
in C with familiar patterns. However, without a high-level UI builder, you’d code screen layouts by
hand.

• Nextion Editor: If using a Nextion display, the GUI is built in the Nextion Editor (Windows PC
software). This uses a drag-and-drop approach (buttons, sliders, etc.) and a simple attribute/
event system. After designing screens, you upload them to the panel’s SD. The Arduino (ESP32)
side then only sends/receives serial commands (e.g. “get keypad number” or “set component
value”). While Nextion is easy to use (it is “easy to build a GUI” 14 ), it is proprietary and not
actual Arduino code – the ESP32 code just communicates via UART.

2
 • Web-based UIs (NO): One might wonder if HTML/CSS/JS can be reused. Generally, an MCU like
the ESP32 cannot natively render HTML/CSS for an attached TFT. There is no straightforward
converter from a web page to embedded graphics commands. The closest approach would be
running a full browser or a Qt WebEngine on a powerful CPU (not possible on the ESP32) or have
a WebView component. Some microcontrollers can serve a webpage (for remote control), but
here we want the UI on the local screen. Therefore, we cannot directly feed HTML/CSS/JS to the
ESP32 for the TFT. Instead, use LVGL (which has a CSS-like styling) or a GUI builder.

In summary, LVGL + SquareLine Studio is a modern, free solution that bridges a bit toward web-like
development. It generates Arduino-compatible C code from a graphical design, saving you from writing
all the boilerplate. Alternatively, Nextion Editor is very beginner-friendly if you go the Nextion-display
route. We recommend LVGL for its flexibility and strong community support (all shown examples use
LVGL on ESP32).

Developing the UI (Step-by-Step)

Below is a general workflow using LVGL (with Arduino IDE). If you choose Nextion, the steps would be
different (design in Nextion Editor, etc.), but the principle is similar (design GUI, then implement logic in
code).

1. Prepare the development environment:

2. Install the latest Arduino IDE and add the ESP32 board support (via the Espressif board URL in
Preferences).
3. Install any required libraries via Library Manager: e.g. LVGL (Light and Versatile Graphics Library)
and the display driver (e.g. TFT_eSPI by Bodmer) 13 . If using a resistive touch, also install the
XPT2046_Touchscreen library (or appropriate driver for GT911).
4. For LVGL, use the same version as your design tool. SquareLine Studio (v1.x) typically works with
LVGL 8.x or 9.x. For example, the tutorial uses LVGL 8.3.11 15 .

5. (Optional) If desired, set up the LVGL PC simulator so you can code and preview the UI on your
computer 12 . This step isn’t mandatory but can speed up UI design/debug.

6. Wiring the display (if not already integrated):

7. Power: Most 7″ TFT modules need 5 V (some can take 3.3 V, check jumper or specs). Provide a
stable 5 V supply capable of ≥1 A to account for backlight. The Makerfabs board note warns that
the display needs >600 mA 6 .
8. Signal Interface: Depending on the module:
◦ SPI Modules (e.g. ILI9341 2.8″ example): Connect SPI pins (MOSI, MISO, SCLK, CS, DC, RST)
from ESP32 to the display. (See [48†L590-L598] for an example pinout using
GPIO32/39/25/33, etc.)
◦ Parallel Modules: Connect 8 or 16 data lines plus control (CS, RS/DC, WR, RD) to the ESP32.
This uses many GPIO pins or the ESP32’s parallel (RGB) interface. LVGL and TFT_eSPI can
drive parallel controllers like ILI9488 or RA8875 if properly configured.
◦ Nextion: Only connect 5 V, GND, TX, RX (UART) – see [44†L149-L157].

3
 9. Touch Interface:

◦ Resistive (XPT2046): Connect IRQ, MISO, MOSI, SCLK, CS to ESP32 pins (as in [48†L592-
L600]). In software, initialize the touch driver (e.g. XPT2046_Touchscreen ) on those
pins.
◦ Capacitive (GT911): Usually uses I²C (SDA, SCL) plus interrupt pin. Ensure pull-ups and note
the I²C address. For example, Makerfabs uses a GT911 controller over I2C 16 .

10. Initialize LVGL and display in code:

In your Arduino sketch, in setup() :

lv_init(); // Initialize LVGL

// (Optional) Serial for debug: print LVGL version
[Link](String("LVGL v") + lv_version_major() + "." +
lv_version_minor());

// Initialize display driver

// Example (using TFT_eSPI):
static lv_color_t buf1[LV_HOR_RES_MAX * 40]; // LVGL drawing buffer
lv_disp_draw_buf_t draw_buf;
lv_disp_draw_buf_init(&draw_buf, buf1, NULL, LV_HOR_RES_MAX*40);

lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.hor_res = 800; // or 1024
disp_drv.ver_res = 480; // or 600
disp_drv.flush_cb = my_disp_flush_cb; // provided by TFT_eSPI library
binding
disp_drv.draw_buf = &draw_buf;
lv_disp_drv_register(&disp_drv);

Note: The exact code depends on the display library. For TFT_eSPI, often you use
lv_tft_espi_create() as a shortcut, as in [48†L550-L559]:

// Example using TFT_eSPI helper (from RandomNerd tutorial)

lv_display_t *disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT,
draw_buf, sizeof(draw_buf));
lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);

Then initialize touch input:

lv_indev_drv_t indev_drv;
lv_indev_drv_init(&indev_drv);
indev_drv.type = LV_INDEV_TYPE_POINTER;
indev_drv.read_cb = my_touch_read_cb; // callback to read touchscreen
lv_indev_drv_register(&indev_drv);

4
 The tutorial [48] shows this pattern: after lv_init() , start SPI for touch, then create disp =
lv_tft_espi_create(...) and indev = lv_indev_create() with read callback 17 18 .

11. Design the UI layout:

12. Visually Designing: Open SquareLine Studio (free at [Link]). Create a new project for
ESP32 + TFT_eSPI + your resolution. Add screens and drag widgets (buttons, labels, sliders, etc.)
onto the canvas. Set colors, styles, and event handlers visually.
13. Generate Code: In SquareLine, set the Project Export path to a folder. Export the project (choose
Flat or Hierarchical). SquareLine will create C source files (e.g. screen_main.c ,
squareline_project.c/h ) with LVGL calls.

14. Integrate Code: Copy the exported code into your Arduino project (same folder as your .ino ).
Include the generated files. For example, the tutorial shows adding lv_create_main_gui()
function from SquareLine that draws all widgets 19 .

15. Implement logic & events:

In your Arduino loop and callbacks:

void loop() {

lv_timer_handler(); // or lv_task_handler() for older LVGL versions 20

delay(5);
}

This continuously updates the UI. Note [48†L567-L571]: the loop simply calls
lv_task_handler() and lv_tick_inc() to process events and timing.
For each button or interactive widget, SquareLine typically generates an event function stub. You
fill in these callbacks in your code to handle presses, e.g.:

static void btn1_event_cb(lv_event_t * e) {

if (lv_event_get_code(e) == LV_EVENT_CLICKED) {
// handle button click
}
}

The UI code from SquareLine will have lines like lv_obj_add_event_cb(btn1,

btn1_event_cb, LV_EVENT_CLICKED, NULL); to hook your logic.

16. Testing and tuning:

17. Upload the code and test on the hardware. If using the LVGL PC simulator, you can test UI
behavior on your desktop first.
18. Calibrate touch if needed (some libraries offer auto-calibrate or manual).
19. Optimize: ensure only necessary elements are redrawn. For a large display (800×480), using
double buffering or partial refresh can improve performance. LVGL’s default is single buffer with
lv_timer_handler() as above.

5
Throughout, refer to examples and documentation. The RandomNerdTutorial (ILI9341 example)
provides a working template 21 20 . In essence, the UI objects you create (labels, lists, etc.) live in LVGL,
and LVGL takes care of flushing them to the TFT. The ESP32 code drives the LVGL engine rather than
directly updating pixels (this greatly simplifies UI coding).

Interfacing the UI with the ESP32

The ESP32 interfaces with the display via its chosen bus (SPI, parallel, UART). In software, LVGL (or
whatever graphics library) handles the low-level pixels. Here’s how it ties together:

• Display Driver: The TFT_eSPI (or other) library provides a “flush” function that LVGL calls to draw
pixels. This is often written in C++ and abstracts the SPI/parallel protocol. For example,
lv_tft_espi_flush() will send a block of pixels to the LCD via SPI. The registration
( disp_drv.flush_cb ) hooks LVGL to the actual hardware driver.

• Touch Input: Similarly, we register a touch-read callback ( indev_drv.read_cb ). This callback

reads raw touch data (e.g. via SPI for XPT2046 or I2C for GT911) and tells LVGL the coordinates of
a touch or release. LVGL then generates high-level touch events for widgets (e.g. button click).

• ESP32 Pins: Depending on display choice:

• For SPI displays, connect MOSI, MISO, SCLK, along with CS, DC, RST as needed (examples
above). The code [48†L588-L596] defined pins for an XPT2046 resistive touch (IRQ, MOSI=32,
MISO=39, CLK=25, CS=33). The actual TFT pins (not shown) would be assigned in the TFT_eSPI
setup (usually via User_Setup.h ).
• For Parallel/RGB displays, many GPIOs are used. For instance, Makerfabs’s 7″ uses an RGB565
16-bit bus plus control lines 5 . In that case, the ESP32-S3’s LCD (RGB) peripheral can be used
(or wires must be mapped manually in a special driver). This is more complex but supported by
LVGL if configured.

• For Nextion, you wire only UART (e.g. ESP32’s TX/RX to Nextion’s RX/TX) 22 . Then in code you
use the Nextion library (or raw Serial) to send commands like “print” or “get value”.

• Performance: A 7″ 800×480 display has ~384,000 pixels. LVGL optimizes by redrawing only
changed areas. Still, scrolling or animations can be heavy. Ensure you use the ESP32’s PSRAM (if
available) for larger buffers. Also set LVGL’s refresh rate (tick) appropriately (5–10 ms increments
as in [48†L567-L571]).

• Power Consideration: As noted, the display needs substantial current. Use a stable 5V regulator
and bypass capacitors. During development, watch for random resets – often due to voltage
drops when the backlight turns on (over 600 mA peak). A USB power supply alone may not
suffice; a dedicated 5V supply or an adjustable PSU is safer.

In sum, once wired, most of the interface is handled by libraries. The ESP32 runs the LVGL task loop (or
Nextion command loop), so the UI “lives” in software. Touch or button events in LVGL are just function
callbacks in your Arduino code. The main loop always calls lv_timer_handler() (or
lv_task_handler() ) to make the UI responsive 20 .

6
Conclusion and Plan Summary
In summary, for a 7″ ESP32-based vending machine UI with ≥4‑year MTBF, we recommend:

• Display Selection: Prefer industrial-grade or integrated HMI modules. Examples: Elecrow

CrowPanel 7″ or Makerfabs MaTouch 7″ (both IPS capacitive touch, ESP32-S3 onboard) 4 5 .
These support 800×480 (or 1024×600) and are LVGL-ready. If outdoors, use a 1000+ nit panel like
Litemax’s 7″ 8 . Ensure the display’s backlight MTBF (~50k+ hours 1 2 ) meets requirements.

• UI Software Tools: Use LVGL with SquareLine Studio. LVGL is free and runs well on ESP32 (even
with limited RAM) 10 . SquareLine lets you leverage your design skills (via drag-and-drop) and
exports C code for Arduino 11 . This avoids hand-writing all graphics code. You could also
consider a Nextion display + Editor if you want a purely GUI-based flow (esp. if you really dislike C
coding), but LVGL gives better performance and flexibility.

• HTML/CSS/JS Porting: You cannot directly use HTML/CSS/JS on the ESP32 display. Instead, learn
LVGL’s styling (which is CSS-inspired 9 ) or use SquareLine’s designer. The LVGL simulator lets
you work on a PC, easing the learning curve 12 .

• Development Steps: (1) Install ESP32 board and LVGL/TFT libraries in Arduino IDE. (2) Wire the
7″ screen to the ESP32 (or use integrated module). (3) In code, call lv_init() , set up the
display driver (e.g. via lv_tft_espi_create() 17 ) and touch driver. (4) Use SquareLine to
design screens; import the generated code. (5) In setup() , initialize LVGL and create the GUI;
in loop() , run lv_timer_handler() (or lv_task_handler() ) 20 . (6) Add event
callbacks for touch/button interactions.

• Integration: The UI is just part of the Arduino sketch. Interfacing is managed by the libraries:
LVGL takes care of drawing, while the ESP32 code handles events. For example, an LVGL button
press can call your C function to dispense an item.

Throughout, refer to examples and documentation. For instance, RandomNerdTutorials’ LVGL guide
shows wiring and code for an SPI TFT 13 21 , and the maker product pages give pinouts and specs 5
4 . By following these steps and tools, you will have a working vending-machine UI on a reliable 7″

display, with maintainable code and a clear development path.

Sources: Display specs (e.g. brightness, MTBF) are from industrial panel manufacturers 1 2 . The
Elecrow and Makerfabs product pages describe the ESP32‑based HMI modules 4 5 . LVGL and
SquareLine usage are documented in tutorials 11 23 . Nextion information is from its getting‑started
guide 24 7 . Relevant code examples (LVGL init, event loop) are shown in the RandomNerd LVGL
tutorial 25 20 . These references guided our recommendations and steps.

1 Xenarc 700TSH 7 Inch 700TSH High Bright Touch Screen Monitor

[Link]

2 3 8 7" High brightness, Sunlight Readable LCD | 0765-I | Litemax

[Link]

7
 4 Elecrow CrowPanel 7-inch HMI ESP32 Display 800x480 RGB TFT LCD Touchscreen w/ Case -

RobotShop
[Link]
srsltid=AfmBOoo99Q_xJzeNX203qWlKtiq0ojqYrRNypBQjJuCksaRDfCNh0ze2

5 6 16 MaTouch ESP32-S3 7” Parallel TFT with Touch - Makerfabs Wiki

[Link]

7 14 22 24 Nextion Display with Arduino - Getting Started | Random Nerd Tutorials

[Link]

9 Styles — LVGL documentation

[Link]

10 13 17 18 19 20 21 23 25 LVGL with ESP32 TFT Touchscreen – ILI9341 (Arduino) | Random Nerd

Tutorials
[Link]

11 15 LVGL ESP32 & SquareLine Tutorial using Arduino IDE

[Link]

12 Simulator on PC — LVGL documentation

[Link]