Systems and methods for scaling a graphical user interface according to display dimensions and using a tiered sizing schema to define display objects

[0001] The systems and methods described herein relate to graphical user interfaces. More particularly, the described invention relates to systems and methods for scaling a graphical user interface so that the graphical user interface is not distorted when rendered on different displays.

[0002] The proliferation of personal computing devices, computing appliances, automobile computers and the like has increased the number of computer platforms that are available to consumers. The different computer platforms typically have different hardware specifications, such as the size of a display included in the platforms. The increase in types of computer platforms has presented a problem to software application developers who develop applications for the different platforms.

[0003] For example, the use of automobile computers that provide a graphical user interface (GUI) to a user are becoming common. But automobile manufacturers typically desire to have a unique look to their automobiles, so a standard look and feel to a GUI is not desirable in this instance. As a result, a software application written for one make of automobile will not provide acceptable results on another make of automobile.

[0004] Ideally, an application developer could develop one software application that could run on multiple different platforms. However, if the different platforms include different hardware, modifications may have to be made to an application for each platform. For example, suppose a developer writes a software application to run on a platform having a display resolution of 640 pixels300 pixels. If the application is run on a platform that has a 320240 display resolution, then visual components written for the higher resolution display will appear cropped on the lower resolution display. Furthermore, displaying a bitmap written for a display of one size on a display of another size produces artifacts in the bitmap display, which renders doing so unacceptable.

[0005] FIG. 1a and 1b exemplify the problem discussed above. FIG. 1a is a diagram of a first display 100 of a first size and FIG. 1b is a diagram of a second display 120 of a second size. The first display 100 includes a title bar 102, a client area 104 and a system tray 106. The second display 120 includes a title bar 122, a client area 124 and a system tray 106. In such a configuration, a graphical user interface is limited to the client area 104, 124 of each display 100, 120.

[0006] For purposes of the present discussion, the first display 100 is assumed to have a display aspect ratio of 320 pixels by 240 pixels (horizontalvertical). The second display 120 is assumed to have a display aspect ratio of 640300 pixels. Accordingly, the second display 120 has a greater resolution than the first display 100. Also, when a GUI displayed according to pixels on the first display 100 is displayed according to pixels on the second display 120, the GUI will be distorted and will have an undesirable appearance due to disproportional shrinking of the GUI.

[0007] This is because display objects are programmed for display on the first display 100 according to pixel size, or some other fixed measurement unit. A rectangular display object 150 is shown, for example, that is defined to be 100 pixels horizontally and 25 pixels vertically. The display object 150, therefore, measures 10025 on both the first display 100 and the second display. While the rectangle 150 that results on the first display 100 has a length of about one-third of the first display 100, the rectangle 150 has a length of less than one-sixth of the display when displayed on the second display 120. Furthermore, the height of the rectangle 150 on the first display 100 would be about one-tenth of the first display 100, while the height of the rectangle 150 would be about one-twelfth of the display when rendered on the second display 120. Clearly, the same rectangle object 150 appears disproportionate to the client area 124 when rendered on the second display 120.

[0008] If a developer were provided a way in which to write an application that could scale its GUI to fit proportionally on different sizes of displays, then the developer would be able to write one application that would operate on a number of different platforms.

[0009] Systems and methods are described for scaling a graphical user interface so that the graphical user interface appears proportionally correct regardless of the resolution of the display on which the graphical user interface is rendered. The systems and methods utilize proportional scaling to provide rich graphic environments and high graphic fidelity. A tiered sizing schema is also described that defines size constraints for display objects, thus ensuring fidelity of a graphical user interface when displayed on a target display.

[0010] Proportional scaling is fundamental to the described invention. For example, a control object provided on a graphical user interface (GUI) is not described in terms of pixels or any other standard method of defining bounds of graphic display objects. In the present invention, such a display object is defined by defining bounds of the display object relative to margins of the display. For example, an upper left bound of a display object may be defined as being one-third of a display width from a left margin of the display and one-half of a height from a top margin of the display. A lower right bound may be similarly defined.

[0011] In one implementation, a schema defines size constraints for display objects. Any number of sizes may be defined in the schema and applications adhering to the schema will have display objects that are limited to the sizes in the schema. For example, a schema may define three sizes for display objects, such as a small, medium and large. This feature protects against display objects being distorted when displayed in a different resolution that that which they were designed. As a result, applications using a graphical user interface designed on a system having one resolution will look true to its design specifications when displayed on an original equipment manufacturer (OEM) display having a different resolution.

[0012] Another problem with scaling a GUI is that fonts may be scaled down to a size that is illegible, or scaled up to a size so large that complete words cannot be displayed. To overcome this problem, one implementation defines a minimum number of characters that must be displayed in a particular area measured as a fraction of display size. Doing so prevents an OEM from using a font that is larger than a GUI can handle. It also prevents the software from shrinking a font desired by an OEM to a size that is illegible or otherwise unacceptable to the OEM.

[0013] A more complete understanding of exemplary methods and arrangements of the present invention may be had by reference to the following detailed description when taken in conjunction with the accompanying drawings wherein:

[0014] FIG. 1a is a diagram of a display of a first size.

[0015] FIG. 1b is a diagram of a display of a second size.

[0016] FIG. 2 is a block diagram of a computer system conforming to the invention described herein.

[0017] FIG. 3a is a representation of a tiered sizing schema.

[0018] FIG. 3b is a block diagram of a graphical user interface utilizing the tiered sizing schema.

[0019] FIG. 4a is an illustration of a text box in a graphical user interface.

[0020] FIG. 4b is an illustration of a text box in a graphical user interface.

[0021] FIG. 4c is an illustration of a text box in a graphical user interface.

[0022] FIG. 4d is an illustration of a text box in a graphical user interface.

[0023] FIG. 5 is a diagram of an exemplary system on which the present invention may be implemented.

[0024] This invention concerns a computer operating system that runs applications that provide a graphical user interface (GUI) on a display. Applications may be written for the operating system that define GUI display objects according to a fraction of the display on which the GUI is rendered. The present invention is described according to an example of an automobile computer system having a display. However, it is noted that the features described herein may be applied to any application that has a graphical user interface that may be displayed on different sizes of displays.

[0025] Computer-Executable Instructions/Modules

[0026] The invention is illustrated in the drawings as being implemented in a suitable computing environment. Although not required, the invention is described in the general context of computer-executable instructions, such as program modules, to be executed by a computing device, such as a personal computer or a hand-held computer or electronic device. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform particular tasks or implement particular abstract data types. Moreover, those skilled in the art will appreciate that the invention may be practiced with other computer system configurations, including multi-processor systems, microprocessor-based or programmable consumer electronics, network PCs, minicomputers, mainframe computers, and the like. The invention may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote memory storage devices.

[0027] Exemplary Scaling System

[0028] FIG. 2 is a block diagram of a computer system 200 conforming to the invention described herein. The computer system 200 includes a processor 202, a display 204 and memory 206. The computer system 200 also includes an input/output (I/O) unit 208 that may include hardware, software or a combination of the two. The I/O unit 208 allows a user to input data into the computer system 200, and allows the computer system 200 to output data to a user. The I/O unit 208 may comprise more than one component, such as a keypad, a microphone, a speaker, and the like.

[0029] The computer system 200 also includes hardware 210 and firmware 212. The hardware 212 includes any system-specific hardware that may be necessary for the computer system 200 to function in a particular manner. The firmware 212 is software that is executable on the processor 202, the software enabling the hardware 212 to operate properly on the computer system 200.

[0030] The memory 206 of the computer system 200 stores an operating system 214 that includes, among other modules (not shown) typically found in an operating system, a display rendering module 216 that receives code for displaying objects according to a size aspect ratio of the display 204. The memory 206 also stores a software application 218 that includes graphical user interface (GUI) code 220 that, when executed, displays a GUI 222 on the display 204.

[0031] Original equipment manufacturer (OEM) software 224 may also be stored in the memory 206. The OEM software 224 provides the visual appearance of objects on the GUI 222. The OEM software 224 may include code modules that modify the GUI code 220 before the GUI 222 is rendered on the display 204. If so, then there are three components that take part in rendering the GUI 220: the application 218, the display rendering module 216 and the OEM software 224. The application 218 defines the GUI 222 in the GUI code 220; the display rendering module 216 renders the GUI 222 on the display 204 according to instructions received from the application 218; and the OEM software 224 may modify the final appearance of the GUI 222 as it is displayed.

[0032] FIG. 3a is a diagram of a graphical user interface 300 in the client area 104 of the first display 100 (from FIG. 1a) that is a first size, and FIG. 3b is a diagram of the graphical user interface 300 displayed in the client area 124 on the second display 2102 (from FIG. 1b) that is a second size. The graphical user interface 300 is proportional to a display aspect ratio of the respective displays 104, 124. This is the desired result of the present invention.

[0033] The graphical user interface 300 includes an image 302, control buttons 304 (3), control bars 306 (2) and a horizontal slider control 308. The controls are merely exemplary, but the GUI 300 may include any practical number of controls. Furthermore, other types of controls may be displayed on the GUI 300.

[0034] The client area 104, 124 has a height 310, a width 312, a top edge 314 and a left edge 316. The size and location of the controls are expressed in terms of a fraction of the width 312 from the left edge 316 and a fraction of the height 310 from the top edge 314. Although the controls are defined according to the top edge 314 and the left edge 316 of the client area 104, 124, it is noted that the controls could be defined relative to any other known point along the width 312 and/or the height 310.

[0035] FIG. 3c is a representation of a display control 318 having a bounded area 320 defined by an upper left bound 322 and a lower right bound 324. Further discussion of display controls will refer to a display control having an upper left bound and a lower right bound. Although the upper left bound and the lower left bound is not explicitly shown for each display object, it is to be understood that each display control has an upper left bound and a lower right bound as shown in FIG. 3c.

[0036] To create the desired results of proportionality, the display rendering module 216 is configured to display the GUI 222 according to instructions received from the application 218. The GUI code 220 contained in the application 218 defines the bounds of display objects displayed on the GUI 300 in terms of a fraction of display height and width.

[0037] For example, the GUI code 220 may define a size and location of a control bar 306 as having an upper left bound 322 of (5%, 60%) and a lower right bound 324 of (10%, 95%). This means that the upper left bound 322 is located a distance of 5% of the height 312 from the top edge 314, and a distance of 60% of the width 310 from the left edge 316. This also signifies that the lower right bound 324 is located a distance of 10% of the height 312 from the top edge 314, and a distance of 95% of the width 310 from the left edge 316. The size and location of the display control 306 may be determined from these bounds.

[0038] Any coordinate system may be used to determine the location of the bounds of a display object, such as a traditional (x, y) coordinate system. Furthermore, the bounds do not have to be represented in percentages as described above. Any fractional representation of display object bounds will suffice for the purposes described herein.

[0039] It should be noted that the upper left bound 322 and the lower right bound 324 are display unit independent. The display rendering module 216 is configured to determine the size of the display, determine the fraction, i.e., percentage, specified in the GUI code 220, and render the control bar 306 accordingly. If the display is defined in pixels, for example, the display rendering module 216 produces a result that is defined in pixels. The client area 124 of the display has a horizontal resolution of 640 pixels by 300 pixels. The upper left bound 322 of the control bar 306 defined above would result in a location that is 15 pixels from the top edge 314 and 384 pixels from the left edge 316. The lower right bound 324 of the control bar 306 would result in a location that is 30 pixels from the top edge 314 and 608 pixels from the left edge 316. In an event that a non-integer number of display units results, the result of calculating the upper left bound 322 and the lower right bound 324 are rounded to the nearest whole display unit.

[0040] In some cases (as discussed in U.S. patent application Ser. No. 09/603,846, filed Jun. 26, 2000 by Richard St. Clare Bailey and assigned to MICROSOFT CORP., said application incorporated by reference herein), an OEM may provide the look of the controls to be used in a particular environment. For example, if General Motors Co. installs computers in GM automobiles, it may want the controls to include a GM logo to better define a unique look for GM cars. In such an instance, the OEM (e.g., GM) and the application developer should develop some sort of understanding between them as to size constraints of display objects. Conforming to such an understanding assures that the specifications of the GUI written by the developer will be preserved in the OEM's display space.

[0041] Such an understanding may be achieved by establishing a schema of tiered sizing for display objects. FIG. 4a is a representation of a tiered sizing schema 400 that defines standard sizes of display objects. The schema 400 defines a large object 402 as being (15%, 30%), i.e., 15% of the height of the display from the top edge of the display, and 30% of the width of the display from the left edge of the display.

[0042] Similarly, the schema 400 defines a medium object 404 as being (10%, 20%), and a small object 406 as being (5%, 10%). It is noted that the schema 400 may define the height and the width of the objects in separate entries, as well as together.

[0043] FIG. 4b is a diagram of a display 420 having three sizes of objects, in accordance with the schema 400 described in FIG. 4a. The display 420 shows a small display object 422, a medium display object 424 and a large display object 426. When a GUI is designed, display objects may be defined and placed on a form. For example, a designer may click on an icon associated with a medium display object to create a display object for the GUI. That object will be sized automatically according to the schema 400.

[0044] Use of the schema 400 allows an OEM to design visual aspects of display objects with regard to the sizes defined by the schema 400. Since the OEM knows that a medium object is a certain fraction of a size of a display used in an OEM system, the OEM can design graphics, such as bitmaps, that conform to the size of display objects on the particular system to provide a rich visual interface.

[0045] Another problem that may result is if an OEM customizes, i.e., resizes, controls that include text of a certain font. Expanding a font may result in only a part of a word being displayed on the GUI. On the other hand, shrinking a font may result in a word being displayed too small for a person to read easily.

[0046] FIG. 5a-5d are illustrations of a text box 500 in a graphical user interface. FIG. 5a is an illustration of a text box as it is programmed in the GUI code 220 for the graphical user interface 222. The text box 500 is shown on a display with the word HELLO displayed within its borders.

[0047] FIG. 5b is an illustration of a text box 502 in the graphical user interface 222 that is displayed on a different sized display than the one on which the text box 500 shown in FIG. 5a is displayed. In this case, the computer system 200, i.e., the OEM, has increased the size of the font used for the text box 502. The proportions of the text box 502 itself are limited by the proportions of the display on which it is rendered. As a result, all of the letters cannot fit in the text box 502 at the desired fonts and the entire word is not displayed. The result is unacceptable.

[0048] To prevent this from happening, an OEM must be aware of limits on increasing font size for displays. One way to do this is to require that a certain amount of linear text space be provided in the text box 502. For example, the GUI code 220 may require that the text box 502 display a minimum of n character spaces. Then, an OEM cannot expand the font too much to display entire words in the display objects.

[0049] FIG. 5c is an illustration of a text box 506 in the graphical user interface. 222 that is displayed on a different sized display than the one on which the text box 500 or the text box 502 is displayed. In this case, the OEM has decreased the size of the font used for the text box 504. The problem is that the font is too small to be legible after the text box 504 has been proportionally decreased in size. The result is also unacceptable.

[0050] To prevent this situation from occurring, the GUI code 220 requires the display font to be a predetermined size, for example, 14 point. The predetermined size is the smallest font size that a developer of the application 218 deems practical to use for the GUI 222.

[0051] FIG. 5d is an illustration of a text box 506 in a graphical user interface. 222 that is displayed on a smaller sized display than the text box 500 shown in FIG. 5a. In this case, the size of the text box 506 has been reduced. However, the font size is constrained so that it cannot be too big or too small for the text box 506. As a result, the final rendering is visually acceptable.

[0052] Exemplary Computer Environment

[0053] The various components and functionality described herein are implemented with a number of individual computers. FIG. 6 shows components of typical example of such a computer, referred by to reference numeral 600. The components shown in FIG. 6 are only examples, and are not intended to suggest any limitation as to the scope of the functionality of the invention; the invention is not necessarily dependent on the features shown in FIG. 6.

[0054] Generally, various different general purpose or special purpose computing system configurations can be used. Examples of well known computing systems, environments, and/or configurations that may be suitable for use with the invention include, but are not limited to, personal computers, server computers, hand-held or laptop devices, multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.

[0055] The functionality of the computers is embodied in many cases by computer-executable instructions, such as program modules, that are executed by the computers. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform particular tasks or implement particular abstract data types. Tasks might also be performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media.

[0056] The instructions and/or program modules are stored at different times in the various computer-readable media that are either part of the computer or that can be read by the computer. Programs are typically distributed, for example, on floppy disks, CD-ROMs, DVD, or some form of communication media such as a modulated signal. From there, they are installed or loaded into the secondary memory of a computer. At execution, they are loaded at least partially into the computer's primary electronic memory. The invention described herein includes these and other various types of computer-readable media when such media contain instructions programs, and/or modules for implementing the steps described below in conjunction with a microprocessor or other data processors. The invention also includes the computer itself when programmed according to the methods and techniques described below.

[0057] For purposes of illustration, programs and other executable program components such as the operating system are illustrated herein as discrete blocks, although it is recognized that such programs and components reside at various times in different storage components of the computer, and are executed by the data processor(s) of the computer.

[0058] With reference to FIG. 6, the components of computer 600 may include, but are not limited to, a processing unit 620, a system memory 630, and a system bus 621 that couples various system components including the system memory to the processing unit 620. The system bus 621 may be any of several types of bus structures including a memory bus or memory controller, a peripheral bus, and a local bus using any of a variety of bus architectures. By way of example, and not limitation, such architectures include Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MCA) bus, Enhanced ISA (EISAA) bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus also known as the Mezzanine bus.

[0059] Computer 600 typically includes a variety of computer-readable media. Computer-readable media can be any available media that can be accessed by computer 600 and includes both volatile and nonvolatile media, removable and non-removable media. By way of example, and not limitation, computer-readable media may comprise computer storage media and communication media. Computer storage media includes volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer-readable instructions, data structures, program modules, or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can be accessed by computer 610. Communication media typically embodies computer-readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. The term modulated data signal means a signal that has one or more if its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wired media such as a wired network or direct-wired connection and wireless media such as acoustic, RF, infrared and other wireless media. Combinations of any of the above should also be included within the scope of computer readable media.

[0060] The system memory 630 includes computer storage media in the form of volatile and/or nonvolatile memory such as read only memory (ROM) 631 and random access memory (RAM) 632. A basic input/output system 633 (BIOS), containing the basic routines that help to transfer information between elements within computer 600, such as during start-up, is typically stored in ROM 631. RAM 632 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 620. By way of example, and not limitation, FIG. 6 illustrates operating system 634, application programs 635, other program modules 636, and program data 637.

[0061] The computer 600 may also include other removable/non-removable, volatile/nonvolatile computer storage media. By way of example only, FIG. 6 illustrates a hard disk drive 641 that reads from or writes to non-removable, nonvolatile magnetic media, a magnetic disk drive 651 that reads from or writes to a removable, nonvolatile magnetic disk 652, and an optical disk drive 655 that reads from or writes to a removable, nonvolatile optical disk 656 such as a CD ROM or other optical media. Other removable/non-removable, volatile/nonvolatile computer storage media that can be used in the exemplary operating environment include, but are not limited to, magnetic tape cassettes, flash memory cards, digital versatile disks, digital video tape, solid state RAM, solid state ROM, and the like. The hard disk drive 641 is typically connected to the system bus 621 through a non-removable memory interface such as interface 640, and magnetic disk drive 651 and optical disk drive 655 are typically connected to the system bus 621 by a removable memory interface such as interface 650.

[0062] The drives and their associated computer storage media discussed above and illustrated in FIG. 6 provide storage of computer-readable instructions, data structures, program modules, and other data for computer 600. In FIG. 6, for example, hard disk drive 641 is illustrated as storing operating system 644, application programs 645, other program modules 646, and program data 647. Note that these components can either be the same as or different from operating system 634, application programs 635, other program modules 636, and program data 637. Operating system 644, application programs 645, other program modules 646, and program data 647 are given different numbers here to illustrate that, at a minimum, they are different copies. A user may enter commands and information into the computer 600 through input devices such as a keyboard 662 and pointing device 661, commonly referred to as a mouse, trackball, or touch pad. Other input devices (not shown) may include a microphone, joystick, game pad, satellite dish, scanner, or the like. These and other input devices are often connected to the processing unit 620 through a user input interface 660 that is coupled to the system bus, but may be connected by other interface and bus structures, such as a parallel port, game port, or a universal serial bus (USB). A monitor 691 or other type of display device is also connected to the system bus 621 via an interface, such as a video interface 690. In addition to the monitor, computers may also include other peripheral output devices such as speakers 697 and printer 696, which may be connected through an output peripheral interface 695.

[0063] The computer may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 680. The remote computer 680 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to computer 600, although only a memory storage device 681 has been illustrated in FIG. 6. The logical connections depicted in FIG. 6 include a local area network (LAN) 671 and a wide area network (WAN) 673, but may also include other networks. Such networking environments are commonplace in offices, enterprise-wide computer networks, intranets, and the Internet.

[0064] When used in a LAN networking environment, the computer 600 is connected to the LAN 671 through a network interface or adapter 670. When used in a WAN networking environment, the computer 600 typically includes a modem 672 or other means for establishing communications over the WAN 673, such as the Internet. The modem 672, which may be internal or external, may be connected to the system bus 621 via the user input interface 660, or other appropriate mechanism. In a networked environment, program modules depicted relative to the computer 600, or portions thereof, may be stored in the remote memory storage device. By way of example, and not limitation, FIG. 6 illustrates remote application programs 685 as residing on memory device 681. It will be appreciated that the network connections shown are exemplary and other means of establishing a communications link between the computers may be used.

[0065] Conclusion

[0066] The systems and methods as described thus provide a way to ensure that a graphical user interface created to run on a display of one size will execute appropriately on other displays of various sizes. An application developer can thus be assured that the same version of an application will look similar even if used with displays of different dimensions. At the same time, OEMs are free to vary the look and feel of an application to suit their needs.

[0067] Although details of specific implementations and embodiments are described above, such details are intended to satisfy statutory disclosure obligations rather than to limit the scope of the following claims. Thus, the invention as defined by the claims is not limited to the specific features described above. Rather, the invention is claimed in any of its forms or modifications that fall within the proper scope of the appended claims, appropriately interpreted in accordance with the doctrine of equivalents.