[WIP] Update dashboard to use dark mode theme and fix mobile app connection

[Copilot]

MASH IoT Device Dashboard Improvements

Tasks Overview

• Convert alerts and dashboard to dark mode theme (remove white backgrounds)
• Create floating QR code button at bottom right of dashboard
• Create QR code modal for mobile app connection
• Remove redundant permanent QR connection at bottom of dashboard
• Fix sensor data issue when connecting via mobile QR scan
• Test all changes and verify dark mode consistency

Dark Mode Theme Updates

• Update alerts.py - convert alert card backgrounds to dark theme colors
• Update dashboard.py - ensure dark backgrounds throughout
• Verify all UI elements use dark theme colors from config.py

QR Code Modal Implementation

• Add floating QR button to dashboard (bottom right corner)
• Create modal popup with QR code for device pairing
• Use qrcode library to generate pairing URL: https://mash-app.com/pair?device={device_id}
• Add close button to modal
• Remove any permanent QR display on dashboard

Sensor Data Connection Fix

• Investigate why sensor data becomes null after QR connection
• Check if API callback registration is affected by mobile app connection
• Verify arduino_bridge.get_latest_reading() returns data after connection
• Test sensor data persistence during mobile app connection

Testing

• Run the touchscreen UI and verify dark theme
• Test QR code generation and modal display
• Test mobile app connection doesn't break sensor data
• Take screenshots of UI changes

Original prompt

Can you make sure its in dark mode theme (dark) Do not add a white background or anything related to light background this is to match with the other pages.

Also, I noticed that in the dashboard, the Connect Mobile App is permanently on the bottom of the screen and not shown as Modal. I like the design/UI but the floating QR at the bottom right should open this modal instead. Then you must remove the redundant QR connection that generates with that Floating QR Icon and use the modal version of that Connect Mobile App QR that was on below dashboard.

Also, fix the issue where we connect using the Mobile App using QR from the IoT,

Alright I think I know the issue, when we use the test_arduino.py, it reset the connection and the RPI can now show the sensor data.

From the test_arduino.py:
(venv) mash@mash:~/MASH-IoT/scripts $ python3 test_arduino.py

M.A.S.H. IoT - Arduino Connection Test

Initializing connection (auto-detect ON, auto-reconnect ON)...

Connecting to Arduino...
INFO:app.core.serial_comm:[SERIAL] Scanning for Arduino...
INFO:app.core.serial_comm:[SERIAL] Found Arduino: /dev/ttyUSB0 (USB2.0-Ser!)
INFO:app.core.serial_comm:[SERIAL] Connecting to /dev/ttyUSB0...
INFO:app.core.serial_comm:[SERIAL] ✓ Connected to Arduino on /dev/ttyUSB0 @ 9600 baud
Connection successful!
Port: /dev/ttyUSB0
Baud: 9600

---

Listening for sensor data (press Ctrl+C to stop)...

INFO:app.core.serial_comm:[SERIAL] Listen loop started
INFO:app.core.serial_comm:[SERIAL] Started listening thread

Test will run for 50 packets or until Ctrl+C
Try unplugging and replugging Arduino to test auto-reconnect!
Watch for: 🔴 DISCONNECTED → 🟢 CONNECTED messages

============================================================
🟢 CONNECTED - Arduino is online

[Packet #1] Received at 23:16:05

🍄 Fruiting Room:
Temperature: 21°C
Humidity: 61.7%
CO2: 912 ppm

🌱 Spawning Room:
Temperature: 21.3°C
Humidity: 53.9%
CO2: 861 ppm

📊 Testing room-specific data methods:
get_fruiting_room_data(): {'temp': 21, 'humidity': 61.7, 'co2': 912}
get_spawning_room_data(): {'temp': 21.3, 'humidity': 53.9, 'co2': 861}

[Packet #2] Received at 23:16:10

🍄 Fruiting Room:
Temperature: 20.8°C
Humidity: 62.4%
CO2: 912 ppm

🌱 Spawning Room:
Temperature: 21°C
Humidity: 54.7%
CO2: 1038 ppm

[Status Check] 🟢 CONNECTED | Packets received: 2

[Packet #3] Received at 23:16:15

🍄 Fruiting Room:
Temperature: 20.6°C
Humidity: 63%
CO2: 910 ppm

🌱 Spawning Room:
Temperature: 20.8°C
Humidity: 55.4%
CO2: 1076 ppm

From the http://192.168.1.16:5000/api/latest_data
{
"arduino_connected": true,
"backend_connected": false,
"fruiting_actuators": {
"exhaust_fan": false,
"humidifier_fan": false,
"intake_fan": false,
"led": false,
"mist_maker": false
},
"fruiting_condition": "Critical",
"fruiting_condition_class": "error",
"fruiting_data": {
"co2": 995,
"humidity": 63.2,
"temp": 20.8
},
"spawning_actuators": {
"exhaust_fan": false
},
"spawning_condition": "Critical",
"spawning_condition_class": "error",
"spawning_data": {
"co2": 1063,
"humidity": 55.3,
"temp": 21.1
},
"uptime": "0h 57m",
"warmup_complete": true,
"warmup_remaining": 0
}

But when we tried to connect the mobile app with QR scanning, the sensor doesn't register again.

{
"arduino_connected": true,
"backend_connected": false,
"fruiting_actuators": {
"exhaust_fan": false,
"humidifier_fan": false,
"intake_fan": false,
"led": false,
"mist_maker": false
},
"fruiting_condition": "Sensor Error",
"fruiting_condition_class": "error",
"fruiting_data": null,
"spawning_actuators": {
"exhaust_fan": false
},
"spawning_condition": "Sensor Error",
"spawning_condition_class": "error",
"spawning_data": null,
"uptime": "1h 1m",
"warmup_complete": true,
"warmup_remaining": 0
}

It might be an issue with the connection of the http requests.

The user has attached the following file paths as relevant context:

• .github\copilot-instructions.md
• .github\copilot-instructions.md
• rpi_gateway\app\web\templates\alerts.html
• rpi_gateway\app\web\templates\dashboard.html
• rpi_gateway\app\core\serial_comm.py
• lib\presentation\screens\devices\device_connection_screen.dart

[Chronological Review: The conversation began with the ...

Created from VS Code.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.