Folding and unfolding images in a user interface

• US 9,003,305 B2
• Filed: 06/07/2012
• Issued: 04/07/2015
• Est. Priority Date: 02/01/2012
• Status: Active Grant

• Current Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Original Assignee: Meta Platforms, Inc. (f/k/a Facebook, Inc.)
• Inventors: Matas, Michael, Tsinteris, Kimon, Sarner, Austin, Melcher, Charles
• Primary Examiner(s): Kim, Matt
• Assistant Examiner(s): IPAKCHI, MARYAM M
• Application Number:
  US13/490,736
• Publication Number:
  US 20130227494A1
• Time in Patent Office: 1,034 Days
• Field of Search: None
• US Class Current: 715/757
• CPC Class Codes: G06F 2203/04808 Several contacts: gestures triggering a specific function, e.g. scrolling, zooming, right-click, when the user establishes several contacts with the surface simultaneously; e.g. using several fingers or a combination of fingers and pen
• CPC Class Codes: G06F 3/017 Gesture based interaction, e.g. based on a set of recognized hand gestures interaction based on gestures traced on a digitiser G06F3/04883
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/0485 Scrolling or panning
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191
• CPC Class Codes: G06F 40/137 Hierarchical processing, e.g. outlines
• CPC Class Codes: G06F 8/34 Graphical or visual programming
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G06T 15/60 Shadow generation
• CPC Class Codes: H04L 67/06 specially adapted for file transfer, e.g. file transfer protocol [FTP]
• CPC Class Codes: H04L 67/52 specially adapted for the location of the user terminal

Abstract

In one embodiment, presenting a folded version of an image in a user interface (UI), the folded version of the image being included in a UI component of the user interface; and in response to a user pinching the folded version of the image with two fingers, simulating and presenting an effect of the folded version of the image being lifted off and floating above the UI component.

Claims

1. A method, performed by one or more first electronic devices, comprising:

presenting a folded version of an image in a first display mode is a user interface (UI), the folded version of the image being included in a UI component of the user interface;

in response to a user pinching the folded version of the image with two fingers, simulating and presenting an effect of the folded version of the image being lifted off and floating above the UI component, wherein the image is folded in half, and at least an entire half of the image remains entirely visible while being lifted off and floating above the UI component; and

in response to the user pinching out the lifted off and floating folded version of the image beyond a predetermined threshold and then taking the two fingers off the image, transitioning the image from the first display mode to a second display mode different from the first display mode,

wherein the second display mode is a full-screen mode in which the image is expanded to fill an entire display area of a screen of the electronic device.

2. The method of claim 1, further comprising

while the folded version of the image floats above the UI component,

simulating a light source in the user interface;

and

placing shadow around the folded version of the image, the shadow being determined based on a current position of the folded version of the image in relation to the light source.

3. The method of claim 2, wherein:

the folded version of the image comprises a first side facing toward the light source and a second side facing away from the light source; and

the shadow around the first side is lighter than the shadow around the second side.

4. The method of claim 1, further comprising

while the folded version of the image is pinched by the user with the two fingers, simulating movements of the folded version of the image to follow movements of the two fingers.

5. The method of claim 1, further comprising

while the folded version of the image is pinched by the user with the two fingers,

in response to the user moving the two fingers apart, further unfolding the folded version of the image such that an amount of unfolding corresponds to an amount of the two fingers moving apart;

and

in response to the user moving the two fingers together, further folding the folded version of the image such that an amount of folding corresponds to an amount of the two fingers moving together.

6. The method of claim 1, further comprising

while the folded version of the image is pinched by the user with the two fingers, in response to the user moving the two fingers together from a first position to a second position,

moving the folded version of the image with the two fingers from the first position to the second position so that the movement of the image follows the movement of the two fingers;

and

rotating the folded version of the image based on the second position to simulate perspective in a virtual three-dimensional space.

7. The method of claim 1, further comprising

while the folded version of the image is pinched by the user with the two fingers, simulating movements of the folded version of the image as controlled by movements of the two fingers based on movements of a spring.

8. The method of claim 1, wherein the UI component is a web page or a page of a digital book.

9. One or more computer-readable non-transitory storage media embodying software that is operable when executed to:

present a folded version of an image in a first display mode in a user interface (UI)of an electronic device, the folded version of the image being included in a UI component of the user interface;

in response to a user pinching the folded version of the image with two fingers, simulate and present an effect of the folded version of the image being lifted off and floating above the UI component, wherein the image is folded in half, and at least an entire half of the image remains entirely visible while being lifted off and floating above the UI component; and

in response to the user pinching out the lifted off and floating folded version of the image beyond a predetermined threshold and then taking the two fingers off the image, transition the image from the first display mode to a second display mode different from the first display mode,

wherein the second display mode is a full-screen mode in which the image is expanded to fill an entire display area of a screen of the electronic device.

10. The media of claim 9, wherein the software is further operable to

while the folded version of the image floats above the UI component,

simulate a light source in the user interface;

and

place shadow around the folded version of the image, the shadow being determined based on a current position of the folded version of the image in relation to the light source.

11. The media of claim 10, wherein:

the folded version of the image comprises a first side facing toward the light source and a second side facing away from the light source; and

the shadow around the first side is lighter than the shadow around the second side.

12. The media of claim 9, wherein the software is further operable to

while the folded version of the image is pinched by the user with the two fingers, simulate movements of the folded version of the image to follow movements of the two fingers.

13. The media of claim 9, wherein the software is further operable to

while the folded version of the image is pinched by the user with the two fingers,

in response to the user moving the two fingers apart, further unfold the folded version of the image such that an amount of unfolding corresponds to an amount of the two fingers moving apart;

and

in response to the user moving the two fingers together, further fold the folded version of the image such that an amount of folding corresponds to an amount of the two fingers moving together.

14. The media of claim 9, wherein the software is further operable to

while the folded version of the image is pinched by the user with the two fingers, in response to the user moving the two fingers together from a first position to a second position,

move the folded version of the image with the two fingers from the first position to the second position so that the movement of the image follows the movement of the two fingers;

and

rotate the folded version of the image based on the second position to simulate perspective in a virtual three-dimensional space.

15. The media of claim 9, wherein the software is further operable to

while the folded version of the image is pinched by the user with the two fingers, simulate movements of the folded version of the image as controlled by movements of the two fingers based on movements of a spring.

16. The media of claim 9, wherein the UI component is a web page or a page of a digital book.

17. A system comprising:

a memory comprising instructions executable by one or more processors; and

the one or more processors coupled to the memory and operable to execute the instructions, the one or more processors being operable when executing the instructions to;

present a folded version of an image in a first display mode in a user interface (UI) of an electronic device, the folded version of the image being included in a UI component of the user interface;

in response to a user pinching the folded version of the image with two fingers, simulate and present an effect of the folded version of the image being lifted off and floating above the UI component, wherein the image is folded in half, and at least an entire half of the image remains entirely visible while being lifted off and floating above the UI component; and

in response to the user pinching out the lifted off and floating folded version of the image beyond a predetermined threshold and then taking the two fingers off the image, transition the image from the first display mode to a second display mode different from the first display mode,

wherein the second display mode is a full-screen mode in which the image is expanded to fill an entire display area of a screen of the electronic device.

18. The system of claim 17, wherein the processors are further operable when executing the instructions to

while the folded version of the image floats above the UI component,

simulate a light source in the user interface;

and

place shadow around the folded version of the image, the shadow being determined based on a current position of the folded version of the image in relation to the light source.

19. The system of claim 17, wherein the processors are further operable when executing the instructions to

while the folded version of the image is pinched by the user with the two fingers, simulate movements of the folded version of the image to follow movements of the two fingers.

20. The system of claim 17, wherein the processors are further operable when executing the instructions to

while the folded version of the image is pinched by the user with the two fingers,

in response to the user moving the two fingers apart, further unfold the folded version of the image such that an amount of unfolding corresponds to an amount of the two fingers moving apart;

and

in response to the user moving the two fingers together, further fold the folded version of the image such that an amount of folding corresponds to an amount of the two fingers moving together.