Patent Application
20120044259
Using an electronic device, a user can direct the device to display different types of content. For example, a user can direct the device to operate an application by which a user can provide a text input for display by the application (e.g., a word processing application). As another example, a user can direct the device to operate an application by which a user can define graphical elements for display. The graphical elements can include one or more shapes (e.g., predefined shape templates such as, for example, circles, squares, rectangles, polygons, or shapes having curved surfaces). Several graphical elements can be overlaid or combined to form complex graphical shapes and entities displayed by the device. For example, graphical elements of different shapes and colors can be overlaid to form one or more complex images or information displays.
In some embodiments, a user can direct an electronic device to display several overlapping graphical elements. For example, a user can define a complex shape that includes several layers of graphical elements overlapping in different manners. In one implementation, each additional graphical element that a user selects to display can be incorporated in a new layer placed over all of the preceding layers. The new graphical element can then cover some or all of a graphical element of a preceding layer.
To create complex displays, it may be desirable for a user to move individual graphical elements above or below other displayed graphical elements. This can ensure that particular portions of a graphical element remain visible and displayed despite other graphical elements being provided on the display. The electronic device can provide several mechanisms for changing the order of graphical elements so that a particular graphical element moves towards the front or towards the back or rear of a display order stack. In one implementation, the electronic device can provide a mechanism by which a particular graphical element can become the rear-most graphical element (e.g., “send to back”) or the front-most graphical element (e.g., “send to front”). Using this mechanism, a particular graphical element can jump across several graphical elements within the display order stack.
In some embodiments, the electronic device can provide a mechanism by which an individual graphical element can move forward or backward relative to a single graphical element (e.g., change a depth order by one level). For example, a user can provide a “move forward” or a “move backward” instruction by which a selected graphical element moves forward or backward by one graphical element in a depth order. When a display includes a large number of graphical elements, and when not all of the graphical elements overlap, a user's instruction to move a particular graphical element forward or backward relative to a single graphical element may not cause a graphical element to move ahead or behind another graphical element. Instead, the display of a graphical element will change only when the user moves the graphical element forward or backward relative to enough graphical elements to change the order of the overlapping graphical elements. This approach can be time consuming and confusing for a user, as the user may not know the exact depth order of the graphical elements.
This is directed to systems, methods and computer-readable media for adjusting a depth order of a displayed graphical element such that an instruction to move a graphical element forward or backward will move the graphical element above or below an overlapping graphical element.
Using an electronic device, a user can select or define several graphical elements to provide on a display. The graphical elements can be associated with different depth orders or heights, such that the graphical elements can overlap and hide portions of one another in response to the user moving or placing the graphical elements on the display. The graphical elements can be defined with a depth order that a user can change by providing an appropriate instruction.
To improve a user's ease of interaction with the displayed graphical elements, the electronic device can enable the electronic device to dynamically adjust how much depth order varies in response to an instruction to change a depth order of a graphical element. In particular, an instruction to move a graphical element forward or backward can correspond to an instruction to move the layer forward or backward by a varying number of levels in the depth order.
The electronic device can use any suitable approach to determine how to revise the depth order of several graphical elements in response to receiving an instruction to move a particular graphical element forward or backward. In one implementation, the electronic device can identify other displayed graphical elements that overlap with the particular graphical element (e.g., other graphical elements for which a corresponding drawing box intersects with a drawing box of the particular graphical element). The electronic device can then identify the overlapping other graphical elements that are immediately below or above the graphical element (e.g., from a depth order), and move the particular graphical element above or below the identified overlapping other graphical elements in response to receiving an instruction. For example, the electronic device can identify the first other graphical element positioned above the particular graphical element, and move the graphical element on top of the first other graphical element in response to receiving an instruction to move the particular graphical element forward.
The electronic device can use any suitable data structure to represent the depth order of displayed graphical elements. In some embodiments, the electronic device can define an ordered array, stack, or linked list in which each entire is associated with a defined depth order of displayed graphical elements. In response to receiving an instruction to move a particular graphical element forward or backward, the electronic device can identify another graphical element for which the depth order is to change relative to the depth order of the particular graphical element. The electronic device can identify the entry associated with the other graphical element in the ordered array (or other data structure), and move the entry in the ordered array associated with the particular graphical element to a new position relative to the position of the entry associated with the other graphical element. In some embodiments, metadata values corresponding to depth order can be associated with each graphical element, and can change in response to receiving an instruction to move a particular graphical element forward or backward.
In some embodiments, the electronic device can determine that a particular graphical element does not overlap with any other graphical elements. Alternatively, the electronic device can determine that the particular graphical element does not overlap with any other graphical elements in a direction of change in depth order (e.g., forward or backward) corresponding to a received user instruction. In such cases, the electronic device can revert to a more traditional behavior of the instruction, where the depth order of the graphical element changes by only a single level.
The above and other features of the present invention, its nature and various advantages will be more apparent upon consideration of the following detailed description, taken in conjunction with the accompanying drawings in which:
This is directed to adjusting a depth order of particular displayed graphical elements in response to receiving a corresponding instruction, where the amount by which a depth order changes can vary based on the disposition of graphical elements on a display. In particular, this is directed to adjusting the depth order of graphical elements based on detected overlapping elements.
An electronic device can display several graphical elements on a display.
In some embodiments, a user can move individual elements on the display without changing the depth order of the elements. For example, the user can select a particular element to drag to a different position. Display 150, shown in
The user can adjust the depth order of individual elements or layers on which elements are displayed using any suitable approach. In some embodiments, the user can provide an instruction for moving an element to the front or back of the depth order. For example, a user can select a graphic element and provide a “send to front” or “send to back” instruction. In response to receiving the instruction, the electronic device can change the depth value of the particular element to be the smallest value (e.g., a value of 1) for an instruction to send the element to the back of the depth order, or the electronic device can change the depth value of the particular element to be the largest value (e.g., a value of 4) for an instruction to send the element to the front of the depth order. In some embodiments, the electronic device can change the depth values of other, non-selected elements to accommodate for the new value of selected graphic element.
In some embodiments, a user can instead or in addition change the depth order of a particular graphical element by an amount such that a graphic element does not reach the top-most or bottom-most depth value. In particular, a user can move an element up or down along a depth axis such that the element moves above or below the nearest overlapping graphical element.
Starting with display 150, the user can provide an instruction either to bring element 112 (becoming element 212) forward over element 116 (becoming element 216), or the user can instead send element 116 backward behind element 112. The electronic device can provide the appropriate instruction using any suitable approach. In some embodiments, the electronic device can provide an instruction to bring forward (or send backward) a selected graphical element. Unlike existing systems by which the electronic device simply increases (or decreases) a depth value of the selected graphical element by one (e.g., move the graphical element above the next graphical element in the depth order), the electronic device can change the depth value of the selected graphical element based on the graphical elements overlapping with the selected graphical element. Using this approach, a user can avoid providing an instruction to change the depth order a graphical element, but see no manifestation of the change in depth order due to adjacent depth values of non-overlapping graphical elements.
In the example of
Alternatively, in the example of
The user can provide an instruction to move a particular element forward or backward using any suitable approach. In some embodiments, a portion of an input interface can be dedicated to changing the depth order of displayed elements (e.g., a dedicated button). Alternatively, the electronic device can enable a particular input of an input interface to be associated with the instructions (e.g., an input provided when particular content is displayed, or when specific features are enabled). In some embodiments, the electronic device can instead or in addition display one or more selectable options for changing the depth order of displayed elements. For example, the electronic device can display one or more menus (e.g., a pop-up menu with options for “send to back,” “send backward,” “bring forward,” and “bring to front”), display screens, buttons, selectable options, or combinations of these.
The electronic device can use any suitable approach for determining how to much to change a depth order of a graphical element in response to receiving an instruction to move the graphical element forward or backward. In some embodiments, the electronic device can first identify a selected graphical element, and then identify other displayed graphical elements that at least partially overlap with the selected graphical element.
The electronic device can use any suitable approach for determining whether two displayed graphical elements intersect or overlap. In some embodiments, the electronic device can identify a drawing box associated with each of the displayed elements, and identify intersections between the drawing boxes. When the graphical element defines a filled surface, the drawing box can include the surface enclosed by a periphery of the element (e.g., the displayed region of elements 310 and 312). When the element defines an open line (e.g., element 314), the drawing box can include just the path of the line, a region that includes the lines and substantially follows the path of the line (e.g., boundary box following the line 315a), a region in which the line is constrained (e.g., rectangular box that includes all of the line, as if the line where closed 315b), or combinations of these. When the element defines a closed line or a periphery for an empty region, the drawing box can include the line forming the periphery, or a region that includes the line and at least part of the surface enclosed within the line.
Based on the selection of the drawing box, two elements may or may not intersect. For example, if the drawing box for element 314 is selected to be the line itself, element 314 intersects with elements 310 and 316, but not with element 312. Alternatively, if the drawing box is selected as a region that includes the element (e.g., drawing box 315a or drawing box 315b), element 314 intersects with elements 310, 312 and 316. Similarly, if the drawing box for element 316 is selected to include only the line defining the boundary, element 316 may not intersect with element 310. Alternatively, if the electronic device selects a drawing box that includes the surface constrained within the closed line, elements 316 and 310 can intersect.
Using the drawing boxes, the electronic device can identify the particular graphical elements that intersect with a selected graphical element. Upon identifying the intersecting graphical elements, the electronic device can compare the depth orders of the elements to identify the specific intersecting or overlapping graphical elements that are immediately above or below the selected graphical element in the depth order. In some embodiments, the electronic device can instead or in addition only identify the particular intersecting graphical element that is nearest to the selected graphical element in depth order in the direction of a received instruction (e.g., above to bring forward, below to send backward).
In some embodiments, the electronic device can instead or in addition first identify the graphical elements that are above or below a selected graphical element, and determine an ordering of the graphical elements based on depth order relative to the selected graphical element. The electronic device can then, in turn and in the determined ordering, determine whether drawing boxes associated with each of the identified graphical elements intersect with a drawing box associated with the selected graphical element. Using this approach, the electronic device can easily identify the nearest overlapping graphical element in depth order.
In some embodiments, the electronic device can determine that no graphical element overlaps with a selected graphical element in a particular direction (e.g., forward or backward, as determined from a received user instruction). In response to determine that no graphical element overlaps, the electronic device can ignore the received instruction, or change the depth order of the graphical element in the instructed direction by a single level (e.g., revert to a default mode by which a graphical element moves forward or backward by single depth values).
At step 408, the electronic device can determine whether other graphical elements overlap with the selected graphical element. For example, the electronic device can compare the position and sizes of drawing boxes of the displayed graphical elements, and determine whether one or more of the displayed graphical elements have drawing boxes that intersect with the drawing box of the selected graphical element. In some embodiments, the electronic device can determine whether other graphical elements having a particular depth order relative to the depth order of the selected graphical element overlap with the selected graphical element. For example, if the received instruction corresponds to bringing the selected graphical element forward, the electronic device can determine only whether other graphical elements positioned above or over the selected graphical element overlap with the selected graphical element. If the electronic device determines that at least one other graphical element overlaps with the selected graphical element, process 400 can move to step 410. At step 410, the electronic device can identify the closest overlapping graphical element in depth order in the direction of the change of depth order. For example, the electronic device can identify the overlapping graphical element that has the closest depth order underneath the depth order of the selected element when the received instruction corresponds to an instruction to send the selected element backward. At step 412, the electronic device can change the depth order of the selected graphical element relative to the identified closest overlapping graphical element. For example, the electronic device can change the depth order of the selected graphical element to be one higher or lower than the identified closest graphical element based on the direction in which the depth order of the selected graphical element is to change. Process 400 can then end at step 416.
If, at step 408, the electronic device instead determines that other graphical elements do not overlap with the selected graphical element, process 400 can move to step 414. At step 414, the electronic device can change the depth order of the selected graphical element by one level. For example, the electronic device can bring a selected graphical element forward or backward by one level. If the graphical element has already reached a boundary in the depth order (e.g., the selected graphical element is already at the front or at the back), the electronic device can perform no action. Process 400 can then end at step 416.
The electronic device can store the depth order of several graphical elements using any suitable data structure.
Individual graphical elements can be associated with a particular entry in a data structure using any suitable approach. In some embodiments, each entry can include a pointer to a particular graphical element. Alternatively, each entry can store information describing the graphical element. As still another example, data structure 500 can be replicated and stored as metadata associated with each of the graphical elements.
To change the depth order in which graphical elements are displayed, the electronic device can change the order in which graphical elements are provided in data structure 500. Data structure 520, shown in
By creating a data structure having an ordered listing of elements, the electronic device can quickly and easily adjust the depth order of a particular element when it moves relative to the depth order of several graphical elements in response to a single instruction. In particular, the electronic device only needs to change the order of graphical elements in the data structure to indicate that a particular element has a new depth order that is more than one level different than a prior depth order. In contrast, in embodiments where a depth value is associated with each graphical element, the electronic device may be required to change the depth value of several graphical elements to allow a particular element to move forward or backward by more than one level.
Data structure 540, shown in
At step 710, the electronic device can identify at least one other graphical element that overlaps with the selected graphical element in a particular direction (e.g., above or below the selected graphical element, or in a first order). For example, the electronic device can compare drawing boxes used for graphical elements at different depth orders. At step 712, the electronic device can direct the display to display the at least one other graphical element and the selected graphical element such that the at least one other graphical element overlaps with the selected graphical element differently. For example, the electronic device can display the graphical elements such that they overlap in a second order different from the first order. Process 700 can then end at step 714.
Any suitable electronic device can be used to change the depth order of displayed graphical elements.
Electronic device 900 can include a processor or control circuitry 902, storage 904, memory 906, input/output circuitry 908, and display 910 as typically found in an electronic device of the type of electronic device 900, and operative to enable any of the uses expected from an electronic device of the type of electronic device 900 (e.g., connect to a host device for power or data transfers). In some embodiments, one or more of electronic device components 900 can be combined or omitted (e.g., combine storage 904 and memory 906), electronic device 900 can include other components not combined or included in those shown in
Control circuitry 902 can include any processing circuitry or processor operative to control the operations and performance of electronic device 900. Storage 904 can include, for example, one or more storage mediums including a hard-drive, solid state drive, flash memory, permanent memory such as ROM, any other suitable type of storage component, or any combination thereof. Memory 906 can include cache memory, semi-permanent memory such as RAM, and/or one or more different types of memory used for temporarily storing data. In some embodiments, memory 906 and storage 904 can be combined as a single storage medium. Input/output circuitry 908 can be operative to convert (and encode/decode, if necessary) analog signals and other signals into digital data. Input/output circuitry 908 can be coupled to or include any suitable input interface, such as for example, a button, keypad, dial, a click wheel, or a touch screen, as well as any suitable output circuitry associated with output devices (e.g., audio outputs or display circuitry or components).
Display 910 can be operatively coupled to control circuitry 902 for providing visual outputs to a user. Display 910 can include any suitable type of display, including for example a liquid crystal display (LCD) (e.g., active matrix, passive matrix and the like), a monochrome display, color graphics adapter (CGA) display, enhanced graphics adapter (EGA) display, variable-graphics-array (VGA) display, super VGA display, cathode ray tube (CRT), a plasma display, a display implemented with electronic inks, or any other suitable display. Display 910 can be configured to display a graphical user interface that can provide an easy to use interface between a user of the computer system and the operating system or application running on the system.
In some embodiments, electronic device 900 can include a bus operative to provide a data transfer path for transferring data to, from, or between control processor 902, storage 904, memory 906, input/output circuitry 908, display 910 and any other component included in the electronic device.
Although many of the embodiments of the present invention are described herein with respect to personal computing devices, it should be understood that the present invention is not limited to personal computing applications, but is generally applicable to other applications.
The invention is preferably implemented by software, but can also be implemented in hardware or a combination of hardware and software. The invention can also be embodied as computer readable code on a computer readable medium. The computer readable medium is any data storage device that can store data which can thereafter be read by a computer system. Examples of the computer readable medium include read-only memory, random-access memory, CD-ROMs, DVDs, magnetic tape, and optical data storage devices. The computer readable medium can also be distributed over network-coupled computer systems so that the computer readable code is stored and executed in a distributed fashion.
Insubstantial changes from the claimed subject matter as viewed by a person with ordinary skill in the art, now known or later devised, are expressly contemplated as being equivalently within the scope of the claims. Therefore, obvious substitutions now or later known to one with ordinary skill in the art are defined to be within the scope of the defined elements.
The above described embodiments of the invention are presented for purposes of illustration and not of limitation.
