Handling UI Gestures in Non-Rectangular Regions
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for handling user-interface gestures in non-rectangular regions of graphical user interfaces are inefficient, particularly in software products using scripting languages like JavaScript, as they struggle to determine mouse pointer entry or exit events across groups of DOM nodes that do not form rectangular regions, leading to performance issues and limited functionality.
Innovation Solution
A method is introduced that creates a class with event handlers for onmouseover and onmouseout events, adds graphical elements to this class, identifies the specific element triggering the event, determines the closest border to the mouse pointer, and stops or allows event propagation based on whether other elements share this border, ensuring accurate gesture handling in non-rectangular regions.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of manufacture
If a single rectangular parent DOM node is used to detect events for all children DOM nodes, then the solution is simple, but it is limited to rectangular regions and requires all DOM nodes to be descendents of the parent node
Solution Approach 1:
The patent segments the event detection approach by creating individual event handlers for each DOM node in the group, rather than using a single parent node. Each node independently handles mouseover and mouseout events, allowing the system to accommodate non-rectangular configurations while maintaining manageable complexity through modular event processing
Solution Approach 2:
The patent introduces a new dimension to event detection by tracking the mouse pointer's path across multiple DOM nodes in sequence. Instead of relying solely on rectangular bounding boxes, the system monitors the dimensional progression of mouse movement between adjacent nodes, enabling accurate detection for non-rectangular regions formed by multiple DOM elements
2Difficulty of detecting and measuring
If the position of mouse pointer is tracked as it moves over an ancestor DOM node, then event detection is possible, but it causes many mouse move events to be generated and decreases performance
Solution Approach 1:
The patent applies preliminary action by pre-establishing the group of DOM nodes and their spatial relationships before user interaction. The system pre-calculates which nodes are adjacent and should share event handling, so when mouse movement occurs, the system only needs to track movement between pre-identified nodes rather than continuously monitoring all ancestors, reducing unnecessary mouse move events
Solution Approach 2:
The patent introduces an intermediary mechanism that groups related DOM nodes together and manages event propagation between them. This intermediary layer filters and routes mouse events appropriately, preventing excessive mouse move events from propagating through the entire DOM tree by using the grouped node structure to determine when events should be handled at which level
3Adaptability or versatility
If image maps are used on images to detect polygonal regions, then non-rectangular regions can be detected, but the solution is limited to images
Solution Approach 1:
The patent achieves universality by creating a DOM node-based event handling system that works for any graphical element, not just images. The same mechanism that detects non-rectangular regions using multiple DOM nodes can be applied to any UI component, making the solution universally applicable across different types of graphical elements without requiring image-specific technology
Data Source
AI summary
A technique for handling user-interface gestures in non-rectangular regions of a graphical user interface includes creating a class comprising an event handler for an onmouseover event and an event handler for an onmouseout event. The technique further includes adding each of a group of graphical elements to the class. Adding a graphical element to the class includes adding a reference to the graphical element to the class and attaching the event handlers to the graphical element. The technique then identifies a specific graphical element in the group that triggered an invocation of one of the event handlers. The technique then determines the closest border of the specific graphical element to the mouse pointer. In the event another graphical element in the group shares the closest border, the technique stops either the onmouseover or onmouseout event from propagating.