
WebScreen Meets MQTT: Powering Your Desk Setup with IoT
If you’ve ever wanted to quickly visualize real-time data from a wide variety of IoT devices—right on the same small screen you use for notifications—then you’ll love what happens when WebScreen integrates with MQTT.
What is WebScreen?
WebScreen is a mini, high-resolution display that perches on top of your monitor, giving you essential information at a glance. It’s powered by an ESP32-S3 microcontroller, supports Wi-Fi and Bluetooth, and lets you write custom JavaScript apps stored on a microSD card. You can display everything from notifications and weather updates to stock tickers—all without switching apps or checking your phone.
Why MQTT?
MQTT is a lightweight, publish/subscribe messaging protocol widely used in the Internet of Things (IoT) space. IoT devices can publish data (like sensor readings or status updates) to an MQTT broker, and clients (like your WebScreen) can subscribe to specific topics to get this data instantly.
JavaScript + MQTT on WebScreen
Rather than having to code MQTT handling in a complicated way, you can just write a few lines of JavaScript, and WebScreen will handle all the details under the hood. Here’s a quick example of connecting, subscribing, and reacting to incoming messages:
// 1) Initialize MQTT with broker and port
mqtt_init("test.mosquitto.org", 1883);
// 2) Connect with a chosen client ID
if (mqtt_connect("myWebScreenClient")) {
print("MQTT connected!");
} else {
print("MQTT connection failed!");
}
// 3) Subscribe to a topic
mqtt_subscribe("myhome/lights");
// 4) Register a callback for incoming messages
mqtt_on_message("onMqttMsgReceived");
// 5) Define what happens when a message arrives
function onMqttMsgReceived(topic, payload) {
print("Received topic: " + topic);
print("Message: " + payload);
// Maybe display the message on WebScreen
draw_label("Topic: " + topic, 10, 100);
draw_label("Payload: " + payload, 10, 120);
}
// 6) Call mqtt_loop() regularly if you're doing other work in your JS
function loop() {
mqtt_loop();
// ... any other periodic tasks
}
In this snippet:
mqtt_init(...)
sets up the MQTT broker address and port (e.g., Mosquitto’s public test server).
mqtt_connect(...)
attempts to create a live session with the broker.
mqtt_subscribe(...)
tells WebScreen what topic you want to receive updates on.
mqtt_on_message(...)
points to a JavaScript function name you’ve defined; WebScreen will call that function whenever a message arrives.
onMqttMsgReceived(topic, payload)
is your own JavaScript function that decides what to do with incoming messages—such as printing them on the screen.
mqtt_loop()
can be called periodically (for example, in a loop()
function) to keep MQTT processing active.
Real-World Uses
Smart Home Dashboards: Subscribe to a topic from your smart doorbell or temperature sensor and display the data in real time on WebScreen.
Notifications and Alerts: Receive immediate alerts from a remote device or server, showing warnings or status updates without needing your phone or computer open.
Interactive Controls: Publish updates to MQTT topics from WebScreen’s JavaScript to toggle lights, adjust a thermostat, or send commands to any other MQTT-enabled system.
A Unified Ecosystem
By using MQTT on WebScreen, you’re effectively hooking into one of the biggest and most widely adopted protocols in the IoT world. Whether you have an existing home automation setup, an off-the-shelf MQTT-enabled sensor, or a custom project, you can let WebScreen be the always-on, dedicated display—and even control panel—to tie all these elements together.
If you’re looking to expand your WebScreen’s capabilities to a true IoT command center, integrating MQTT is a straightforward and powerful next step. And best of all, you can do it entirely from JavaScript with just a few function calls—no advanced changes needed elsewhere!

If you want to get the hardware, support our campaign on Crowd Supply. Let’s continue growing this project into an all-in-one, scriptable UI platform for embedded systems.