WO2014022981A1

WO2014022981A1 - Animating movement of a graphical representation on a display

Info

Publication number: WO2014022981A1
Application number: PCT/CN2012/079803
Authority: WO
Inventors: Kejia LIU; David Francois HUYNH; Ying CHAI; Lijie CHEN
Original assignee: Google Inc.
Priority date: 2012-08-08
Filing date: 2012-08-08
Publication date: 2014-02-13

Abstract

A ghost graphical representation may be used to animate a transition between displayed arrangements, views, or both, having an associated document object model (DOM) tree. Graphical representations shared between the arrangements may be overlayed with ghost graphical representation, which are associated with nodes directly descending from a common ancestor node of the DOM tree. The overlayed graphical representation, from the old arrangement, can then be removed from the display without the user noticing, and the ghost graphical representation may undergo an animated movement on the display screen. Hidden graphical representation corresponding to the new arrangement may be generated, and displayed during or after the animation. Accordingly, the transition maintains visual context that the user can more easily follow. Also, graphical representations of the old arrangement may be faded out from view, and graphical representations of the new arrangement may be faded in to view, to soften the transition.

Description

ANIMATING MOVEMENT OF A GRAPHICAL REPRESENTATION ON A

DISPLAY

The present disclosure relates to causing a movement of a graphical representation to be animated on a display, the graphical representation being represented in a document object model (DOM) .

Background

A web browser presents an arrangement of visual elements to a user. Typically, if the user wishes to view another arrangement of graphical representations corresponding to visual elements, the browser first clears the old arrangement, and then loads and renders the new arrangement. This process breaks the

relationship between the two arrangements and causes the user to lose visual context. One challenge of implementing the transition from one arrangement of graphical representations corresponding to visual elements to another in a web browser having a

hierarchical user interface framework such as hypertex markup language (html) document object model (DOM) trees, for example, is that the first arrangement and second arrangement are associated with different branches of the DOM tree. This structure prevents a simple implementation of an animated transition. Summary

A technique for animating a movement of at least one graphical representation displayed in a first area of an electronic display screen to a second area of the electronic display screen may include

maintaining a document object model (DOM) tree having an initial hierarchy relative to a root node. The first area is associated with a first child node in the DOM tree, the second area is associated with a second child node of the DOM tree, and the at least one graphical representation is associated with a first descendant node of the first child node. In response to an indication to move the at least one graphical representation, the technique may include causing to be generated for each of the at least one graphical representation at least one ghost node as a direct child node of the root node of the DOM tree in response to the indication, and causing to be associated each of the at least one ghost node with a ghost graphical representation. Each ghost visual element may be caused to be overlayed on the corresponding at least one graphical representation in the first area. The at least one graphical representation from the first area may be caused to be removed after the overlay. The technique may include causing to be generated at least one second descendant node of the DOM tree associated with a hidden graphical representation at a target position in the second area for each of the at least one graphical representation. The second area may be associated with the at least one second child node and the at least one second descendant node may be a descendant of the respective at least one second child node. The technique may include causing to be animated a movement of the at least one ghost graphical representation from the first area to the respective target position in the second area.

A system for animating a movement of at least one graphical representation displayed in a first area to a second area may include one or more computers . The one or more computers may be configured to maintain a DOM tree having an initial hierarchy relative to a root node. The first area is associated with a first child node in the DOM tree, the second area is associated with a second child node of the DOM tree, and the at least one graphical representation is associated with a first descendant node of the first child node. In response to an indication to move the at least one graphical representation, the one or more computers may be configured to cause to be generated for each of the at least one graphical representation at least one ghost node as a direct child node of the root node of the DOM tree in response to the indication, and cause to be associated each of the at least one ghost node with a ghost graphical representation. The one or more computers may be configured to cause to be overlayed each ghost graphical representation on the

corresponding at least one graphical representation in the first area. The one or more computers may be configured to cause to be removed the at least one graphical representation from the first area after the overlay. The one or more computers may be configured to cause to be generated at least one second descendant node of the DOM tree associated with a hidden graphical representation at a target position in the second area for each of the at least one graphical representation. The second area may be associated with the at least one second child node and the at least one second

descendant node may be a descendant of the respective at least one second child node. The one or more computers may be configured to cause to be animated a movement of the at least one ghost graphical

representation from the first area to the respective target position in the second area.

Brief Description of the Figures

The above and other features of the present disclosure, 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:

FIG . 1 shows an illustrative document object model (DOM) tree having two subareas;

FIG . 2 shows an illustrative webpage corresponding to the DOM tree of FIG . 1 ;

FIG . 3 shows an illustrative webpage, including an arrangement of US Presidents;

FIG . 4 shows an illustrative webpage, including an arrangement of Republican US Presidents filtered from the webpage of FIG . 3 ;

FIG . 5 shows an illustrative webpage, including an alternate view of a particular US President selected from the webpage of FIG . 3 ;

FIG . 6 is a flow diagram of illustrative steps for animating a movement of a graphical representation of a visual element, from a first position to a second position;

FIG . 7 shows an illustrative display of a first arrangement and a corresponding initial DOM tree;

FIG . 8 shows an illustrative display of the first arrangement of FIG . 7 and a corresponding modified DOM tree having nodes associated with ghost graphical representations and nodes associated with hidden graphical representations;

FIG . 9 shows an illustrative display of the ghost graphical representations of FIG . 8 , overlaid on corresponding graphical representations of the visual elements of the first arrangement, after fading-out of the graphical representations of the visual elements of the first arrangement;

FIG . 10 shows an illustrative display of the ghost graphical representations after an animated movement and re-sizing along respective paths;

FIG . 11 shows an illustrative display of the graphical representations of the visual elements of the second arrangement associated with the hidden graphical representations and a corresponding new DOM tree;

FIG . 12 shows an illustrative computer system; and

FIG . 13 is a block diagram of an illustrative device .

Detailed Description of the Figures

Animating a movement of graphical representations of visual elements included in a document object model (DOM) tree does not simply involve moving the graphical representations of visual elements of a first

arrangement at original locations to destination locations, but rather facilitating the appearance of transitioning the visual elements from one branch of the DOM tree to another branch. The use of absolute positioning deep within DOM tree branches is relatively less flexible and efficient, and typically requires more complicated programming. The discussion that follows addresses some techniques for animating a movement of graphical representations of visual elements included in a DOM tree. A DOM tree is a representation of the structure of a document. The DOM tree may include nodes that are elements of the document, connected via branches. For example, a DOM tree may describe a hierarchical structure of a webpage, specifying properties of the webpage, properties of sub-areas of the page, as well as including elements associated with the document, e.g., visual elements, hidden elements, structural elements, and/or other elements. For example, a root node may be arranged at the top of the hierarchy, and multiple descendent nodes may descend from the root node to form one or more branches. An ancestor node refers to a node relatively higher in the hierarchy, e.g., nearer the root node. Accordingly, referencing two nodes in a DOM tree, a common ancestor node is a node relatively higher in the hierarchy than both of the two nodes, having branches to each of the two nodes. A descendent node refers to a node relatively lower in hierarchy, e.g., further from the root node.

A web page, having an associated DOM tree, can display an arrangement of graphical representations of visual elements such as icons, images, or other graphics, corresponding to nodes. Nodes may also be structural elements, or other elements. For example, a webpage can show each graphical representation of a visual element as a thumbnail and an optional caption. A user can be allowed to perform one or more actions to the whole arrangement, e.g., sort, filter, switch to another style of view, or other action, thus causing a transition to a new arrangement of visual elements. The new arrangement may contain some or all of the visual elements from the old arrangement. The

transition may include an animation or other graphical effect to maintain visual context between any shared graphical representations of visual elements between the old and new arrangement. For example, a graphical representation of a visual element repeated in both arrangements may be moved to a new position using an animation along a path, rather than an abrupt switch. In a further example, the transition may include fading-in and fading-out of graphical representations of visual elements from view to soften the transition. Accordingly, a user may more easily follow and

understand the transition, rather than experiencing an abrupt change in display. For example, if an

arrangement of graphical representations of visual elements is sorted, the transition aids the user in understanding how the graphical representations are re^¬ ordered. In a further example, if an arrangement of graphical representations of visual elements is filtered, the transition aids the user in understanding which graphical representations are filtered out and which remain. In a further example, if a view style of an arrangement of graphical representations of visual elements is switched, the transition aids the user in understanding how the graphical representations change position and/or size.

A transition among arrangements of visual elements may be implemented for a hierarchical user interface framework such as, for example, a DOM tree. In some implementations, the use of a ghost visual element aids in allowing the animation of the graphical

representation of the visual element. The ghost visual element is a node in a DOM tree, arranged relatively less deeply in the DOM tree, and may accordingly be relatively less constrained, than the node associated with the original visual element. The term ghost visual element, as used herein, shall refer to a visual element that can be overlaid on an original visual element, and has an absolute position defined. A ghost visual element may appear identical to the original visual element, but may be moved about the display more easily based on the defined absolute position. For example, a graphical representation of a particular visual element may be displayed initially as part of a first arrangement of graphical representations of visual elements in a first subarea of a display.

Another aspect of webpages having associated DOM trees are the presence of subareas, having associated div nodes in the DOM tree. Subareas may crop elements descending from the div nodes, allowing scrolling within a subarea, for example. Cropping may also limit the display of a graphical representation of a visual element to a particular subarea. For example,

background watermark images, or other background graphics may be cropped within a particular subarea and scrolling may allow adjustment of the display within the subarea. Accordingly, graphical representations of visual elements included in the subarea may be visible or hidden based on the cropping, such that the

graphical representations are not displayed outside of the subarea. During a transition, however, cropping of a graphical representation within the subarea is likely not desired, because the graphical representation may be required to be displayed outside of the cropping boundaries of the subarea. Without cropping, native scrolling support may likely not be available. The use of a ghost visual element may allow cropping

functionality to be maintained, while still allowing for a graphical representation of a visual element to be moved from one subarea to another subarea, across one or more cropping boundaries.

FIG . 1 shows an illustrative, initial DOM tree 100 , enclosed by the dashed line. FIG . 2 shows an illustrative display 200 corresponding to the DOM tree of FIG . 1 . An arrangement of graphical representations "A, " "B, " and "C" corresponding to respective nodes a, b, and c of initial DOM tree 100 are initially

displayed in subarea I shown by dotted box 202 in FIG . 2 . An indication may be received to display a second arrangement of graphical representations "D, " "B, " and "E" in a second subarea shown by box 252 in FIG . 2 , which includes the graphical representation "B." The second arrangement of graphical representations may be represented by the second arrangement of nodes d, b", and e linked to subarea II, as shown in FIG . 1 .

Animating a movement of the graphical representation "B" associated with node b in subarea I and node b" in subarea II may be difficult since the transition must traverse multiple subareas. For example, the dashed arrow in FIG . 1 shows a direct transition of node b from one branch of the DOM tree to node b" of another branch, which would be challenging to animate. The direct transition of node b from subarea I to subarea II presents a potential challenge. For example, removing node b from subarea I and inserting node b immediately into subarea II would require that the graphical representation associated with node b be cropped by subarea II while still within the boundary of subarea I.

A ghost visual element may be used to aid in the visual transition from the first arrangement to the second arrangement. Ghost node 150 , having an

associated ghost graphical representation identical to the repeated graphical representation "B, " may be introduced as a child node, e.g., a direct descendant node as shown in FIG . 1 , to body node 120 of DOM tree 100 . A child node refers to a node deeper within the DOM tree than a reference node, and connected to the reference node via one or more branches. A direct descendant node refers to a child node directly connected to a reference node. The ghost graphical representation represented by ghost node 150 , labeled b_g' in FIG . 1 , may accordingly have an associated absolute position on the webpage corresponding to the pre-transition position of the graphical representation "B." The ghost graphical representation, identical to the original graphical representation "B, " may be overlaid on the original graphical representation. The ghost graphical representation is more easily moved about the display, because of its absolute position rather than a position relative to subarea I .

Accordingly, the first arrangement including the graphical representation "B" may be removed from the display, e.g., faded-out, leaving the identical ghost graphical representation displayed without the user experiencing a visual change of the graphical

representation "B."

An arrangement of hidden graphical representations associated with the new arrangement, corresponding to nodes d, b, and e, may be generated for subarea II, although these hidden graphical representations may be hidden from the user, e.g., have an opacity of zero. The term hidden graphical representation, as used herein, shall refer to a graphical representation, having an associated node in a DOM tree, that can be optionally made visual or substantially non-visible, e.g., invisible, to a user. The ghost graphical representation "B, " associated with node 150 , may be transitioned from the first position in subarea I to the second position in subarea II using an animated movement along a path in absolute coordinates, shown by the dashed arrow in FIG . 2 . Foilowing the animated movement , the ghost graphical representation "B" overlays the hidden graphical representation "B" in subarea II. The ghost graphical representation is now removed from the display, and the hidden graphical representation "D, " "B, " and "E" are displayed, e.g., faded-in , without the user experiencing an abrupt visual change from the old arrangement to the new arrangement. The result of the foregoing is the controlled transition of the repeated graphical representation "B, " from a first position associated with a first arrangement to a second position

associated with a second arrangement .

In an illustrative example, an arrangement of

United States (US) Presidents, shown by graphical representations corresponding to nodes in a DOM tree, may be presented to a user, as shown in FIG . 3 . The user may wish to filter the displayed arrangement of US Presidents shown in view 300 to only those presidents of the Republican party, as shown in view 400 of FIG . 4 . So:me graphical representations, such as those representing George . Bush, Ronald Reagan, Abraham Lincoln, Theodore Roosevelt, etc., are shared among the two di splayed arrangements, i.e., US Presidents and Republican US Presidents. Rather than abruptly switching between the displayed arrangements, ghost graphical representations and/or hidden graphical representations may be used to more smoothly transition between the displayed arrangements. For example, an animated movement of a ghost graphical representation along a path may be used to move the graphical

representation representing George . Bush, e.g., an image icon, from position 304 in view 300 to position 302 in view 400 . In a further example, the graphical representation representing Barack Obama may be faded- out from view 300 to 400 . In a further example, the graphical representation representing Benjamin Harrison may be faded-in from view 300 to 400 . Accordingly, a user may experience a relatively smoother transition from view 300 to 400 .

In a further illustrative example, an arrangement of United States (US) Presidents may be presented to a user, as shown in FIG . 3 . The user may wish to switch from the gallery view of presidents shown in view 300 to an alternate view, as shown in view 500 of FIG . 5 . Graphical representations of elements Barack Obama, George . Bush, Bill Clinton, Ronald Reagan, and

Abraham Lincoln are shared among view 300 and area 510 of view 500 . Rather than abruptly switching between the views, ghost graphical representations and/or hidden graphical representations may be used to more smoothly transition between the views. For example, an animation may be used to change the position and size of the graphical representation representing Barack Obama from view 300 to area 520 of view 500 . In a further example, the graphical representations in the bottom two rows of US Presidents may be faded out from view 300 to 500 . In a further example, the information shown in area 520 , including "Biography," "Vice

President," and "Date of Birth", may be faded-in from view 300 to 500 .

FIG . 6 is a flow diagram 600 of illustrative steps for animating a movement of a graphical representation, from a first position to a second position. The illustrative steps of flow diagram 600 may be applied to any suitable number of graphical representations, simultaneously or sequentially, although the following discussion will be directed to a single graphical representation. The illustrative steps of flow diagram 600 will be discussed in the context of DOM trees, and associated webpages, although the disclosed techniques may be applied to any hierarchical construct.

Step 602 includes processing equipment receiving an indication to move a graphical representation from a first position, associated with a first descendent node in a DOM tree, to a second position, associated with a second descendent node in the DOM tree. In some implementations, the indication may be received from a user input device. For example, a user may view a current arrangement and may indicate a desire to view a different arrangement, and may accordingly select a corresponding command button. In a further example, a user may indicate a desire to view a difference view type, and may accordingly select a corresponding command button. In a further example, a user may indicate a desire to view a filtered arrangement, and may input one or more filter criteria to a user input device. In a further example, a user may indicate a desire to view a sorted arrangement, and may input one or more sorting criteria to a user input device.

Step 604 includes processing equipment generating a ghost node as a direct child node of any common ancestor node of the DOM tree relative to the first and second descendant nodes. By descending directly from the common ancestor node, the ghost node is not deeply arranged in any branch of the DOM tree. Accordingly, in some circumstances, any ghost graphical

representation associated with the ghost node will be relatively less restricted in placement and movement on the webpage . It will be understood that the ghost node may be made a child of any other suitable node that would allow an animated movement in any desired portion of the display. For example, the ghost node may be placed deeper within the DOM tree when the animated movement is not intended to take place across the entire display, but rather within just a portion of the display .

Step 606 includes processing equipment associating the ghost node of step 604 with a ghost graphical representation. The ghost graphical representation is substantially identical to the graphical representation at the first position in appearance. In some

implementations, the ghost graphical representation may have an associated absolute position on the webpage. Because the absolute position is applicable to the entire page, and not only a subarea, the ghost

graphical representation may be moved about the page more easily. In some implementations, absolute cascading style sheets (CSS) positioning may be used to position the ghost graphical representations.

Step 608 includes processing equipment overlaying the ghost graphical representation of step 606 over the graphical representation at the first position. In some implementations, the overlaying is not

substantially detectable by a user, and thus does not affect the visual context. In some implementations, the ghost graphical representation may be displayed with some transparency, color variation relative to the graphical representation at the first position, or other non-identical property, although the appearance should be substantially the same as the graphical representations at the first position. Step 610 includes processing equipment removing the graphical representation at the first position from display. The removal of the graphical representation at the first position leaves the ghost graphical representation displayed at the first position, and accordingly the removal will not be visually evident to the user in a substantial way.

Step 612 includes processing equipment generating a second descendant node. The second descendant node has an associated hidden graphical representation, not visually evident on the display to the user in a substantial way. In some implementations, the hidden graphical representation may have an associated opacity of substantially zero, rendering the hidden graphical representation not visually detectable by the user.

Step 614 includes processing equipment animating movement of the ghost graphical representation to the second position, also referred to herein as the target position. In some implementations, the processing equipment generates a path for each ghost graphical representation from the first position to the second position. For example, processing equipment can determine a straight line path between the first position and the second position. In a further example, processing equipment can generate relatively more complex paths so multiple ghost graphical

representations do not overlap during the animated movement, allowing users to see the transition more clearly. In some implementations, the processing equipment re-sizes a ghost graphical representation from a first size to a second size. For example, if the sizes of the graphical representations of the old arrangement and the graphical representations of the new arrangement are not the same, processing equipment can cause the ghost graphical representations to change in size before, during, or after the animated movement from the first position to the second position.

In addition to animating movement of a ghost graphical representation, other transition operations can be applied to maintain the visual context during the transition from the old arrangement and the new arrangement. For example, referencing step 616 , ghost elements can be removed from the display. In a further example, referencing step 618 , graphical

representations associated with the entities included only in the old arrangement may be made to vanish, e.g., fade out. In a further example, referencing step 618 , graphical representations included only in the new arrangement may be made to appear, e.g., fade in. In a further example, referencing step 618 , graphical representations associated with other subareas may be made to vanish or appear.

The illustrative techniques of flow diagram 600 may be applied, for example, to any suitable user interface. For example, the techniques of flow diagram 600 may be applied to a user interface of an online music store to animate filtering of music selections. In a further example, the techniques of flow diagram 600 may be applied to an online photo service to animate transitions of photo grouping, e.g., into photo albums, or transitions in photo view style.

In an illustrative example, a new arrangement of entities and associated visual elements may be

requested via Asynchronous JavaScript and Extensible Markup Language (AJAX) . The user's experience may be improved if animation starts before an AJAX response is received. In some implementations, processing

equipment pre-renders a relatively small template and identifiers of the new arrangement in the HTML code transmitted to the user, along with the old

arrangement .

FIGS . 7- 11 provide an illustrative example of the use of ghost graphical representations to aid in transitioning between a first arrangement and a second arrangement .

FIG . 7 shows an illustrative display 700 of a first arrangement and a corresponding initial DOM tree 750 . Subarea I, as illustrated, corresponds to most of the entire area of display 700 . Shown in subarea I are six graphical representations representing six

respective elements "Movie 1" - "Movie 6." Movie 3 is highlighted, as shown by highlight region 702 . A user selection of Movie 3 is an example of an indication that the displayed arrangements are to change, and that a transition between displayed arrangements may be desired. Initial DOM tree 750 includes root node 752 , body node 754 , div node 760 corresponding to subarea I, div node 770 corresponding to subarea II, and nodes 780 , including M1-M6, corresponding to the six

displayed elements, including "Movie 1" - "Movie 6," in display 700 . As illustrated in FIG . 7 , subareas I and II are arranged in different branches of initial DOM tree 750 . For example, subareas I and II may be associated with respective <div> nodes, descending from the <body> node of an <html> root node.

FIG . 8 shows an illustrative display 800 of the first arrangement of FIG . 7 and a corresponding modified DOM tree 850 , derived from modifying DOM tree 750 , having ghost nodes 860 associated with ghost graphical representations and nodes 870 associated with hidden graphical representations. Ghost nodes 860 , including Gl, G2, G3, and G4 , correspond to ghost graphical representations which overlay graphical representations corresponding to nodes 780, including Ml, M2, M3, and M4 , respectively. Nodes 870, including HI, H2 , H3, and H4, represent hidden graphical

representations which correspond to positions 802, 804, 806, and 808, respectively, which are hidden from display, e.g., the graphical representations can have an opacity of zero. The processing equipment may generate ghost nodes 860, nodes 870, or both, in response to the indication of a transition. Ghost nodes 860 are not located in as deep in the hierarchy of modified DOM tree 850, as compared to div nodes 760 and 770. Ghost graphical representations associated with nodes 860, including Gl, G2 , G3, and G4, each may have associated absolute positions on display 800.

FIG. 9 shows an illustrative display of the ghost graphical representations of FIG. 8, overlaid on the graphical representations of the first arrangement, after fading-out of the graphical representations of the first arrangement. The ghost graphical

representations shown in FIG. 9 are identical to the original corresponding graphical representations, e.g., as shown in FIG. 7. The graphical representations corresponding to elements "Movie 5" and "Movie 6" may be removed from display 800 in any suitable manner, before, during, or after the animated movement of the ghost graphical representations. FIG. 10 shows an illustrative display 1000 of the ghost graphical representations of FIG. 9, after an animated movement and re-sizing along respective paths. Processing equipment may generate paths 1010, 1012, 1014, and 1016 based on the initial positions and final positions. Because the ghost graphical representations' respective positions are defined in absolute coordinates, the paths can also be defined in absolute coordinates, irrespective of subareas or DOM tree branching. The ghost graphical representations corresponding to elements "Movie 1" - "Movie 4" are moved and re-sized to positions 802 , 804 , 806 , and 808 , respectively, thus overlaying the hidden graphical representations at the respective positions.

FIG . 11 shows an illustrative display 1100 of the second arrangement associated with the hidden graphical representations of FIG . 10 now displayed, and a corresponding new DOM tree 1150 . New DOM tree 1150 shows nodes 1180 , corresponding to "Movie 1" - "Movie 4," for which the corresponding hidden graphical representations are no longer hidden but rather faded- in to the display. Additionally, display 1100 includes graphical representations 1102 and 1104 displayed in areas other than subarea II. Graphical representations such as graphical representations 1102 and 1104 may be faded in before, during or after the hidden graphical representations are shown in the display. The

illustrative transition shown by FIGS . 7- 11 illustrates one example of how visual context can be maintained while transitioning between displayed arrangements.

The following FIGS . 12 -13 describe illustrative computer systems that may be used in some

implementations of the present disclosure. It will be understood that the disclosed techniques may be implemented using any suitable computer or combination of computers. For example, the disclosed techniques may be implemented using a server, user device, any other suitable processing device, or any combination thereof .

FIG . 12 shows an illustrative computer system in accordance with some implementations of the present disclosure. System 1200 may include one or more user device 1202 . In some implementations, user device 120 may include a smartphone, tablet computer, desktop computer, laptop computer, personal digital assistant (PDA) , portable audio player, portable video player, mobile gaming device, other suitable user device capable of providing content, or any combination thereof .

User device 1202 may be coupled to network 1204 directly through connection 1206 , through wireless repeater 1210 , by any other suitable way of coupling t network 1204 , or by any combination thereof. Network 1204 may include the Internet, a dispersed network of computers and servers, a local network, a public intranet, a private intranet, any other suitable coupled computing systems, or any combination thereof.

User device 1202 may be coupled to network 1204 b wired connection 1206 . Connection 1206 may include Ethernet hardware, coaxial cable hardware, DSL hardware, T-l hardware, fiber optic hardware, analog phone line hardware, any other suitable wired hardware capable of communicating, or any combination thereof. Connection 1206 may include transmission techniques including TCP/IP transmission techniques, IEEE 802 transmission techniques, Ethernet transmission techniques, DSL transmission techniques, fiber optic transmission techniques, ITU-T transmission techniques any other suitable transmission techniques, or any combination thereof.

User device 1202 may be wirelessly coupled to network 1204 via wireless connection 1208 . In some implementations, wireless repeater 1210 receives transmitted information from user device 1202 by wireless connection 1208 and communicates it with network 1204 via connection 1212 . Wireless repeater 1210 receives information from network 1204 by

connection 1212 and communicates it with user device 1202 by wireless connection 1208 . In some

implementations, wireless connection 1208 may include cellular phone transmission techniques, code division multiple access (CDMA) transmission techniques, global system for mobile communications (GSM) transmission techniques, general packet radio service (GPRS) transmission techniques, satellite transmission techniques, infrared transmission techniques, Bluetooth transmission techniques, Wi-Fi transmission techniques, WiMax transmission techniques, any other suitable transmission techniques, or any combination thereof.

Connection 1212 may include Ethernet hardware, coaxial cable hardware, DSL hardware, T-l hardware, fiber optic hardware, analog phone line hardware, wireless hardware, any other suitable hardware capable of communicating, or any combination thereof.

Connection 1212 may include wired transmission

techniques including TCP/IP transmission techniques, IEEE 802 transmission techniques, Ethernet transmission techniques, DSL transmission techniques, fiber optic transmission techniques, ITU-T transmission techniques, any other suitable transmission techniques, or any combination thereof. Connection 1212 may include may include wireless transmission techniques including cellular phone transmission techniques, code division multiple access (CDMA) transmission techniques, global system for mobile communications (GSM) transmission techniques, general packet radio service (GPRS) transmission techniques, satellite transmission techniques, infrared transmission techniques, Bluetooth transmission techniques, Wi-Fi transmission techniques, iMax transmission techniques, any other suitable transmission techniques, or any combination thereof.

Wireless repeater 1210 may include any number of cellular phone transceivers, network routers, network switches, communication satellites, any other suitable devices for communicating information from user device 1202 to network 1204 , or any combination thereof. It will be understood that the arrangement of connection 1206 , wireless connection 1208 and connection 1212 is merely illustrative and that system 1200 may include any suitable number of any suitable devices coupling user device 1202 to network 1204 . It will also be understood that any user device 1202 , may be

communicatively coupled with any user device, remote server, local server, any other suitable processing equipment, or any combination thereof, and may be coupled using any suitable technique as described above .

In some implementations, any suitable number of remote servers 1214 and 1220 may be coupled to network 1204 . Remote servers may be general-purpose, specific, or any combination thereof. One or more database servers 1224 may be coupled to network 1204 . It will be understood that the system may use any suitable number of general purpose, specific purpose, storage, processing, search, any other suitable server, or any combination .

FIG . 13 is a block diagram of device 1300 in accordance with some implementations of the present disclosure. Device 1300 may optionally include, or otherwise be communicatively coupled to, interface equipment 1302 (e.g., input/output equipment) and processing equipment 1304 . In some implementations, device 1300 need not include interface equipment 1302 . For example, in some implementations, device 1300 may include a server configured to store and provide computer executable instructions to a user device that may include some or all of interface equipment 1302 . Interface equipment 1302 may include display 1306 , button 1310 , keyboard 1340 , mouse 1342 , and audio equipment 1334 including speaker 1314 and microphone 1316 . In some implementations, the equipment

illustrated in FIG . 13 may be representative of equipment included in a server. In some

implementations, the equipment illustrated in FIG . 13 may be representative of equipment included in a smartphone user device. It will be understood that the specific equipment included in the illustrative computer system may depend on the type of user device. It will be understood that device 1300 may omit any suitable illustrated elements, and may include

equipment not shown such as media drives, data storage, communication devices, display devices, processing equipment, any other suitable equipment, or any combination thereof.

In some implementations, display 1306 may include a liquid crystal display, light emitting diode display, organic light emitting diode display, amorphous organic light emitting diode display, plasma display, cathode ray tube display, projector display, any other suitable type of display capable of displaying content, or any combination thereof. Display 1306 may be controlled by display controller 1318 or by processor 1324 in processing equipment 1304 , by processing equipment internal to display 1306 , by other controlling

equipment, or by any combination thereof. For example, display 1306 may be configured to display one or more webpages, having associated DOM trees. Button 1310 may be one or more electromechanical push-button mechanism, slide mechanism, switch

mechanism, rocker mechanism, toggle mechanism, other suitable mechanism, or any combination thereof. Button 1310 may be included in a touchscreen as a predefined region of the touchscreen, such as soft keys, for example. Activation of button 1310 may send a signal to sensor controller 1320 , processor 1324 , display controller 1320 , any other suitable processing

equipment, or any combination thereof. Activation of button 1310 may include receiving from the user a pushing gesture, sliding gesture, touching gesture, pressing gesture, time-based gesture, e.g., based on the duration of a push, any other suitable gesture, or any combination thereof. For example a user gesture may be received by button 1310 , indicating that a displayed arrangement is to be changed.

Audio equipment 1334 may include sensors and processing equipment for receiving and transmitting information using acoustic or pressure waves. Speaker 1314 may include equipment to produce acoustic waves in response to a signal. In some implementations, speaker 1314 may include an electroacoustic transducer wherein an electromagnet is coupled to a diaphragm to produce acoustic waves in response to an electrical signal. Microphone 1316 may include electroacoustic equipment to convert acoustic signals into electrical signals. In some implementations, a condenser-type microphone may use a diaphragm as a portion of a capacitor such that acoustic waves induce a capacitance change in the device, which may be used as an input signal by device 1300 .

Speaker 1314 and microphone 1316 may be contained within device 1300 , may be remote devices coupled to device 1300 by any suitable wired or wireless

connection, or any combination thereof.

Speaker 1314 and microphone 1316 of audio

equipment 1334 may be coupled to audio controller 1322 in processing equipment 1304 . This controller may send and receive signals from audio equipment 1334 and perform pre-processing and filtering steps before transmitting signals related to the input signals to processor 1324 . Speaker 1314 and microphone 1316 may be coupled directly to processor 1324 . Connections from audio equipment 1334 to processing equipment 1304 may be wired, wireless, other suitable arrangements for communicating information, or any combination thereof.

Processing equipment 1304 of device 1300 may include display controller 1318 , sensor controller

1320 , audio controller 1322 , processor 1324 , memory 1326 , communication controller 1328 , and power supply 1332 .

Processor 1324 may include circuitry to interpret signals input to device 1300 from, for example, microphone 1316 . Processor 1324 may include circuitry to control the output to display 1306 and speaker 1314 . Processor 1324 may include circuitry to execute instructions of a computer program. In some

implementations, processor 1324 may be an integrated electronic circuit based, capable of executing the instructions of a computer program and include a plurality of inputs and outputs.

Processor 1324 may be coupled to memory 1326 .

Memory 1326 may include random access memory (RAM) , flash memory, programmable read only memory (PROM) , erasable programmable read only memory (EPROM) , magnetic hard disk drives, magnetic tape cassettes, magnetic floppy disks optical CD-ROM discs, CD-R discs, CD-RW discs, DVD discs, DVD+R discs, DVD-R discs, any other suitable storage medium, or any combination thereof .

The functions of display controller 1318 , sensor controller 1320 , and audio controller 1322 , as have been described above, may be fully or partially implemented as discrete components in device 1300 , fully or partially integrated into processor 1324 , combined in part or in full into combined control units, or any combination thereof.

Communication interface 1328 may be coupled to processor 1324 of device 1300 . In some

implementations, communication controller 1328 may communicate radio frequency signals using antenna 1330 . In some implementations, communication controller 1328 may communicate signals using a wired connection (not shown) . Wired and wireless communications communicated by communication interface 1328 may use Ethernet, amplitude modulation, frequency modulation, bitstream, code division multiple access (CDMA) , global system for mobile communications (GSM) , general packet radio service (GPRS), satellite, infrared, Bluetooth, Wi-Fi, WiMax, any other suitable communication configuration, or any combination thereof. The functions of

communication controller 1328 may be fully or partially implemented as a discrete component in device 1300 , may be fully or partially included in processor 1324 , or any combination thereof.

Power supply 1332 may be coupled to processor 1324 and to other components of device 1300 . Power supply 1332 may include a lithium-polymer battery, lithium-ion battery, NiMH battery, alkaline battery, lead-acid battery, fuel cell, solar panel, thermoelectric generator, any other suitable power source, or any combination thereof. Power supply 1332 may include a hard wired connection to an electrical power source, and may include electrical equipment to convert the voltage, frequency, and phase of the electrical power source input to suitable power for device 1300 . In some implementations of power supply 1332 , a wall outlet may provide 120 volts, 60Hz alternating current (AC) . A circuit of transformers, resistors, inductors, capacitors, transistors, and other suitable electronic components included in power supply 1332 may convert the 120V AC from a wall outlet power to 5 volts at 0 Hz, i.e., direct current. In some implementations of power supply 1332 , a lithium-ion battery including a lithium metal oxide-based cathode and graphite-based anode may supply 3.7V to the components of device 1300 . Power supply 1332 may be fully or partially integrated into device 1300 , or may function as a stand-alone device. Power supply 1332 may power device 1300

directly, may power device 1300 by charging a battery, may provide power by any other suitable way, or any combination thereof.

The foregoing is merely illustrative of the principles of this disclosure and various modifications may be made by those skilled in the art without departing from the scope of this disclosure. The above described embodiments are presented for purposes of illustration and not of limitation. The present disclosure also can take many forms other than those explicitly described herein. Accordingly, it is emphasized that this disclosure is not limited to the explicitly disclosed methods, systems, and apparatuses, but is intended to include variations to and

modifications thereof, which are within the spirit of the following claims .

Claims

What is claimed is:

1. A method for animating a movement of at least one graphical representation displayed in a first area of an electronic display screen to a second area of the electronic display screen, the method comprising:

maintaining a document object model (DOM) tree having an initial hierarchy relative to a root node, wherein the first area is associated with a first child node in the (DOM) tree, wherein the second area is associated with a second child node of the (DOM) tree, and wherein the at least one graphical

representation is associated with a first descendant node of the first child node;

in response to an indication to move the at least one graphical representation, causing to be generated, using processing equipment, for each of the at least one graphical representation at least one ghost node as a direct child node of a common ancestor node descending from the root node of the (DOM) tree;

causing to be associated, using processing equipment, each of the at least one ghost node with a ghost graphical representation, wherein each respective ghost graphical representation is substantially identical to one of the at least one graphical

representation;

causing each ghost graphical representation to be overlayed on the substantially identical

graphical representation in the first area;

causing the at least one graphical representation to be removed from the first area after the overlay; causing to be generated, using processing equipment, at least one second descendant node of the DOM tree associated with a hidden graphical

representation at a target position in the second area for each of the at least one graphical representation, the second area associated with the at least one second child node and the at least one second descendant node being a descendant of the respective at least one second child node; and

causing to be animated a movement of the at least one ghost graphical representation from the first area to the respective target position in the second area .

2. The method of claim 1, wherein a first arrangement of visual elements is associated with the first area, wherein a second arrangement of graphical

representations is associated with the second area, and wherein the at least one graphical representation corresponds to both the first arrangement and the second arrangement .

3. The method of claim 2, wherein causing the at least one graphical representation to be removed from the first area comprises causing each graphical representation of the first arrangement of graphical representations in the first area to be faded out.

4. The method of claim 2, further comprising causing each graphical representation of the second arrangement of graphical representations in the second area to be faded in.

5. The method of claim 1, wherein causing to be animated the movement of the at least one ghost graphical representation from the first area to the respective target position in the second area comprises causing to be animated the movement along a respective predetermined path.

6. The method of claim 5, wherein the at least one graphical representation comprises at least two graphical representations, and wherein the respective predetermined paths do not cross.

7. The method of claim 1, wherein causing to be animated a movement of the at least one ghost graphic representation from the first area to the respective target position in the second area comprises causing be animated a size change of the at least one ghost graphical representation.

8. The method of claim 1, further comprising:

causing the at least one ghost graphical representation to be removed from the second area after causing to be animated the movement; and

causing the at least one ghost node to be removed from the DOM tree after causing the respective at least one ghost graphical representation to be removed.

9. The method of claim 1, wherein the DOM tree is associated with a webpage rendered from hypertext markup language.

10. The method of claim 1, wherein the indication to move the at least one graphical representation

comprises a user indication.

11. A system for animating a movement of at least one graphical representation displayed in a first area to a second area, the system comprising:

one or more computers comprising a non- transitory computer readable medium storing computer executable instructions for:

maintaining a document object model (DOM) tree having an initial hierarchy relative to a root node, wherein the first area is associated with a first child node in the DOM tree, wherein the second area is associated with a second child node of the (DOM) tree, and wherein the at least one graphical representation is associated with a first descendant node of the first child node;

in response to an indication to move the at least one graphical representation, causing to be generated for each of the at least one

graphical representation at least one ghost node as a direct child node of a common ancestor node of the (DOM) tree;

causing to be associated each of the at least one ghost node with a ghost graphical representation, wherein each respective ghost graphical representation is substantially

identical to one of the at least one graphical representation;

causing each ghost graphical

representation to be overlayed on the

corresponding substantially identical graphical representation in the first area; causing to be removed the at least one graphical representation from the first area after causing the overlay;

causing to be generated at least one second descendant node of the (DOM) tree

associated with a hidden graphical representation at a target position in the second area for each of the at least one graphical representation, the second area associated with the at least one second child node and the at least one second descendant node being a descendant of the

respective at least one second child node; and causing to be animated a movement of the at least one ghost graphical representation from the first area to the respective target position in the second area.

12. The system of claim 11, wherein a first

arrangement of graphical representations is associated with the first area, wherein a second arrangement of graphical representations is associated with the second area, and wherein the at least one graphical

representation corresponds to both the first

arrangement and the second arrangement.

13. The system of claim 12, wherein the computer executable instructions further comprise computer executable instructions for causing each graphical representation of the first arrangement of elements in the first area to be faded out.

14. The system of claim 12, wherein the computer executable instructions further comprise computer executable instructions for causing each graphical representation of the second arrangement of elements in the second area to be faded in.

15. The system of claim 11 , wherein the computer executable instructions further comprise computer executable instructions for causing to be animated movement along a respective predetermined path.

16. The system of claim 15, wherein the at least one visual element comprises at least two graphical representations, and wherein the respective

predetermined paths do not cross.

17. The system of claim 11, wherein the computer executable instructions further comprise computer executable instructions for causing to be animated size change of the at least one ghost graphical representation .

18. The system of claim 11, wherein the computer executable instructions further comprise computer executable instructions for:

causing to be removed the at least one ghost graphical representation from the second area after the animating the movement; and

causing to be removed the at least one ghost node from the DOM tree after causing to be removed the respective at least one ghost graphical representation.

19. The system of claim 11, wherein the DOM tree is associated with a webpage rendered from hypertext markup language.

20. The system of claim 11, wherein the indication is a user indication.