JP6002263B2 - Data display system - Google Patents

Description

  The present invention relates to a technique for facilitating data display on a portable information terminal.

  With the widespread use of portable information terminals such as smartphones and tablet terminals, there is an increasing need for using business system data from a web browser of a portable information terminal. For example, Patent Document 1 describes a method of scrolling and displaying long data such as a Web page on a client device in server-based computing.

JP 2013-175206 A

  When looking at long data on the client (personal digital assistant) side, when the data on the screen is scrolled, the heading and the like are also scrolled, so it may be difficult for the user to understand what the data was. For example, when the progress of a large-scale work project is created in a Gantt chart, it is assumed that there is a schedule column at the top of the Gantt chart and each process column on the left side. When a user tries to see a part (progress process part) that the user wants to see, the schedule column and each process column are not displayed on the screen. was there.

  The present invention has been made to solve the above-described problems, and an object of the present invention is to provide a data display system that facilitates data display on a client and can display the data in a short time.

In order to achieve the above object, a data display system of the present invention is a data display system that communicates between a client and a server and displays an image acquired from the server in response to a request from the client. A storage unit for storing data, and data acquired from the storage unit are generated as an image, the generated image is divided into regions for each scrollable direction, and the divided regions are divided into a plurality of blocks. An image management unit that generates an image and stores the generated image for each block in the storage unit, and when data identification information is received from the client, the block size and the value of the fixed area that is not scrolled to each area are given to the client. When a data transmission request is received from the client, the corresponding image is transmitted to the client based on the block identification information. And when the client receives a block size and a fixed area value of each area from the server, based on the screen size of the display section and the block size, the display section When the image corresponding to the block identification information is received from the screen block management unit that transmits the block identification information for the number of blocks determined for each region to the server, possess a screen block arrangement unit for arranging the image received on the display unit, and
On the rectangular screen displayed on the client's display unit, the image management unit is a non-scrollable fixed area, and the upper, lower, left, and right parts other than the four corners scroll on the line. This is a possible area, and the area surrounded by the top, bottom, left and right parts is managed as a scrollable area in the plane.
The screen block management unit sends the identification information of the missing block as an image of the client block to the server according to the amount moved by the scroll operation,
When the block is updated to a different image, the image management unit identifies the updated block identification information, and the data communication unit transmits the corresponding image to the client based on the updated block identification information, The screen block arrangement unit is characterized in that the image corresponding to the updated block identification information is displayed by replacing the image of the existing block being displayed . Other aspects of the present invention will be described in the embodiments described later.

  According to the present invention, data display on the client can be facilitated and displayed in a short time.

1 is a diagram showing a data display system according to an embodiment of the present invention. It is a figure which shows the example of the display screen at the time of acquiring data as one image as a comparative example, (a) is a figure which shows an initial screen, (b) is a figure which shows the display screen at the time of scrolling. is there. It is a figure which shows the example of the Gantt chart which concerns on embodiment. It is a figure which shows the example of the resource graph which concerns on embodiment. It is a figure which shows the data arrangement information memorize | stored in the server. It is a figure which shows the arrangement | sequence of the block of the display screen of a client. It is a flowchart which shows the process of a data display. It is a figure which shows data block information. It is a figure which shows screen block information. It is a figure which shows the block acquired with a server based on the identification information of a block. It is a figure which shows the arrangement | positioning method of the image of a block. It is a figure which shows the identification information of the block at the time of scroll operation. It is a figure which shows the block acquired with a server based on the identification information of the block at the time of scroll operation. It is a figure which shows the example of the line graph which concerns on this embodiment. It is a figure which shows the processing flow of the data display system which concerns on this embodiment, (a) is a processing flow of a Web system, (b) is a processing flow in the case of drawing by the server side concerning this embodiment. is there.

Hereinafter, embodiments of the present invention will be described in detail with reference to the drawings.
FIG. 1 is a diagram showing a data display system according to an embodiment of the present invention. The data display system 100 includes a server 10 and a client 20 that is a portable information terminal such as a smartphone / tablet type terminal. The server 10 and the client 20 can communicate with each other via the network NW.

  The server 10 includes a processing unit 11, a storage unit 14, a communication unit 19 that communicates with the client 20, and the like. The processing unit 11 includes an image management unit 12, a data communication unit 13, and the like.

  The image management unit 12 generates the data acquired from the storage unit 14 as an image, divides the generated image into regions for each scrollable direction, divides the divided region into a plurality of blocks, and generates an image for each block. And the generated image for each block is stored in the storage unit 14.

  When the data communication unit 13 receives a data ID that is data identification information from the client, the data communication unit 13 transmits the block size and the value of the non-scrollable fixed area of each area to the client 20 and receives a data transmission request from the client 20. In this case, the corresponding image is transmitted to the client based on the block ID which is the block identification information.

  The storage unit 14 stores data 15 used by the user, data array information 16 (see FIG. 5) indicating data array information when the data is divided into a plurality of blocks, and when a data request is received from the client. Data block information 17 (see FIG. 8), which is block information of data to be sent, and a block image 18 associated with a block ID, which is block identification information, are stored.

  The storage unit 14 is configured by a RAM (Random Access Memory) / HDD (Hard disk drive) device or the like. The processing unit 11 is realized by executing a program on the RAM / HDD by a CPU (Central Processing Unit). The communication unit 19 exchanges various data and commands with the client 20 and the like via the network NW. Although not shown in the figure, an input unit, a display unit, and the like are included.

  The client 20 includes a processing unit 21, a storage unit 24, a display unit 27, an input unit 28, a communication unit 29 that communicates with the server 10, and the like. The processing unit 21 includes a screen block management unit 22, a screen block arrangement unit 23, and the like.

  When receiving the block size and the fixed area value of each area from the server 10, the screen block management unit 22 determines the number of blocks that can be displayed on the display unit 27 based on the screen size and the block size of the display unit 27. The block ID which is the block identification information for the number of blocks determined for each region is transmitted to the server 10. When receiving an image corresponding to a block ID that is block identification information from the server 10, the screen block arrangement unit 23 arranges the received image on the display unit 27.

  The storage unit 24 stores screen size information 25 that can be displayed on the display unit 27, and screen block information 26 (see FIG. 9) that is displayed on the screen of the display unit 27.

  The data display system 100 according to the present embodiment is a system that aggregates data in a database (for example, the storage unit 14) on a server, visualizes the data according to a request from the client 20, and displays the data on the client 20. The data display system of this embodiment will be described with reference to FIG. 15 in comparison with a general Web system.

  FIG. 15 is a diagram showing a processing flow of the data display system according to the present embodiment, (a) is a processing flow of the Web system, and (b) is a case where drawing is performed on the server side according to the present embodiment. It is a processing flow.

  FIG. 15A is an abstraction of a general processing flow. When using a model view controller of MVC (Model-View-Controller), "Model" that plays the core of processing, "View" that controls display and output, and "View" and " The system is implemented by combining the three elements of “Controller” that controls “Model”. The main process is implemented in “Model”, and “Model” does not perform screen output. The processing result is passed to “View”, and screen display is performed. In this method, the input from the user is received by the “Controller”, and if any processing is required, the “Model” is requested, and if the output is required, the “View” is requested.

  In the case of FIG. 15A, the client corresponds to “View” in the MVC architecture. When there is a request from the client, the data to be displayed is acquired from the database of the server that is “Model”, and “Controller” performs processing such as data processing in response to the user's request. After that, in order to display the processing result, the data is serialized and transferred to the client which is “View”. The client restores the received data to an object, and then draws a screen while calculating the display position of each object. However, when the above method is used for a portable information terminal such as a smartphone / tablet type terminal, it takes time for user interface (UI) responses such as drawing and scrolling, and sufficient operation performance may not be ensured.

  On the other hand, in the processing flow in the case of drawing on the server side according to the present embodiment shown in FIG. 15B, in order to reduce the processing load on the client, the server side that executes a drawing process with a high load on the server side. Use image rendering. The drawing result is transferred to the client as image data. Thereby, the load on the client is only the display of the image, and the load on the client can be reduced. In addition, processing time can be shortened by executing processing performed by a client having only low speed performance on a high speed performance server.

Next, the features of the present embodiment of the present embodiment will be described with reference to FIG. 2, FIG. 3, and FIG.
FIG. 2 is a diagram showing an example of a display screen when data is acquired as one image as a comparative example, (a) is a diagram showing an initial screen, and (b) is a display screen when scrolling. FIG. FIG. 3 is a diagram illustrating an example of a Gantt chart according to the embodiment.

  In the Gantt chart shown in FIG. 2A, a schedule column is displayed at the top, a process column at the left, and a progress status column for each process at the center. Normally, when an image generated as a single image (including character information) such as a Web page is acquired from the server 10 and displayed, the image is displayed on the upper left in order to confirm the content displayed on the lower right. When the user performs a scroll operation through the screen in the direction, the upper schedule column and the left process column are also scrolled together and not displayed on the screen as shown in FIG. Therefore, the user does not know whether the progress status of which process in which process. For this reason, it is necessary for the user to scroll down the image to see the upper schedule column, and to scroll the image right to see the left process column. Need to scroll. On the Gantt chart, comments entered by the administrator such as “Detailed design is delayed” are described.

  FIG. 3 is a diagram illustrating an example of a Gantt chart according to the embodiment. In the case of the Gantt chart shown in FIG. 3, the upper schedule column is a column that can be scrolled to the left and right, the left process column is a column that can be scrolled up and down, and the progress status column in the center includes 2 left and right and up and down. The column is scrollable in the dimension direction. Therefore, the user does not need to scroll the image downward to see the upper schedule column, and does not need to scroll the image to the right to see the left process column.

  FIG. 4 is a diagram illustrating an example of a resource graph according to the embodiment. The resource graph is used, for example, as a project manager monitoring the allocation of each resource (for example, a worker) and efficiently balancing the workload. There is a resource item column at the bottom, an allocation load column at the left, and an allocation status column at the center. In the example shown in FIG. 4, the lower resource item column is a column that can be scrolled to the left and right, the assigned load column on the left is a column that can be scrolled up and down, and the status column in the center includes left and right and up and down. The column is scrollable in the two-dimensional direction. Therefore, the user does not need to scroll the image upward to see the lower resource item column, and the user does not need to scroll the image to the right to see the assigned load column on the left. . That is, according to the data display system 100, the data display on the client can be displayed in an easy-to-understand manner for the user.

  In the data display system 100 according to the present embodiment, when data is displayed on the client 20, the server 10 does not transmit as one image like a Web page. The image management unit 12 of the server 10 generates data acquired from the storage unit 14 as an image, divides the generated image into regions for each scrollable direction, and divides the divided region into a plurality of blocks. Each image is generated, and the generated image for each block is stored in the storage unit 14. Therefore, it can be transmitted to the client 20 in a short time in response to a request from the client 20, and the delay in drawing display can be minimized.

Next, the data display method of FIGS. 3 and 4 will be described in detail.
FIG. 5 is a diagram showing data arrangement information stored in the server. The data array information 16 is held in the storage unit 14 as an array having dimensions in a scrollable direction when the image of the data 15 is divided into blocks. The data arrangement information 16 shown in FIG. 5 includes a top left (TL) region, a top (T) region, a top right (TR) region, a left (L) region, a center (C) region, a right (R) ) Area, bottom left (BL) area, bottom (B) area, and bottom right (BR) area. Each area is divided into blocks, and each area is managed separately for each scrollable direction. In FIG. 5, the display is shown separately for each direction as follows.
For example,
The TL, TR, BL, and BR areas are indicated by cross diagonal lines in the figure.
The T and B areas are a little finer dot display in the figure,
The L and R areas are indicated by diagonal lines in the figure.
The area C is displayed in white in the figure.

  As described above, each area is divided into image blocks of a predetermined size, and the image blocks are arranged in an array having dimensions in a scrollable direction. For example, since the TL area does not scroll in the vertical direction and the horizontal direction, it is stored in the storage unit 14 as a zero dimension (that is, a single block). A region (T, L, R, B) scrolling in one direction divides a block into a one-dimensional array. The central portion is an area that can be scrolled in a two-dimensional direction including the X direction (left-right direction) and the Y direction (up-down direction). Therefore, for example, it is stored in the storage unit 14 as a two-dimensional array.

When the block ID is expressed as (area, X direction, Y direction) as block identification information of each area,
The TL area is (TL, 0,0),
The region of T is (T, 0,0), (T, 1,0), (T, 2,0), ..., (T, 17,0), (T, 18,0),
The region of TR is (TR, 0,0),
The region of L is (L, 0,0), (L, 0,1), (L, 0,2), ..., (L, 0,14), (L, 0,15),
The region of C is (C, 0,0), (C, 1,0), (C, 2,0), ..., (C, 17,15), (C, 18,15),
The region of R is (R, 0,0), (R, 0,1), (R, 0,2), ..., (R, 0,14), (R, 0,15),
The BL area is (BL, 0,0),
The region of B is (B, 0,0), (B, 1,0), (B, 2,0), ..., (B, 17,0), (B, 18,0),
The BR area is (BR, 0, 0).

  That is, the image management unit 12 is a fixed area that cannot be scrolled on the rectangular screen (see FIG. 6) displayed on the display unit 27 of the client 20, and the upper, lower, The left part and the right part are areas that can be scrolled on the line, and the area surrounded by the upper part, the lower part, the left part, and the right part is managed as a scrollable area in the plane.

FIG. 6 is a diagram showing an arrangement of blocks on the display screen of the client. Since the client 20 is a portable information terminal, the number of blocks displayed on the display unit 27 is limited. For example, when the block ID is formed of 25 blocks, the block ID on the initial screen shown in FIG.
The TL area is (TL, 0,0),
The region of T is (T, 0,0), (T, 1,0), (T, 2,0),
The region of TR is (TR, 0,0),
The region of L is (L, 0,0), (L, 0,1), (L, 0,2),
The region of C is (C, 0,0), (C, 1,0), (C, 2,0),
(C, 0,1), (C, 1,1), (C, 2,1),
(C, 0,2), (C, 1,2), (C, 2,2),
The region of R is (R, 0,0), (R, 0,1), (R, 0,2),
The BL area is (BL, 0,0),
The area of B is (B, 0,0), (B, 1,0), (B, 2,0),
The BR area is (BR, 0, 0).

  The region T and the region B are regions that can be scrolled left and right, the region L and the region R are regions that can be scrolled up and down, and the region C is a two-dimensional direction that includes the left and right directions and the up and down directions. This is a scrollable area. The TL region, TR region, BL region, and BR region are fixed regions.

Next, data display processing will be described with reference to FIGS.
FIG. 7 is a flowchart showing data display processing. This will be described with reference to FIG. The client 20 connects to the server 10 and transmits a data ID that identifies the content displayed by the user (step S41). Upon receiving the request (step S31), the server 10 acquires data 15 corresponding to the data ID from the storage unit 14 (step S32), generates the acquired data as an image, and generates the generated image for each scrollable direction. Then, the divided area is divided into a plurality of blocks to generate an image for each block, and the generated image for each block is stored as the block image 18 in the storage unit 14 (step S33).

  For example, in the case of a Gantt chart, the data 15 stored in the storage unit 14 is a single piece of data including character information such as the progress status of each process, comments in the progress status, and due date. For this reason, first, the data 15 is generated as one image, and then, as shown in FIG. 5, the image is divided into a plurality of blocks for each area to generate an image for each block. This makes it possible not only for models that allow data to be clearly divided into blocks for each product, such as “displaying the inventory transition of a large number of products”, but also when it is difficult to divide the whole into a single Gantt chart. Applicable.

  When the server 10 is ready to complete drawing to the client 20, the server 10 transmits a drawing completion notification to the client 20 and also transmits the data block information 17 (step S34).

  FIG. 8 is a diagram showing data block information. The data block information 17 includes the block size and the value of a fixed area that is not scrolled in each area. The data block information 17 has the width and height per block and the value of the fixed area, the height of the T area that is a fixed area that does not scroll in the vertical direction on the upper side, and does not scroll in the vertical direction on the lower side. The height of the B area that is the fixed area, the width of the L area that is the fixed area that does not scroll horizontally on the left side, the width of the R area that is the fixed area that does not scroll horizontally on the right side, and the center portion The width and height of the region C are configured. Specifically, as the value of the fixed area, the height (H) of the T area on the upper side is 100 pixels. Similarly, the width (W) of the L area on the left side is 100 pixels. In the case of the example shown in FIG. 8, since the height of the area B is “0” (zero), it indicates that the area B is not set. Similarly, since the width of the R region is zero, it indicates that the R region is not set.

  In the example of FIG. 8, the width and height (ie, size) per block are uniform, but it is not necessary to be limited to this. The widths and sizes of the fixed regions (for example, the T region, the B region, the L region, and the R region) shown in FIG. 5 are independent from each other, and the central region (for example, The size of the block in area C) is also independent. For example, even if the size of one block in the central area is 100 × 100 pixels, the height of the upper fixed area can be set to 280 or the like.

  Returning to FIG. 7, when the screen block management unit 22 of the client 20 receives the data block information 17 including the block size and the fixed area value of each area from the server 10 (step S42), the screen size of the display unit 27 is displayed. Based on the received block size, screen block information 26 that can be displayed on the display unit 27 is generated (step S43). That is, the screen block management unit 22 determines the number of blocks that can be displayed on the screen, and transmits a block ID that is identification information for the number of blocks determined for each area to the server 10 together with the data transmission request (step S44). .

  FIG. 9 is a diagram showing screen block information. The screen block information 26 illustrated in FIG. 9 is an example of the case of displaying on a smartphone. Specifically, based on the screen size information 25 (for example, 500 × 500 pixels) and the data block information 17 shown in FIG. 8, the upper T region has 4 blocks arranged in the left-right direction, In the area L, four blocks are arranged in the vertical direction. The lower B area is not displayed because the height is “0”, and the right R area is not displayed because the width is “0”. In the central area C, 4 blocks × 4 blocks are arranged. Further, only one block of the TL area is arranged at the upper left. Each block ID described in the screen block information 26 corresponds to the block ID shown in FIG.

  As shown in FIG. 9, when the fixed area is not displayed, by setting the width and height to “0”, the screen configuration can be flexibly changed according to the data content to be displayed. Further, when the fixed areas are adjacent to each other, the display area of the entire screen is displayed as a rectangle by arranging a non-scrolling area (indicated by cross hatching in the figure) at the boundary.

  The screen block size and the scroll unit are independent. For example, even when the screen block size is 100 × 100, an operation of scrolling by 10 pixels upward is possible.

Returning to FIG. 7, each block ID requested by the screen block management unit 22 to request the server 10 is based on the screen block information 26 shown in FIG.
(TL, 0,0),
(T, 0,0), (T, 1,0), (T, 2,0), (T, 3,0),
(L, 0,0), (L, 0,1), (L, 0,2), (L, 0,3),
(C, 0,0), (C, 1,0), ..., (C, 2,3), (C, 3,3)
It is.

  Returning to FIG. 7, when the server 10 receives the request (step S35), the server 10 transmits an image corresponding to the requested block ID to the client 20 (step S36).

  FIG. 10 is a diagram illustrating blocks acquired by the server based on the block identification information. Based on the data array information 16 shown in FIG. 10, an image corresponding to the block ID of the portion surrounded by a thick line is transmitted to the client 20. At this time, the data communication unit 13 of the server 10 transmits the block ID and the image in association with each other.

Specifically, by adding meta information of block ID and using a literal format of JavaScript (registered trademark),
{
region: center,
xindex: 0,
yindex, 1,
imagedata: (Image data converted into a string)
}
And so on. Then, when receiving the image corresponding to the block ID from the server 10 (Step S45), the screen block arrangement unit 23 of the client 20 arranges the received image on the display unit 27 (Step S46).

  FIG. 11 is a diagram illustrating an arrangement method of block images. The client 20 places the image of each block at the corresponding position at the timing of receiving the image. Since meta information capable of specifying the arrangement position is added to the image, the image generated by the server 10 can be reproduced on the client 20 by arranging like the tile based on the meta information. In addition, since the image is transmitted for each area, the scrollable direction is limited for each area, so that a fixed area can be realized.

  Returning to FIG. 7, the screen block management unit 22 determines whether or not a scroll operation has been detected on the image of the client 20 (step S47). If no scroll operation is detected (No in step S47), the process proceeds to step S47. Returning, when the scroll operation is detected (step S47, Yes), the process returns to step S43.

  FIG. 12 is a diagram showing block identification information when a scroll operation is performed. The screen block information 26 shown in FIG. 12 is a state in which the screen block information 26 shown in FIG. 9 is scrolled by one block in the upper left direction. In this case, a request is made for a block ID that is identification information of a block that is lacking as a block image. Specifically, (T, 4,0), (C, 4,1), (C, 4,2), (C, 4,3), (C, 4,4), (L, 0, 4), (C, 1, 4), (C, 2, 4), (C, 3, 4).

  FIG. 13 is a diagram illustrating blocks acquired by the server based on block identification information when a scroll operation is performed. Based on the data array information 16 shown in FIG. 13, an image corresponding to the block ID of the portion surrounded by a thick line is transmitted to the client 20. At this time, the data communication unit 13 of the server 10 transmits the block ID and the image in association with each other.

  According to the data display system 100 of the present embodiment, the example of the Gantt chart is shown in FIG. 3 and the example of the resource graph is shown in FIG. 4, but the present invention is not limited to this. For example, the present invention can be applied to display of various graphs (line graph, scatter graph, etc.). FIG. 14 is a diagram illustrating an example of a line graph according to the present embodiment. The left area of the screen is an L area that can be scrolled up and down, the lower left corner area of the screen is a non-scrollable BL area, the lower part is a B area that can be scrolled left and right, and other areas. The area is a C area that can be scrolled in a plane. Even if the scroll operation is performed on the screen of the client 20, the headings of the L area, the BL area, and the B area are always displayed, and the client 20 displays the data display in an easy-to-understand manner for the user who uses the client 20. can do.

  In this embodiment, the image management unit 12 of the server 10 creates and manages an image for each block, but is not limited to this. Specifically, when the image of the block is updated to a different image by an administrator or the like, the image management unit 12 specifies the identification information of the updated block, and the data communication unit 13 identifies the updated block. The corresponding image is transmitted to the client 20 based on the information. The screen block arrangement unit 23 of the client 20 displays the image corresponding to the updated block identification information by replacing the image of the existing block being displayed. Thereby, the user using the client 20 can see the latest data.

DESCRIPTION OF SYMBOLS 10 Server 11 Processing part 12 Image management part 13 Data communication part 14 Storage part 15 Data 16 Data arrangement information 17 Data block information 18 Block image 20 Client 21 Processing part 22 Screen block management part 23 Screen block arrangement part 24 Storage part 25 Screen size Information 26 Screen block information 100 Data display system NW network

Claims (1)

A data display system for communicating between a client and a server and displaying an image acquired from the server in response to a request from the client,
The server
A storage unit for storing data;
The data acquired from the storage unit is generated as an image, the generated image is divided into regions for each scrollable direction, the divided region is divided into a plurality of blocks, and an image for each block is generated, An image management unit for storing the generated image for each block in the storage unit;
When data identification information is received from the client, the block size and the non-scrollable fixed area value of each area are sent to the client,
A data communication unit that, when receiving a data transmission request from the client, transmits a corresponding image to the client based on the identification information of the block;
The client
When the size of the block and the value of the fixed area of each area are received from the server, the number of blocks that can be displayed on the display unit is determined based on the screen size of the display unit and the size of the block. A screen block management unit for transmitting identification information of the blocks for the determined number of blocks to the server;
When receiving the image corresponding to the identification information of the block from the server, it has a, a screen block arrangement unit for arranging the image thus received on the display unit,
In the image management unit, on the rectangular screen displayed on the display unit of the client, the four corners of the screen are non-scrollable fixed areas, and the upper, lower, left, and right parts other than the four corners are It is an area that can be scrolled on a line, and the area surrounded by the upper part, the lower part, the left part, and the right part is managed as a scrollable area in the plane,
The screen block management unit transmits the identification information of the block that is lacking as an image of the block of the client to the server according to the amount moved by the scroll operation,
When the block is updated to a different image, the image management unit specifies identification information of the updated block, and the data communication unit selects a corresponding image based on the updated block identification information. The data display system , wherein the data is transmitted to the client, and the screen block arrangement unit displays an image corresponding to the updated block identification information by replacing the image of the existing block being displayed .

Images