GB2354922A - Generating output graphics representing a navigation bar - Google Patents

Abstract

A method and apparatus for generating output graphics data representing a navigation bar 1, 10 is provided in which a vector graphic template for button graphical elements 2, 4, 14 is selected. A user can specify labels, such as text labels 14, 28, to appear on the different buttons of the navigation bar 1, 10. The text label 14, 28 having the greatest horizontal width L2 is detected and this width is used to modify the vector graphic template for the button graphical elements to match the size of the largest text label. This modified vector graphic template is then used to generate the button graphic elements 2, 4, 14.

Description

2354922 GENERATING OUTPUT GRAPHICS REPRESENTING A NAVIGATION BAR This

invention relates to data processing systems. More particularly, this invention relates to the generation of output graphics data representing a navigation bar comprising a plurality of button graphical elements displayed in a predetermined relationship.

Navigation bars (hereafter referred to as "NavBars") are not un-common on web sites. These are integrated sets of link buttons or link graphics, designed to be a coordinated set and often designed to be seen as a single graphic object on the web page (although in reality they are made from a number of separate graphics, placed to appear so they look all one graphic).

Such NavBars are difficult to create and require people skilled in scripting language programming (such as Javascript programming) as well as skilled from a graphic design point of view. One particular difficult area is to do with sizing of the NavBars to accommodate text. At present NavBars tend to be designed by a graphics designer, who knowing what text is to appear on each button, creates manually each individual button or link graphic, and usually two or three versions of the graphic (one for its normal state, one for the mouse-over state, one for a selected state etc). Now if the text is to be changed on any button this usually requires a very tedious and very length re-design of all the graphics in a graphics program. Even if just the text on one button is altered this can require that all the parts be re-created since the width of the buttons is the same.

The present invention addresses the problem of making the generation of output graphics data representing a navigation bar less difficult.

Viewed from one aspect the present invention provides a method of generating output graphics data representing a navigation bar, said navigation bar comprising a plurality of button graphical elements displayed in a predetermined relationship and that, in use, may be separately selected by a user, said method comprising the steps of- (i) selecting a vector graphic template for said button graphical elements, said vector graphic template comprising a plurality of vector graphic points; (ii) specifying labels to appear upon respective ones of said plurality of button graphical elements; (iii) detecting a greatest dimension in a predetermined direction among said labels; (iv) modifying said vector graphic template to generate a modified vector graphic template by relatively translating vector graphic points in a 5 direction parallel to said predetermined direction by an amount dependent upon said greatest dimension such that said modified vector graphic template is sized to match that label having said greatest dimension; and (v) generating said output graphics data including data representing each 10 of said plurality of button graphical elements using said modified vector graphic template any respective specified label for each button graphical element.

The invention recognises that the use of vector graphic templates can make the generation of navigation bars less difficult since these vector aphic templates may > gr be appropriately adjusted in size in dependence upon the largest label to be used in that navigation bar prior to generating the output graphics from the appropriate sized vector graphic template.

It will be appreciated that the navigation bar may comprise either a vertically or horizontally arranged collection of button graphic elements.

Whilst not essential, it is often the case that it is desired to display the button graphical elements in an abutting relationship.

With such an abutting relationship, the matching of the button sizes to all be the same and also to accommodate the largest label used is particularly important in producing an attractive appearance.

The appearance of the navigation bars may be further improved by the provision of one or more end cap graphical elements used at the outer edges of the navigation bar to provide a morepleasing visual appearance in the way in which the navigation bar integrates with the rest of the display.

In preferred embodiments using end cap graphical elements, said one or more end cap graphical elements are subject to said modifying and generating steps as for button graphical elements.

The end cap graphical elements may be automatically sized in accordance with the sizing performed upon the button graphical elements using the same technique as for the button graphical elements.

2 It will be appreciated that the labels used could take a variety of forms. As an example, icons or small images could be used as labels for buttons within a navigation bar in appropriate circumstances. However, the invention is particularly well suited to embodiments in which the labels are text labels.

Text labels are often subject to minor editorial changes that would otherwise require the complete regeneration of the navigation bar display because of a change in size of the largest label.

Text labels also often have a size dependent upon font data associated with the text label and the changing of this font data can give rise to a change in the size of the i o label that without the technique of the present invention would require considerable effort to accommodate.

Whilst the predetermined direction in which the size of the vector graphic template is adjusted could have various different orientations, the most useful orientation is when the predetermined direction is horizontal as the majority of text labels that need to be resized display the text horizontally with the text being edited to have a different horizontal extent.

Whilst the modifying of the vector graphic template could take many forms depending upon the desired visual effect, a strongly preferred fonn of modification is one in which said relative translation is such that vector graphics points on respective sides of a centre line through a button graphic element defined by said vector graphic template and perpendicular to said predetermined direction are all moved by a common distance.

Such a modification in which the vector graphic points on either side of a centre line are translated by a common amount has been found to allow for the accommodation of different sizes of label in an automatic fashion without unduly altering the design appearance of the navigation bar as determined by the starting vector graphic template for the button graphical elements.

A further preferred feature is that the vector graphic template has an associated minimum size. It has been found that even though the labels might be sufficiently 0 small that the button graphical elements could be made correspondingly small, there is a minimum size beneath which the design appearance and usability of the buttons is compromised.

In navigation bars with a more complex appearance it is often appropriate that certain parts of the button graphical element bearing the label should be automatically 3 sized whilst other parts should remain of a fixed size. This may be accommodated by appropriate marking certain points within the vector graphic template for the button graphical element as static vector points that are not subject to the modification step.

A further feature of more sophisticated navigation bars is one in which one or more of said button graphic elements have a plurality of display appearances that are selected between in dependence upon user input to said navigation bar.

This feature allows the button graphical element to change its appearance in response to user input, such as when the mouse pointer is over the button, when the button is being pressed or when the button has been selected. All of these may assist io in improving the usability of the navigation bar.

In order to make the navigation bar suitable for display on a wide range of display systems it is sometimes preferable that said step of generating includes rendering said button graphical elements into a non-vector format.

Display systems that can deal with non-vector format information are generally more common than those that are able to process vector information. As an example, navigation bars having graphical elements formed of GIF files, JPEG files, PNG files, and bitmap files are displayable by a wide variety of display systems.

The usefulness of the automatic navigation bar generation technique of the invention is further enhanced when the step of generating scripting code for controlling display and user interaction with said navigation bar.

Whilst the navigation bars generated by the technique of the present invention may be used in a variety of different systems, such as general application development tools, they are particularly useful when the navigation bar is part of an internet web page.

Viewed from another aspect the present invention provides an apparatus for generating output graphics data representing a navigation bar, said navigation bar comprising a plurality of button graphical elements displayed in a predetermined relationship and that, in use, may be separately selected by a user, said apparatus comprising processing logic for performing the steps of- (i) selecting a vector graphic template for said button graphical elements, said vector graphic template comprising a plurality of vector graphic points; (ii) specifying labels to appear upon respective ones of said plurality of button graphical elements; 4 (iii) detecting a greatest dimension in a predetermined direction among said labels; (iv) modifying said vector graphic template to generate a modified vector graphic template by relatively translating vector graphic points in a 5 direction parallel to said predetermined direction by an amount dependent upon said greatest dimension such that said modified vector graphic template is sized to match that label having said greatest dimension; and (v) generating said output graphics data including data representing each to of said plurality of button graphical elements using said modified vector graphic template any respective specified label for each button graphical element.

Further aspects of the invention provide a computer program storage medium, a server computer and a client computer.

Embodiments of the invention will now be described, by way of example only, with reference to the accompanying drawings in which:

Figures I A and 1B illustrate a first navigation bar; Figures 2A and 2B illustrate a second navigation bar; Figure 3 illustrates the navigation bar of Figure 2 generated using different appearance parameters; Figure 4 illustrates a horizontal navigation bar; Figure 5 illustrates a more sophisticated horizontal navigation bar; Figures 6A and 6B illustrate a button graphical element having non-static and static vector graphic points; Figure 7 is a flow diagram illustrating the technique of automatically generating output graphics data for representing a navigation bar; Figure 8 is a flow diagram schematically illustrating the technique of re- sizing a button graphical element in accordance with a label of a different size; and Figure 9 schematically illustrates a client server network computer system of a type which may use the technique of the present invention.

Figures I to 5 illustrate example of NavBars that can be produced using the technique of the present invention. In particular, Figure 1 A illustrates a first example of a NavBar 1, and Figure 1 B illustrates the component parts that are used to create that NavBar, namely button graphical elements 2, 4 and end cap graphical elements 6, 8. Similarly, Figure 2A illustrates an alternative embodiment of the NavBar 10, whilst Figure 2B illustrates the components 12, 14, 18 (derived from vector graphic templates) that may be used to generate that NavBar 10. Figure 3 illustrates the NavBar 10 of Figure 2A, but generated using different parameters such as textures and colour. Figure 4 then illustrates a matching horizontal version of the NavBar 18 of Figure 3. Figure 5 illustrates a more intricate horizontal NavBar 20. This time, the highlighted button or link 22 is identified by use of colour and the fact that it is drawn differently, in this case to hang down below the others.

A preferred embodiment of the invention allows less skilled user to create io these NavBars requiring little programming or graphics skill. It automates the creation of the necessary Javascript programming to go on the web page, and it creates all the parts (2, 4, 6, 8, 12, 14, 16) of the NavBar for the user. Specifically the user just enters the text 24 to appear on each link, the URL to jump to, and picks a design for the NavBar from a pre-designed selection (e.g. including the templates).

All the graphical elements are then created - this includes the buttons 2, 4, 14 and end caps 6, 8, 12, 16 of the NavBar being re-sized to accommodate the longest text. The user is also allowed to specify other parameters of the NavBar such as the colour, textures used, the font used, the font size etc.

The idea is that a range of pre-designed looks are provided, and that any user can come along, pick a design, customize it not only with their words and link text, but also to customize the colours, textures, size, number of links etc.

The end result is that it takes a non-expert user significantly less time to build a professional looking, personalized, mouse-over interactive NavBar, that exactly fits around their button or link text. Without this technique this would take a professional webmaster/designer many times longer to do the same thing the 'old' way. How it works The technique will be described from the ground up.

Each NavBar is made up of a repeating button 2, 4, 14 or link section, and two end cap graphics 6, 8, 12, 16.

- The user is usually given a choice to build a horizontal (Figure 4) or vertical (Figures I A, 2A and 3) NavBar Our NavBar 'master designs' (templates) are created in a vector illustration program to form vector graphic templates that include both non-static and static vector graphic points. This is necessary so that the graphic design can be scaled and 6 stretched to accommodate varying amounts of text 24, and that the entire NavBar can be scaled up or down, with no loss of quality.

The graphic designer must create separate graphic files for the two end cap graphics 6, 8, 12, 16 and the repeating button 2, 4, 14 or link section. These should be designed in such a fashion that when placed adjacent or one above another, that they form a integrated whole.

Each of the link button parts can have up to four different versions or states, representing the 'normal', the 'mouse-over', the 'being pressed' and the 'selected' state. Each of these states is usually represented by altering the colour or sometimes the to colour and design to distinguish it from the other states. As can be seen in the attached Figures, one button from each NavBar is coloured or highlighted in some way. These four states are dictated by the Javascript language that provides events associated with the mouse-pointer moving over a graphic, or the mouse-button being pressed etc.

- An important part of the process is the stretching of the button sections 2, 4, 14 to accommodate the link or button text 24. Simply doing a simple graphic scale will not work properly since the height of each button section must remain identical for all buttons for the results to look right. On the other hand just perforraing a horizontal scale won't provide good results either since that would affect the relative dimensions of all the parts of the design, so making the aspect ratio of the right or left sections of a button go wrong, e.g. the rounded ends of a design would no longer have the correct appearance.

Therefore it's necessary to implement an algorithm that translates the X co-ordinates of the parts of the illustration that are to shift (i.e. the non-static vector graphic points), depending on the length of the text 24 on this button. Described simply this could be done by identifying all co-ordinates to the left or right of the centre line of the text, and then translating them, left or right by amount required to accommodate the text.

There is a subtle point which can be seen in Figures 6A and 6B. All the buttons are the same length, as determined by the longest text. However just translating all Co-ordinates to the left or right of the centreline of the text will not work in the above example. The rounded 'button' part 26 should elongate to accommodate the text 28 as should the actual top bar or rail part 30 so all the sections seem to join seamlessly. However the 'hinge' part 32 that connects the button 26 to 7 the rail 30 or bar, should not alter in size or width depending on the text. In this design the hinge section is meant to be fixed irrespective of the width of the button. The solution to this is to mark, in the illustration program (as part of the vector graphic template including vector graphic points), which elements of design are meant to move (i.e. are modified) and which are not (i.e. are static) depending on the text 28. Depending on the graphic program being used, this marking might be achieved by object naming or a grouping convention.

All the buttons 2, 4, 14, 22, 26 in a NavBar should be the same width, and that usually includes the buttons within a Horizontal NavBar as well as a vertical one, for aesthetic reasons. This requires that the longest text 24, 28 used on any button be identified and that all the buttons be stretched (using the above algorithm) so they are the same width as the maximum width one.

In addition the end-cap graphics 6, 8, 12, 16 of a vertical NavBar also need to be stretched the same way - and again doing a simple image scale or even just a horizontal scale will not work as this would destroy the aspect ratio of the design. So again the end caps have to be stretched using a similar algorithm to maintain the correct aspect ratio of the elements of the design. This can be done a very similar way by simply identifying the parts of the illustration to the left or right of the centre line CL of the end-cap and translating them left or right to obtain the correct width of the end cap.

For web browsers that are able to interpret a vector graphics format then the following conversion stage is not necessary. The invention is not restricted to only the current browser formats which are listed below.

The parts of the NavBar have to be in a graphic format recognised by web browsers, which usually means either as a GIF, JPG or PNG file format. Therefore it is necessary to render all the sections to convert them from a vector form into a bitmap form. This could be done a number of ways, such as by programmatically driving an existing illustration software package, or perhaps by using a separate graphics rendering engine, or by any means that converts the coordinate modified buttons into a recognised web format bitmap.

For the situations where the user desires to have an interactive, as opposed to a static NavBar, then it's necessary to render all the different states for each button, i.e. the normal state, the mouse-over state and perhaps a'selected' state. It is assumed that the graphic designer has created master versions for the four possible states, but it is 8 up to the user to determine whether they want the NavBar to be interactive, and if so how many of the above states it should recognise.

Also at the conversion stage (generation of the output graphics data), the user can select alternative colours, textures, fonts etc for the parts of the NavBar and all the parts would be rendered using the same colours, fonts and textures. In addition this is the stage where a user may also specify an overall scale factor to enlarge or reduce the overall size of the NavBar.

Having created graphics for all the sections and all the required states of each section, the Javascript (or appropriate equivalent scripting language that can respond to mouse events in the browser) code needs producing. The syntax and exact code required would depend on the capabilities of the scripting language. For Javascript used in current generation browsers, this code would be the typical 'rollover' code for each of the button sections of the NavBar. It is a straightforward job for any programmer to generate the appropriate Javascript, and to output this as HTML along with the necessary references to the appropriate images.

The above technique produces a personalised, ready-built, no-skills required, interactive navigation or link bar.

Figure 7 is a flow diagram illustrating a technique for generating a navigation bar.

At step 34, a user enters the required label text for each button and selects the template to be used for generating the navigation bar.

At step 36, the system examines each string forming the label text in turn together with any font data that influences the size of the text and determines the greatest horizontal width amongst the various text labels. This represents the greatest width required in any of the buttons and accordingly all buttons can be modified to this width.

At step 38 all the buttons are rendered in their different states using the modified vector graphic template stretched to the appropriate size to accommodate the widest text.

Steps 40 and 42 serve to generate, if necessary, required end cap data for a vertical navigation bar.

Steps 44 and 46 serve to create the necessary scripting language code for controlling the display of the navigation bar and any HTML code for displaying the navigation bar and tied to the scripting code and mouse actions as appropriate.

9 Figure 8 is a flow diagram illustrating how the modification of the vector graphic template representing the button graphic elements may be performed.

At step 48 the horizontal width L I of a default text representing the minimum width of the button is calculated.

At step 50 this default text is substituted with the user specified label text together with its associated fonts and size data. This user specified text and associated data is examined to calculate a new width L2.

At step 52, the difference between the default width L I and the new width L2 is calculated as D.

At step 54 the non-static vector graphic points within the vector graphic template defining the button are modified by translating all coordinates left of the centre line CL of the button to the left by D/2 and those to the right of the centre line to the right by D/2. The modified vector graphic template is then provided together with the value of the width increase D at step 56.

The value D can be used to modify vector graphic templates for the end caps in the same way as step 54 did for the button vector graphic template.

Figure 9 schematically illustrates a computer system on which the present invention may be used. A server computer 5 8 including a computer program storage medium 60 is linked via an internet link to a client computer 62. The client computer 62 has a display 64 and user input devices 66, 68.

The technique of the present invention can be implemented using a computer program stored on a computer program storage medium 60 to control a general purpose computer, such as the server computer 58 or the client computer 62. In one embodiment, the computer program for performing the technique of the present invention can reside upon the server computer 58 with a user passing control commands to that server computer 58 via a normal internet web browser run by the client computer 62. The server computer 5 8 has the processing resources and template libraries necessary to produce a wide variety of graphics data in an efficient manner.

Claims (23)

1. A method of generating output graphics data representing a navigation bar, said navigation bar comprising a plurality of button graphical elements displayed in a predetermined relationship and that, in use, may be separately selected by a user, said method comprising the steps of (vi) selecting a vector graphic template for said button graphical elements, said vector graphic template comprising a plurality of vector graphic points; (vii) specifying labels to appear upon respective ones of said plurality of button graphical elements; (viii) detecting a greatest dimension in a predetermined direction among said labels; (ix) modifying said vector graphic template to generate a modified vector graphic template by relatively translating vector graphic points in a direction parallel to said predetermined direction by an amount dependent upon said greatest dimension such that said modified vector graphic template is sized to match that label having said greatest dimension; and (x) generating said output graphics data including data representing each of said plurality of button graphical elements using said modified vector graphic template any respective specified label for each button graphical element.
2. 2. A method as claimed in claim 1, wherein said predetermined relationship is with said button graphic elements displayed vertically displaced from one another.
3. 3. A method as claimed in claim 1, wherein said predetermined, relationship is with said button graphic elements displayed horizontally displaced from one another.
4. 4. A method as claimed in any one of the preceding claims, wherein said button graphical elements are displayed in an abutting relationship.
5. 5. A method as claimed in any one of the preceding claims, wherein said navigation bar further comprises one or more end cap graphical elements.
6. 6. A method as claimed in claim 5, wherein said one or more end cap graphical elements are subject to said modifying and generating steps as for button graphical elements.
7. 7. A method as claimed in any one of the preceding claims, wherein said labels comprise text labels.
8. 8. A method as claimed in claim 7, wherein said text labels have a size dependent upon font data associated with said text labels.
9. 9. A method as claimed in any one of the preceding claims, wherein said predetermined direction is parallel to a horizontal display direction of said plurality of button graphical elements.
10. 10. A method as claimed in any one of the preceding claims, wherein said relative translation is such that vector graphics points on respective sides of a centre line through a button graphic element defined by said vector graphic template and perpendicular to said predetennined direction are all moved by a common distance.
11. 11. A method as claimed in any one of the preceding claims, wherein said vector graphic template has an associated minimum size.

    12. A method as claimed in any one of the preceding claims, wherein said vector graphic template ftu-ther comprises static vector graphic points that are not subject to said step of modifying.
12. 12
13. 13. A method as claimed in any one of the preceding claims, wherein one or more of said button graphic elements have a plurality of display appearances that are selected between in dependence upon user input to said navigation bar.
14. 14. A method as claimed in any one of the preceding claims, wherein said step of generating includes rendering said button graphical elements into a non- vector format.
15. 15. A method as claimed in claim 14, wherein said non-vector format is one of a GIF file, a JPEG file, a PNG file and a bitmap file.
16. 16. A method as claimed in any one of the preceding claims, further comprising the step of generating scripting code for controlling display and user interaction with said navigation bar.
17. 17. A method as claimed in any one of the preceding claims, wherein said navigation bar is part of an internet web page.
18. 18. An apparatus for generating output graphics data representing a navigation bar, said navigation bar comprising a plurality of button graphical elements displayed in a predetermined relationship and that, in use, may be separately selected by a user, said apparatus comprising processing logic for performing the steps of (vi) selecting a vector graphic template for said button graphic elements, said vector graphic template comprising a plurality of vector graphic points; (vii) specifying labels to appear upon respective ones of said plurality of button graphical elements; (viii) detecting a greatest dimension in a predetermined direction among said labels; (ix) modifying said vector graphic template to generate a modified vector graphic template by relatively translating vector graphic points in a direction parallel to said predetermined direction by an amount 13 dependent upon said greatest dimension such that said modified vector graphic template is sized to match that label having said greatest dimension; and (x) generating said output graphics data including data representing each of said plurality of button graphical elements using said modified vector graphic template any respective specified label for each button graphical element.
19. 19. A computer program storage medium storing a computer program for controlling a data processing apparatus to perform a method as claimed in any one of claims I to 18.
20. 20. A server computer for coupling to a client computer via a network link, said server computer performing a method as claimed in any one of claims I to 18 in response to user inputs received ftom said client computer.
21. 21. A client computer for coupling to a server computer via a network link, said client computer being configured to transmit user inputs made at said client computer to said server computer to control said server computer to perform a method as claimed in any one of claims I to 18.
22. 22. A method of generating output graphics data substantially as hereinbefore described with reference to the accompanying drawings.
23. 23. An apparatus for generating output graphics data substantially as hereinbefore described with reference to the accompanying drawings.

    14