GB2405304A

GB2405304A - Draggable tool palette

Info

Publication number: GB2405304A
Application number: GB0313733A
Authority: GB
Inventors: Adeola Awoyemi
Original assignee: Canon Europa NV
Current assignee: Canon Europa NV
Priority date: 2003-06-13
Filing date: 2003-06-13
Publication date: 2005-02-23
Anticipated expiration: 2023-06-13
Also published as: GB0313733D0; GB2405304B

Abstract

A web server provides a web page 1 for displaying user images 5. The web page 1 includes a draggable tool palette 2. The tool palette 2 can be moved by a user, allowing areas of the web page 1 covered by the tool palette 2 to be revealed. The tool palette 2 has buttons 11 which correspond to tasks. To request that a particular task be performed on a particular image 5, a user selects the appropriate button 11, and then selects the appropriate image 5 on which to perform the task. The tool palette 2 is provided as a Dynamic HTML layer.

Description

- 1 - 2405304 Draggable Palette The present invention relates to tool

palettes for use in web pages for sites that store digital images (image album sites).

Web pages are often used to allow a user to interact with a remote server. To this end, the web pages may have "links" on the page corresponding to particular tasks for the server to perform. These links may be represented by image buttons relating to the tasks in question, so that when the user clicks on an image button, information regarding the button pressed is sent to the server. Alternatively, the links may be represented by text describing the task to be performed.

Another alternative is to use HTML forms, with buttons that correspond to different tasks. When a button is pressed by the user, information regarding the button pressed is sent to the server.

However, a problem with these methods is that if a user is able to select from a number of tasks, the images, texts or buttons will take up a lot of space on the screen.

Another problem with these methods is that each time a possible task is added, modified or removed, it is necessary to redesign the web page layout. This is time consuming, and means that such pages are not easily expandable.

Another problem with these methods is that each time a task is selected, the user's computer must send and receive information from the server providing the web page.

When a task is selected using one of the above methods, an entire new window may be opened, and the task performed using this new window. A problem with this is that if a number of tasks are performed, a number of windows will become open. This can cause problems with the performance of the user's computer, and can also be confusing to the user.

Thus, with some known image album sites, the following steps must be performed: 1. First a web page is sent to a user's computer by a remote server; 2.A task is selected by the user; 3. The selection is sent to the server by the user's computer; 4.A second web page is sent to the user's computer by the server; 5.An image is selected by the user using the second page; 6.The selection is sent to the server by the user's computer; 7. The task is performed by the server on the image; 8.An updated first page is sent to user's computer by the server, showing the task performed.

According to the present invention there is provided a computer program product for an image manipulation site that when executed displays a web page with a tool palette, the web page comprising portions for a user to select images, the tool palette being displayed in a layer and being movable by the user, and comprising portions for the user to select tasks, wherein the tasks are to be performed on the images.

An advantage of this is that less space is required on the page. Also, the page can easily be changed when a tool is added, deleted or modified. ; Another advantage is that fewer pages are needed in the selection of a task, and fewer exchanges are required between the user's computer and a remote server (in the example above steps 3 to 5 can be omitted).

Preferably, if the tool palette is positioned by the user within the boundary of the web page or partially overlapping that boundary, the contents of the tool palette are seen obscuring the contents of the web page. This prevents the user "losing" the tool palette.

Preferably some or all of the tool palette can be hidden.

This allows the user to more easily see the images to be selected.

Advantageously, the task is selected before the image, and after the task is performed it remains selected in the tool palette and the task is performed again if the user then selects another image. Alternatively, the image is selected before the task, and multiple images may be selected by the user and the task when selected is performed on the selected images. Both these allow the user to cause tasks to be performed on images more efficiently.

Advantageously, the task performed may be dependent on the type of the image selected. This reduces the number of buttons necessary, making the tool palette smaller and more convenient, and allowing more of the web page to be seen when the tool palette is displayed. It also prevents the need for extra pages for different types of images, saving - 4 - time for the user (both when selecting tasks and downloading pages) and in creation and modification of the web site.

By way of example only, embodiments of the present invention will now be described with reference to the accompanying drawings, of which: Figure 1 shows a web browser page for an image album site with a draggable tool palette; Figure 2 shows a second view of the web browser page; Figure 3 shows a close up of the tool palette; Figure 4 shows a close up of the tool palette when closed; Figure 5 is a flow chart showing an example of the use of the tool palette; Figure 6 is a flow chart showing an example of how the tool palette can be constructed; Figure 7 shows the image rotation window; Figure 8 is a flowchart showing another example of the use of the tool palette.

Figure 1 shows a web browser page 1 with a draggable tool palette 2 according to the present invention. The page is for an internet digital photograph archive stored on a remote server. The page has a toolbar 3 with buttons 4 which allow global tasks to be performed, for example changing the page shown or logging out of the system.

Thumbnail pictures 5 are representations of digital - 5 - photographs stored in the archive. Albums 6, also represented by thumbnail images, are collections of digital photographs that are created by the user.

Figure 2 shows a second view of the web browser page 1.

The tool palette 2 has been moved by the user, allowing thumbnail 5a that was in Figure 1 partially covered by the tool palette 2 to be fully visible.

Figure 3 shows a close up of the tool palette 2. It has a title bar 10 (although no text for a title has been provided) which the user can click on and drag to move the tool palette. It also has buttons 11 for performing particular tasks. In this figure button lla has been selected (as is indicated diagrammatically by the dashed box), and text 12 is displayed indicating the task associated with the button ("Rotation" in this case).

Figure 4 shows a close up of the tool palette 2 when closed. The title bar 10 is displayed, but the buttons 11 are hidden. The buttons 11 can be hidden or made visible by double-clicking on the title bar 10.

Figure 5 is a flow chart showing an example of the use of the tool palette 2. First the user chooses a task to perform, by selecting a button 11 on the tool palette 2 (step 20). The user then selects a thumbnail 5 representing the image on which the task is to be performed (step 21). In response to that selection the browser then sends parameters to the server, which tell the server which button and thumbnail the user has selected (step 22). The server then performs the desired task on the image, and returns a web page; in general this reflects the result of the task visually (step 23), for example by refreshing the browser window with the thumbnail changed accordingly. - 6

Figure 6 is a flow chart showing how the tool palette 2 is constructed in the preferred embodiment. First the browser requests the page 1 that has the tool palette 2 from the server (step 30), when e.g. the user navigates to that page. The web page includes a palette script that is used to build the tool palette. The palette script requests that the browser send it a cookie (a small local file used to store user or other information for later use) with parameters for the current state of the tool palette (step 31). If there are cookies, the palette script builds the tool palette based on the cookie parameters (step 32). If there are no cookies, the palette script builds the tool palette based on default parameters (step 33). It then sends new cookies based on the default parameters to be stored locally by the browser (step 34).

The cookie stores information about the current position of the tool palette, whether the buttons are visible or hidden and the identity of the tool currently selected. In this way the palette is able to maintain its position and appearance when the page is refreshed or changed, the palette being redrawn in the position indicated by the cookie data.

The tool palette is built using Dynamic HTML to create a "child" layer of the web page (this is an element of the web page that is movable by the user in relation to the rest of the web page). (A Dynamic HTML Library is available at http://dynapi.sourceforge.net.) Preferably the child layer is set to be "always-on-top", which means that if it is positioned by the user within the boundary of the web page or partially overlapping that boundary, the contents of the child layer are seen obscuring the contents of the web page. If desired the child layer may be - 7 constrained to appear only fully within the boundary of the web page. Being a child layer, it is closed when the web page is closed.

Table 1 shows JavaScript code used for the child layer.

function initPalette() { paletteHTML = "; paletteHTML += '<table border="O" cellpadding="O" cellspacing="O">'; paletteHTML += ' <tr>'; pal et teHTML += ' < td> <a href="javascript:void(O);" ondblclick="toggleShade();"><img name="ptab" src="/images/palette_tab. gif" width="37" height="13" border="O" alt=""><\/a><\/td>'; // Code for buttons is placed here.

// Table 3 has code for a button.

paletteHTML += ' <\/tr>'; paletteHTML += ' <tr>'; paletteHTML += ' <td> <img src="/images/palette_bottom.gif" width="37" height="9" alt=""><\/td> '; paletteHTML += ' <\/tr>'; paletteHTML += '<\/table>'; var height = 301; var x = 5i var y = 5 i x = readCookie("paletteleft"); y = readCookie("palettetop"); if (x == null) { x = 5; - 8 - if (y == null) { y = 5; } 3 palette = DynAPI.document.addChild(new DynLayer('palette',x,y,null,height,null,null,null,null,pale LteHTML))

Table 1

The function initPalette creates a variable, paletteHTML, containing an HTML table which is the content of the child layer, then uses the Dynamic HTML Library to create the child layer "palette", passing it the variable paletteHTML.

It can be seen that the tool palette can easily be modified by changing the definition of paletteHTML. For example, a t new button could easily be added simply by adding a new row

to the table.

The title bar of the tool palette is given by the image palette_tab.gif in the first row of the table (the table row is given by <tr> and </tr>, and has a single column given by <td> and </td>). The variables "height", "x" and "y" give the height and position of the toolbar. If the title bar is double-clicked by the user, the function "toggleShade() n (see Table 2) is called. This toggles the height of the palette between 301 and 13 pixels, changes the title bar image, and the child layer is caused to be redrawn. The new status of the palette is stored in the; cookie. When the child layer is drawn (or redrawn), its height is given by "heights, so double-clicking on the title bar toggles between the buttons being visible (height - 9 = 301, the height of the full table) and hidden (height = 13, the height of the title bar only). ! function toggleShade() { 3 if (shade == 0) { paletteShadeUp(); } else if (shade == 1) { paletteShadeDown(); 10} function paletteShadeUp() { palette.setHeight(13); chgImg('ptab', 'ptabl'); shade = 1; setCookie('palette ',' closed '); } 1 function paletteShadeDown() { t palette.setHeight(301); chgimg('ptab', 'ptabO'); shade = 0; setCookie('palette','open'); . 25;

Table 2

There are also JavaScript functions (not shown) that store the new position of the tool palette in the cookie (using the variables x and y) when it is dragged by the user.

These respond to a "dragging event", provided by the Dynamic HTML Library, which occurs when the child layer is dragged. -

Table 3 shows the code used for one button, in particular the "Rotation" button.

pal et teHTML += ' c td><a 3 href="javascript:selectTool(\'rotate\');" onmouseover="chgImg(\'protate\', \'protatel\'); return overlib(\'Rotate\') ;" onmouseout="chgImg(\'protate\', \'protateO\'); return nd();"><img name="protate" src="/images/palette_btn_rotate.gif" width="37" height="39" border="O" alt="Rotate" title="Rotate"><\/a><\/td>'

Table 3

Similarly to the title bar, the button's appearance is given by an image in a row of the table. The text 12 is given by the code alt="Rotaten, and the text is displayed by the browser in the usual way when the mouse pointer is I put by the user over the button, thus providing a helpful legend for the button. The events "onmouseover" and t "onmouseout" change the button image between highlighted and normal by calling the function "chgImgn (not shown) when the mouse pointer is put over or taken off the button by the user.

If the rotation button is clicked by the user, the function "selectTool" (not shown) is called with the argument "rotates. This stores the identity of the selected tool in the cookie, and also changes the images (e.g. palette_btn_rotate.gif for the rotation button) so that the rotation button appears selected and any previously selected button appears unselected.

Table 4 shows a portion of the web page 1. - 11

<td bgcolor="#ebe9ea" align="center" valign="middle"> <a href="javascript:useTool('67E689AD852EACC97D1136482CC5DDCE' image');"> <img name="67E689AD852EACC97D1136482CC5DDCE" src="library%20Files/67E689AD852EACC97Dll.jpg" bo-der="O"></a </td> Table 4 This portion is the code for displaying one of the thumbnails. When the thumbnail is clicked, the function useTool shown in Table 5 is called, with arguments identifying the image (here the identifying value is 67E689AD852EACC97D1136482CC5DDCE) and type (image).

Table 5

The variable "theTool" in Table 5 is equal to the variable stored in the cookie that holds which tool is selected.

The particular task selected is then performed using a particular JavaScript function (e.g. rotateImage for the rotation tool) with the image identity passed as an argument to that function. This function causes the task to be performed by a remote server holding the images themselves.

Note that this code is able to perform, in some cases, different tasks, for a particular palette tool, depending on the type of image the task is to be performed on. So for example here the rotation tool has no effect on an album (as we cannot rotate an album, only an image within an album), but the info tool works with both types. The info tool will show different information depending on the type of image the user has selected (actual image or album).

The function rotateImage is shown in Table 6.

function rotate_image( anId) { i theURL = '/album/rotate.html?loadimage=' + anId; loadPage(theURL, 'Rotate image' );

Table 6

A new page rotate.html is opened (as shown in Figure 7), with the identity of the image being passed to the server by the text after the URL (i.e. "loadimage=' + anIdn). The new page has controls which allow the user to interact with the server to manipulate the image, in this case to rotate À 13 it. When the user has finished manipulating the image, they close the page, and the server then provides the web page 1 updated according to the changes made.

An advantage of this is that it allows the user to view or try different modifications before submitting them. This is especially useful if the server does not allow any cancellation of a task just performed. Also, the user can specify using the new window the details of the task to be performed (for instance the angle of rotation). This may be explicit e.g. there is a control allowing the user to specify the angle of rotation directly, or implicit e.g. the user clicks a 90 button twice to perform a 180 rotation, the image being refreshed at each click.

The other tools work in a similar way to the rotate tool, though some (for example, delete) do not need to open a new page, as the server needs only the identity of the tool and the image to perform a deletion. Opening new windows is a convenience in other cases but is not essential, for example the rotation tool could be limited to a single button giving say just a clockwise rotation of 90 .

Another alternative to these new windows is to provide for the tool palette buttons to have submenus which appear when they are selected (for example by clicking or perhaps just by the mouse hovering over them). These submenus would then allow the user to select the parameters of the task to be performed. The user would then select the image for task as before.

As described above the previously selected task is performed when the image is selected. Alternatively the web page may be provided with a button, labelled for example "submit"; in this arrangement the user selects an - 14 image on the page and then clicks the "submit" button in order to perform the task. In this arrangement the system could further be arranged to allow the user to make a - selection of more than one picture and to perform the selected task on all those at the same time when the "submit" button is pressed.

Figure 8 is a flow chart showing how the tool palette 2 operates in an alternative embodiment. In this embodiment the user first selects a thumbnail 5 representing the image - on which the task is to be performed (step 40). The user - then chooses a task to perform, by selecting a button 11 on the tool palette 2 (step 41). (Thus compared to the s preferred embodiment - see Figure 5 - the selection of the thumbnail and the task are reversed.) The browser then sends parameters to the server that identify which button and thumbnail the user has selected (step 42). The server I then performs the desired task on the image, and returns a web page (in general) reflecting the result (step 43), for example by refreshing the browser window with the thumbnail changed accordingly.

In this alternative embodiment the system may be arranged to allow the user may select multiple thumbnails, and for this the web browser sends a list of the thumbnails - selected to the server when the tool is selected. The server then performs the task on all those images selected.

If a window, such as that for the rotation described above, I is displayed to allow the user to provide parameters for the task then only a sample one of the selected thumbnails is displayed. Other arrangements in which more than one of those is displayed are possible, however. -

As in the first embodiment in this alternative embodiment, the window for task parameters may be replaced by submenus for the tool palette buttons.

Also as in the first embodiment in this alternative embodiment the web page could have a final "submit" button to initiate performance of the task, but the sequence of selecting thumbnails on the web page, then selecting the task on the tool palette and then clicking the submit button would probably be seen by the user as too complicated. - 16

Claims

CLAIMS: 1. A computer program product for an image manipulation site that

when executed displays a web page with a tool palette, the web page comprising portions for a user to select Images, the tool palette being displayed in a layer and being movable by the user, and comprising portions for the user to select tasks, wherein the tasks are to be performed on the images.
2. A computer program product as claimed in claim 1, wherein if the tool palette is positioned by the user within the boundary of the web page or partially overlapping that boundary, the contents of the tool palette are seen obscuring the contents of the web page.
3. A computer program product as claimed in claim 1 or claim 2, wherein the tool palette is constrained to stay within the boundary of the web page.
4. A computer program product as claimed in any previous claim, wherein the tool palette remains in the same position when the web page is modified or refreshed.
5. A computer program product as claimed in any previous claim, wherein once a task has been performed, a modified web page is displayed.
6. A computer program product as claimed in any previous claim, wherein once a task is selected, the appearance of the tool palette is modified to indicate the task selected. - 17
7. A computer program product as claimed in any previous claim, wherein a task remains selected when the web page is modified or refreshed.
8. A computer program product as claimed in any previous claim, wherein the tool palette is closed when the web page is closed.
9. A computer program product as claimed in any previous claim, wherein some or all of the tool palette can be hidden.
10. A computer program product as claimed in claim 9, wherein the tool palette is hidden partially or fully by changing the size of the box it is displayed in.
11. A computer program product as claimed in claim 9 or 10, wherein part or all of the tool palette remains hidden when the web page is modified or refreshed.
12. A computer program product as claimed in any previous claim, wherein some or all of the properties of the tool palette are stored using cookies.
13. A computer program product as claimed in any previous claim, wherein the task is selected before the image to identify an action of that task on that image.
14. A computer program product as claimed in claim 13, wherein after the task is performed it remains selected in the tool palette and the task is performed again if the user then selects further images. - 18
15. A computer program product as claimed in claims 1 to 12, wherein the image is selected before the task to identify an action of that task on that image.
16. A computer program product as claimed in any previous claim, wherein multiple images may be selected by the user to have the same task performed upon them.
17. A computer program product as claimed in any previous claim, wherein the web page includes a button, and a selected task is performed on a selected image or images in response to the user clicking on the said button.
18. A computer program product as claimed in any previous claim, wherein prior to a task being performed on an image or images, a further window is displayed allowing the user to specify details of the task to be performed.
19. A computer program product as claimed in any previous claim, wherein the tool palette has submenus for some or all of the said portions of the tool palette representing tasks, these submenus allowing the user to specify details of the task selected.
20. A computer program product as claimed in any previous claim, wherein a particular task when performed is dependent on the type of an image or images selected.
21. A computer program product as claimed in any previous claim, that when executed performs a selected task on a selected image or images.
22. A web server storing a computer program product as claimed in any preceding claim.
23. A web server as claimed in claim 22 that supplies at least part of the computer program product to a client for execution.
24. A web server as claimed in claim 23 that receives a selection of a task and image or images from the client and then performs the task on the image or images.
25. A web-based task selection method for an image manipulation site, comprising: displaying a web page comprising portions for a user to select images, displaying a tool palette in a layer and being movable by the user, the tool palette comprising portions for the user to select tasks, wherein the tasks are to be performed on the images.
26. A method as claimed in claim 25, wherein if the tool palette is positioned by the user within the boundary of the web page or partially overlapping that boundary, the contents of the tool palette are seen obscuring the contents of the web page.
27. A method as claimed in claim 25 or claim 26, wherein the tool palette is constrained to stay within the boundary of the web page.
28. A method as claimed in any of claims 25 to 27, wherein the tool palette remains in the same position when the web page is modified or refreshed.
29. A method as claimed in any of claims 25 to 28, wherein once a said task has been performed, a modified web page is displayed.
30. A method as claimed in any of claims 25 to 31, wherein once a task is selected, the appearance of the tool palette is modified to indicate the task selected.
31. A method as claimed in any of claims 25 to 30, wherein a task remains selected when the web page is modified or refreshed.
32. A method as claimed in any of claims 25 to 31, wherein the tool palette is closed when the web page is closed.
33. A method as claimed in any of claims 25 to 32, wherein some or all of the tool palette can be hidden.
34. A method as claimed in claim 33, wherein the tool palette is hidden partially or fully by changing the size of the box it is displayed in.
35. A method as claimed in claim 33 or claim 34, wherein part or all of the tool palette remains hidden when the web page is modified or refreshed.
36. A method as claimed in any of claims 25 to 25, wherein some or all of the properties of the tool palette are stored using cookies.
37. A method as claimed in any of claims 25 to 36, wherein the task is selected before the image to identify an action of that task on that image.
38. A method as claimed in claim 37, wherein after the task is performed it remains selected in the tool palette and the task is performed again if the user then selects further images. - 21
39. A method as claimed in claims 25 to 36, wherein the image is selected before the task to identify an action of that task on that image.
40. A method as claimed in any of claims 25 to 39, wherein multiple images may be selected by the user to have the same task performed upon them.
41. A method as claimed in any of claims 25 to 40, wherein the web page includes a button, and a selected task is performed on a selected image or images in response to the user clicking on the said button.
42. A method as claimed in any of claims 25 to 41, wherein prior to a task being performed on an image or images, a further window is displayed allowing the user to specify details of the task to be performed.
43. A method as claimed in any of claims 25 to 42, wherein the tool palette has submenus for some or all of the said portions of the tool palette representing tasks, these submenus allowing the user to specify details of the task selected.
44. A method as claimed in any of claims 25 to 43, wherein a particular task when performed is dependent on the type of an image or images selected.