§ 01 · PROJECT
Zaylo Remote.
One app for every Zaylo switch and blind in the house.
Still actively maintained — regularly updated & supported.
Zaylo Remote is the control centre for the whole Zaylo ecosystem. It opens instantly as a Progressive Web App, sends every command in under a tenth of a second over MQTT, and keeps every phone in the household in sync. If a device ever drops off Wi-Fi, the app pairs to it directly over Bluetooth and gets it back online — no cables, no factory reset, no waiting for support.
Zaylo Live Link
MQTT Online
LIVE EMULATOR · Tap the device cards on the screen to control them. The power button on the right edge sleeps the display, just like a real phone.
§ 02 · OVERVIEW
Every device, every person, one dashboard.
Most smart-home apps make you wait — for a splash screen, a sign-in, a cloud round-trip. Zaylo Remote skips all of it. The dashboard is painted from a local cache before the network even responds, and every tap is routed straight through MQTT over WebSockets, so a switch flicks in under 100 milliseconds. Sign-in and home sharing run on Firebase, which lets a parent, a partner, and a child all control the same devices from their own phones at the same time.
If a router change or password update ever knocks a device offline, the app has a built-in rescue mode. It pairs to the switch or the blind directly over Web Bluetooth, pushes new Wi-Fi credentials in seconds, and surfaces live diagnostics straight from the device — all without a single cable, factory reset, or trip to the cupboard where the spare USB lives.
§ 03 · NETWORK ARCHITECTURE
Three networks. One app at the centre.
The app routes traffic across three different channels: Firebase for accounts and shared homes, MQTT for live device control, and Web Bluetooth for offline rescue. Hover any node to trace its data path through the system.
PWA App
Cloud Node
Web API
MQTT Broker
Hardware
WebSocket/TCP
Wireless/BLE
§ 04 · UNDER THE HOOD
What powers the app.
Seven pieces of plumbing that quietly do their job so the interface stays fast, the data stays safe, and the lights stay responsive.
01
Reactive state store
One central store holds the state of every device, home, and user. When anything changes — a toggle, an automation, another phone — the screen updates instantly without a refresh. Values are mirrored to sessionStorage, so flipping between screens never flashes a loading spinner.
02
Secure Firebase backbone
Sign-in, home membership, and device permissions are all enforced by Firestore rules — nobody can see or control a device that isn't theirs. Settings are written using a dual-slot format with CRC32 checks, so a power cut during a save can never leave a device with corrupt config.
03
Sub-100 ms MQTT loop
Every command travels over an MQTT WebSocket straight to the device. Commands, state updates, and offline alerts all complete in under 100 ms — fast enough that tapping a switch in the app feels exactly like flicking a physical one on the wall.
04
Bluetooth rescue mode
When a device is offline, the app pairs to it directly over Bluetooth from any modern browser. You get a live console to read logs, push fresh Wi-Fi credentials, or factory-reset the hardware — without unscrewing anything from the wall or hunting for a USB cable.
05
True motor simulation
The blinds slider in this demo isn't a faked animation — it runs the same motion curve as the real TMC2209 stepper driver, with proper acceleration ramps and idle holds. What you see in the emulator is exactly what the motor does on the rail.
06
Shared household homes
Invite anyone in the family and they'll see the same devices on their own phone. Each person keeps their own schedules — sunrise wake-ups, motion-triggered routines, bedtime sequences — while the underlying home stays in sync for everyone in real time.
07
Installable PWA
A custom Service Worker caches the whole app on first visit, so it opens like a native app from the home screen — instantly, even on a flaky connection. Notifications and telemetry keep flowing in the background while the screen is locked.
§ 05 · APP TOUR
A walkthrough of every screen.
Every screen below is the same one running in the phone above — tap a device card on the emulator to open it for real.
01 · Home dashboard
The landing screen. Lists every device with its live status, lets you flip between shared homes, and opens an invite flow so the rest of the household can join in seconds.
02 · Switch console
The full control panel for any Zaylo Smart Switch — manual toggle, ambient-light rules, motion triggers, and a schedule editor for presence-based automations.
03 · Blinds control
Drag the slider to set the blinds to any percentage open. Save favourite positions, schedule them to sunrise or sunset, jog in single steps, and recalibrate the travel limits when the chain is replaced.
04 · Setup & rescue
A guided pairing flow for first-time setup and offline rescue. Walks you through choosing a network, entering broker details, and confirming the handshake — all over Bluetooth, with nothing to install.
05 · Diagnostics
A developer-style console with live MQTT traffic, round-trip latency, Service Worker state, and Firestore sync logs. Useful when something looks wrong — and a nice look at the internals when it doesn't.
§ 06 · HARDWARE
The hardware on the other end.
Zaylo Remote pairs with two hardware products in the Zaylo family. Tap a card to read about the device that lives behind the app.
→
P-01
Smart Light Switch →
A servo-driven cap that snaps over any rocker switch. Adds touch control, radar presence sensing, and full app control without changing a single wire behind the wall.
→P-02
Smart Blinds Controller →
A near-silent stepper that clips onto a roller-blind chain. Drops to any percentage with sub-millimetre accuracy, sleeps between moves to save battery, and wakes for sunrise and sunset on schedule.