Device, method, and graphical user interface with grid transformations during device rotation

• US 8,692,851 B2
• Filed: 05/28/2010
• Issued: 04/08/2014
• Est. Priority Date: 01/06/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Ording, Bas, Shaffer, Joshua H., Block, Eliza Carey
• Primary Examiner(s): Amini, Javid A
• Application Number:
  US12/790,490
• Publication Number:
  US 20110164056A1
• Time in Patent Office: 1,411 Days
• Field of Search: 345/649
• US Class Current: 345/649
• CPC Class Codes: G06F 1/1694 the I/O peripheral being a single or a set of motion sensors for pointer control or gesture input obtained by sensing movements of the portable computer
• CPC Class Codes: G06F 2200/1614 Image rotation following screen orientation, e.g. switching from landscape to portrait mode
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/04886 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus

Abstract

A method includes: displaying a first 2-D array of a plurality of user interface components on the display in a portrait orientation; detecting rotation of the display from the portrait orientation to a landscape orientation with one or more accelerometers; and, in response to detecting the rotation: rotating the first 2-D array of the plurality of user interface components on the display about an axis that is normal to a front surface of the display; replacing the first 2-D array with a second 2-D array of the plurality of user interface components on the display after the rotation of the first 2-D array exceeds a predefined condition; and rotating the second 2-D array of the plurality of user interface components on the display until the second 2-D array of the plurality of user interface components is in the landscape orientation.

Claims

1. A multifunction device, comprising:

a display;

one or more accelerometers;

one or more processors;

memory; and

one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for;

displaying a first 2-D array of a plurality of user interface components on the display in a portrait orientation;

detecting rotation of the display from the portrait orientation to a landscape orientation with the one or more accelerometers;

in response to detecting the rotation, displaying an animated transition that includes;

displaying rotation of the first 2-D array of the plurality of user interface components on the display about an axis that is normal to a front surface of the display;

displaying replacement of the first 2-D array with a second 2-D array of the plurality of user interface components on the display, the second 2-D array distinct from the first 2-D array, after the rotation of the first 2-D array exceeds a predefined condition; and

displaying rotation of the second 2-D array of the plurality of user interface components on the display until the second 2-D array of the plurality of user interface components is in the landscape orientation.

2. The device of claim 1, wherein:

the first 2-D array has M rows and N columns and each user interface component is located at a respective location in the first 2-D array that has a unique pair of (row index, column index) determined in accordance with a predefined sequencing algorithm; and

the second 2-D array has N rows and M columns and each user interface component is located at a respective location in the second 2-D array that has a unique pair of (row index, column index) determined in accordance with the predefined sequencing algorithm.

3. The device of claim 2, wherein M is different from N and, for at least one respective user interface component in the plurality of user interface components, its pair of (row index, column index) in the first 2-D array is distinct from its pair of (row index, column index) in the second 2-D array.

4. The device of claim 2, wherein the predefined sequencing algorithm is used to combine the M rows of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the N rows of user interface components in the second 2-D array.

5. The device of claim 2, wherein the predefined sequencing algorithm is used to combine the N columns of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the M columns of user interface components in the second 2-D array.

6. The device of claim 1, wherein the rotation direction of the first and second 2-D arrays relative to the axis that is normal to the front surface of the display is opposite the rotation direction of the rotation of the display.

7. The device of claim 1, including instructions for:

fading out the first 2-D array from the display while rotating the first 2-D array; and

fading in the second 2-D array on the display following the fade-out of the first 2-D array.

8. The device of claim 1, including instructions for:

fading out the first 2-D array from the display while rotating the first 2-D array; and

fading in the second 2-D array on the display while fading out the first 2-D array.

9. The device of claim 1, wherein displaying replacement of the first 2-D array with the second 2-D array includes cross-fading individual user interface components between the first 2-D array and the second 2-D array.

10. A method, comprising:

at a multifunction device with a display and one or more accelerometers;

displaying a first 2-D array of a plurality of user interface components on the display in a portrait orientation;

detecting rotation of the display from the portrait orientation to a landscape orientation with the one or more accelerometers;

in response to detecting the rotation, displaying an animated transition that includes;

displaying rotation of the first 2-D array of the plurality of user interface components on the display about an axis that is normal to a front surface of the display;

displaying replacement of the first 2-D array with a second 2-D array of the plurality of user interface components on the display, the second 2-D array distinct from the first 2-D array, after the rotation of the first 2-D array exceeds a predefined condition; and

displaying rotation of the second 2-D array of the plurality of user interface components on the display until the second 2-D array of the plurality of user interface components is in the landscape orientation.

11. The method of claim 10, wherein:

the first 2-D array has M rows and N columns and each user interface component is located at a respective location in the first 2-D array that has a unique pair of (row index, column index) determined in accordance with a predefined sequencing algorithm; and

the second 2-D array has N rows and M columns and each user interface component is located at a respective location in the second 2-D array that has a unique pair of (row index, column index) determined in accordance with the predefined sequencing algorithm.

12. The method of claim 11, wherein M is different from N and, for at least one respective user interface component in the plurality of user interface components, its pair of (row index, column index) in the first 2-D array is distinct from its pair of (row index, column index) in the second 2-D array.

13. The method of claim 11, wherein the predefined sequencing algorithm is used to combine the M rows of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the N rows of user interface components in the second 2-D array.

14. The method of claim 11, wherein the predefined sequencing algorithm is used to combine the N columns of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the M columns of user interface components in the second 2-D array.

15. The method of claim 10, wherein the rotation direction of the first and second 2-D arrays relative to the axis that is normal to the front surface of the display is opposite the rotation direction of the rotation of the display.

16. The method of claim 10, wherein displaying replacement of the first 2-D array with the second 2-D array further includes:

fading out the first 2-D array from the display while rotating the first 2-D array; and

fading in the second 2-D array on the display following the fade-out of the first 2-D array.

17. The method of claim 10, wherein displaying replacement of the first 2-D array with the second 2-D array further includes:

fading out the first 2-D array from the display while rotating the first 2-D array; and

fading in the second 2-D array on the display while fading out the first 2-D array.

18. The method of claim 10, wherein displaying replacement of the first 2-D array with the second 2-D array includes cross-fading individual user interface components between the first 2-D array and the second 2-D array.

19. A non-transitory computer readable storage medium storing one or more programs, the one or more programs comprising instructions, which when executed by a multifunction device with a display and one or more accelerometers, cause the device to:

display a first 2-D array of a plurality of user interface components on the display in a portrait orientation;

detect rotation of the display from the portrait orientation to a landscape orientation with the one or more accelerometers;

in response to detecting the rotation, display an animated transition that includes;

display rotation of the first 2-D array of the plurality of user interface components on the display about an axis that is normal to a front surface of the display;

display replacement of the first 2-D array with a second 2-D array of the plurality of user interface components on the display, the second 2-D array distinct from the first 2-D array, after the rotation of the first 2-D array exceeds a predefined condition; and

display rotation of the second 2-D array of the plurality of user interface components on the display until the second 2-D array of the plurality of user interface components is in the landscape orientation.

20. The non-transitory computer readable storage medium of claim 19, wherein:

the first 2-D array has M rows and N columns and each user interface component is located at a respective location in the first 2-D array that has a unique pair of (row index, column index) determined in accordance with a predefined sequencing algorithm; and

the second 2-D array has N rows and M columns and each user interface component is located at a respective location in the second 2-D array that has a unique pair of (row index, column index) determined in accordance with the predefined sequencing algorithm.

21. The non-transitory computer readable storage medium of claim 20, wherein M is different from N and, for at least one respective user interface component in the plurality of user interface components, its pair of (row index, column index) in the first 2-D array is distinct from its pair of (row index, column index) in the second 2-D array.

22. The non-transitory computer readable storage medium of claim 20, wherein the predefined sequencing algorithm is used to combine the M rows of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the N rows of user interface components in the second 2-D array.

23. The non-transitory computer readable storage medium of claim 20, wherein the predefined sequencing algorithm is used to combine the N columns of user interface components in the first 2-D array into a 1-D array and divide the 1-D array into the M columns of user interface components in the second 2-D array.

24. The non-transitory computer readable storage medium of claim 19, wherein the rotation direction of the first and second 2-D arrays relative to the axis that is normal to the front surface of the display is opposite the rotation direction of the rotation of the display.

25. The non-transitory computer readable storage medium of claim 19, including instructions that cause the device to:

fade out the first 2-D array from the display while rotating the first 2-D array; and

fade in the second 2-D array on the display following the fade-out of the first 2-D array.

26. The non-transitory computer readable storage medium of claim 19, including instructions that cause the device to:

fade out the first 2-D array from the display while rotating the first 2-D array; and

fade in the second 2-D array on the display while fading out the first 2-D array.

27. The non-transitory computer readable storage medium of claim 19, wherein displaying replacement of the first 2-D array with the second 2-D array includes cross-fading individual user interface components between the first 2-D array and the second 2-D array.