RESPONSIVE USER INTERFACE ENGINE FOR DISPLAY DEVICES

• US 20140055495A1
• Filed: 08/22/2012
• Published: 02/27/2014
• Est. Priority Date: 08/22/2012
• Status: Abandoned Application

• Current Assignee: LG CNS Company Limited (LBHunet Co., Ltd.)
• Original Assignee: LG CNS Company Limited (LBHunet Co., Ltd.)
• Inventors: KIM, Chang Gyum, LIM, Jae Hyun, HWANG, Ah Young
• Application Number:
  US13/591,379
• Publication Number:
  US 20140055495A1
• Time in Patent Office: Days
• US Class Current: 345/660
• CPC Class Codes: G06F 3/14 Digital output to display device ; Cooperation and interconnection of the display device with other functional units
• CPC Class Codes: G09G 2340/0407 Resolution change, inclusive of the use of different resolutions for different screen areas
• CPC Class Codes: G09G 2354/00 Aspects of interface with display user
• CPC Class Codes: G09G 2370/027 Arrangements and methods specific for the display of internet documents
• CPC Class Codes: G09G 5/32 with means for controlling the display position see provisionally G09G5/42

Abstract

Embodiments of the present invention provide a responsive user interface engine for displaying data in a single format on a variety of display device types. Specifically, a responsive user interface engine receives data from a single source intended for display on a plurality of display devices. A common layout for the data is loaded for the display devices. For each display device, the layout is scaled based on the display device type. A first rendering of the data using the scaled layout is performed for each display device. The layout is modified for each display device based on the respective screen size of the display device for optimization. For each display device, the data is rendered a second time based on the modified layout. The respective second rendering may be displayed on each display device as a common user interface.

Claims

1. A responsive user interface engine for generating a common user interface, comprising:

a memory;

a data module configured to receive data intended for display on a first screen of a first display device and a second screen on a second display device and load the data into a memory;

a layout module configured to load a common layout structure into the memory;

a screen size module configured to determine a first screen size associated with the first screen and a second screen size associated with the second screen;

a scaler module configured to perform a first scaling of the common layout structure based on the first screen size and a second scaling of the common layout structure based on the second screen size;

a renderer module configured to perform a first rendering of the data based on the first scaling and a second rendering of the data based on the second scaling;

a modifier module configured to perform a first modification of the first rendering based on the first screen size and a second modification of the second rendering based on the second screen size; and

the renderer module further configured to perform a third rendering of the data based on the first modification and a fourth rendering of the data based on the second modification, wherein the third rendering and the fourth rendering represent a responsive user interface.

2. The responsive user interface engine of claim 1, further comprising an interface module configured to provide the third rendering on the first screen and the fourth rendering for display on the second screen.

3. The responsive user interface engine of claim 1, wherein the data is formatted as hypertext markup language (HTML).

4. The responsive user interface engine of claim 1, wherein the size of the screen is determined using at least one media query.

5. The responsive user interface engine of claim 1, wherein the first screen size and the second screen size are different.

6. The responsive user interface engine of claim 1, wherein the common layout structure comprises at least one cascading style sheet (CSS).

7. The responsive user interface engine of claim 1, wherein the common layout structure is retrieved from a repository.

8. The responsive user interface engine of claim 1, wherein the modifier module comprises a JavaScript module.

9. A method for deploying a responsive user interface engine for generating a common user interface, comprising:

providing a computer infrastructure being operable to;

receive data intended for display on a first screen of a first display device and a second screen on a second display device and load the data into a memory;

load a common layout structure into the memory;

determine a first screen size associated with the first screen and a second screen size associated with the second screen;

perform a first scaling of the common layout structure based on the first screen size and a second scaling of the common layout structure based on the second screen size;

perform a first rendering of the data based on the first scaling and a second rendering of the data based on the second scaling;

perform a first modification of the first rendering based on the first screen size and a second modification of the second rendering based on the second screen size; and

perform a third rendering of the data based on the first modification and a fourth rendering of the data based on the second modification, wherein the third rendering and the fourth rendering represent a responsive user interface.

10. The method of claim 9, the computer infrastructure being operable to provide the third rendering on the first screen and the fourth rendering for display on the second screen.

11. The method of claim 9, wherein the data is formatted as hypertext markup language (HTML).

12. The method of claim 9, wherein the size of the screen is determined using at least one media query.

13. The method of claim 9, wherein the first screen size and the second screen size are different.

14. The method of claim 9, wherein the common layout structure comprises at least one cascading style sheet (CSS).

15. The method of claim 9, wherein the common layout structure is retrieved from a repository.

16. The method of claim 9, wherein the modifier module comprises a JavaScript module.

17. A computer-implemented method for displaying a common user interface, comprising:

receiving data;

loading a format for the data;

determining a first screen size of a first display device and a second screen size of a second display device;

generating a first scaled layout by scaling the format based on the first screen size and a second scaled layout by scaling the format based on the second screen size;

generating a first rendering based on the first scaled layout and a second rendering based on the second scaled layout;

optimizing the first rendering and the second rendering;

generating a third rendering based on the optimizing of the first rendering and a fourth rendering based on the optimizing of the second rendering; and

displaying the third rendering to the first screen and the fourth rendering on the second screen, wherein the third rendering and the fourth rendering comprise a common user interface.

18. The computer-implemented method of claim 17, providing the third rendering on the first screen and the fourth rendering for display on the second screen.

19. A computer program product for generating a responsive 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.

20. The computer program product of claim 19, the computer readable storage medium further comprising instructions to provide the third rendering on the first screen and the fourth rendering for display on the second screen.