Smart Home Setup
Client-ready checklist for wiring, rooms, and device mapping.
Smart Home Setup Guide
Overview
Fantom Interio Studio's Smart Home Hub provides per-project device control, energy monitoring, voice commands, and AI-powered automation planning. Devices can be controlled via:
- Demo mode — Simulated in-browser (no hardware needed)
- ESP32 Direct — WebSocket to a local ESP32 microcontroller
- MQTT Cloud — Any MQTT broker (HiveMQ, Mosquitto, AWS IoT, etc.)
Quick Start
1. Studio Smart Home Tab
In /studio, navigate to the Smart Home tab (🏠) to:
- View and toggle devices for the current project
- Launch preset scenes (Morning, Night, Movie, Away, Relax)
- Monitor live energy consumption
- Use voice commands (Chrome/Edge only)
2. Auto-Detect Devices from Floor Plan
- Upload a floor plan image (JPG/PNG)
- Studio auto-parses rooms → drops you into 3D Studio
- AI marks smart devices (sensors, cameras, lights)
- Switch to Smart Home tab — devices appear automatically
3. Add Devices Manually
In the Smart Home tab, click + Add Device and fill in:
- Name, type (light/fan/AC/TV/etc.), room
Voice Commands
Click the 🎤 button (requires Chrome or Edge desktop).
| Say | Action |
|---|---|
| "all off" | Turn off all devices |
| "all on" | Turn on all devices |
| "lights on / lights off" | Toggle all lights |
| "AC on / AC off" | Toggle air conditioning |
| "good morning" | Activate morning scene |
| "good night" | Activate night scene |
| "movie time" | Activate movie scene |
| "away mode" | Activate away mode |
You can also say any device name to toggle it (e.g., "bedroom light").
Scenes
Preset scenes apply bulk on/off states to device types:
| Scene | Effect |
|---|---|
| 🌅 Morning | Lights → ON |
| 🌙 Night Mode | All devices → OFF |
| 🎬 Movie Time | All devices → OFF, dim |
| 🔒 Away | All devices → OFF |
| 🛁 Relax | Lights → ON |
Custom scenes can be created via the full dashboard at /smart-home.
ESP32 Integration
See ESP32_QUICKSTART.md for hardware setup.
Once your ESP32 is running, open the Connection Hub in /smart-home and:
- Set mode to ESP32 Direct
- Enter your ESP32's local IP and WebSocket port (default
81) - Click Connect
Device commands are sent as JSON:
{ "type": "command", "device": "light_bedroom", "action": "toggle" }
MQTT Integration
Use any MQTT broker with WebSocket support.
Recommended public test broker: ws://broker.hivemq.com:8000/mqtt
Configuration in /smart-home → Connection Hub:
- Broker URL, port, username/password, topic prefix
The MQTT client utility (utils/mqttClient.ts) supports:
- Auto-reconnect
- Wildcard topic subscriptions (
home/lights/#) - Singleton per broker URL
Energy Monitoring
The hub calculates live wattage from device states:
| Device | Est. Watts |
|---|---|
| 💡 Light | 10 W |
| 🌀 Fan | 75 W |
| ❄️ AC | 1500 W |
| 🧊 Fridge | 150 W |
| 📺 TV | 120 W |
| 🌊 Washer | 500 W |
| 🍳 Oven | 2000 W |
Formula:
- Daily kWh = Total Watts × 10 hours ÷ 1000
- Daily Cost = Daily kWh × ₹8 per unit
Data Persistence
Smart home device/scene/energy state is stored in browser localStorage via Zustand persist middleware, keyed by project ID. Data survives page refreshes but clears on browser data wipe.
To export a project's smart home data, use the Export button in the settings (planned feature in v2).