Graphical Object Connector Routing Optimization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing techniques for rendering and manipulating graphical objects in web applications using native browser functionality are slow, leading to poor responsiveness and user experience due to the need to redraw the entire screen with every change, and non-native technologies like Flash restrict deployment and consistency across different browsers and file formats.
Innovation Solution
The method involves rendering graphical objects in separate layers and optimizing connector routing between objects by minimizing elbows in the connector, allowing for real-time rendering of manipulated objects without re-rendering unaffected objects, and using intermediate data structures to decompose rendering information into distinct attributes for efficient re-rendering.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Reliability
If the entire working area is redrawn every time an object moves using native browser functionality, then the graphical application can maintain visual consistency, but the responsiveness and user experience deteriorate due to visual latency and lag
Solution Approach 1:
The graphical scene is divided into multiple independent layers, each representing a separate graphical object or group of objects. When an object moves, only its specific layer needs to be updated rather than the entire scene, significantly improving responsiveness while maintaining visual consistency. This layering approach allows selective re-rendering of affected layers only.
2Speed
If non-native browser technologies like Flash are used to improve responsiveness and real-time manipulation, then the user experience improves, but the deployment flexibility and browser compatibility worsen
Solution Approach 1:
The patent creates a universal layering system that works across all modern browsers using native HTML5 Canvas and SVG capabilities. This multi-functional approach allows the same layer-based architecture to provide real-time manipulation performance similar to Flash while maintaining compatibility with all browsers that support standard web technologies, eliminating the need for plugin-based solutions.
3Shape
If the connector routing is optimized by minimizing elbows, then the visual clarity and professionalism improve, but the computational complexity of routing calculations increases
Solution Approach 1:
The routing optimization applies selective elbow minimization based on context. Instead of universally minimizing all elbows in all situations, the system intelligently determines when and where elbow reduction is appropriate, applying optimization only to specific connector segments where it improves visual clarity without unnecessarily complicating the routing calculations for entire connector networks.
Data Source
Figure 1
Figure 2A
Figure 2B
AI summary
In one example, a method of connecting graphical objects on a display includes routing a connector that includes a first portion and first and second end terminals between two end points. After routing the connector between the end points, the first portion of the connector is associated with a first plane. The method further includes receiving user input that manipulates a location of at least one of the first and second end terminals of the connector. The connector is then routed between the first and second end points by routing the first portion of the connector in the first plane.