Visual Editor Overlap Handling for Hidden Component Selection
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing website building systems face challenges in selecting and editing visually obscured or overlapping components, making it difficult to perform operations such as moving, resizing, or changing attributes of hidden objects.
Innovation Solution
A webpage editor system that allows users to select and manipulate visually obscured components by adjusting their visibility based on component relationships, user information, and activation rules, using a processor-driven method to handle overlapping components in 2D, 3D, or side views, and modifying attributes like transparency and z-order.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If components are arranged in overlapping layers to create complex webpage compositions, then design flexibility and visual complexity are improved, but selection and editing of hidden components becomes difficult
Solution Approach 1:
The system changes the visual appearance of components by displaying outlines or borders around components when hovered over, making hidden components visible without altering the actual component colors. This allows users to see and select hidden components while maintaining the original design appearance during normal viewing.
Solution Approach 2:
The system introduces an intermediary selection mechanism where users can hover over or click on visible parts of hidden components to activate them for editing. This intermediary interaction method allows access to hidden components without requiring direct visual access to the entire component.
2Adaptability or versatility
If multiple components are layered to achieve desired visual effects, then design capability is improved, but difficulty of detecting and selecting obscured components increases
Solution Approach 1:
The system applies visual indicators such as outlines, borders, or highlighting to components when they are hovered over or selected, making obscured components detectable through their visible edges or indicators even when partially hidden by other components.
Solution Approach 2:
The system allows selection and manipulation of individual components within a layered composition by detecting user interaction with any visible portion of the component, effectively segmenting the interaction capability from the visual occlusion.
3Adaptability or versatility
If components are positioned in three-dimensional space to create depth and complexity, then visual richness is improved, but ease of manipulating hidden objects deteriorates
Solution Approach 1:
The system extends the interaction space by allowing users to interact with components in 3D space through 2D projections, where hovering or clicking on a 2D projection of a 3D component activates that component for manipulation even if it is visually obscured by other components in the layered composition.
Data Source
AI summary
A tool and a method for a visual editor of a web page. The tool includes an editor overlap handler to determine display instructions for the visual editor, the web page having a plurality of components wherein some components are regular components that are fully visible and at least one component that is an overlapped or visually obscured component (OOVOC). The plurality of components are associated with display rules and the display instructions depend on a selected point on the web page, z-order of the plurality of components and activation rules associated with components located at a certain proximity from the selected point.