Method and apparatus for displaying pixel images for a graphical user interface

• US 7,432,939 B1
• Filed: 07/10/2002
• Issued: 10/07/2008
• Est. Priority Date: 07/10/2002
• Status: Expired due to Fees

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Platzer, Andrew, Wasko, Tim, Coleman, Patricia J.
• Primary Examiner(s): Yang; Ryan R
• Application Number:
  US10/193,423
• Time in Patent Office: 2,281 Days
• Field of Search: 345/619, 345821-823, 345/859, 345/860
• US Class Current: 345/619
• CPC Class Codes: G06T 11/00 2D [Two Dimensional] image generation
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]

Abstract

Methods and apparatuses for displaying pixel images to provide visual-based emphasis in a graphical user interface. In one aspect of the invention, a method to display a pixel image for a Graphical User Interface (GUI) on a data processing system includes: detecting one or more outlines in a first image to generate a second image from pixel values of the first image that represents a GUI component; receiving input which indicates switching the GUI component from a first mode to a second mode; and displaying a combination of the first and second images to indicate that the GUI component is in the second mode. The combination of the first and second images shows an outlined version of the first image. In one example according to this aspect, the GUI component does not have keyboard focus in the first mode; and the GUI component has keyboard focus in the second mode.

Claims

1. A method in a Graphical User Interface (GUI) which operates on a data processing system, the method comprising:

generating a second image from pixel values of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image;

switching between said first mode and a second mode of said data processing system; and

displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

2. A method as in claim 1 wherein a display of the combination of the first and second images is generated by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

3. A method as in claim 1 wherein the first image indicates an input for a first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

4. A method as in claim 1 wherein the combination of the first and second images represents only the GUI component.

8. A method as in claim 4 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

9. A method as in claim 8 wherein at least one portion of the second image is at least partially transparent.

5. A method to display a pixel image for a Graphical User Interface (GUI) on a data processing system, the method comprising:

detecting one or more outlines based on pixel values of a first image to generate a second image from pixel values of the first image, the first image representing a GUI component in a first mode, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image; and

displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

6. A method as in claim 5 further comprising:

receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

7. A method as in claim 5 further comprising:

determining whether or not the GUI component is in the second mode;

wherein the combination of the first and second images is displayed in response to a determination that the GUI component is in the second mode.

10. A method as in claim 5 wherein said detecting the one or more outlines comprises:

generating a mask from the pixel values of the first image; and

detecting one or more edges in the mask.

11. A method as in claim 10 wherein said detecting the one or more outlines further comprises:

blurring the one or more edges to generate one or more blurred edges.

12. A method as in claim 11 further comprising:

coloring the one or more blurred edges to generate the second image.

13. A method as in claim 10 wherein the mask is generated from comparing the pixel values with a threshold value;

and wherein each of the one or more edges indicates a boundary between a first area that has corresponding pixel values larger than the threshold value and a second area that has corresponding pixel values smaller than the threshold value.

14. A method as in claim 10 wherein the pixel values specify degrees of transparency of corresponding pixels.

15. A method as in claim 5 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

16. A method as in claim 5 wherein the one or more outlines of the first image have arbitrary shapes.

17. A machine readable media medium containing executable computer program instructions which when executed by a data processing system cause said system to perform a method in a Graphical User Interface (GUI) which operates on the data processing system, the method comprising:

generating a second image from pixel values of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image;

switching between said first mode and a second mode of said data processing system; and

displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

18. A media as in claim 17 wherein the combination of the first and second images represents only the GUI component;

and wherein the second image is automatically generated from the first image.

19. A medium as in claim 17 wherein a display of the combination of the first and second images is generated by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

20. A medium as in claim 17 wherein the first image indicates an input for a-first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

21. A machine readable medium containing executable computer program instructions which when executed by a data processing system cause said system to perform a method to display a pixel image for a Graphical User Interface (GUI) on the data processing system, the method comprising:

detecting one or more outlines based on pixel values of a first image to generate a second image from pixel values of the first image, the first image representing a GUI component in a first mode, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image;

displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

22. A medium as in claim 21 wherein the method further comprises:

receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

23. A medium as in claim 21 wherein the method further comprises:

determining whether or not the GUI component is in the second mode;

wherein the combination of the first and second images is displayed in response to a determination that the GUI component is in the second mode.

24. A medium as in claim 21 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

25. A medium as in claim 24 wherein at least one portion of the second image is at least partially transparent.

26. A medium as in claim 21 wherein said detecting the one or more outlines comprises:

generating a mask from the pixel values of the first image; and

detecting one or more edges in the mask.

27. A medium as in claim 26 wherein said detecting the one or more outlines further comprises:

blurring the one or more edges to generate one or more blurred edges.

28. A medium as in claim 27 wherein the method further comprises:

coloring the one or more blurred edges to generate the second image.

29. A medium as in claim 26 wherein the mask is generated from comparing the pixel values with a threshold value;

and wherein each of the one or more edges indicates a boundary between a first area that has corresponding pixel values larger than the threshold value and a second area that has corresponding pixel values smaller than the threshold value.

30. A medium as in claim 26 wherein the pixel values specify degrees of transparency of corresponding pixels.

31. A medium as in claim 21 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

32. A medium as in claim 21 wherein the one or more outlines of the first image have arbitrary shapes.

33. A data processing system with a Graphical User Interface (GUI), the data processing system comprising:

means for generating a second image from pixel values of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image;

means for switching between said first mode and a second mode of said data processing system; and

means for displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

34. A data processing system as in claim 33 wherein a display of the combination of the first and second images is generated by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

35. A data processing system as in claim 33 wherein the first image indicates an input for a first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

36. A data processing system as in claim 33 wherein the combination of the first and second images represents only the GUI component.

37. A data processing system to display a pixel image for a Graphical User Interface (GUI), the data processing system comprising:

means for detecting one or more outlines based on pixel values of a first image to generate a second image from pixel values of the first image, the first image representing a GUI component in a first mode, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image;

means for displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

38. A data processing system as in claim 37 further comprising:

means for receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

39. A data processing system as in claim 37 further comprising:

means for determining whether or not the GUI component is in the second mode;

wherein the combination of the first and second images is displayed in response to a determination that the GUI component is in the second mode.

40. A data processing system as in claim 37 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

41. A data processing system as in claim 40 wherein at least one portion of the second image is at least partially transparent.

42. A data processing system as in claim 37 wherein said means for detecting the one or more outlines comprises:

means for generating a mask from the pixel values of the first image; and

means for detecting one or more edges in the mask.

43. A data processing system as in claim 42 wherein said means for detecting the one or more outlines further comprises:

means for blurring the one or more edges to generate one or more blurred edges.

44. A data processing system as in claim 43 further comprising:

means for coloring the one or more blurred edges to generate the second image.

45. A data processing system as in claim 42 wherein the mask is generated from comparing the pixel values with a threshold value;

and wherein each of the one or more edges indicates a boundary between a first area that has corresponding pixel values larger than the threshold value and a second area that has corresponding pixel values smaller than the threshold value.

46. A data processing system as in claim 42 wherein the pixel values specify degrees of transparency of corresponding pixels.

47. A data processing system as in claim 37 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

48. A data processing system as in claim 37 wherein the one or more outlines of the first image have arbitrary shapes.

49. A data processing system with a Graphical User Interface (GUI), the data processing system comprising:

a processor; and

memory coupled to the processor, the memory storing a first image which is displayed in said GUI in a first mode of said data processing system, the processor generating a second image from pixel values of the first image, wherein pixel values, specifying a color, of the second image are generated from pixel values, specifying a color, of pixels within the shape of the first image, the processor switching between said first mode and a second mode of said data processing system, the processor displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

50. A data processing system as in claim 49 wherein the processor generate a display of the combination of the first and second images by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

51. A data processing system as in claim 49 wherein the first image indicates an input for a first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

52. A data processing system as in claim 49 wherein the processor generates the second image from detecting one or more outlines in the first image according to pixel values of the first image.

53. A data processing system as in claim 52 wherein the processor displays the combination of the first and second images in response to input which indicates switching the GUI component from the first mode to the second mode.

54. A data processing system as in claim 52 wherein the processor displays the combination of the first and second images in response to a determination that the GUI component is in the second mode.

55. A data processing system as in claim 52 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

56. A data processing system as in claim 55 wherein at least one portion of the second image is at least partially transparent.

57. A data processing system as in claim 52 wherein the processor generates a mask from the pixel values of the first image and detects one or more edges in the mask to detect the one or more outlines.

58. A data processing system as in claim 57 wherein the processor blurs the one or more edges to generate one or more blurred edges to generate the second image.

59. A data processing system as in claim 58 wherein the processor colors the one or more blurred edges to generate the second image.

60. A data processing system as in claim 57 wherein the mask is generated from comparing the pixel values with a threshold value;

and wherein each of the one or more edges indicates a boundary between a first area that has corresponding pixel values larger than the threshold value and a second area that has corresponding pixel values smaller than the threshold value.

61. A data processing system as in claim 57 wherein the pixel values specify degrees of transparency of corresponding pixels.

62. A data processing system as in claim 52 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

63. A data processing system as in claim 52 wherein the one or more outlines of the first image have arbitrary shapes.

64. A data processing system as in claim 49 wherein the combination of the first and second images represents only the GUI component;

and wherein the second image is automatically generated from the first image.

65. A method to display an image for a Graphical User Interface (GUI) on a data processing system, the method comprising:

detecting one or more outlines from a display region of a first image to generate a second image, the first image representing a GUI component in a first mode; and

displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

66. A method as in claim 65 further comprising:

receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

67. A method as in claim 65 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

68. A method as in claim 65 wherein said detecting the one or more outlines comprises:

generating a mask from the display region of the first image; and

detecting one or more edges in the mask.

69. A method as in claim 65 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

70. A method as in claim 65 wherein the one or more outlines of the first image have arbitrary shapes.

71. A machine readable medium containing executable computer program instructions which when executed by a data processing system cause said system to perform a method to display an image for a Graphical User Interface (GUI) on the data processing system, the method comprising:

detecting one or more outlines from a display region of a first image to generate a second image, the first image representing a GUI component in a first mode; and

displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

72. A medium as in claim 71 wherein the method further comprises:

receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

73. A medium as in claim 71 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

74. A medium as in claim 71 wherein said detecting the one or more outlines comprises:

generating a mask from the display region of the first image; and

detecting one or more edges in the mask.

75. A medium as in claim 71 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

76. A medium as in claim 71 wherein the one or more outlines of the first image have arbitrary shapes.

77. A data processing system to display an image for a Graphical User Interface (GUI), the data processing system comprising:

means for detecting one or more outlines from a display region of a first image to generate a second image, the first image representing a GUI component in a first mode;

means for displaying a combination of the first and second images to indicate that the GUI component is in a second mode, the combination of the first and second images showing an outlined version of the first image.

78. A data processing system as in claim 77 further comprising:

means for receiving input which indicates switching the GUI component from the first mode to the second mode;

wherein the combination of the first and second images is displayed in response to the input.

79. A data processing system as in claim 77 wherein the combination of the first and second images is generated by one of:

a) displaying the second image on top of the first image;

b) displaying the first image on top of the second image; and

c) displaying the second image without displaying the first image.

80. A data processing system as in claim 77 wherein said means for detecting the one or more outlines comprises:

means for generating a mask from the display region of the first image; and

means for detecting one or more edges in the mask.

81. A data processing system as in claim 77 wherein the GUI component does not have keyboard focus in the first mode;

and wherein the GUI component has keyboard focus in the second mode.

82. A data processing system as in claim 77 wherein the one or more outlines of the first image have arbitrary shapes.

83. A method in a Graphical User Interface (GUI) which operates on a data processing system, the method comprising:

generating a second image from values of a display region of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein values, specifying a color, of the second image are generated from values, specifying a color, of a display region within the shape of the first image;

switching between said first mode and a second mode of said data processing system; and

displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

84. A method as in claim 83 wherein a display of the combination of the first and second images is generated by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

85. A method as in claim 83 wherein the first image indicates an input for a first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

86. A machine readable medium containing executable computer program instructions which when executed by a data processing system cause said system to perform a method in a Graphical User Interface (GUI) which operates on the data processing system, the method comprising:

generating a second image from values of a display region of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein values, specifying a color, of the second image are generated from values, specifying a color, of a display region within the shape of the first image;

switching between said first mode and a second mode of said data processing system; and

displaying a combination of the first and second images to indicate that the GUI component is in the second mode.

87. A medium as in claim 86 wherein a display of the combination of the first and second images is generated by one of:

displaying the second image on top of the first image, or displaying the first image on top of the second image, or displaying the second image without displaying the first image.

88. A medium as in claim 86 wherein the first image indicates an input for a first input device and the second image indicates another input for a second input device;

and wherein the input and the another input cause the data processing system to produce the same result.

89. A data processing system with a Graphical User Interface (GUI), the data processing system comprising:

means for generating a second image from values of a display region of a first image which represents a GUI component, said first image being displayed in said GUI in a first mode of said data processing system, wherein values, specifying a color, of the second image are generated from values, specifying a color, of a display region within the shape of the first image;

means for switching between said first mode and a second mode of said data processing system; and

means for displaying a combination of the first and second images to indicate that the GUI component is in the second mode.