Customizable HMI Design Systems Using Parent-Child Architecture for Cross-Platform Integration
摘要
The industrial sector relies heavily on automation to enhance efficiency, reduce costs, and maintain high product quality. Human-Machine Interfaces (HMIs) are essential tools enabling operators to monitor processes, make real-time adjustments, and respond to deviations. However, the lack of standardization across platforms and Integrated Development Environments (IDEs) from major vendors, such as Siemens and Rockwell, results in fragmented user experiences, increased project complexity, and higher maintenance costs. Operators often face challenges managing complex systems with limited training, increasing the risk of errors. This paper proposes a cross-platform HMI design system built on a parent-child architecture inspired by object-oriented programming principles. The parent system defines core UI elements and applies a default theme, while child systems inherit and customize these elements using design tokens. This approach ensures consistency across vendor platforms while enabling scalable and flexible UI customization to meet specific branding and operational needs. The design-to-integration process begins with creating assets in Figma, linking them to design tokens for visual properties like color and typography. These tokens are exported as CSS variables, integrated into a web-based component library, and tested in a storybook before being deployed as vendor-specific project files. The system features over 100 modular, reusable components tailored for industrial HMI applications, supporting white-labeling and cross-platform compatibility. This scalable framework reduces development time, lowers costs, and enhances interface quality. While further validation is needed, the system offers a significant advancement in industrial HMI development, ensuring consistent, customizable, and efficient solutions for diverse industrial environments.