Layered Graphical Object Rendering for Browser Consistency
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 each change, and are limited by the use of proprietary plugins like Flash that restrict deployment and consistency across different browsers and file formats.
Innovation Solution
Rendering graphical objects within separate layers and separating rendering information into sets of attributes, allowing only affected attributes to be re-rendered in response to user input, while maintaining consistent output across different browsers and file formats.
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 deteriorates due to slow rendering speed and visual latency
Solution Approach 1:
The graphical workspace is divided into multiple layers, each containing specific graphical objects. When an object moves, only the layers containing that object and its connected objects are re-rendered, rather than the entire workspace. This segmentation allows selective updating of affected areas, maintaining visual consistency while significantly improving rendering speed and responsiveness.
2Speed
If proprietary plugins like Flash are used to improve rendering performance and interactivity, then the responsiveness improves, but the adaptability deteriorates due to limited deployment across different browsers and platforms
Solution Approach 1:
The patent implements a layer-based rendering system using standard HTML5 canvas and SVG elements that can be executed across all modern browsers without requiring proprietary plugins. This universal approach maintains rendering performance and interactivity while ensuring broad compatibility across different browsers, operating systems, and devices, eliminating the deployment limitations of Flash and similar plugins.
3Reliability
If the entire scene is re-rendered in SVG when markup changes, then the graphical output remains consistent, but the processing time increases due to re-flow and re-rendering overhead
Solution Approach 1:
The patent extracts and isolates only the affected layers and objects that need re-rendering when markup changes occur, rather than re-rendering the entire SVG scene. By identifying and updating only the specific portions of the graphical workspace that are impacted by markup changes, the system maintains rendering consistency while significantly reducing processing time and re-rendering overhead.
4Productivity
If different browsers use different rendering techniques (VML vs Canvas), then each browser can optimize for its native capabilities, but the homogeneity deteriorates causing inconsistent output across browsers
Solution Approach 1:
The patent implements a standardized layer-based rendering architecture using HTML5 canvas and SVG elements that produces consistent graphical output across all browsers. By establishing a uniform rendering model where graphical objects are organized into layers with defined rendering rules, the system ensures homogeneous output appearance regardless of the underlying browser rendering implementation, eliminating inconsistencies between VML, Canvas, and other browser-native rendering techniques.
Data Source
AI summary
A method of connecting graphical objects on a display includes associating a first portion of a connector with a first plane such that the first portion of the connector tends to remain in the first plane. The method includes receiving user input that manipulates a location of a first end terminal of the connector and/or a second end terminal of the connector. The method includes determining a first minimum number of elbows in the connector when the first portion of the connector is to remain routed in the first plane the manipulation. The method includes determining a second minimum number of elbows included in the connector when the connector does not remain routed in the first plane the manipulation. The method includes routing the first portion in the first plane unless the first minimum number of elbows is greater than the second minimum number of elbows.