VGA Output on ESP32 + DAC: How to Build an AI-Controlled Display with ASI Biont

Integrating a microcontroller-based VGA display with an AI agent opens up a new class of automation: real-time data visualization without a web browser or mobile app. In this guide, we show how to connect an ESP32 with a DAC-based VGA output to ASI Biont, using the AI agent to generate text, graphs, and live status updates for IoT metrics, weather alerts, and industrial notifications.

Why VGA + ESP32 + AI?

VGA is a legacy analog video interface, but it remains one of the simplest ways to output graphics from a low-cost microcontroller. The ESP32, with its dual-core processor and built-in DAC (digital-to-analog converter), can generate VGA signals (640×480 at 60 Hz) using the ESP32Lib or FabGL library. When paired with an AI agent like ASI Biont, the display becomes a smart dashboard that changes content based on real-time decisions.

Example use cases:

  • Show current temperature, humidity, and pressure from a sensor connected to the same ESP32.
  • Display a trend graph of solar panel voltage over the last hour.
  • Flash a red warning when a machine vibration threshold is exceeded.
  • Show a countdown timer for an automated irrigation cycle.

Connection Methods: Which One and Why?

ASI Biont supports multiple ways to talk to an ESP32. For VGA display control, the most practical approach is MQTT or Hardware Bridge (COM port). Here’s why:

Method When to use Pros Cons
MQTT ESP32 has Wi-Fi and a lightweight MQTT library (PubSubClient) No wires, works over LAN/internet, easy to publish topics Requires broker setup, Wi-Fi stability
Hardware Bridge (COM) ESP32 connected via USB serial Direct low-level control, reliable, no network dependency Cable required, limited to local PC
HTTP API Not recommended for real-time VGA updates Simple requests High latency, connection overhead

For this article, we use MQTT because it is the most flexible for remote scenarios and matches the typical smart-home setup where the ESP32 is already Wi-Fi-enabled.

Step-by-Step: ESP32 VGA Display Controlled by ASI Biont via MQTT

1. Hardware Setup

  • ESP32 development board (e.g., ESP32-DevKitC, NodeMCU-32S)
  • VGA connector (DB15 female) + 3 resistors (R-2R ladder): 270Ω, 390Ω, 560Ω for R, G, B
  • Jumper wires and breadboard
  • Optional: DHT22 or BME280 sensor for live data

Connect the ESP32 DAC pins to the VGA connector:

ESP32 Pin VGA Pin Signal
GPIO25 (DAC1) Pin 1 RED
GPIO26 (DAC2) Pin 2 GREEN
GPIO32 (DAC3) Pin 3 BLUE
GPIO33 Pin 13 HSYNC
GPIO27 Pin 14 VSYNC
GND Pin 5,6,7,8 Ground

Note: Some designs use an R-2R resistor ladder for analog levels. The DAC pins on ESP32 are true analog outputs (8-bit resolution), which means you can get 256 voltage levels per channel without resistors. However, to protect the VGA input, add 100Ω series resistors.

2. ESP32 Firmware (Arduino IDE / PlatformIO)

Use the ESP32Lib library (by bitluni) to generate the VGA signal. The code below connects to Wi-Fi, subscribes to an MQTT topic, and updates the screen based on incoming commands.

#include <WiFi.h>
#include <PubSubClient.h>
#include <ESP32Lib.h>
#include <Ressources/Font8x8.h>

// Wi-Fi credentials
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";

// MQTT broker (Mosquitto, HiveMQ, or local)
const char* mqtt_server = "broker.hivemq.com";
const int mqtt_port = 1883;
const char* topic_sub = "asi/vga/command";

WiFiClient espClient;
PubSubClient client(espClient);

// VGA configuration
const int vgaWidth = 640;
const int vgaHeight = 480;
VGA3Bit vga;

void setup() {
  Serial.begin(115200);

  // Initialize VGA
  vga.init(vgaMode);
  vga.clear();
  vga.setFont(Font8x8);
  vga.setCursor(0, 0);
  vga.print("Connecting...");

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    vga.print(".");
  }
  vga.println("WiFi OK");

  // MQTT
  client.setServer(mqtt_server, mqtt_port);
  client.setCallback(callback);
  reconnect();
}

void callback(char* topic, byte* payload, unsigned int length) {
  String msg = "";
  for (int i = 0; i < length; i++) {
    msg += (char)payload[i];
  }

  // Parse command: text, graph, status, clear
  if (msg.startsWith("TEXT:")) {
    String text = msg.substring(5);
    vga.clear();
    vga.setCursor(0, 0);
    vga.print(text);
  } else if (msg.equals("STATUS:OK")) {
    vga.clear();
    vga.setCursor(0, 0);
    vga.println("System: OK");
    vga.println("Uptime: " + String(millis()/1000) + "s");
  } else if (msg.equals("CLEAR")) {
    vga.clear();
  }
}

void reconnect() {
  while (!client.connected()) {
    if (client.connect("ESP32VGA")) {
      client.subscribe(topic_sub);
    } else {
      delay(5000);
    }
  }
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();
}

3. ASI Biont Side: AI Writes the MQTT Publisher

In ASI Biont, you simply describe the integration in the chat:

"Connect to broker.hivemq.com:1883, publish to topic asi/vga/command. The display shows text starting with TEXT:, or status updates with STATUS: prefix. First, send clear, then send TEXT:Today's weather: 22°C, sunny."

The AI agent (running on the cloud) generates a Python script using paho-mqtt and executes it via execute_python. Here is what the AI produces:

import paho.mqtt.client as mqtt
import time

broker = "broker.hivemq.com"
port = 1883
topic = "asi/vga/command"

def on_connect(client, userdata, flags, rc):
    print("Connected with result code "+str(rc))
    # Send commands
    client.publish(topic, "CLEAR")
    time.sleep(0.2)
    client.publish(topic, "TEXT:Today's weather: 22°C, sunny")
    time.sleep(2)
    client.publish(topic, "STATUS:OK")
    client.disconnect()

client = mqtt.Client()
client.on_connect = on_connect
client.connect(broker, port, 60)
client.loop_forever()

The AI runs this script in the sandbox (30-second timeout). The ESP32 receives the messages and updates the VGA display accordingly.

4. Real Scenario: IoT Dashboard with Live Graphs

Let’s extend the example: the ESP32 also reads a DHT22 sensor and publishes the temperature to topic asi/sensor/temp. ASI Biont subscribes to that topic, analyzes the data, and sends a graph command back.

ESP32 code addition (in loop):

float temp = dht.readTemperature();
client.publish("asi/sensor/temp", String(temp).c_str());
delay(10000);

AI script on ASI Biont (generated by chat):

import paho.mqtt.client as mqtt
import json

broker = "broker.hivemq.com"

def on_message(client, userdata, msg):
    if msg.topic == "asi/sensor/temp":
        temp = float(msg.payload.decode())
        if temp > 30:
            # Send alert to VGA display
            client.publish("asi/vga/command", "TEXT:WARNING: Temp=" + str(temp) + "°C")
        else:
            # Show normal status
            client.publish("asi/vga/command", "TEXT:Temp=" + str(temp) + "°C OK")

client = mqtt.Client()
client.on_message = on_message
client.connect(broker, 1883, 60)
client.subscribe("asi/sensor/#")
client.loop_forever()

This is a fully autonomous loop: ESP32 publishes sensor data → ASI Biont receives and decides → publishes display command → VGA updates.

Alternative: Hardware Bridge (COM Port) for Wired Control

If your ESP32 is not Wi-Fi capable or you prefer a direct serial connection, use ASI Biont’s Hardware Bridge. On your PC, run:

pip install pyserial requests websockets
python bridge.py --token=YOUR_API_KEY --ports=COM3 --baud 115200

Then in the chat, tell the AI:

"Use serial_write_and_read to send command TEXT:Hello World to the device via COM3."

The AI calls industrial_command(protocol='serial', command='serial_write_and_read', data='544558543a48656c6c6f20576f726c640a') (hex for "TEXT:Hello World\n"). The bridge sends it, ESP32 receives, and VGA displays the text.

Why ASI Biont Eliminates Manual Coding

Traditional integration would require you to:
1. Write an MQTT client script
2. Handle reconnection logic
3. Parse incoming data
4. Write decision logic
5. Deploy the script to a server or Raspberry Pi

With ASI Biont, you just describe the goal in natural language. The AI generates, tests, and runs the code instantly. No need to install Python locally, no need to manage a server — everything runs in the cloud sandbox. If you need to change behavior, just say: "Now show a graph of temperature over the last 5 readings." The AI rewrites the script and deploys it.

Conclusion

Connecting a VGA output on ESP32 to ASI Biont creates a powerful visual automation node. Whether you use MQTT for wireless flexibility or Hardware Bridge for direct serial control, the AI agent handles all the integration code. You get a real-time display that can show weather, IoT metrics, alerts, or custom messages — all controlled through a chat conversation.

Try it now: Go to asibiont.com, create a free account, and tell the AI: "Connect to my ESP32 VGA display via MQTT and show the current temperature." Watch the AI write the code and your display come alive in seconds.

← All posts

Comments