§ 01 · PROJECT
Zaylo Remote.
Multi-tenant companion app for smart switches and whisper-quiet blinds.
The central nervous system of the Zaylo home automation ecosystem. Built as a high-performance Progressive Web App (PWA), it enables sub-100ms multi-device control via secure MQTT WebSockets, robust multi-user home management through Firebase, and a unique Web Bluetooth (BLE) rescue terminal to restore offline IoT hardware. Multiple family members can share a single home — each user gets full device control, live state syncing, and independent automation schedules from their own phone.
LIVE EMULATOR · Click/tap the device cards inside the screen to interact. Toggle the hardware power button on the right edge to put the screen to sleep.
§ 02 · OVERVIEW
Everything under control, in one dashboard.
The Zaylo Remote Companion App was built from the ground up to solve the friction of smart home interaction. Instead of clunky setup steps and slow loading screens, the PWA boots instantly, utilizing persistent reactive local caching to render the dashboard before any network request completes. By coupling Firebase with WebSockets-based MQTT, it bridges the gap between secure multi-user management and sub-100ms device action telemetry.
If an ESP32-C6 controller loses its Wi-Fi configuration due to router updates, the app provides a secure Web Bluetooth (BLE) fail-safe interface. Users can link directly to the physical switch or blinds motor using standard web APIs to troubleshoot configurations, perform diagnostics, or flash updated credentials securely, removing the need for a local USB cable.
§ 03 · TELEMETRY DATAFLOW
Synchronized nodes. Real-time control.
The companion app operates as the centralized network gateway, dynamically routing data across direct bluetooth links, high-latency cloud storage, and ultra-low latency telemetry queues. Hover over nodes to highlight telemetry channels.
PWA App
Cloud Node
Web API
MQTT Broker
Hardware
WebSocket/TCP
Wireless/BLE
§ 04 · COMPANION ENGINE
Engineered features analyzed.
01
Central StateStore
A reactive, event-driven state cache that manages single source of truth structures. It eliminates race conditions and renders state mutations instantly across components, caching values in sessionStorage to bypass loading flashes during app navigation.
02
Atomic Firebase Guard
Integrates Firebase Auth and Firestore with a strict permission layer. Active device listings and homes are synchronized on a multi-user, multi-tenant hierarchy. Config data uses dual-slot validation with CRC32 checks to guarantee data safety.
03
Sub-100ms MQTT Loop
Direct pub/sub WebSocket communication with the Mosquitto broker. Device commands, state polls, and LWT (Last Will & Testament) availability reports are handled within 100 ms, ensuring that your switch toggles instantly.
04
BLE Rescue Interface
Uses the Web Bluetooth API to connect directly to the ESP32-C6 in credential recovery situations. Provides an interactive serial command console to probe logs, factory reset, or supply new Wi-Fi credentials without touching a physical terminal.
05
Tactile Motor Simulation
In offline demo/emulation mode, the app mimics TMC2209 motor physics. Rather than jumping positions instantly, the blinds slider emulates motor torque and rotational inertia, showing a smooth step-wise motion transition over a few seconds.
06
Multi-User Home Sharing
Multiple family members can join a shared Zaylo home from their own devices. Each member gets independent device control, real-time state syncing, personal automation schedules (sunrise/sunset, motion-triggered routines), and presence detection — all synchronized through secure Firebase multi-tenant architecture with Firestore document-level access rules.
07
PWA Service Worker
Assets are pre-fetched and stored using a custom Service Worker cache (`sw.js`). This enables instant subsequent loads, robust offline support, and standard background telemetry synchronization even when the main interface is closed.
§ 05 · COMPANION PANELS
Companion App page catalog.
Explore each active section of the emulated app. Navigate inside the smartphone iframe above to view these live pages in action.
01 · Home Dashboard
The centralized hub showing available smart devices. Features live status labels, responsive control buttons, device connectivity logs, quick profile home switcher for multi-user households, and an invitation system to add family members to your shared home.
02 · Switch Control Console
Dedicated touch utility for the Light Switch. Toggles raw relay state, activates ambient light automations, enables motion sensor triggers, and configures scheduled presence events.
03 · Blinds Stepper Engine
Control terminal for the Smart Blinds. Features a smooth capacitive position slider with real-time visual feedback, custom preset positions, sunrise/sunset automated schedules, radar-based presence detection through linked Lumibots, jog control buttons for microsteps, save limit calibrators, and Target Wake Time (TWT) low-power sleep intervals.
04 · Setup Wizard & BLE Rescue
Direct local bluetooth pairing dashboard. Step-by-step assistant guiding users to configure Wi-Fi names, assign MQTT broker IP/Paths, and verify local credential synchronization.
05 · Telemetry Diagnostics
Under-the-hood diagnostics terminal. Shows raw JSON MQTT events, latency meters, service workers statuses, Firestore sync streams, and manual broker credentials override.
§ 06 · INTEGRATION
Integrated IoT Devices.
Zaylo Remote was engineered to coordinate physical smart devices. Explore the hardware nodes controlled by this dashboard.
→
P-01
Smart Light Switch →
Servo-actuated physical light switch attachment. Features capacitive debounced manual touch, gesture automations, and local scheduling.
→P-02
Smart Blinds Controller →
Silent stepper motor driver pulling roller blinds chains. Features sub-millimeter position accuracy, TWT battery savings, and sunrise/sunset schedules.