SCREEN

FIELD OF INVENTION

The present invention relates to a system and method to compile web content in a single display screen.

BACKGROUND OF THE INVENTION

Internet has become a very important part of a human's life. In fact, internet is a medium for people to communicate, doing businesses, education and so on. Websites or web applications which are a set of related web pages served from a single web domain serve the purpose for a user to execute those actions mentioned. However, the user needs to search multiple websites or web applications to view multiple data. Users have to perform repetitive actions such as logging in and navigating page for each of the websites or web applications which is troublesome to the users.

In regards to this, a US Patent Publication No. US 2006/0161860 A1 discloses a method for displaying a plurality of windows on a display screen. The method includes the steps of associating a first window with a second window, where the second window is independent of the first window, arranging the first window and the second window which are configured to fit within a predetermined region of the display screen, and notifying an application program corresponding to the first window. An indicator may appear on the display as a target region when a user desires to associate the first and second windows. Subsequent operations performed on the first window are performed automatically on the second window. For example, when a user is comparing two documents, the user can roll down one document and have the second document automatically scroll as well. However, such system changes the orientation of the first window and at least one second window in order to fit into the display. Their size and windows will be shrunk. The more windows needed to be displayed, the smaller the size of each window. Therefore, there is a need for a system and method to a system and method to compile web content in a single display screen that addresses the drawbacks of the existing system. SUMMARY OF INVENTION

The present invention relates to a system and method to compile web content in a single display screen. The system (100) retrieves web content of multiple websites or web applications and presents the web content in an optimal view whereby images from the websites or web applications are compiled in a display screen of a user device to minimize the wasted area of the display screen. The system (100) comprises of a plurality of Application Servers (101); a Data Crawler Server (102); a Display Optimizer Server (103); and a User Device (104).

Preferably, the Display Optimizer Server (103) includes a Session Output Compiler (201) configured for receiving output from the Data Crawler Sever (102) which categorizes and renders the web content to images; and a Balanced View Optimizer Module (202) configured for arranging and organizing the images in an optimal way by reducing the wasted area of the User Device (104) horizontally and vertically, minimizing the number of rows of images in the User Device (104) and images width deviation across all rows in The User Device (104).

The method to compile and organize web content is characterised by the steps of retrieving web content from the Data Crawler Server (102) by the Session Output Compiler (201); rendering the web content to images; checking the size of the User Device (104) screen; separating the images into several groups; performing a Robust Sequencing Filling step and Backward Cascaded Replacement step for each group

Preferably, the step of Robust Sequencing Filling include the steps of sorting all images in a group according to width, x,; arranging the image that has the maximum width, x _max to the image that has the minimum width, x placing image width, X, wider than the width of the User Device (104) screen ,X ₀ in holder-B; placing image width, x, smaller than the width of the User Device (104) screen ,X ₀ in holder- A; placing first image from holder-A on the output display row, s and s is initialized to zero; selecting the next row and increasing s by 1 ; picking image with a certain width, x from holder-A from maximum width to minimum width subsequently; placing x _pick on the left or right side of row s; placing x _pick in holder-A if the total width of images is bigger than the User Device (104) screen; placing x _piCk at row s A if the total width of images is smaller than the User Device (104) screen; and generating output the User Device (104) screen.

Preferably, the step of Backward Cascaded includes the steps of identifying the image original location from x _min ,originai to x _max ,originai; setting the image of x _min ,originai to the image of x _mi ; replacing the next image with the image of x _min if x _rep iace is wider than x _min ; placing the image of x _ma x _, originai to the location of the image of x _mi n _, originai if the image of x _re iace is the image of x _m ax,onginai; generating output to the User Device (104) screen; comparing the number of row, s and the difference of the maximum total width length display and the minimum total width length display of the User Device (104) screen based on Robust Sequencing Filling step and the output display of the User Device (104) screen based on Backward Cascaded Replacement; and selecting better output display based on the minimum number of row, s and the smaller difference between the total maximum width and the total minimum width.

BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings, which are incorporated in and constitute a part of the specification, illustrate embodiments of the invention and, together with the description, serve to explain the principles of the invention.

FIG. 1 illustrates a system to compile web content in a single display screen (100) according to an embodiment of the present invention.

FIG. 2 illustrates a block diagram of an architecture of a Display Optimizer Server (103) of the system (100) of FIG 1. FIG. 3 illustrates a flowchart of a method to compile web content in a single display screen according to an embodiment of the present invention.

FIG.4 illustrates an exemplary of multiple webpages categories of Images Outputs. FIG. 5 illustrates a display screen of a User Device (104) and an image from a website.

FIG. 6 illustrates a flowchart of sub steps of a Robust Sequencing Filling step of the method of FIG. 3.

FIG. 7 illustrates an exemplary of images of multiple websites or web applications arranged according to their width. FIG. 8 illustrates an exemplary output of a User Device (104) screen based on the Robust Sequencing Filling step of FIG. 6.

FIG. 9 illustrates a flowchart of sub steps of a Backward Cascaded Replacement step of the method of FIG.3.

FIG. 10 illustrates sub steps of Backward Cascaded Replacement step of FIG.9.

FIG. 11 illustrates an exemplary output of a User Device (104) screen based on the Backward Cascaded Replacement step of FIG. 9.

DESCRIPTION OF THE PREFFERED EMBODIMENT

A preferred embodiment of the present invention will be described herein below with reference to the accompanying drawings. In the following description, well known functions or constructions are not described in detail since they would obscure the description with unnecessary detail.

FIG.1 shows a system to compile web content in a single display screen (100) according to an embodiment of the present invention. The system retrieves web content such as news, bank account details from multiple websites or web applications and presents the web content in an optimal view whereby images from the websites or web applications are arranged to minimize the wasted area of the display screen. The web content is compiled in one display screen of a user device which can either be a laptop, mobile phone, tablet or other electronic devices. The system (100) comprises of a plurality of Application Servers (101), a Data Crawler Server (102), a Display Optimizer Server (103), and a User Device (104). The plurality of Application Servers (101) is connected to the Data Crawler Server (102) via internet or local area network. Each application server provides web content such as websites, web applications, web services and the like to the User Device (104).

The Data Crawler Server (102) is connected to the plurality of Application Servers (101 ) and the Display Optimizer Server (103) via internet or local area network. It reads the pages of the websites or web applications and other web content to identify the web content needed to be retrieved from the Application Servers (101). The Data Crawler Server (102) sends the web content to the Display Optimizer Server (103).

The Display Optimizer Server (103) is connected to the Data Crawler Server (103) and the User Device (104) via internet or local area network. It retrieves the web content of the websites or web applications from the Data Crawler Server (102) and presents the arranged and structured images output to the User Device (104). Referring to FIG.2, it illustrates a block diagram of an architecture of the Display Optimizer Server (103) of the system (100) of FIG.1. The Display Optimizer Server (103) comprises of a Session Output Compiler (201 ) and a Balanced View Optimizer Module (202). The Session Output Compiler (201) receives output from the Data Crawler Sever (102) which categorizes and renders the web content to images. The Balanced View Optimizer Module (202) arranges and organizes the images in an optimal way by reducing the wasted area of the User Device (104) horizontally and vertically. The Balanced View Optimizer Module (202) also minimizes the number of rows of images in the User Device (104) and images width deviation across all rows in the User Device (104).

The User Device (104) is connected to the Display Optimizer Server (103) via internet or local area network. It displays the compact and optimized website images to the user.

FIG. 3 illustrates a flowchart of a method to compile web content in a single display screen according to an embodiment of the present invention. Initially, the Session Output Compiler (201) retrieves the web content from Data Crawler Sever (102). The Session Output Compiler (201) renders the web content obtained from Data Crawler Sever (102) to images according to several categories which referred as Images Outputs. An exemplary of multiple webpages categories of Images Outputs is shown in FIG.4 wherein the Images Outputs are categorized based on the content of the websites or web applications. CatA (10) comprises of the images from the lifestyle websites or web applications wherein 11 a is the image from the first lifestyle website or web application, 11 b is the image from the second lifestyle website or web application and 11c is the image from the third lifestyle website or web application. CatB comprises of the images from the technology websites or web applications wherein 21 a is the image from the first technology website or web application, 21 b is the image from the second technology website or web application and 21 c is the image from the third technology website or web application. CatC comprises of the images from the personal websites or web applications wherein 31a is the image from the first personal website or web application, 31 b is the image from the second personal website or web application and 31c is the image from the third personal website or web application.

Thereon, the Balanced View Optimizer Module (202) checks the screen of the User Device (104) as in step 301. A display screen of a User Device (104) and an image from a website are shown in FIG.5. Based on FIG.5, X ₀ represents the width of the User Device (104) screen and Y ₀ represents the height of the User Device (104) screen while x, refers to the width of the image and y, refers to the height of the image. The measurements for the width and height of the image may be in pixels, centimetres or inches. The User Device (104) screen is divided into two portions. The bottom portion is referred as holder-B while the top portion is referred as holder-A.

Next, the Balanced View Optimizer Module (202) separates the images into several groups as in step 302. The images are separated using K Freedman- Diaconis rule based on the height of each image which is represented by y,. The total group, K is obtained by using the following formula:

Where max _height refers to the maximum height of the image, min _height refers to the minimum height of the image, IQR = Q ₃ - (interquartile range) and N refers to the total number of images. Interquartile range of the height of the images is computed by arranging the value of the height of the images in an ascending order. The arranged values are considered as a collection. Then, the collection is divided into two. The median for the upper half and the median for the lower half of the group are determined. Next, the difference of the upper half median and the lower half median is computed in order to get the value of the interquartile range of the value of the image height.

The Balanced View Optimizer Module (202) then arranges the groups of images in a descending order based on the images heights. The Balanced View Optimizer Module (202) selects the first group as in step 303 wherein the first group is the group with the maximum height. In step 304 the Balanced View Optimizer Module (202) performs a Robust Sequencing Filling and Backward Cascaded Replacement step to the first group. The Balanced View Optimizer Module (202) performs Robust Sequencing Filling and Backward Cascaded Replacement step for each group as in decision 305 and step 306. The output of images from all the groups that have been separated based on height in step 302 are merged to fit into the User Device (104) screen as in step 307. Finally, the output is compiled and sent to the User Device (104) as in step 308 to be viewed by the user.

FIG. 6 illustrates a flowchart of sub steps of a Robust Sequencing Filling step of the method of FIG. 3. The Balanced View Optimizer Module (202) sorts all images in the group according to width, x, as in step 601 _. The Balanced View Optimizer Module (202) then arranges the image that has the maximum width, x _max to the image that has the minimum width, x _min as in step

602. An exemplary of images of multiple websites or web applications arranged according to their width shown in FIG.7. Next, the image width, x, that is wider than the width of the User Device (104) screen, X ₀ is placed at holder-B of the output User Device (104) screen, as in step

603. The image with width x, that is smaller than the width of the User Device (104) screen, X ₀ is placed in holder-A as in step 604. The Balanced View Optimizer Module (202) iterates all images in holder-A and the row of the User Device (104) screen, s. The first image from holder- A with width x, is placed on the User Device (104) screen is initialized to zero (s=0) as in step 605.

Next, s is increased by 1 as in step 606, wherein the Balanced View Optimizer Module (202) selects the next row to place the next image from holder-A. The image with a certain width, x is picked from holder-A wherein the image with maximum width to the image with minimum width is picked subsequently as in step 607. The image that has been picked, x _piCk is placed either on the left or right side of row-s of the output display in step 608.

The Balanced View Optimizer Module (202) then determines whether the total width of the images in row s is smaller, equal or larger than the width of the User Device (104) screen, X ₀ as in decision 609. If the total width of all the images at row s is bigger than the User Device (104) screen, x _piCk is placed in holder-A as in step 612. Otherwise, x _pick is chosen and placed at row s as in step 610. The The Balanced View Optimizer Module (202) determines whether x _pick is the image with the minimum width which is the last image in holder A, x _min as in decision 611. If x _pick is not x _min , the module repeats from step 607 which is the image with width x is picked from holder- A. Otherwise, the Balanced View Optimizer Module (202) determines whether holder- A has more images as in decision 613. If holder-A has more images, the module repeats from step 606 which s is increased by 1 wherein the Balanced View Optimizer Module proceeds to the next row. Otherwise, a display output is generated in User Device (104) screen as in step 614. FIG. 8 is an exemplary output of a User Device (104) screen based on the Robust Sequencing Filling step of FIG. 6. Based on FIG. 8, the total number of row, s is 6.

The Balanced View Optimizer Module (202) then proceeds to the Backward Cascaded Replacement step in step 615 which is to initiate the Backward Cascaded step.

Referring to FIG.9, it illustrates a flowchart of sub steps of a Backward Cascaded Replacement step of the method of FIG.3. The image in the original location that has minimum width x _mi n _,o ri _g in _a i and the image in the original location that has maximum width x _max,o ri _g in _a i is identified as in step 901. The original location is the location where the image is placed in Backward Cascaded Replacement step. In step 902, the image of x _m in,onginai is set to the image of x _min . The image of x _min is used to replace the next image that is wider than the image of x _min which is denoted as x _rep iace as in step 903. The Balanced View Optimizer Module (202) then determines whether the image of x _rep iace is the image of x _ma x,originai as in decision 904. If the image of x _rep iace is not the image of x _ma x,originai, the image of x _min is set to be the image of x _rep iace as in step 905 and the Balanced View Optimizer Module (202) repeats from step 902 which is to set the next image of x _mi n,originai to the image of x _min . Otherwise, the image of Xmax,originai is placed in the original location of the image of x _m in,onginai in step 906. FIG. 10 illustrates sub steps of Backward Cascaded Replacement step of FIG.9. The image that has the minimum width, x _mi n,originai replaces the subsequent image that is wider than the image of x _mi n,originai- The process continues until the image that has the maximum width x _ma x,originai replaces the image of x _mi n,originai- Output of the User Device (104) screen is generated as in step 907. FIG. 11 illustrates an exemplary output of a User Device (104) screen based on the Backward Cascaded Replacement step of FIG. 9. Based on FIG. 11 the total row, s is 6.

In step 908, the output display of the User Device (104) screen based on Robust Sequencing Filling step and the output display of the User Device (104) screen based on Backward Cascaded Replacement step are compared. Both of the output displays are compared based on total number of rows, s of the User Device (104) screen based on Robust Sequencing Filling step and the User Device (104) screen based on Backward Cascaded Replacement step. A better output display of the User Device (104) screen is selected in step 909. The display that has the minimum number of rows is chosen. The comparison is also done by measuring the difference between the maximum total width length and minimum total width length of each display. The display that has the smallest difference between the maximum total width length and minimum total width length is chosen. Based on the example given, the output display of the User Device (104) screen based on Robust Sequencing Filling step and the output display of the User Device (104) screen based on Backward Cascaded Replacement step produce the same number of row, s which is 6. Thus, the comparison is based on the difference of the maximum total width length display and the minimum total width length display wherein the difference of the total width length display of User Device (104) screen based on Backward Cascaded Replacement step is smaller than the total width length of the User Device (104) screen display based on Robust Sequencing Filling step. Therefore, User Device (104) screen based on Backward Cascaded Replacement step is chosen as a better output display.

Finally, the output display selected in step 909 is merged to be fitted into a single screen with an output in holder-B as in step 910.

While embodiments of the invention have been illustrated and described, it is not intended that these embodiments illustrate and describe all possible forms of the invention. Rather, the words used in the specifications are words of description rather than limitation and various changes may be made without departing from the scope of the invention.