Layered Graphical Object Rendering for Web Application Responsiveness
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, limiting the deployment of rich internet applications and making it difficult to create consistent graphical output across different browsers and file formats.
Innovation Solution
Rendering graphical objects within separate layers and separating rendering information into distinct attribute sets, allowing only affected attributes to be re-rendered in response to user input, thereby minimizing processing overhead and 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 output remains consistent across different browsers, but the responsiveness and user experience deteriorate due to slow rendering speed
Solution Approach 1:
The patent divides the graphical workspace into multiple independent layers, each containing specific graphical objects. When an object moves, only the layer containing that object is re-rendered, rather than the entire workspace. This segmentation allows selective updating of affected layers, dramatically improving rendering performance while maintaining visual consistency across browsers through standardized layer composition and rendering instructions.
2Productivity
If plugins like Flash are used to improve rendering performance and interactivity, then the responsiveness improves, but the adaptability and ease of deployment worsen due to platform limitations and proprietary restrictions
Solution Approach 1:
The patent creates a universal layer-based rendering system that functions across all modern web browsers without requiring proprietary plugins. By defining graphical objects and their relationships through standardized layer structures that can be interpreted by any browser's rendering engine, the system achieves both high performance and broad compatibility. The layer model serves multiple purposes: performance optimization through selective rendering, cross-browser consistency, and ease of deployment as standard web content.
3Manufacturing precision
If the entire scene is re-rendered in SVG when markup changes, then the graphical accuracy is maintained, but the processing time increases significantly
Solution Approach 1:
The patent extracts and isolates only the specific layers that contain changed graphical objects from the complete scene. Instead of re-rendering the entire SVG scene when markup changes, the system identifies affected layers through the layer structure and re-renders only those extracted portions. This maintains graphical accuracy for changed elements while avoiding the time penalty of full scene re-rendering.
Data Source
AI summary
In one example, a method for rendering graphical objects on a display includes rendering each of a plurality of graphical objects within respective layers. The plurality of graphical objects includes first, second and third graphical objects. The second graphical object is directly linked to the first graphical object and the third graphical object is directly linked to the second graphical object. The method additionally includes receiving user input manipulating one of the graphical objects in a manner that affects a directly linked graphical object. The method additionally includes re-rendering the manipulated graphical object and the directly linked graphical object without re-rendering graphical objects that are not directly linked to the manipulated graphical object.