W10 | Output Devices

An output device is any component that allows a microcontroller to send information back to the world. While an input device brings data in, an output device communicates something out — as light, movement, sound, or in this case, images on a screen.

Some common examples are:

• An LED — signals a state with light
• A motor — produces physical movement
• A speaker — generates sound
• A screen — displays visual information

🔎 In this week's assignment, the output device used is a Nextion NX4832T035 display. In the context of the robot, this screen is the main way it communicates with the child — it displays animations that correspond to the different activities the robot performs. This week's work focuses on getting the display working and understanding how to control it from the microcontroller, using an eye animation as the first proof of concept.

The robot needs a way to communicate visually with the child, and expressive animations make the interaction feel more natural and engaging. The Nextion NX4832T035 was chosen because it handles the graphics internally, allowing the microcontroller to control the screen using serial commands. Since the display does not support video playback, the animation is created by showing multiple image frames quickly to simulate movement.

For this week, the board used is the Final Project Board fabricated in Week 8. In that week, the board was already tested with an output device — an LED ring — which can be reviewed in the corresponding documentation. This week, the same board is used to connect and control the Nextion display.

The Nextion NX4832T035 is a 3.5-inch smart display with its own processor and built-in flash memory. Unlike a regular screen, it stores and manages the graphics internally, so the microcontroller only needs to send commands telling the display what to show.

Communication with the microcontroller is done through UART, a simple serial communication protocol that uses two main pins:

• TX (Transmit) — sends data to the display
• RX (Receive) — receives data from the display back to the microcontroller

Nextion Editor — the software used to design the screen interface. It allows importing images, arranging them into pages, and programming the animation logic. The final design is compiled into a .tft file and loaded onto the display via a microSD card.

Arduino IDE — used to program the XIAO ESP32S3 on the main board. From here, commands are sent through the serial port to control what the Nextion displays.

Step 1 — Design the frames in Procreate

Each frame of the animation was drawn individually in Procreate. Once finished, the images were exported and resized to exactly 480 × 320 px — the resolution of the Nextion NX4832T035. This step is important because the images must match the screen size exactly, otherwise they will not display correctly.

Step 4 — Add the Picture component

On the main canvas (page0), add a Picture component from the Toolbox. Resize it to cover the full screen (480 × 320) and position it at x:0, y:0. This component — named p0 — is what will display each frame of the animation.

Step 5 — Add a Timer and a Variable

Two components are needed to make the animation run:

• Timer (tm0) — executes code automatically at a set interval. The tim attribute was set to 300ms and en to 1 (enabled)
• Variable (va0) — stores the current frame index as a number, starting at 0

1. For this test, most of the logic runs directly on the Nextion display. The animation is handled by a Timer inside Nextion Editor with the following code:

p0.pic=va0.val
va0.val=va0.val+1
if(va0.val>16)
{
  va0.val=0
}

• p0.pic=va0.val — shows the image that matches the current counter number
• va0.val=va0.val+1 — moves to the next frame by adding 1 to the counter
• if(va0.val>16) — checks if it has reached the last frame
• va0.val=0 — if so, resets the counter to 0 and starts the loop again

2. On the Arduino side, the XIAO ESP32S3 communicates with the Nextion through pins D6 (TX) and D7 (RX):

Serial1.begin(9600, SERIAL_8N1, D7, D6);

3. Commands are sent with three 0xFF bytes at the end — that is how Nextion knows a command is complete:

Serial1.print("page 1");
Serial1.write(0xff);
Serial1.write(0xff);
Serial1.write(0xff);

Uploading the design to the screen

1. Go to File → TFT file output in Nextion Editor and save the generated file
2. Copy it to the root of a microSD card formatted in FAT32
3. Insert the microSD into the display before powering it on
4. Power on — the screen loads the file automatically
5. When it shows "Update Successful", power off, remove the SD and power on again

The Nextion display connects directly to the main board using four wires — VCC, GND, TX, and RX. The main board has dedicated pin headers for all four connections.

Since the Nextion requires 5V to operate, a 5V power adapter connects to the main board through its power pin headers. From there, the board distributes the power to the display.

Problem 1 — Parse error in Nextion Editor

While writing the animation code in Nextion Editor, this error appeared: "Parse: Assignment operation failed". The issue was the order of operations — p0.pic=va0.val was placed before the counter update, so the image was being assigned before the value was validated.

✅ Fix

Reorder the code so the counter updates and resets first, then the image is assigned. The correct order is: increment → check limit → assign to picture.

Problem 2 — Screen stuck on "Update Successful"

After the file loaded correctly, the screen stayed on the update message and did not show the animation.

✅ Fix

Turn off the screen, remove the microSD, and turn it back on. Nextion only reads the SD card at startup to check for updates — if the SD stays inserted, it keeps waiting. Without the SD, it boots normally and runs the loaded design.