Feat/swap root to hmi - #8
Conversation
Implemented a comprehensive HMI-style frontend interface for controlling 20 electrochromic panels (18 facade, 2 skylight) across two rooms. Frontend Features: - New HMI prototype UI accessible via /index-hmi.html - Room grid layout with organized panel displays (3x3 grid for facade panels) - Skylights displayed prominently at top, centered on own row - Full panel control tiles with sliders, quick-set buttons, and apply controls - Compact view when side panel is open for group/routine management - Visual status indicators showing current tint levels with color coding - Transition indicators for panels actively changing tint - Manual mode as default control state with clear visual badges - Control priority system (Manual > Group > Routine) with conflict handling - Active controllers bar showing currently active groups/routines - Side panel for creating groups (routines UI ready, backend pending) - Toast notification system replacing blocking alerts - Frontend API client with createGroup method (backend endpoint pending) Control Management: - Implemented controlManager utility for tracking panel control sources - Visual indicators (badges and borders) for control state - Automatic control release after transitions complete - Conflict detection and user confirmation for overrides UI/UX Improvements: - HMI-inspired dark theme with blue accents - Consistent styling matching industrial panel aesthetics - Reduced overlay tint when side panel is open (15% opacity) - Responsive layout with proper centering - Cards sized appropriately for P10-P18 panel IDs without truncation - Skylight cards appropriately sized in compact view Mock Data & Testing: - Complete mock API implementation for offline development - Mock data includes all 20 panels with realistic initial states - Mock group creation with validation and state persistence
|
Slider issue is gone. Group control works. Only thing I see which is a little bit of a nitpick but the sliders location doesn't update when control via panel group, it remains at the location it was set to before a group value is applied. It still works fine functionally, so we can chose to leave it as is if we want. I think we should push now and that can be fixed later down the line as it is non critical. |
There was a problem hiding this comment.
Pull Request Overview
This PR implements an HMI (Human-Machine Interface) prototype as the default app for local development, adding comprehensive group management capabilities to control multiple panels simultaneously. Key features include group creation/control from the main page, a control priority system, toast notifications, and visual feedback for panel states and transitions.
- Adds HMI interface with group management controls
- Implements control manager to track and prioritize manual, group, and routine operations
- Integrates backend group creation API with frontend UI
- Adds toast notification system for user feedback
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 16 comments.
Show a summary per file
| File | Description |
|---|---|
| web/index.html | Updates entry point to load HMI prototype by default |
| web/vite.config.ts | Adds multi-page build configuration for HMI variant |
| web/src/main-hmi.tsx | New HMI app entry point with toast provider |
| web/src/AppHMI.tsx | Main HMI application with group controls and panel management |
| web/src/components/*.tsx | New UI components for rooms, side panel, and active controllers |
| web/src/utils/*.ts | New utilities for toast notifications and control management |
| web/src/styles-hmi.css | Comprehensive HMI styling with industrial design theme |
| web/src/mockData.ts | Mock API implementation for testing without backend |
| web/src/api.ts | Adds createGroup endpoint and preserves error status codes |
| svc/app/simulator.py | Adds async panel transitions and group creation in simulator |
| svc/app/service.py | Adds createGroup service method |
| svc/app/routes.py | Adds POST /groups endpoint for group creation |
| svc/app/models.py | Adds GroupCreate request model |
Comments suppressed due to low confidence (2)
web/src/AppHMI.tsx:78
- Unused variable priority.
const priority = existingControl.type === 'routine' ? 1 : 2;
web/src/AppHMI.tsx:79
- Unused variable manualPriority.
const manualPriority = 3; // Manual always wins
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
Ok, believe it is good to merge now. |
Summary
Made the HMI prototype the default app served locally and added working group management so users can create groups and set group tint levels from the main page. Fixed the create group API mismatch and wired the frontend to the backend.
Type
Testing
Start backend service and frontend dev server
Open localhost 5173 and confirm the HMI loads by default and shows health ok
Open Manage and create a group with at least one panel and confirm success
Use the group control card at the top of the main page to set a level and confirm panels in the group update
Change a single panel with the slider and confirm UI transition behavior and that dwell time errors show as warnings
Risk and rollout
Low risk changes to frontend entry point and group api.
Checklist