Patent Application
20140059424
In general, embodiments of the present invention provide an approach for displaying data on display devices. Specifically, embodiments of the present invention relate to an approach for displaying data in a single format on a variety of display device types.
The growth of electronic display devices such as mobile phones, computers, and personal digital assistants (PDAs) has exploded in recent years. Electronic display devices are well known and used for a wide variety of applications for which information, and user interaction with information, are critical. Given the plethora of information presented to users of electronic display devices, it is important that the displays be efficiently used so as to present as much useful information as possible while maintaining clarity and ease of use when interacting with the presented information.
In today's world, it is increasing likely that one person may own several of the various electronic display devices. Having a variety of different display devices, however, can make it difficult for a user to navigate, find, and browse the different types of data content because most of the different display devices on the market today have a unique interface. A single user of multiple display devices, therefore, must learn a new interface for each new display device to consume the same content on the different display devices. For some users, it can be difficult to switch between the many different devices and the different user interfaces.
In addition, the frequent development of new programming efforts for different devices increases the development costs and maintenance. When a new device is introduced, the lack of responsiveness of the new device continues to occur in a mobile environment. One current technology is to use the cascading style sheet (CSS) media queries which can control various display devices, but a complex system in an enterprise environment may not work smoothly. Typically, the screen layout and user interface design theme are selected by the developer of the different devices and, therefore, quality control becomes an issue. Heretofore, several unsuccessful attempts have been made to address these shortcomings.
U.S. Patent Application 20100020102 discloses a method for browsing information on a hand-held device having a display by adjusting the view on the display device in a manner as natural as possible so that the user of the hand-held device can concentrate on the information displayed on the display device and not on the adjustment of the displayed information.
U.S. Patent Application 20100060549 discloses methods and systems that dynamically generate different user environments from a handheld device for secondary devices with displays of various form factors.
U.S. Pat. No. 6,976,226 discloses a method and system that translates tabular data prepared for one display format into a second display format.
U.S. Pat. No. 6,948,002 discloses a method and system of interfacing a computer system executing commercial transactions initiated from communication devices, each communication device having a display with custom display parameters.
U.S. Pat. No. 6,636,243 discloses a system and method for displaying a status of critical indicators on diverse display devices and indicating a history of change statuses.
U.S. Pat. No. 6,181,300 discloses a display data format conversion circuit and method that facilitates display of data on a plurality of display devices based on display data of a source display device.
None of these references, however, teach a single user interface tool that varies the display and size when rendering data from a single source on multiple display devices.
In general, embodiments of the present invention provide an approach for displaying data in a single format on a variety of display device types. Specifically, data from a single source is received for a display device among multiple display devices. A layout for the data is loaded for the display device. The layout is scaled for the display device based on the display device type. A first rendering of the data using the scaled layout is performed. The layout is modified based on the screen size of the display device for optimization. The data is rendered a second time based on the modified layout. The rendering is displayed on the display device as a common user interface.
A first aspect of the present invention provides a computer-implemented method for displaying a common user interface on a display device among a plurality of display devices, comprising: receiving data intended for display on a display device having a screen; loading a common layout structure; determining a size of the screen; scaling the common layout structure based on the size of the screen; performing a first rendering of the data using the scaled common layout structure; modifying the scaled common layout structure based on the size of the screen; performing a second rendering of the data using the modified common layout structure; and displaying the second rendering on a screen of a display device as a common user interface.
A second aspect of the present invention provides a system for displaying a common user interface on a display device among a plurality of display devices, comprising: a receiving component configured to receive data intended for display on a screen of a display device; a loading component configured to load a common layout structure; a determining component configured to determine a size of the screen; a scaling component configured to scale the common layout structure based on the size of the screen; a rendering component configured to perform a first rendering of the data using the scaled common layout structure; a modifying component configured to modify the scaled common layout structure based on the size of the screen; the rendering component further configured to perform a second rendering of the data using the modified common layout structure; and a providing component configured to provide the second rendering to the display device as a common user interface.
A third aspect of the present invention provides a computer program product for generating a common user interface for a display device among a plurality of display devices, the computer program product comprising a computer readable storage medium, and program instructions stored on the computer readable storage medium, to: receive data intended for a screen of a display device; load a common layout structure; determine a size of the screen; scale the common layout structure based on the size of the screen; perform a first rendering of the data using the scaled common layout structure; modify the scaled common layout structure based on the size of the screen; and perform a second rendering of the data using the modified common layout structure, wherein the second rendering represents a common user interface.
These and other features of this invention will be more readily understood from the following detailed description of the various aspects of the invention taken in conjunction with the accompanying drawings in which:
The drawings are not necessarily to scale. The drawings are merely schematic representations, not intended to portray specific parameters of the invention. The drawings are intended to depict only typical embodiments of the invention, and therefore should not be considered as limiting the scope of the invention. In the drawings, like numbering represents like elements.
Embodiments of the present invention provide an approach for displaying data in a single format on a variety of display device types. Specifically, data from a single source is received for a display device among multiple display devices. A layout for the data is loaded for the display device. The layout is scaled for the display device based on the display device type. A first rendering of the data using the scaled layout is performed. The layout is modified based on the screen size of the display device for optimization. The data is rendered a second time based on the modified layout. The rendering is displayed on the display device as a common user interface.
The layout of each display device for displaying data may differ depending on the device. For example, smartphone layout 202 may comprise only a single column due to the slim width of the smartphone. However, tablet layout 204 may be able to include multiple columns because it may have a greater width than a smartphone. However, tablet layout 204 may have some constraints when attempting to display a large amount of data. To that end, tablet layout 204 may overlap certain regions, such as 2 depth popup menu 230 may overlap with 1 depth popup menu 232, content 234, and footer 236. Certain regions, such as content 234 may vary in size depending on the content being displayed in that region and other surrounding regions. Having the largest display screen of the three example display devices, desktop layout 206 may include multiple rows and columns of data, require no overlapping of different regions, and provide ample space for each respective region, such as content 250.
Smartphone 302A illustrates a format requiring a slider touch event typical on many smartphones having a slider touch screen. A common user interface on today's smartphone includes a touch screen, which is an electronic visual display that can detect the presence and location of a touch within a display area. One example slider touch event is “unlocking” the phone for use. The smartphone may also have a default lock screen. The lock screen is brought up on the touch screen of the smart phone when the user wakes up the phone by, for example, depressing a wakeup button on the phone. The lock screen may provide an option to “unlock” the phone via a slider. Once the user slides the slider to unlock the phone, the other functions of the phone become available to the user. Due to the limited display area of a typical smart phone, the slider may consume much of the display screen.
Tablet 304A illustrates an example tablet tap format requiring a touch screen event. Similar to the smart phone example above, many tablets also are capable of handling one or more slider touch events, such as unlocking the tablet. However, the size of the tablet generally allows for the presentation of more data to a user to the increased display area compared to a typical smart phone.
Desktop 306A illustrates an example desktop tap format having a responsive shuttle. The desktop 306A may allow for use of a shuttle rather than the slider used in smart phone 302A and tablet 304A due to the increase display area of the desktop 306A. The display screen of a desktop typically has a greater display area than either a smart phone or tablet allowing for data to be presented in a different way and in a different size. The use of a larger display device may also allow for the display of more data on a single screen. The presentation of the same data may need more than one screen when being presented to a user on a smaller display device.
At 510, the screen size of the display device is determined using media queries. At 512, the common layout structure for the display device is scaled using the media queries. Without media queries, fluid layouts would struggle to adapt to the array of screen sizes on the hundreds of devices out there. Fluid layouts can appear cramped and unreadable on small mobile devices and too large and chunky on big widescreen displays. Media queries make it possible to adapt typography to the size and resolution of the user's device, making it a tool for crafting a more pleasurable device experience.
At 514, a first rendering of the data is performed after the scaling process is performed. At 516, a JavaScript load process is performed to optimize the respective user interface. At 518, a screen size of a display area of the display device is determined. For example, a screen size of 700 px (or pixel width of 700 pixels) may be defined as a smartphone. A screen size of more than 700 px, but less then 1280 px, may be defined as a tablet. A screen size of more than 1280 px may be defined as a PC. At 520, the JavaScript that is loaded is determined by the screen size of the display device. For example, at 522, a JavaScript module for a PC may be loaded when the device type is determined to be a PC. At 524, a JavaScript module for a tablet may be loaded when the device type is determined to be a tablet. At 526, a JavaScript module for a smartphone may be loaded when the device type is determined to be a smartphone.
At 528, the JavaScript is used to alter the scaled common layout structure. For example, the JavaScript may change a HTML markup menu, a tab, and/or an image file in order to optimize a user interface. At 530, the CSS is modified by the JavaScript module that is used. At 532, a second rendering of the data using the modified common layout structure is performed. The second rendering is displayed on the screen of the display device as a common user interface.
It should be noted that, in some alternative implementations, the functions noted in the blocks may occur out of the order noted in
An exemplary common user interface tool may be described in the general context of computer-executable instructions, such as program modules, being executed by a display device. Generally, program modules include routines, programs, people, components, logic, data structures, and so on that perform particular tasks or implements particular abstract data types. Furthermore, an implementation of an exemplary common user interface tool may be stored on or transmitted across some form of computer readable media. Computer readable media can be any available media that can be accessed by a display device. By way of example, and not limitation, computer readable media may comprise “computer storage medium” and “communications media.”
“Computer storage medium” may include volatile and non-volatile, 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 medium includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical 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 a display device.
“Communication media” typically embodies computer readable instructions, data structures, program modules, or other data in a modulated data signal, such as carrier wave or other transport mechanism. Communication media also includes any information delivery media.
The term “modulated data signal” means a signal that has one or more of 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 are also included within the scope of computer readable media.
It is apparent that there has been provided with this invention an approach for providing a common user interface for multiple display devices. While the invention has been particularly shown and described in conjunction with a preferred embodiment thereof, it will be appreciated that variations and modifications will occur to those skilled in the art. Therefore, it is to be understood that the appended claims are intended to cover all such modifications and changes that fall within the true spirit of the invention.
