Dynamic Mosaic Layout for Gap-Free Media Display
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current web interface display systems face challenges in efficiently displaying images of varying sizes and aspect ratios without gaps, maintaining visual hierarchy, and minimizing latency in image loading, while existing solutions either create gaps or disrupt the image hierarchy when adapting to different screen sizes.
Innovation Solution
A method for constructing a dynamic mosaic of media files on a user interface by determining a fill direction, creating closed and open rectangles, and iteratively placing media files to fill these rectangles, thereby minimizing white spaces and maintaining image hierarchy across different devices and browsers.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Shape
If images are displayed in a grid format with varying sizes, then visual interest and dynamic layout are improved, but gaps and white spaces appear between images
Solution Approach 1:
The patent implements asymmetrical grid layouts where images of different sizes are positioned to create dynamic visual interest. The system calculates optimal positions for each image based on its dimensions, allowing asymmetric arrangements that fill space efficiently while maintaining aesthetic appeal. This resolves the contradiction by embracing asymmetry rather than forcing uniform grid positions.
Solution Approach 2:
The patent employs dynamic layout adjustment where image positions and dimensions are continuously optimized based on available space and image characteristics. The system adapts the grid structure in real-time to minimize gaps while preserving visual hierarchy, transforming a static grid into a dynamic space-filling arrangement that eliminates white space.
2Loss of time
If image loading is accelerated to reduce latency, then user experience is improved, but image quality and completeness may be compromised
Solution Approach 1:
The patent implements preliminary actions by pre-loading thumbnail versions of images and preparing layout structures before user interaction. Image metadata and positioning information are cached in advance, allowing the system to rapidly assemble display layouts without waiting for complete image downloads, thus reducing latency while maintaining display reliability.
Solution Approach 2:
The patent segments the image display process into multiple stages: thumbnail preview, progressive loading, and full-resolution display. This segmentation allows the interface to become functional immediately with placeholders or thumbnails, then progressively enhance as larger images load, reducing perceived latency without compromising final image quality.
3Ease of operation
If multiple images are displayed side-by-side for comparison, then user ability to compare images is improved, but available display space is reduced
Solution Approach 1:
The patent utilizes multiple display dimensions and layers to accommodate side-by-side image comparison. Instead of competing for horizontal or vertical space alone, the system employs overlapping layers, modal windows, and hierarchical positioning that allow multiple images to coexist in three-dimensional display space, effectively increasing available comparison area.
Solution Approach 2:
The patent implements nested display structures where smaller image previews are nested within larger contextual frames, or where thumbnail comparisons are nested within full-image views. This nesting allows multiple images to be displayed simultaneously at different scales and positions, enabling comparison while preserving overall display space efficiency.
Data Source
AI summary
A method and system for displaying a dynamic mosaic of media files, the method comprising: receiving media files, determining a fill direction, constructing a layout, determining an edge set from the media files previously placed on the layout, determining a trailing edge, and adjacent edges, constructing a set of closed rectangles an open rectangle from the trailing edge and adjacent edges, providing a first set of frames by iteratively attempting to fill up to one closed rectangle from the set of closed rectangles, providing a second set of frames by filling the open rectangle by placing one searched media file in the open rectangle if no closed rectangle in the set of closed rectangles can be filled, and inserting one of the first set of frames and the second set of frames into a current layout before updating a current edge set based on the inserted frames.