Skip to content

Feat/swap root to hmi - #8

Merged
tylerlv3 merged 13 commits into
mainfrom
feat/swap-root-to-hmi
Nov 10, 2025
Merged

Feat/swap root to hmi#8
tylerlv3 merged 13 commits into
mainfrom
feat/swap-root-to-hmi

Conversation

@CarlosVasquez04

@CarlosVasquez04 CarlosVasquez04 commented Nov 10, 2025

Copy link
Copy Markdown
Collaborator

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

  • [ X] Feature
  • [ X] Fix
  • Docs
  • Chore

Testing

  1. Start backend service and frontend dev server

  2. Open localhost 5173 and confirm the HMI loads by default and shows health ok

  3. Open Manage and create a group with at least one panel and confirm success

  4. Use the group control card at the top of the main page to set a level and confirm panels in the group update

  5. 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

  • Issue linked if applicable
  • Added or updated docs
  • CI green
  • At least one reviewer not the author

tylerlv3 and others added 6 commits November 6, 2025 19:07
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
@tylerlv3

Copy link
Copy Markdown
Collaborator

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.

@tylerlv3
tylerlv3 requested a review from Copilot November 10, 2025 20:40

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread svc/app/simulator.py
Comment thread svc/app/simulator.py
Comment thread web/src/utils/toast.tsx
Comment thread web/src/AppHMI.tsx Outdated
Comment thread svc/app/simulator.py Outdated
Comment thread web/src/mockData.ts Outdated
Comment thread web/vite.config.ts Outdated
Comment thread svc/app/simulator.py
Comment thread web/src/AppHMI.tsx
Comment thread web/src/components/RoomGrid.tsx
tylerlv3 and others added 7 commits November 10, 2025 12:49
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>
@tylerlv3

Copy link
Copy Markdown
Collaborator

Ok, believe it is good to merge now.

@tylerlv3
tylerlv3 merged commit 7e92a63 into main Nov 10, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants