GB2465808A

GB2465808A - Tracking means to drag a window around a GUI without premature termination of the move operation if the cursor is moved too quickly

Info

Publication number: GB2465808A
Application number: GB0821921A
Authority: GB
Inventors: Dileep Chalana Kaluaratchie; Dean Ezra; Yingzhao Zhou
Original assignee: NEC Corp
Current assignee: NEC Corp
Priority date: 2008-12-01
Filing date: 2008-12-01
Publication date: 2010-06-02
Also published as: GB0821921D0

Abstract

A web browser window 23 with an active area 25 over which a user controlled pointer 27 can control movement within a display area 21, means for initiating, tracking and finishing a move operation in response to user input, wherein the tracking means define a tracking area 29 which is larger than the active area so that the pointer is continually tracked when the pointer is located over the tracking area but not over the active area. This allows objects to be moved using a drag and drop operation without premature termination of the move operation if the cursor 27 is moved too quickly. The move operation may be terminated if the tracking means determines that the pointer 27 is not within the tracking area 29 or in response to a user input. The position and size of the tracking area 29 relative to the active area 25 may be fixed or related to the direction and speed of the pointer 27. The active area 25 may have a handle for moving the object and the tracking area 29 may be defined by adjusting the size of the handle.

Description

Computer System The present invention relates to computer systems and in particular to methods and apparatus for controlling a drag and drop operation of objects in a graphical user interface.

When a displayed object within a webpage is to be dragged or moved, the browser attaches the user controlled cursor or pointer to the element that needs to be moved, or to another element (such as a handle) which will move the desired element.

During the drag / move operation, the browser redraws the impacted areas on the screen. The frequency of the screen update is dependent on the processor (CPU) load and priority. Once the redraw is complete, the browser checks to see if the pointer is still attached to the element used for dragging (i.e. is still in a designated area). If the pointer is moved at a speed faster than the browser can redraw the screen and check the pointer position is within the designated object's window area, the pointer can become detached from the element being dragged and the drag operation prematurely terminated. When the pointer moves out of the area defined by the object, it is also possible that the object being moved becomes stuck on the pointer.

Similarly, when complex GUI elements are being dragged, the processor load increases and the re-draw speed decreases. As the pointer object is redrawn at a faster rate than the GUI object (Window) it is attempting to move, the browser will conclude the objects have become detached and the drag and drop operation is again prematurely terminated.

Figure 4 illustrates the problem for a rectangular window 101, which is moved by the user c'icking and holding the pointer 103 over the shaded band 105 and then moving the pointer in the desired direction. The problem arises when the pointer 103 is moved faster than the window 101 can be redrawn, resulting in the pointer 103' no longer being over the shaded band 105' of the window 101' when the window is redrawn. This causes the browser to conclude that the window 101' and the pointer 103' have become detached and that the drag and drop operation should therefore be terminated.

Prior attempts to address this problem rely on compromising the object during the drag and drop operation. For example, some systems only display text within the window 101 during the drag and drop operation, suppressing any images or graphics within the window that might slow down the redrawing operation; whilst others remove text as well, only showing an outline of the object being moved.

Embodiments of the invention aim to provide an alternative technique for providing a drag and drop operation which shows the contents of the object during the operation, whilst avoiding the problem of premature termination of the operation caused by the pointer being moved too quickly compared with the browser's re-draw rate of the object and/or the problem of the object becoming stuck to the pointer.

According to one aspect, the present invention provides a browser comprising: means for defining an object to be displayed by a browser, the object including an active area over which a user controlled pointer may be positioned to control movement of the displayed object within a display area; means for detecting initiation of a move operation for moving the object using the user controlled pointer; means for tracking movement of the user controlled pointer and for moving the object in response to the tracked movement; and means for terminating the movement operation in response to user input; wherein said tracking means is operable to define a tracking area which is larger than said active area; and wherein the tracking means is operable to continue tracking movement of the user controlled pointer when the pointer is located over the tracking area but not over the active area. In a preferred embodiment, the tracking area is not displayed on the display, so that its presence is hidden from the user.

In one embodiment, the tracking means repeatedly: determines a new position of said pointer; determines if the new position of the pointer is within the tracking area by comparing the new position with the current position of the tracking area; move the object if the new position of the pointer is within the tracking area; until the move operation is terminated. The browser redraws the object once it has been moved.

The tracking means may terminate the move operation if it determines that the new position of the pointer is not within the tracking area or if there is a user input terminating the move operation.

The tracking area may have a fixed position relative to said active area and/or a fixed size relative to the size of the active area. The position of the tracking area relative to the active area may depend upon a determined direction of movement of the user controlled pointer. The size of the tracking area relative to the active area may also depend upon a determined speed of movement of the user controlled pointer.

The active area may have an associated handle used for moving the object and the tracking means may define the tracking area by adapting the size of the handle. In this case, the tracking means may change the size of the handle back to its original size when the move operation is terminated.

The invention also provides a method of performing a move operation of an object displayed by a browser in a graphical user interface of a computer system, the method comprising: using the browser to define an object to be displayed, the object including a displayed active area over which a user controlled pointer may be positioned to control movement of the displayed object within a display area; detecting initiation of a move operation for moving the object using the user controlled pointer; tracking movement of the user controlled pointer; moving the object in response to the tracked movement; and terminating the movement operation in response to user input; wherein said tracking defines a tracking area which is larger than said active area; and continues track movement of the user controlled pointer when the pointer is located over the tracking area but not over the active area.

Embodiments of the invention are particularly applicable to resource constrained devices (such as PDAs, cellular telephones and other portable battery powered devices) which have lower CPU speeds and slower screen updates, but are equally applicable to high specification computers dealing with more complex windows / objects (elements) running within a web browser.

These and other features and aspects of the invention will become apparent from the following detailed description of an exemplary embodiment described with reference to the accompanying drawings in which: Figure 1 is a block diagram illustrating the main components of a computer system which operates to render a displayed Graphical User Interface (GUI) using a web browser; Figure 2a illustrates a hidden area that is generated by the web browser during a drag and drop operation of a displayed window; Figure 2b illustrates the movement of the window shown in Figure 2a; Figure 3 is a flow chart il'ustrating the way in which the web browser operates to perform the drag and drop operation using the hidden element shown in Figure 2a; and Figure 4 illustrates a prior art drag and drop operation illustrating the problem caused by the user controlled pointer being moved faster than a re-draw rate of the browser, which causes premature termination of the drag and drop operation.

Oveivie w This embodiment implements a solution to the drag and drop problem discussed above which improves the tracking performance and reduces sensitivity of the object (element) being moved, thereby allowing the browser to be able to cope with faster pointer movements. This is achieved by expanding the area of the GUI object by encompassing it within an area that is associated with the GUI object (HTML element). By increasing the area being tracked, the drag and drop operation is less dependant on the browser's ability to redraw the object with respect to the current position of the pointer.

Computer Device Figure 1 is a block diagram of a computer device 1 that performs a drag and drop operation according to an embodiment of the present invention. As shown, the computer device comprises a processor 3 which operates in accordance with software modules stored in memory 5. The software modules include an operating system 7, a web browser 9 and an HTML file 11. The computer device 1 also includes a communications module 13, which allows the computer device 1 to be able to connect to remote computer devices and to retrieve other HTML files 11 The computer device 1 also includes a display 15 for displaying images generated by the web browser 9 from the HTML file 11 and an input device 17, such as a keyboard and/or touchpad and/or mouse, for receiving user inputs to control the operation of the computer device 1 and the image displayed on the display 15.

Figure 2a illustrates the viewing area 21 of the display 15, and shows in outline a window 23 that is displayed within the viewing area 21. As shown, the window has an upper shaded portion 25 that is an active area of the window 23 which can be used by the user to move the window 23 within the viewing area 21; by pressing a button or the like of the input device 17 whilst the user controlled pointer 27 is positioned over the shaded portion 25 and then by moving the pointer 27 to the desired position of the window 23. The shaded portion 25 of the window 23 is defined as being such an active area by a "handle" definition contained within the HTML file 11. As will be explained in more detail below, in this embodiment, when the user initiates such a move operation, the web browser 9 initially creates a hidden element (represented by the dashed box 29) around the shaded portion 25.

In this embodiment, the hidden element 29 is not visible to the user, but its boundaries are used by the browser 9 (instead of the boundaries of the shaded portion 25), to determine whether the pointer 27 is still attached to the window 23 when the window is redrawn during the move operation. Thus, even if the pointer 27 has moved to the position shown in Figure 2b, the browser 9 will continue with the move operation. In particular, the pointer 27 has to be moved outside of the area of the hidden element 29, before the web browser 9 determines that the pointer 27 has become detached from the window 23 being moved. Therefore, by comparing the pointer's position with the larger area of the hidden element 29, the pointer 27 has to be moved much faster (or the redraw rate of the web browser 9 has to become much slower) before the web browser 9 prematurely terminates the move operation.

To illustrate the effectiveness of this embodiment, a comparison will now be given between the embodiment and the prior technique described in the introduction.

Prior Tracking Method As an example, if the height of the shaded portion 25 being dragged is 50 pixels and the user clicks the centre (25 pixels) of the shaded portion 25 and drags downwards at 100 pixels a second, then the web browser 9 has to redraw the screen and check the pointer's position with the new position of the shaded portion 25 every 0.25 seconds if premature termination of the move operation is to be avoided. If the web browser 9 manages to redraw and check every 0.1 seconds, then the pointer would need to be moved at 250 pixels a second for the web browser 9 to prematurely terminate the move operation.

Tracking Using Hidden Element In contrast, if the hidden element 29 is used as the active dragging handle for the window 23 and if the hidden element 29 has a height of 400 pixels and the user clicks the centre (200 pixels in this example) and then drags downwards at 100 pixels a second, then due to the increased tracking area of the hidden element, the web browser 9 only has to redraw the screen and check for the pointer position every 2 seconds before the web browser 9 would prematurely terminate the move operation. If the web browser 9 manages to redraw and check every 0.1 seconds, then the user would need to move the pointer 27 at 2000 pixels a second before the web browser 9 would prematurely terminate the move operation.

Operation of Web Browser Figure 3 is a flow chart illustrating the operations performed by the web browser 9 in this embodiment. As shown, the process starts at step Si when the web browser 9 detects that the user has initiated a move operation of an object currently being displayed on the display 15. At step s3, the web browser 9 creates the above described hidden element 29. In step s5 the web browser 9 starts to redraw the object and the corresponding hidden element 29 at a new position defined by the position of the pointer 27. Once the object has been redrawn, the web browser 9 updates the position of the pointer 27 and determines, in step s7, if the new position of the pointer 27 is still within the area defined by the redrawn hidden element 29. If it is, then the web browser 9 checks, in step s9, to see if the user has terminated the move operation (by for example releasing a button of the input device 17). If the user has not terminated the move operation, then the web browser 9 continues the move operation and the processing returns to step s5 where the object is redrawn again for the new position of the pointer 27. If the web browser 9 determines that the user has terminated the move operation or if the web browser 9 determines that the new pointer position is no longer within the area of the hidden element 29, then the web browser 9 ends the move operation in stepsil.

As will be appreciated by those skilled in the art, the web browser 9 can be pre-configured to operate in the above manner. Alternatively, the web browser 9 may be made to operate in the above manner by scripts or cascading style sheets (CSS) in or attached to the HTML file 11. This is illustrated in the example below, where the size of the handle used to move the object is changed at the start of the move operation to correspond to the size of the hidden element 29: hand le Moving { position: absolute; cursor: move; border: Opx solid black; height: 400px; top: -200px; left: -lOOpx; width:150%; z-index: 999; The "height" and "width" variables specify the overall size of the hidden element 29. The "top" variable specifies the number of pixels that the hidden element 29 is above/below the visible shaded portion 25 and the "left" variable specifies the number of pixels that the hidden element 29 is to the left/right of the shaded portion 25. Separate variables could, if desired, be defined for each of "top", "bottom", "left" and "right".

handleDefault { position: absolute; cursor: pointer; border: Opx solid black; height: 2Opx; top: Opx; left: Opx; width: 100%; Thus in this example CSS code, the handle associated with the object to be moved is made larger and will occupy a fixed area (relative to the object being moved) when the element is being moved. To further improve the effectiveness of this implementation; the new handle size (ie the size of the hidden element 29) may be set in proportion to the original size of the handle, the size of the moving object, the size of the browser window or the screen size.

The style is set by default when the element is loaded or style is attached dynamically "<div id="+myWindowHandle+" class='handleDefault'> <div> When the browser 9 realizes the item needs to be dragged (e.g. if the pointer 27 is hovering above the object handle, when the object handle is clicked or when a method for dragging is initiated) the larger invisible element 29 is set using JavaScript or a language capable of modifying or adding to the HTML document structure. The example in this implementation is using JavaScript.

document.getElementByld(Div_Handle) .setAttribute("class' , "handleMoving"); Once the drag and drop operation has been completed, the area enclosed by the invisible object 29 should be resized back to the size of the visible handle, i.e. to the size of the shaded portion 25 in the example given above. This too should be done using JavaScript or a language capable of modifying or adding to the document structure. The example in this implementation is using JavaScript.

document.getElementByld(Div_Handle).setAttribute("class" ,"handleDetault"); Modifications and Alternatives A detailed embodiment has been described above. As those skilled in the art will appreciate, a number of modifications and alternatives can be made to the above embodiment whilst still benefiting from the invention embodied therein.

In the above embodiment, a web browser was described which created a hidden area around a visible area to be moved within the viewing area of a computer device. The hidden area is larger than the visible area and is generated upon initiation of the move operation and used to keep track of whether or not the user controlled pointer is still attached to the object being moved. As those skilled in the art will appreciate, various modifications can be made to the embodiment described above. For example, the image that is displayed on the display screen may be defined by other webpage mark-up languages based on SGML, such as XHTML. The content being dragged in the above embodiment is in the form of an iFrame and other HTMLJXHTML elements and content that may use a browser plug-in can also be used. Similarly, although the styling of the hidden area was defined using cascading style sheets (CSS), other methods of injecting styles and properties to elements can be used.

In the embodiment described above, the hidden element had a fixed size. In an alternative embodiment, the size of the hidden element may be set in proportion to the size of the handle, moving object, browser window or screen size etc. Its size may also be set in dependence upon a detected speed of movement of the user controlled pointer. The position of the hidden element may also be varied. For example, its position relative to the handle or the object being moved may be varied in dependence upon the direction in which the object is being moved -for example so that the area of the hidden element is larger in the direction of movement.

Claims

Claims 1. A browser comprising: means operable to define an object to be displayed by a browser, the object including an active area over which a user controlled pointer may be positioned to control movement of the displayed object within a display area; means for detecting initiation of a move operation for moving the object using the user controlled pointer; means for tracking movement of the user controlled pointer and for moving the object in response to the tracked movement; and means for terminating the movement operation in response to user input; wherein said tracking means is operable to define a tracking area which is larger than said active area; and wherein the tracking means is operable to continue tracking movement of the user controlled pointer when the pointer is located over the tracking area but not over the active area.
2. A browser according to claim 1, wherein said tracking means is operable to: i) determine a new position of said pointer; ii) determine if the new position of the pointer is within the tracking area by comparing the new position with the current position of the tracking area; iii) move the object if the new position of the pointer is within the tracking area; and iv) repeat i) to iii) above until the move operation is terminated.
3. A browser according to claim 2, operable to redraw the object once it has been moved in iii) above.
4. A browser according to claim 2 or 3, wherein said tracking means is operable to terminate the move operation if said tracking means determines that the new position of the pointer is not within the tracking area or in response to a user input terminating the move operation.
5. A browser according to any of claims 1 to 4, wherein said tracking area has a fixed position relative to said active area.
6. A browser according to any of claims 1 to 5, wherein said tracking area has a fixed size relative to the size of the active area.
7. A browser according to any of claims 1 to 4, wherein the position of said tracking area relative to said active area depends upon a determined direction of movement of the user controlled pointer.
8. A browser according to any of claimsi to 4, wherein the size of the tracking area relative to the active area depends upon a determined speed of movement of the user controlled pointer.
9. A browser according to any of claims 1 to 8, wherein said active area has an associated handle used for moving the object and wherein said tracking means is operable to define the tracking area by adapting the size of the handle.
10. A browser according to claim 9, wherein said tracking means is operable to change the size of the handle to the original size of the handle when the move operation is terminated.
11. A method of performing a move operation of an object displayed by a browser in a graphical user interface of a computer system, the method comprising: using the browser to define an object to be displayed, the object including a displayed active area over which a user controlled pointer may be positioned to control movement of the displayed object within a display area; detecting initiation of a move operation for moving the object using the user controlled pointer; tracking movement of the user controlled pointer; moving the object in response to the tracked movement; and terminating the movement operation in response to user input; wherein said tracking defines a tracking area which is larger than said active area; and continues track movement of the user controlled pointer when the pointer is located over the tracking area but not over the active area.
12. A method according to claim 11, wherein said tracking includes: i) determining a new position of said pointer; ii) determining if the new position of the pointer is within the tracking area by comparing the new position with the current position of the tracking area; iii) moving the object if the new position of the pointer is within the tracking area; and iv) repeating i) to iii) above until the move operation is terminated.
13. A method according to claim 12, comprising redrawing the object once it has been moved in iii) above.
14. A method according to claim 12 or 13, wherein said tracking terminates the move operation if it is determined that the new position of the pointer is not within the tracking area or in response to a user input terminating the move operation.
15. A method according to any of claims 11 to 14, wherein said tracking area has a fixed position relative to said active area.
16. A method according to any of claims 11 to 15, wherein said tracking area has a fixed size relative to the size of the active area.
17. A method according to any of claims 11 to 14, wherein the position of said tracking area relative to said active area depends upon a determined direction of movement of the user controlled pointer.
18. A method according to any of claims 11 to 14, wherein the size of the tracking area relative to the active area depends upon a determined speed of movement of the user controlled pointer.
19. A method according to any of claims 11 to 18, wherein said active area has an associated handle used for moving the object and wherein said tracking defines the tracking area by adapting the size of the handle.
20. A method according to claim 19, wherein said tracking changes the size of the handle to the original size of the handle when the move operation is terminated.
21. A computer implementable instructions product comprising computer implementable instructions for causing a computer device to perform the method of any of claims 1 to 20.