SPI Meets AI: How to Connect an ILI9341 Display to ASI Biont for Real-Time Data Visualization via Chat

Introduction

SPI (Serial Peripheral Interface) is one of the most common communication protocols in embedded systems. It’s used to connect microcontrollers to displays, sensors, SD cards, and other peripherals at high speed. But what if you could control an SPI display—like the popular ILI9341 TFT LCD—not by rewriting firmware every time, but simply by chatting with an AI agent?

That’s exactly what ASI Biont enables. Instead of manually coding display logic, you tell the AI what to show, and it handles the connection, data formatting, and rendering commands. This article walks through a real-world integration: an ESP32 with an ILI9341 display, connected to ASI Biont via MQTT, displaying sensor data and Telegram notifications—all controlled through chat.

Why Connect an SPI Display to an AI Agent?

SPI displays are ubiquitous in IoT dashboards, weather stations, and industrial panels. However, updating the display often requires re-flashing the microcontroller or writing complex graphics code. By connecting the display to ASI Biont, you get:

• Dynamic content: The AI decides what to show based on sensor readings, user requests, or external events.
• No firmware changes: The micro runs a simple MQTT client; the AI sends display commands.
• Multi-source data: Combine temperature sensors, Telegram messages, and API data on one screen.

The ILI9341 is a 240x320 pixel TFT display with SPI interface, widely available for under $10. It’s perfect for prototyping and small-scale monitoring.

How ASI Biont Connects to SPI Devices

ASI Biont does not have a direct SPI driver—because SPI is a local, low-level bus. Instead, it uses MQTT as the bridge. The ESP32 acts as an MQTT client, subscribes to a topic for display commands, and publishes sensor data. The AI agent, running in the cloud, connects to the same MQTT broker (e.g., Mosquitto or HiveMQ) using the paho-mqtt library via execute_python. This is the most practical method for SPI devices because:

• MQTT is lightweight and works over Wi-Fi (common on ESP32).
• No need for a PC running bridge.py—the ESP32 connects directly to the broker.
• The AI can send commands or receive data asynchronously.

Alternative method: If the ESP32 is connected to a PC via USB, you could use the Hardware Bridge (bridge.py) with a serial protocol, but MQTT is more flexible for remote monitoring.

Real-World Use Case: ESP32 + ILI9341 + DHT22 + ASI Biont

Hardware Setup

MicroPython Code on ESP32

The ESP32 runs a MicroPython script that:
1. Connects to Wi-Fi and MQTT broker.
2. Reads DHT22 every 10 seconds.
3. Publishes temperature and humidity to sensors/dht22.
4. Subscribes to display/command for rendering instructions from AI.
5. Uses the ili9341 library (from micropython-ili9341) to draw text, rectangles, and bitmaps.

import network
import time
from machine import Pin, SPI
import ili9341
from dht import DHT22
from umqtt.simple import MQTTClient

# Wi-Fi config
WIFI_SSID = "your_ssid"
WIFI_PASS = "your_password"

# MQTT config
MQTT_BROKER = "test.mosquitto.org"
CLIENT_ID = "esp32_display"
TOPIC_SENSOR = b"sensors/dht22"
TOPIC_CMD = b"display/command"

# Hardware setup
spi = SPI(2, baudrate=40000000, sck=Pin(18), mosi=Pin(23), miso=Pin(19))
display = ili9341.ILI9341(spi, cs=Pin(5), dc=Pin(17), rst=Pin(4), bl=Pin(16))
display.fill(ili9341.color565(0,0,0))  # black background
dht = DHT22(Pin(27))

# MQTT callback
def mqtt_callback(topic, msg):
    if topic == TOPIC_CMD:
        cmd = msg.decode()
        if cmd.startswith("TEXT:"):
            # Format: TEXT:x,y,color,size,text
            parts = cmd[5:].split(",")
            x, y = int(parts[0]), int(parts[1])
            color = int(parts[2])
            size = int(parts[3])
            text = ",".join(parts[4:])
            display.text(text, x, y, color, size)
        elif cmd.startswith("RECT:"):
            parts = cmd[5:].split(",")
            x, y, w, h = int(parts[0]), int(parts[1]), int(parts[2]), int(parts[3])
            color = int(parts[4])
            display.fill_rect(x, y, w, h, color)
        elif cmd == "CLEAR":
            display.fill(ili9341.color565(0,0,0))

# Connect Wi-Fi
wlan = network.WLAN(network.STA_IF)
wlan.active(True)
wlan.connect(WIFI_SSID, WIFI_PASS)
while not wlan.isconnected():
    time.sleep(0.5)

# Connect MQTT
client = MQTTClient(CLIENT_ID, MQTT_BROKER)
client.set_callback(mqtt_callback)
client.connect()
client.subscribe(TOPIC_CMD)

# Main loop
while True:
    try:
        dht.measure()
        temp = dht.temperature()
        hum = dht.humidity()
        payload = f"{temp:.1f},{hum:.1f}"
        client.publish(TOPIC_SENSOR, payload)

        client.check_msg()  # check for incoming commands
        time.sleep(10)
    except Exception as e:
        print("Error:", e)
        time.sleep(5)

How AI Connects and Controls

In the ASI Biont chat, the user describes the setup:

"Connect to MQTT broker test.mosquitto.org. Subscribe to sensors/dht22. Parse temperature and humidity. If temperature > 30°C, send a command to display/command to draw a red rectangle and text 'HOT!'. Also publish to Telegram."

The AI agent writes and executes a Python script using execute_python:

import paho.mqtt.client as mqtt
import json
from telegram_notifier import send_telegram  # hypothetical helper

broker = "test.mosquitto.org"
topic_sensor = "sensors/dht22"
topic_cmd = "display/command"

def on_message(client, userdata, msg):
    payload = msg.payload.decode()
    try:
        temp, hum = map(float, payload.split(","))
        print(f"Temperature: {temp}°C, Humidity: {hum}%")

        if temp > 30:
            # Draw red rectangle and text
            cmd = "RECT:0,0,320,240,63488"  # red (RGB565)
            client.publish(topic_cmd, cmd)
            cmd_text = "TEXT:10,10,65535,2,HOT!"
            client.publish(topic_cmd, cmd_text)
            send_telegram("⚠️ Temperature alert: {:.1f}°C".format(temp))
        else:
            # Clear and show normal status
            client.publish(topic_cmd, "CLEAR")
            cmd_normal = "TEXT:10,10,65535,2,Normal: {:.1f}°C".format(temp)
            client.publish(topic_cmd, cmd_normal)
    except:
        pass

client = mqtt.Client()
client.on_message = on_message
client.connect(broker, 1883, 60)
client.subscribe(topic_sensor)
client.loop_forever()  # runs until timeout (30s in sandbox)

Note: In the sandbox, loop_forever() is limited to 30 seconds. For continuous monitoring, the AI can schedule periodic checks or use a persistent bridge. But for prototyping, this works perfectly.

Result

• The ESP32 publishes temperature every 10 seconds.
• The AI receives it, checks thresholds, and sends display commands via MQTT.
• The ILI9341 shows real-time status: green for normal, red with alert text for high temperature.
• Telegram notifications arrive simultaneously.

Automating Data Collection and Control

You can extend this to:
- Multi-sensor displays: Show temperature, humidity, pressure from different sensors.
- Graph plotting: Send pixel data for simple line charts (e.g., temperature over time).
- Telegram integration: When a user sends a command via Telegram bot, the AI forwards it to the display.
- Scheduled updates: The AI can run a script every hour to fetch weather API data and display a forecast.

Pitfalls to Avoid

1. MQTT QoS: Use QoS 0 for sensor data (fast, lossy) and QoS 1 for commands (reliable). QoS 2 is overkill.
2. Buffer overflow: ESP32 with MicroPython has limited memory. Keep display commands short (under 256 bytes).
3. Wi-Fi disconnection: Add reconnection logic in the ESP32 code. The AI script should also handle broker reconnects.
4. Color format: ILI9341 uses RGB565 (16-bit). Use a color calculator (e.g., ili9341.color565(255,0,0) for red).
5. Command parsing: The AI must format commands exactly as the ESP32 expects. A simple text protocol avoids binary parsing issues.

Why ASI Biont Makes It Effortless

Traditional approach: Write firmware with display logic, compile, flash, debug. Every change requires re-flashing. With ASI Biont, the ESP32 runs a generic MQTT client—the AI handles all display logic dynamically. You can:

• Change what’s shown without touching the microcontroller.
• Combine data from multiple sources (sensors, APIs, user input).
• Add new features like alerts, charts, or animations by describing them in chat.

No dashboard panels, no “add device” buttons. Just describe your device and what you want, and the AI writes the integration code in seconds.

Conclusion

Integrating an SPI display with ASI Biont via MQTT is a powerful way to create interactive, AI-driven dashboards without complex firmware. The ILI9341 example shows how to monitor temperature, display alerts, and receive Telegram notifications—all controlled through natural language.

Ready to connect your SPI device? Go to asibiont.com, create an API key, and start chatting with the AI. Describe your hardware, and let the agent handle the rest.