Web-based motor driver configuration and parameter tuning system for robotics and motor control engineers Connect devices via QR code or product name and design various controllers with intuitive interfaces.
1 / 6
Roles
PlanningDesignFrontendBackend
Tech Stack
React 18
Vite
Ant Design
styled-components
Plotly.js
i18next
React Router
Key Features
Device Connection: Connect motor drivers via QR code scanning or product name/model number lookup
Controller Design Wizard: Step-by-step UI for basic/advanced controller parameter configuration and validation
Real-time Data Visualization: Plotly.js-based graphs displaying frequency response, friction characteristics, and more
Multi-language Support: Real-time Korean/English language switching
Sensor & Encoder Setup: Configuration for various sensor types including Hall sensors, absolute/incremental encoders
Key Achievements
Multi-step UI Pattern: Implemented 7-step advanced controller design wizard using Steps component and state management
Responsive Layout: Optimized complex form layouts for tablet/desktop screens using Ant Design Grid breakpoints
Custom Theme System: Built consistent design system combining styled-components ThemeProvider with Ant Design ConfigProvider
Plotly.js Chart Integration: Developed interactive line chart components with dynamic data sources and custom styling
Multi-language Architecture: Modular language file separation using i18next namespace-based translation structure
Reusable Component Library: Built component library including SectionContainer, GroupHeader for consistent UI patterns