Back to List

Motor Driver Configuration System

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.

Motor Driver Configuration System - Media 1
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
#Motor Control
#Industrial Software
#React
#Data Visualization
#Multi-language
#Configuration Dashboard