Industrial Process Graphics Auto-Layout for Multi-Screen HMI Usability
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current methods for creating industrial process graphics result in a poor user experience when displayed on devices with varying screen sizes, as they are typically designed for specific screens, leading to cumbersome interactions, unreadable fonts, and difficulty activating graphical elements, especially on smaller screens like smartphones and smartwatches.
Innovation Solution
The HMI auto layouter software converts existing process graphics to adapt to different screen characteristics by reshaping and resizing graphical and textual elements, exploiting domain knowledge to optimize graphics for specific screens and tasks, including resizing fonts, reshaping visuals, and adjusting interaction points.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If process graphics are created manually for specific screen sizes, then the graphics can be optimized for that specific screen, but the user experience deteriorates when displayed on devices with different screen sizes
Solution Approach 1:
The patent implements dynamic layout adjustment where graphic elements automatically reposition and resize based on the detected screen characteristics. The system analyzes screen size, resolution, and orientation to dynamically transform the graphic layout, ensuring optimal display on any device without requiring manual recreation for each screen size.
Solution Approach 2:
The system changes multiple parameters simultaneously including element size, position, font scale, and layout configuration based on screen parameters. By detecting screen characteristics and adjusting these parameters automatically, the graphic maintains readability and usability across diverse devices while preserving the original design intent.
2Adaptability or versatility
If process graphics are resized for smaller screens, then display compatibility improves, but interaction difficulty increases due to tiny activation areas and unreadable fonts
Solution Approach 1:
The patent applies different transformation rules to different graphic elements based on their importance and function. Critical interaction elements maintain larger activation areas, while non-critical elements may be condensed. Fonts are selectively scaled to ensure readability, and the layout reorganizes to preserve touch target sizes appropriate for each device type.
Solution Approach 2:
The system transforms the 2D graphic layout into a responsive multi-scale representation by adjusting elements along multiple dimensions (size, position, orientation) simultaneously. This dimensional transformation allows the graphic to adapt to various screen aspect ratios and sizes while maintaining interaction usability through intelligent element redistribution.
3Manufacturing precision
If engineers create separate graphics for different screen sizes, then each graphic can be optimized for its target screen, but the development cost and complexity increase
Solution Approach 1:
The patent creates a universal graphic design system where a single source graphic contains all necessary elements and metadata to generate optimized versions for any screen size. The system uses parameterized element definitions and transformation rules that work across all devices, eliminating the need to maintain separate graphic files for each screen size while preserving screen-specific optimization.
4Adaptability or versatility
If process graphics are displayed on mobile devices with protective gear, then field accessibility is enabled, but interaction accuracy deteriorates due to difficulty activating small elements
Solution Approach 1:
The system identifies and enhances interaction elements by increasing their activation areas and visual prominence specifically for mobile and wearable device displays. Elements that require precise activation are given larger touch targets and clearer visual feedback, while maintaining the overall graphic compactness needed for small screens and protective gear scenarios.
Data Source
AI summary
A method for auto-layouting graphic objects includes: receiving input data including input image data, library data, and screen parameter data as received input data; and analyzing the received input data and creating output image data based on reshaping of the input image data based on the library data and the screen parameter data, the output image data being optimized for a specific screen defined by the screen parameter data.