Patent Publication Number: US-2023154097-A1

Title: Systems and methods for displaying representative images

Description:
CROSS-REFERENCES TO RELATED APPLICATIONS 
     The present application is a continuation of, and claims priority to, U.S. patent application Ser. No. 17/023,159, filed Sep. 16, 2020, entitled “SYSTEMS AND METHODS FOR DISPLAYING REPRESENTATIVE IMAGES,” currently pending, which in turn is a continuation of, and claims priority to, U.S. patent application Ser. No. 16/147,206, filed Sep. 28, 2018, entitled “SYSTEMS AND METHODS FOR DISPLAYING REPRESENTATIVE IMAGES,” now U.S. Pat. No. 10,810,781, which in turn is a continuation of, and claims priority to, U.S. patent application Ser. No. 15/622,520, filed Jun. 14, 2017, entitled “SYSTEMS AND METHODS FOR DISPLAYING REPRESENTATIVE IMAGES,” now U.S. Pat. No. 10,109,098, which is a continuation of, and claims priority to, U.S. patent application Ser. No. 14/340,557, filed Jul. 24, 2014, entitled “SYSTEMS AND METHODS FOR DISPLAYING REPRESENTATIVE IMAGES,” now U.S. Pat. No. 9,741,150, which in turn claims priority to U.S. Provisional Application No. 61/958,324, entitled “Systems and methods for digital photography,” filed Jul. 25, 2013. The foregoing applications and/or patents are herein incorporated by reference in their entirety for all purposes. 
    
    
     FIELD OF THE INVENTION 
     Embodiments of the present invention relate generally to user interface design, and more specifically to systems and methods for displaying representative images. 
     BACKGROUND 
     A typical mobile computing device, or simply “mobile device,” such as a smartphone or tablet computer, includes a computation subsystem, and a display screen configured to display a user interface (UI) comprising elements such as control widgets and representative images of files accessible through the UI. A representative image may comprise a thumbnail image associated with an application, script, or data file residing within a file system or file database. One example of a representative image is an image thumbnail. Another example of a representative image is a file icon. Representative images are typically presented to a user within a collection viewer that is configured to allow the user to browse, select, view, execute, and otherwise interact with corresponding objects. One example of a collection viewer is a file browser, which may be configured to show users a list of files within a file system depicted as icons. Another example of a collection viewer is an image browser, configured to show users a list of images within a file system or image database depicted as thumbnails. 
     A UI for a mobile device typically includes a collection viewer for files and may include a collection viewer for images. A collection viewer for digital images may similarly present thumbnails associated with digital images residing within an image database or within a file system folder of digital images. The collection viewer enables the user to browse thumbnails, and to open a digital image by performing a touch gesture on a corresponding thumbnail. 
     Mobile computing devices, or simply “mobile devices” may include an arbitrarily large number of files and corresponding icons that need to be presented within a collection viewer for files. Similarly, mobile devices may include an arbitrarily large number of digital images and corresponding thumbnails that need to be presented within a collection viewer for digital images. Typical collection viewers enable users to view a collection of representative images as a two-dimensional grid of representative images. The representative images are conventionally positioned within the grid according to a specific sequence, such as a file sequence number, a sort sequence number, or an image sequence number. The grid is populated with representative images frequently forming a tall, narrow form factor regardless of device orientation. Width of the grid is associated with horizontal screen width, which may be different in landscape versus portrait orientations. As a consequence, the physical location of a specific representative image may change when device orientation changes because the collection viewer typically needs to alter the grid layout and specific sequence of the representative images. 
     In conventional operation of a collection viewer, the user may locate a desired representative image by scrolling the grid vertically into an appropriate screen position. However, if the user then rotates their mobile device, the screen position of the desired representative image typically changes in response to the change in grid width, forcing the user to once again locate their desired representative image within the grid. Forcing the user to locate the desired representative image a second time after rotation introduces inefficiency and confusion in the user experience. 
     As the foregoing illustrates, there is a need for addressing this and/or other related issues associated with the prior art. 
     SUMMARY 
     A system, method, and computer program product for displaying representative images within a collection viewer is disclosed. The method comprises displaying two or more representative images within a collection viewer at a first orientation, receiving an indication of a second orientation for the collection viewer, in response to the indication, displaying a clockwise animation sequence for each of the two or more representative images, and displaying the two or more representative images within a collection viewer at the second orientation. 
    
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
       So that the manner in which the above recited features of the present invention can be understood in detail, a more particular description of the invention, briefly summarized above, may be had by reference to embodiments, some of which are illustrated in the appended drawings. It is to be noted, however, that the appended drawings illustrate only typical embodiments of this invention and are therefore not to be considered limiting of its scope, for the invention may admit to other equally effective embodiments. 
         FIG.  1    illustrates a flow chart of a method for displaying a collection of representative images, according to one embodiment of the present invention; 
         FIG.  2 A  illustrates a front view of a mobile device comprising a display unit, according to one embodiment of the present invention; 
         FIG.  2 B  illustrates a block diagram of a mobile device comprising a display unit, according to one embodiment of the present invention; 
         FIG.  3 A  illustrates a collection viewer configured in a portrait orientation, according to one embodiment of the present invention; 
         FIG.  3 B  illustrates a collection viewer configured in a landscape orientation, according to one embodiment of the present invention; 
         FIG.  3 C  illustrates one representative image in two different orientations as viewed by a user with respect to a physical up direction, according to one embodiment of the present invention; 
         FIG.  3 D  illustrates one representative image in two different orientations with respect to a physical display origin, according to one embodiment of the present invention; and 
         FIG.  3 E  depicts an animation sequence of frames for one representative image transitioning between two different orientations, according to one embodiment of the present invention. 
     
    
    
     DETAILED DESCRIPTION 
     Embodiments of the present invention enable a mobile device to present a consistent location of representative images regardless of device orientation within a user interface (UI). A collection viewer refers to a collection of software modules that generate a depiction of data objects within a UI. Displayed UI elements generated by the software modules may also be referred to generally as a collection viewer. A collection viewer is configured to present representative images of the data objects, such as file icons and image thumbnails to a user. A collection viewer may comprise a file browser, an image browser, or any other type of data object browser configured to depict data objects as representative images. When the user rotates the mobile device, the collection viewer generates an in-place rotation animation for each representative image. Keeping each representative image in substantially the same physical screen location regardless of device orientation allows the user to visually track a given representative image through device rotation, thereby providing a more efficient and intuitive user experience. Animating rotation of the representative images to maintain proper viewing orientation provides an intuitive visual cue, further improving the user experience. 
       FIG.  1 A  illustrates a flow chart of a method  100  for displaying a collection of representative images, according to one embodiment of the present invention. Although method  100  is described in conjunction with the systems of  FIGS.  2 A- 2 B , persons of ordinary skill in the art will understand that any system that performs method  100  is within the scope and spirit of embodiments of the present invention. In one embodiment, a mobile device, such as mobile device  270  of  FIGS.  2 A- 2 B , is configured to perform method  100 . by executing a collection viewer, implemented as a software module within mobile device  270 . 
     Method  100  begins in step  110 , where the collection viewer receives a notification indicating that the mobile device has been repositioned into a new orientation. In one embodiment, the notification indicates one of four orthogonal orientations, where a first orientation is associated with a generally upright portrait orientation, a second orientation is associated a clockwise rotation from the first orientation to a landscape orientation, a third orientation is associated with an upside down portrait orientation, and a fourth orientation is associated a counterclockwise rotation from the first orientation to a landscape orientation. Each of the four orientations represents an approximation of a physical orientation of the mobile device to the nearest ninety degrees. In other embodiments, the approximation of a physical orientation may comprise angular increments of less than ninety degrees to provide a finer approximation granularity. In certain embodiments, angular increments are substantially uniform, while in other embodiments, angular increments are non-uniform. 
     In one embodiment, physical orientation is generated from measurements performed by a sensor device, such as one of sensor devices  242 . For example, an accelerometer, comprising sensor devices  242 , may provide a physical measurement of a force vector corresponding to physical forces on the mobile device. When mobile device is held generally still, such as when a user is holding the mobile device, this measured force vector is generally aligned with a gravity force vector. When the measured force vector is aligned vertically and pointing from the top of the mobile device to the bottom of the mobile device, the mobile device is likely being held in an upright portrait orientation. When the measured force vector is rotated by approximately ninety degrees about a normal vector to display unit  212 , the device is likely being held in a landscape orientation, and so forth. While approximating orientation is described herein based on a measured force vector, other techniques of approximating orientation may be performed without departing the scope and spirit of embodiments of the present invention. 
     Any technically feasible technique may be implemented for sending a notification to the collection viewer. For example, the notification may comprise a message in an object message passing system. In this example, an instance of the collection viewer is configured to receive a new orientation message when the mobile device changes to a new orientation. A software module, such as a system service module, is configured to approximate device orientation, for example, by monitoring an accelerometer within sensor devices  242 . The new orientation message may specify a new orientation, or the new orientation message may specify that the device is in a new orientation and trigger the collection viewer to determine the new orientation. The new orientation message may indicate that the device has changed orientation beyond a specified angular threshold, enabling the collection viewer to determine an orientation for display, such as in embodiments that implement finer rotational granularity than ninety degree granularity. The system service module may include a kernel process configured to monitor hardware circuits comprising the sensor devices  242 , an application programming interface (API) configured to respond to the kernel process, a process executing in application space that is configured to monitor sensor devices  242  and generate messages based on specified criteria, or any other technically feasible mechanism for providing orientation notifications to the collection viewer. 
     In one embodiment, hysteresis is applied to an orientation approximation, so that a change in physical orientation needs to surpass a certain rotational threshold to trigger generation of the notification of a new orientation. In such an embodiment, the system services module applies hysteresis to physical orientation measurements so that a notification is generated only after a specified orientation threshold is exceeded. In other embodiments, the collection viewer is configured to apply hysteresis to notifications, such as notifications for changes of less than ninety degrees or less than an orientation change threshold. 
     In step  120 , the collection viewer, or a helper function to the collection viewer, computes a current animation state for a current animation sequence. A current animation sequence may include a scroll animation, a rotation animation, or a combination thereof triggered by a physical change in device orientation. A given current animation sequence is initiated in response to receiving the notification. In one embodiment, the current animation sequence defines a sequence of frames, as discussed in greater detail below in  FIG.  3 E . In one embodiment, a given animation sequence completed before a subsequent animation sequence is initiated. The current animation state may define a current scroll position and a current rotation angle for a collection of representative images being animated in the current animation sequence. The current animation state may determine which representative images are visible within view panel  311 . 
     In step  130 , the collection viewer, or a helper function to the collection viewer, identifies representative images to render in a current animation frame. Any technically feasible technique may be used to identify representative images to render. In one embodiment, only visible representative images are identified to render in the current frame. In one embodiment, a visible representative image includes geometry that intersects at least one pixel within view panel  311 . In another embodiment, visible representative images and at least one non-visible representative image are identified to render in a current animation frame. In one embodiment, when a representative image is newly visible in a current animation frame, that representative image is instantiated for display and the instantiated representative image instance is sent a message to render an associated representative image according to the current animation state. Other representative image instances may be sent a substantially similar message to render an associated representative image according to the current animation state. In certain embodiments, a representative image instance that is no longer visible is de-allocated at the completion of the animation sequence. 
     In step  140 , the collection viewer, or a helper function to the collection viewer, generates an animation frame comprising rendered representative images. In one embodiment, the animation frame includes one rendered representative image. In another embodiment, the animation frame includes two or more rendered representative images. Each rendered representative image includes a representative image that has been translated, rotated, or both translated and rotated in accordance with the current animation state. At least a portion of each rendered representative image may be presented within view panel  311 . In one embodiment, the generated animation frame is displayed on display unit  212  of  FIG.  2 A . In one embodiment, each animation frame is rendered by a graphics processing unit (GPU) within processor complex  210  of  FIG.  2 B . 
     If, in step  150 , the current animation frame is the last animation frame, then the method terminates. Otherwise, the method proceeds back to step  120 . 
     System Overview 
       FIG.  2 A  illustrates a front view of a mobile device  270  comprising a display unit  212 , according to one embodiment of the present invention. Display unit  212  is configured to display user interface (UI) elements associated with software applications configured to execute on mobile device  270 . The UI elements may include representative images, such as file icons and image thumbnails. 
       FIG.  2 B  illustrates a block diagram of mobile device  270 , according to one embodiment of the present invention. Mobile device  270  includes a processor complex  210  coupled to display unit  212 . Mobile device  270  may also include, without limitation, a digital camera  230 , a strobe unit  236 , a set of input/output devices  214 , non-volatile memory  216 , volatile memory  218 , a wireless unit  240 , and sensor devices  242 , each coupled to processor complex  210 . In one embodiment, a power management subsystem  220  is configured to generate appropriate power supply voltages for each electrical load element within mobile device  270 , and a battery  222  is configured to supply electrical energy to power management subsystem  220 . Battery  222  may implement any technically feasible battery, including primary or rechargeable battery technologies. Alternatively, battery  222  may be implemented as a fuel cell, or high capacity electrical capacitor. 
     In one usage scenario, strobe illumination  237  comprises at least a portion of overall illumination in a scene being photographed by digital camera  230 . Optical scene information  239 , which may include strobe illumination  237  reflected from objects in the scene, is focused onto an image sensor  232  as an optical image. Image sensor  232 , within digital camera  230 , generates an electronic representation of the optical image. The electronic representation comprises spatial color intensity information, which may include different color intensity samples for red, green, and blue light. 
     Display unit  212  is configured to display a two-dimensional array of pixels to form a digital image for display. Display unit  212  may comprise a liquid-crystal display, an organic LED display, or any other technically feasible type of display. Input/output devices  214  may include, without limitation, a capacitive touch input surface, a resistive tablet input surface, buttons, knobs, or any other technically feasible device for receiving user input and converting the input to electrical signals. In one embodiment, display unit  212  and a capacitive touch input surface comprise a touch entry display system, and input/output devices  214  comprise a speaker and microphone. 
     Non-volatile (NV) memory  216  is configured to store data when power is interrupted. The NV memory  216  therefore implements a non-transitory computer-readable medium. In one embodiment, NV memory  216  comprises one or more flash memory devices. NV memory  216  may be configured to include programming instructions for execution by one or more processing units within processor complex  210 . The programming instructions may include, without limitation, an operating system (OS), user interface (UI) modules, imaging processing and storage modules, and modules implementing one or more embodiments of techniques taught herein. In particular, the NV memory  216  may be configured to store instructions that implement method  100  of  FIG.  1   . The instructions, when executed by processing units within processor complex  210 , cause the processing units to perform method  100 . One or more memory devices comprising NV memory  216  may be packaged as a module that can be installed or removed by a user. In one embodiment, volatile memory  218  comprises dynamic random access memory (DRAM) configured to temporarily store programming instructions, image data, and the like needed during the course of normal operation of mobile device  270 . Sensor devices  242  include sensors configured to detect at least device orientation of the mobile device  270 . For example sensor devices  242  may include an accelerometer to detect motion and orientation, an electronic gyroscope to detect motion and orientation, or a combination thereof. Sensor devices  242  may also include, without limitation, a magnetic flux detector to detect orientation, a global positioning system (GPS) module to detect geographic position, or any combination thereof. 
     Wireless unit  240  may include one or more digital radios configured to send and receive digital data. In particular, wireless unit  240  may implement wireless standards known in the art as “WiFi” based on institute for electrical and electronics engineers (IEEE) standard 802.11, and may implement digital cellular telephony standards for data communication such as the well-known “3G” and long term evolution (“LTE”), or “4G” suites of standards. In one embodiment, mobile device  270  is configured to transmit one or more digital photographs residing within either NV memory  216  or volatile memory  218  to an online photographic media service via wireless unit  240 . In such an embodiment, a user may possess credentials to access the online photographic media service and to transmit the one or more digital photographs for storage and presentation by the online photographic media service. The credentials may be stored or generated within mobile device  270  prior to transmission of the digital photographs. The online photographic media service may comprise a social networking service, photograph sharing service, or any other web-based service that provides storage and download of digital photographs. In certain embodiments, mobile device  270  is configured to receive one or more incoming digital photographs via wireless unit  240 , and store the incoming digital photographs in the NV memory  216 , or the volatile memory  218 , or a combination thereof. 
     Collection Viewer 
       FIG.  3 A  illustrates a collection viewer  310  configured in a portrait orientation, according to one embodiment of the present invention. As shown, a physical display origin  312  is disposed in an upper left corner, and a scroll axis  314  is aligned vertically. That is, the scroll axis  314  is generally aligned with respect to a physical “up” direction  316 . 
     In one embodiment, collection viewer  310  allows a user to scroll a collection of representative images  320 , along scroll axis  314  in response to an input scroll command. The collection of representative images  320  may be organized in a grid, with a portion of the representative images  320  visible within a view panel  311 . A swipe gesture performed on a capacitive input device within display unit  212  may serve as the input scroll command. In one embodiment, view panel  311  is configured to have a rectangular form, including a larger dimension and a smaller dimension. In such an embodiment, the term “portrait orientation” refers to an orientation for view panel  311  with the larger dimension generally oriented along the up direction  316 . The term “landscape orientation” refers to an orientation for view panel  311  with the smaller dimension generally oriented along the up direction  316 . In other embodiments, view panel  311  may be square. In such embodiments, “portrait orientation” and “landscape orientation” comprise arbitrary but orthogonal orientations of view panel  311 . 
     While collection viewer  310  is illustrated here as a UI element having a view panel  311 , the term “collection viewer” is defined broadly herein to include a software module configured to generate the UI element and display representative images  320  within view panel  311 . 
     When a user rotates mobile device  270  into a new position, the collection viewer may reconfigure presentation of representative images  320  by causing the representative images  320  to rotate to an angle consistent with the new position. For example, the user may initially hold mobile device  270  in a portrait orientation. The user may then rotate the device orientation into a landscape orientation. In this example, mobile device  270  may detect a sufficient change in orientation and cause collection viewer  310  to transition from a portrait orientation to a landscape orientation, illustrated below in  FIG.  3 B . In other embodiments, different orientations may be implemented according to arbitrary angles having finer granularity than orthogonal angles. Detecting a sufficient change may include a hysteresis function in device orientation. 
       FIG.  3 B  illustrates collection viewer  310  configured in a landscape orientation, according to one embodiment of the present invention. As shown, the physical display origin  312  is disposed in a lower left corner, and a scroll axis  314  is aligned horizontally. 
     In a typical usage scenario, a user holds their head in an upright position, and therefore prefers to view representative images  320  rendered according to the physical up direction  316 . As shown, representative images  320  are rotated to be viewed in an orientation consistent with the up direction  316 . In one embodiment, representative images  320  are rotated in place. In one embodiment, rotation in place comprises performing an animation, such as a rotation animation, fade animation, or other transition animation, for each representative image  320 . In one embodiment, animation for all representative images  320  is performed substantially synchronously, so that all displayed representative image  320  appear to move together. By rotating representative images  320  in place, collection viewer  310  is able to present a physical metaphor of the representative images  320  that is consistent with a physical device rotation. By contrast, prior art systems typically rearrange thumbnails, leading to user confusion and breaking any perceived consistency with physical device rotation. 
       FIG.  3 C  illustrates representative image  320 ( 0 , 0 ) of  FIG.  3 A  in two different orientations as viewed by a user, according to one embodiment of the present invention. A portrait to landscape transform  330  is implemented to animate a clockwise rotation of representative image  320 ( 0 , 0 ) from a portrait orientation to a landscape orientation. Additional transforms may be similarly implemented to animate transitions between each different discrete rotation position. Here, representative image  320 ( 0 , 0 ) is rotated ninety degrees in a clockwise direction to compensate for a ninety degree counter-clockwise rotation of physical display origin  312 . As shown, representative image  320 ( 0 , 0 ) is rotated to be viewable in a generally upright orientation regardless of orientation of physical display origin  312 . In other embodiments, finger-grain discrete rotation positions may be similarly implemented. 
       FIG.  3 D  illustrates representative image  320 ( 0 , 0 ) in two different orientations with respect to the physical display origin  312  of  FIG.  3 A , according to one embodiment of the present invention. As described above, portrait to landscape transform  330  implements a rotation of representative image  320 ( 0 , 0 ). As shown, representative image  320 ( 0 , 0 ) is rotated relative to physical display origin  312 . 
       FIG.  3 E  depicts an animation sequence  340  of frames  360  for one representative image transitioning between two different orientations, according to one embodiment of the present invention. As shown, a representative image  342  is rotated in sequential frames  360 (N) to  360 (N+4) to generate a rotation animation of representative image  342 . The rotation animation depicts a rotational movement of the representative image  342  from an initial position at time T 0 , to a new position at time T 4 . In this example, a user rotates mobile device  270  counter-clockwise from a portrait orientation to a landscape orientation between time T 0  and time T 1 , thereby triggering a clockwise animation of representative image  342 . In the process, a new physical up direction is established. A new up direction  352  consequently replaces an old up direction  350 . The animation sequence depicts rotational movement of representative image  342  to generally negate the physical rotation of mobile device  270 . In one embodiment the animation sequence is timed independently of physical rotation once a rotation event is detected. In other embodiments, the animation sequence is timed to substantially track physical rotation once a rotation event is detected. 
     Representative image  342  may be rendered in each rotational position associated with each incremental frame  360 . Although three intermediate frames  360 (N+1),  360 (N+2), and  360 (N+3) are shown, animation sequence  340  may implement an arbitrary number of intermediate frames. In one embodiment, animation sequence  340  is initiated and completed during a time span of less than one second, but more than ten milliseconds. In certain implementations, duration of animation sequence  340  may be measured as an integral multiple of a number of frame times needed to display intermediate frames as refresh frames on display device  212 . In one embodiment, each representative image being displayed within view panel  311  is animated substantially synchronously, so that each animation step for each representative image is completed together. For example, animation frame  360 (N+1) is rendered and displayed at or before time T 2  for each representative image  320  of  FIG.  3 A . In other embodiments, looser synchronization may be implemented, so that each representative image  220  completes a respective animation sequence within a specified maximum number frame times, such as less than five frame times, or less than sixty frame times. In certain embodiments, an animation sequence models certain physical behaviors or properties, such as momentum, oscillation, friction, and the like. For example, an animation sequence may depict the representative images overshooting their rotation and springing back into proper position. An arbitrary rotation function may be applied with respect to time to provide such effects. 
     In alternative embodiments, transition effects other than a rotation animation may be implemented. For example, one alternative transition effect to a rotation animation is an alpha fade animation between representative image  342  depicted in frame  360 ( 0 ) and representative image  342  depicted in frame  360 (N+4). Another alternative transition effect animates representative image  342  depicted in frame  360 ( 0 ) collapsing to a dot and re-emerging as representative image  342  depicted in frame  360 (N+4). These and other in-place transition effects may be implemented without departing the scope and spirit of the present invention. 
     In one embodiment, frames  360  are rendered by a graphics processing unit (GPU) within processor complex  210  of  FIG.  2 B . 
     While the techniques disclosed herein are described in conjunction with a mobile device, persons skilled in the art will recognize that any compute platform may be configured to perform these techniques. 
     While the foregoing is directed to embodiments of the present invention, other and further embodiments of the invention may be devised without departing from the basic scope thereof, and the scope thereof is determined by the claims that follow.