WIFI / MQTT toggle in moody app #1

New issue

Open

opened 2025-05-15 18:01:22 +00:00 by fgmnts · 0 comments

fgmnts commented

2025-05-15 18:01:22 +00:00

(Migrated from github.com)

Add extra page to app drawer to turn on wifi for connected moody

also have ability to enable mqtt on the moody

UI to manage said mqtt

`Here’s a clean, intuitive mobile interface design concept for a WiFi + MQTT configuration tool, suitable for devices like ESP32-based IoT hardware. This would be great as a web app (PWA or mobile-focused) or a native app UI.

📱 Mobile UI Design: Network + MQTT Settings

🔌 1. WiFi Connection Section

Card Title: "WiFi Settings"

Fields:

SSID: Text Input (with scan button)
- ➕ [Scan WiFi] button opens a modal to pick from nearby networks.
Password: Password Input
[x] Show advanced settings (toggle)

Advanced Settings (visible if toggled on):

Use static IP [ ] (Checkbox)
If checked, show:
- IP Address: Text Input (e.g., 192.168.1.100)
- Subnet Mask: Text Input (e.g., 255.255.255.0)
- Gateway: Text Input (e.g., 192.168.1.1)
- DNS: Text Input (e.g., 8.8.8.8)

☁️ 2. MQTT Configuration Section

Card Title: "MQTT Settings"

Fields:

Enable MQTT [ ] (Toggle Switch)

If enabled, show:

Broker Address: Text Input (e.g., mqtt.example.com)
Port: Number Input (default: 1883 or 8883 for TLS)
Use TLS [ ] (Toggle)
Client ID: Text Input (optional, auto-generate if blank)
Username: Text Input (optional)
Password: Password Input (optional)
Base Topic: Text Input (e.g., /device1/)
[x] Keep alive interval (optional toggle)
- If enabled: Number input in seconds (default: 60)

✅ 3. Save & Connect Button

Button: [ Connect & Save Settings ]

Save settings to device or local storage
Try to connect to WiFi and, if enabled, to MQTT

🔁 Connection Status Section (Optional)

Dynamic Card Showing Status:

WiFi: ✅ Connected / ❌ Not Connected
IP Address: 192.168.1.x
MQTT: ✅ Connected / ❌ Failed / Not Enabled

UI Considerations

Use collapsible cards or accordions for a clean layout.
All password inputs should have an eye icon to toggle visibility.
Validate IP fields with pattern matching and alerts.
Persist settings locally or via an API call to the device.

Would you like this as:

HTML/CSS/JavaScript mobile-first web interface?
Vue or React component?
Flutter widget structure?
Figma/graphic mockup?

Let me know and I’ll generate the code or design for your preferred platform.
`

Add extra page to app drawer to turn on wifi for connected moody also have ability to enable mqtt on the moody + UI to manage said mqtt `Here’s a clean, intuitive **mobile interface design** concept for a WiFi + MQTT configuration tool, suitable for devices like ESP32-based IoT hardware. This would be great as a web app (PWA or mobile-focused) or a native app UI. --- ## 📱 **Mobile UI Design: Network + MQTT Settings** ### 🔌 **1. WiFi Connection Section** **Card Title:** "WiFi Settings" **Fields:** * **SSID:** `Text Input (with scan button)` * ➕ *\[Scan WiFi]* button opens a modal to pick from nearby networks. * **Password:** `Password Input` * **\[x] Show advanced settings** (toggle) **Advanced Settings (visible if toggled on):** * **Use static IP** `[ ]` *(Checkbox)* * If checked, show: * **IP Address**: `Text Input (e.g., 192.168.1.100)` * **Subnet Mask**: `Text Input (e.g., 255.255.255.0)` * **Gateway**: `Text Input (e.g., 192.168.1.1)` * **DNS**: `Text Input (e.g., 8.8.8.8)` --- ### ☁️ **2. MQTT Configuration Section** **Card Title:** "MQTT Settings" **Fields:** * **Enable MQTT** `[ ]` *(Toggle Switch)* **If enabled, show:** * **Broker Address**: `Text Input (e.g., mqtt.example.com)` * **Port**: `Number Input (default: 1883 or 8883 for TLS)` * **Use TLS** `[ ]` *(Toggle)* * **Client ID**: `Text Input (optional, auto-generate if blank)` * **Username**: `Text Input (optional)` * **Password**: `Password Input (optional)` * **Base Topic**: `Text Input (e.g., /device1/)` * **\[x] Keep alive interval** (optional toggle) * If enabled: `Number input in seconds (default: 60)` --- ### ✅ **3. Save & Connect Button** **Button:** `[ Connect & Save Settings ]` * Save settings to device or local storage * Try to connect to WiFi and, if enabled, to MQTT --- ### 🔁 **Connection Status Section (Optional)** **Dynamic Card Showing Status:** * WiFi: ✅ Connected / ❌ Not Connected * IP Address: `192.168.1.x` * MQTT: ✅ Connected / ❌ Failed / Not Enabled --- ### UI Considerations * Use collapsible cards or accordions for a clean layout. * All password inputs should have an eye icon to toggle visibility. * Validate IP fields with pattern matching and alerts. * Persist settings locally or via an API call to the device. --- Would you like this as: * HTML/CSS/JavaScript mobile-first web interface? * Vue or React component? * Flutter widget structure? * Figma/graphic mockup? Let me know and I’ll generate the code or design for your preferred platform. ` ![Image](https://github.com/user-attachments/assets/5b7f695a-b9b6-4f1b-8339-b1fabe4846e8) ![Image](https://github.com/user-attachments/assets/ecfc2c8e-b0b1-4dcf-9ad9-6fbc2f05799c)