Multi-layer computer application with a transparent portion

• US 9,134,789 B2
• Filed: 07/14/2009
• Issued: 09/15/2015
• Est. Priority Date: 07/14/2009
• Status: Active Grant

• Current Assignee: Adobe Systems Incorporated (Adobe Inc.)
• Original Assignee: Adobe Systems Incorporated (Adobe Inc.)
• Inventors: Cotlarciuc, Razvan
• Primary Examiner(s): TRAN, TUYETLIEN T
• Application Number:
  US12/502,486
• Publication Number:
  US 20140289650A1
• Time in Patent Office: 2,254 Days
• Field of Search: 715/768, 715/790, 715/794
• US Class Current: 1/1
• CPC Class Codes: G06F 3/01 Input arrangements or combined input and output arrangements for interaction between user and computer G06F3/16 takes precedence
• CPC Class Codes: G06F 3/048 Interaction techniques based on graphical user interfaces [GUI]
• 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/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/0488 using a touch-screen or digitiser, e.g. input of commands through traced gestures
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces

Abstract

An application in which a portion of a layer is transparent. When the application is a first state (with a first layer on top), a transparent portion of that layer may make a portion of a second layer visible. The first layer may include various menus and the second layer may have a feature that displays web page content in a position that overlaps the transparent portion of the first layer. In a second state, the second layer is rendered on top making the web page feature visible and accessible and, since nothing in the second layer overlays the menus, those menus are also visible and accessible. When needed, the application switches to a first state, for example, to expand a menu'"'"'s display on top of (i.e., covering) some of the web content, while leaving the uncovered portion of the web content visible through the transparent portion.

Claims

1. A computer-implemented method comprising:

presenting an interface associated with an application on a computing device, the computing device comprising instructions embodied in a computer-readable medium which configure the computing device to display the interface, the interface comprising a first layer and a second layer, wherein the first layer comprises first layer content and a transparent area, the first layer content comprising content from a first source external to the application, wherein the second layer comprises second layer content in a content area, the second layer content comprising another content from a second source external to the application and different from the first source, the content area corresponding to the transparent area with respect to shape, size, and position, and wherein the application is configured to provide one or more controls from the first layer content and associated with the first source to perform one or more operations on the another content of the second source in the second layer content;

displaying a non-overlapping portion of the interface where the first layer and second layer do not overlap, the non-overlapping portion comprising at least the first layer content;

displaying an overlapping portion of the interface where the transparent area of the first layer overlaps the content area of the second layer, the overlapping portion comprising at least the second layer content;

in response to the first layer becoming active, changing the interface such that the first layer content is visible and, through the transparent area, the second layer content is visible; and

in response to the second layer becoming active, changing the interface such that the second layer content is visible and obstructs a presentation of the transparent area at the interface, and such that the first layer content is visible in the non-overlapping portion of the interface.

2. The method of claim 1, wherein the interface is provided as a web page in a browser, wherein the web page is provided as a hypertext markup language (HTML) page containing two HTML nodes:

one for the first layer content and one for the second layer content.

3. The method of claim 2, wherein the web page uses absolute positioning to force the browser to display the first layer and the second layer at specific positions so that the second layer fits exactly in the transparent area.

4. The method of claim 3, wherein the web page uses a z-index to make either the first layer or the second layer active.

5. The method of claim 1, wherein, when the first layer is active, all of the first layer content is visible.

6. The method of claim 1, wherein, when the second layer is active, the one or more controls of the first layer from the non-overlapping portion can be accessed to perform the one or more functions on the another content in the second layer content.

7. The method of claim 1, wherein the second layer content is interactive content and the first layer content comprises components providing for editing the second layer content.

8. The method of claim 1, wherein the application is configured to perform the operation on the another content in the second layer content based on a selective activation of the first layer and the second layer.

9. The method of claim 1, wherein:

in response to the second layer becoming active, receiving a user selection of an item from the second layer content to be edited;

determining whether to activate the first layer to edit the item;

in response to determining that the first layer is to remain inactive, maintain the second layer in an active state, present an option in the non-overlapping portion of the first layer content to edit the item, and maintain the obstruction of the presentation of the transparent area, the option presented; and

in response to determine that the first layer is to be activated, stop the obstruction of the presentation of the transparent area, present the option in the transparent area to edit the item, and obstruct an overlapping area of the second layer content corresponding to a presentation area of the option in the transparent area.

10. The method of claim 1, further comprising:

in response to receiving a user selection of an item from the second layer content, selecting between the first layer and the second layer for activation based on an operation to be performed on the item according to the user selection, wherein activating the selected layer causes the application to perform the operation on the item.

11. A computer-implemented method comprising:

presenting an interface associated with an application on a computing device, the computing device comprising instructions embodied in a computer-readable medium which configure the computing device to display the interface, the interface comprising a first layer and a second layer, wherein the first layer comprises components and a transparent area, the components comprising content from a first source external to the application, wherein the second layer comprises interactive content in a content area, the interactive content associated with a second source external to the application and different from the first source, the content area corresponding to the transparent area with respect to shape, size, and position, wherein the application is configured to provide one or more controls from the components of the first layer and associated with the first source to perform one or more operations on the interactive content of the second source in the content area, wherein the interface comprises a non-overlapping portion where the first layer and second layer do not overlap and comprising the components and the interface further comprises an overlapping portion where the transparent area of the first layer overlaps the content area of the second layer, the overlapping portion comprising at least the content area;

upon receiving an interaction with the interface making the first layer active such that the components are visible and, through the transparent area, the interactive content is visible; and

upon receiving an interaction with the interface, making the second layer active such that the interactive content is visible and obstructs a presentation of the transparent area and such that the components are visible in the non-overlapping portion of the interface.

12. The computer-implemented method of claim 11, wherein the interaction making the first layer active causes a first component of the first layer to display at a location that partially overlaps the interactive content displayed through the transparent portion, wherein interactive content that is not partially overlapped remains visible.

13. The computer-implemented method of claim 12, wherein the first component further overlaps at least a portion of the non-overlapping portion.

14. The computer-implemented method of claim 12, wherein the first component is a dialog box.

15. A system comprising:

instructions embodied in a non-transitory computer-readable medium which configure a computing device to display an interface associated with an application, the interface comprising a first layer and a second layer, wherein the first layer comprises first layer content and a transparent area, the first layer content comprising content from a first source external to the application, wherein the second layer comprises second layer content in a content area, the second layer content comprising another content from a second source external to the application and different from the first source, the content area corresponding to the transparent area with respect to shape, size, and position, wherein the application is configured to provide one or more controls from the first layer content and associated with the first source to perform one or more operations on the another content of the second source in the second layer content, wherein at a non-overlapping portion of the interface the first layer and second layer do not overlap and at an overlapping portion of the interface the transparent area of the first layer overlaps the content area of the second layer, the non-overlapping portion comprising at least the first layer content, the overlapping portion comprising at least the second layer content;

instructions embodied in a computer-readable medium which configure the computing device to, in response to the first layer becoming active, change the interface such that the first layer content is visible and, through the transparent area, the second layer content is visible; and

in response to the second layer becoming active, changing the interface such that the second layer content is visible and obstructs a presentation of the transparent area at the interface, and such that the first layer content is visible in the non-overlapping portion of the interface.

16. The system of claim 15, wherein:

the interface is provided as a web page in a browser, wherein the web page is provided as a hypertext markup language (HTML) page containing two HTML nodes;

one for the first layer content and one for the second layer content;

the web page uses absolute positioning to force the browser to display the first layer and the second layer at specific positions so that the second layer fits exactly in the transparent area; and

the web page uses a z-index to make either the first layer or the second layer active.

17. The system of claim 15, wherein the first layer and the second layer each correspond to content that is executed according to a different execution framework.

18. The system of claim 15, wherein the first layer content comprises components for editing the second layer content.

19. A non-transitory computer-readable medium on which is encoded program code, the program code comprising:

program code for presenting an interface associated with an application on a computing device, the computing device comprising instructions embodied in a computer-readable medium which configure the computing device to display the interface, the interface comprising a first layer and a second layer, wherein the first layer comprises first layer content and a transparent area, the first layer content comprising content from a first source external to the application, wherein the second layer comprises second layer content in a content area, the second layer content comprising another content from a second source external to the application and different from the first source, the content area corresponding to the transparent area with respect to shape, size, and position, and wherein the application is configured to provide one or more controls from the first layer content and associated with the first source to perform one or more operations on the another content of the second source in the second layer content;

program code for displaying a non-overlapping portion of the interface where the first layer and second layer do not overlap, the non-overlapping portion comprising at least the first layer content;

program code for displaying an overlapping portion of the interface where the transparent area of the first layer overlaps the content area of the second layer, the overlapping portion comprising at least the second layer content;

program code for, in response to the first layer becoming active, changing the interface such that the first layer content is visible and, through the transparent area, the second layer content is visible; and

program code for, in response to the second layer becoming active, changing the interface such that the second layer content is visible and obstructs a presentation of the transparent area at the interface, and such that the first layer content is visible in the non-overlapping portion of the interface.

20. The computer readable medium of claim 19, wherein:

the interface is provided as a web page in a browser, wherein the web page is provided as a hypertext markup language (HTML) page containing two HTML nodes;

one for the first layer content and one for the second layer content;

the web page uses absolute positioning to force the browser to display the first layer and the second layer at specific positions so that the second layer fits exactly in the transparent area; and

the web page uses a z-index to make either the first layer or the second layer active.