Computer applications interact with human beings through user interfaces. While audio, tactile, and similar forms of user interfaces are available, visual user interfaces through a display device are the most common form of user interface. With the development of faster and smaller electronics for computing devices, smaller size devices such as handheld computers, smart phones, personal digital assistants (PDAs), and comparable devices have become common. Such devices execute a wide variety of applications ranging from communication applications to complicated analysis tools. Many such applications render visual effects through a display and enable users to provide input associated with the applications' operations.
Given the variety of sizes and types of small form computing devices, just as many displays are also used in such devices. A typical user interface for a computer application may include a number of graphical elements, textual components, background images, etc. Thus, the user interface may need to be adjusted in size and layout for different sizes and types of displays. Conventional applications approach this challenge by publishing custom versions of the applications adjusting their user interface for particular classes of displays. Because there is limited standardization in displays, look and feel of user interfaces may be different even for customized applications when executed on computing devices with varying display sizes.
This summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This summary is not intended to exclusively identify key features or essential features of the claimed subject matter, nor is it intended as an aid in determining the scope of the claimed subject matter.
Embodiments are directed to enabling application user interfaces to be displayed on different sizes and types of displays without having to modify the application for each different display. According to some embodiments, a layout of the user interface for an application may be automatically scaled for specific displays, especially smaller size displays such as mobile device displays, reducing a need to create customized versions of the application.
These and other features and advantages will be apparent from a reading of the following detailed description and a review of the associated drawings. It is to be understood that both the foregoing general description and the following detailed description are explanatory and do not restrict aspects as claimed.
As briefly described above, application user interfaces can be displayed on different sizes and types of displays without having to modify the application for each different display. A layout of the user interface for an application may be automatically scaled for specific displays. The scaling may include vertical scaling, horizontal scaling, and font scaling. In the following detailed description, references are made to the accompanying drawings that form a part hereof, and in which are shown by way of illustrations specific embodiments or examples. These aspects may be combined, other aspects may be utilized, and structural changes may be made without departing from the spirit or scope of the present disclosure. The following detailed description is therefore not to be taken in a limiting sense, and the scope of the present invention is defined by the appended claims and their equivalents.
While the embodiments will be described in the general context of program modules that execute in conjunction with an application program that runs on an operating system on a personal computer, those skilled in the art will recognize that aspects may also be implemented in combination with other program modules.
Generally, program modules include routines, programs, components, data structures, and other types of structures that perform particular tasks or implement particular abstract data types. Moreover, those skilled in the art will appreciate that embodiments may be practiced with other computer system configurations, including hand-held devices, multiprocessor systems, microprocessor-based or programmable consumer electronics, minicomputers, mainframe computers, and comparable computing devices. Embodiments 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.
Embodiments may be implemented as a computer-implemented process (method), a computing system, or as an article of manufacture, such as a computer program product or computer readable media. The computer program product may be a computer storage medium readable by a computer system and encoding a computer program that comprises instructions for causing a computer or computing system to perform example process(es). The computer-readable storage medium can for example be implemented via one or more of a volatile computer memory, a non-volatile memory, a hard drive, a flash drive, a floppy disk, or a compact disk, and comparable media.
Throughout this specification, the term “platform” may be a combination of software and hardware components. Examples of platforms include, but are not limited to, a hosted service executed over a plurality of servers, an application executed on a single server, and comparable systems. The term “server” generally refers to a computing device executing one or more software programs typically in a networked environment. However, a server may also be implemented as a virtual server (software programs) executed on one or more computing devices viewed as a server on the network.
Diagram 100 illustrates the rendering of a street view user interface on three example computing devices. A mapping application rendering the street view user interface may have to be customized into three versions 102, 104, and 106, with each custom version being executed on computing devices 108, 112, and 116, respectively. Each computing device may have a different display requiring the customization. The customized versions of the application 102, 104, and 106 may render the custom street view user interfaces 110, 114, and 118 on respective computing devices 108, 112, and 116.
The computing devices may also include handheld computer, a smart phone, a cellular phone, a Voice Over Internet Protocol (VOIP) phone, a set top box, a vehicle mount computer, a tablet computer, a notebook computer, a netbook computer, a wearable computer, and comparable ones.
As shown in diagram 200, an application according to embodiments (e.g. application 204) may include a scaling module 220 for executing an algorithm, which will allow application 204 to be run with different kinds of displays. Through the algorithm, the layout of the application's user interface may be automatically scaled for a specific display such as the displays of computing devices 208, 212, and 216, thereby not requiring customized versions of the application 204.
Scaling module 220 may provide for vertical scaling (i.e. the ability to run from a minimum number of rows to any number of rows) and horizontal scaling (i.e. the ability to run from a predefined display size such as 3.5″ QVGA dimensions to those with smaller dimensions). Scaling module 220 may also provide enable scaling to wider dimensions. In addition to 3.5″ QVGA, other display formats may also be used as default definitions for scaling the user interface to a specific display size. Other display formats may include, but are not limited to, Quarter Video Graphics Array (QVGA), Half VGA (HVGA), Half QVGA (HQVGA), Quarter QVGA (QQVGA), Quarter Extended Graphics Array (QXGA), and Half XGA (HXGA).
The definitions 332 may include parameters such as number of rows and columns, resolution, presence or absence of a top bar, row height, column width, font height, and comparable ones. The example listing below shows a number of definitions that may be used by an algorithm according to embodiments.
According to some embodiments, a display top bar and a display soft key bar variables may be set. The application 304 may perform the user interface adjustment by performing vertical scaling 336, horizontal scaling 338, and font scaling 340 before the adjusted user interface is rendered (342) without having the application customized Vertical scaling may reject some displays if they do not meet minimum total row requirement. Otherwise, the height of the user interface to be displayed may be scaled based on a round-off function taking into consideration vertical resolution, vertical dots per millimeter (or inch) and minimum row height. The algorithm below is an example of how vertical scaling may be accomplished in an application according to embodiments.
Font scaling may be performed by adjusting font heights for a default display size based on vertical dots per millimeter (or inch). For example, 3.5″ QVGA is a common display format for small displays. For 3.5″ QVGA, the font heights are 3.52 mm and 4.23 mm and these are correspondingly 16 and 19 pixels high. Thus, an example algorithm may scale smaller and larger fonts as:
For horizontal scaling, column widths may be recalibrated on the screen from default display definitions to the specific display. For example, if 3.5″ QVGA display is selected as default, the DPM parameter is 4.567 per mm. Thus, new column widths may be selected as the 3.5″ QVGA column width divided by 4.567 times the horizontal dots per mm parameter for the display. If the resulting overall minimum width is larger than the horizontal resolution of the display, the display may not be used for the application user interface. If the resulting overall minimum width is equal to or smaller than the horizontal resolution of the display, unused space on the screen may be reduced by readjusting some of the columns based on their definitions. This may be done, specifically, for top bar, soft key bar, and content areas. Below is an example algorithm for horizontal scaling in an application according to some embodiments.
In addition to the above discussed scaling operations, a scaling module according to embodiments may also perform adjustment of font sizes in case of rectangular fonts and associate columns, which are to be displayed with the same widths.
The different processes discussed in
Client devices 411-413 may interact with a hosted service and display the user interface for a hosted application from the servers 414, or on individual server 416. Each of the client devices 411-413 may have a display with a different size or type (e.g. resolution). Instead of customizing the hosted application for each different client device (i.e. display), a scaling module may perform vertical, horizontal, and font scaling as discussed previously and automatically adjust the user interface to respective display(s). Relevant data such as display characteristics may be stored and/or retrieved at/from data store(s) 419 directly or through database server 418.
Network(s) 410 may comprise any topology of servers, clients, Internet service providers, and communication media. A system according to embodiments may have a static or dynamic topology. Network(s) 410 may include secure networks such as an enterprise network, an unsecure network such as a wireless open network, or the Internet. Network(s) 410 may also include (especially between the servers and the mobile devices) cellular networks. Furthermore, network(s) 410 may include short range wireless networks such as Bluetooth or similar ones. Network(s) 410 provide communication between the nodes described herein. By way of example, and not limitation, network(s) 410 may include wireless media such as acoustic, RF, infrared and other wireless media. A display-agnostic user interface according to embodiments may also be implemented in non-networked devices.
Many other configurations of computing devices, applications, data sources, and data distribution systems may be employed to implement a platform providing display independent user interface for mobile devices. Furthermore, the networked environments discussed in
Application 522 may perform any tasks that involve interaction with a user through a user interface. To avoid customization of the application user interface for different size or type displays, scaling module 524 may perform vertical, horizontal, and font scaling automatically adjusting the application's user interface to a particular display as discussed previously. This basic configuration is illustrated in
Computing device 500 may have additional features or functionality. For example, the computing device 500 may also include additional data storage devices (removable and/or non-removable) such as, for example, magnetic disks, optical disks, or tape. Such additional storage is illustrated in
Computing device 500 may also contain communication connections 516 that allow the device to communicate with other devices 518, such as over a wired or wireless network in a distributed computing environment, a satellite link, a cellular link, a short range network, and comparable mechanisms. Other devices 518 may include computer device(s) that execute communication applications, other servers, and comparable devices. Communication connection(s) 516 is one example of communication media. Communication media can include therein computer readable instructions, data structures, program modules, or other data. 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.
Example embodiments also include methods. These methods can be implemented in any number of ways, including the structures described in this document. One such way is by machine operations, of devices of the type described in this document.
Another optional way is for one or more of the individual operations of the methods to be performed in conjunction with one or more human operators performing some. These human operators need not be collocated with each other, but each can be only with a machine that performs a portion of the program.
Process 600 begins with operation 610, where display definitions may be determined such as a vertical and horizontal dimension of the display, a resolution of the display, etc. Embodiments may be implemented in square or rectangular displays. At operation 620, vertical scaling may be applied to the user interface followed by horizontal scaling at operation 630. At operation 640, font scaling may reduce (or increase) font sizes for optimum display.
At optional operation 650, rectangular fonts may be adjusted (e.g. if the user interface default is rectangular and the actual display is square or vice versa). At optional operation 660, columns which should be displayed with the same widths may be associated before the scaled user interface is rendered on the user device's display.
The operations included in process 600 are for illustration purposes. Automatically scaling an application user interface may be implemented by similar processes with fewer or additional steps, as well as in different order of operations using the principles described herein.
The above specification, examples and data provide a complete description of the manufacture and use of the composition of the embodiments. Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims and embodiments.