JP2833158B2 - Browser display method for hypermedia device - Google Patents

Description

Description: BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention relates to a browser display method for a hypermedia device, and more particularly, to a method for displaying both a hierarchical structure and a network structure of a link.

[Prior Art] Hypermedia devices are capable of freely linking information such as documents, pictures, images, sounds, etc. with links, and develop applications suitable for information collection, search, management, presentation, etc. , Has been drawing attention as a system that can be used.

One of the functions of this hypermedia device is a function called a browser. This browser can easily know the link structure between nodes, and can post, move, and delete nodes on the browser. By the way, as a link structure between nodes, there is known a so-called network structure not based on a hierarchical relationship other than a hierarchical structure based on a hierarchical relationship.

Conventionally, as a browser display method for displaying both the hierarchical structure and the network structure of the link, the 14th
Some are shown in the figure. In the browser display method shown in FIG. 14, each node is represented by a box of a predetermined size, the hierarchical structure of links is represented by solid arrows, and the network structure of links is represented by dotted arrows. That is, in FIG.
Node A and nodes B1, B2, and B3 are connected by solid arrows, and are in a hierarchical link relationship.
The nodes C1, C2 and the node C3 of the node B3 are also connected by solid arrows, and thus have a hierarchical link relationship. Also, the node
The nodes C1 and B2 and the nodes C2 and B3 and C3 are connected by dotted arrows, and thus have a network structure link relationship. However, the browser display method shown in FIG.
Since the hierarchical structure and the network structure are distinguished depending on whether the arrow is a solid line or a dotted line, there is a drawback in that it is difficult to distinguish between a hierarchical structure link and a network structure link.

Further, in the browser display method shown in FIG. 14, since selection including the entire lower node of a certain node cannot be performed, operations such as transcription, movement, and deletion including the entire lower node cannot be performed.

FIG. 15 shows a browser display method capable of performing operations such as transcription, movement, and deletion including the entire lower node. In the browser display method shown in FIG. 15, each node is represented by a long bar box on the left and right, and the hierarchical structure of the links is represented by the length of the bar box. That is, in the case of FIG. 15, nodes B1 and B2 are in a hierarchical relationship below node A, nodes C1 and C2 are in a hierarchical relationship below node B1, and node C3 is in a hierarchical relationship below node B3. Is shown. According to the browser display method shown in FIG. 15, for example, when the node C1 is selected as shown by the diagonal line in FIG. 16, only the node C1 can be selected, and the node B1 is selected as shown by the diagonal line in FIG. Then, nodes C1 and C2 having a lower hierarchical relationship can be selected. Therefore, operations such as transcription, movement, and deletion including the entire lower node can be performed. However, the browser display method shown in FIG. 15 has a disadvantage that the link relation of the network structure cannot be displayed.

[Problems to be solved by the invention]

As described above, according to the conventional browser display method of the hypermedia device, it is difficult to distinguish between a link having a hierarchical structure and a link having a network structure, and further, operations such as transcription, movement, and deletion including the entire lower node cannot be performed. Was something. In addition, there is a browser display method that allows operations such as transcription, movement, and deletion including the entire lower node, but in this case, there is a disadvantage that the link relation of the network structure cannot be displayed.

Therefore, the present invention provides a browser display method capable of displaying both the link hierarchical structure and the network structure in a clearly identifiable manner, and capable of performing operations such as posting, moving, and deleting including the entire lower node. The purpose is to:

[Means for solving the problem]

In order to achieve the above object, according to the present invention, the hierarchical structure of a link is displayed based on the inclusion relation of a closed figure indicating a node, and the network structure of the link is displayed by an arrow between the closed figures indicating the node.

(Operation)

Each node is represented by, for example, a box-shaped closed figure, and the link relation of the hierarchical structure between the nodes is represented by the inclusion relation of the closed figure. The link relationship of the network structure between the nodes is realized by arrows connecting the closed figures. According to such a configuration, both the hierarchical structure and the network structure of the link can be clearly identified, and operations such as transcription, movement, and deletion including the entire lower-level node can be performed.

〔Example〕

FIG. 1 is a block diagram schematically showing a hypermedia device to which the browser display method of the present invention is applied. This device is Hypermedia Base 10, Controller 2
0, a storage device 30, an input / output device 40, a display 50, a keyboard 60, and a mouse 70 connected to the control device 20 via the input / output device 40.

The hypermedia base 10 stores data in the hypermedia. This data includes node data which is a group of various information and link data which is link information. Node data is text strings, figures, photos,
Data such as animation and music. The control device 20 executes processes such as reading, changing, and deleting data stored in the hypermedia base 10, and creating data to be written to the hypermedia base 10. Further, the storage device 30 stores various data and the like necessary for processing in the control device 20. The processing in the control device 20 is performed in accordance with commands input from the keyboard 60 and the mouse 70 via the input / output device 40, and the processing result and processing state in the control device 20 are displayed on the display 50 via the input / output device 40.
Will be displayed.

First, FIG. 2 shows an example of a browser drawn by the apparatus according to the browser display method of the present invention.
The browser shown in FIG. 2 has the same contents as the browser shown in FIG. This browser is displayed as one window on the display 50 shown in FIG.

In FIG. 2, the entire window 100 shows a node A, boxes 101, 104 and 105 drawn in the window 100 show nodes B1, B2 and B3, respectively, and a box 102 drawn in the box 101. , 103 indicate nodes C1 and C2, and box 106 drawn in box 105 indicates node C3. put it here,
Since the boxes 101, 104, and 105 are included in the window (box) 100, it indicates that the nodes B1, B2, and B3 have a link relationship in a hierarchical structure below the node A. In addition, since the boxes 102 and 103 are included in the box 101, the nodes C1 and C2 are linked in the hierarchical structure below the node B1.
106 is contained in box 105, so node C3 is
This indicates that the link has a hierarchical structure lower than B3.

2, an arrow 107 drawn between the box 102 and the box 104, and an arrow drawn between the boxes 105 and 106 of the box 103.
Reference numerals 108 and 109 respectively indicate links of the network structure. That is, the node C1 and the node B2, the node C2 and the node B3, and the node C2 and the node C1 each have a network structure link relationship.

Next, the operation of creating a browser in this embodiment is described in the third section.
This will be described in detail with reference to the flowcharts of FIGS. 6 to 9.

FIG. 3 shows the main flow of the browser creation process. This process is called when the user gives an instruction to create a browser using the keyboard 70. At this time, the user specifies the root node by using the name of the node or the like. The browser creation process is called by the control device 20.
This is done by the window system, which is software within. That is, a menu for browser creation processing is added in advance in the window system, and the processing shown in FIG. 3 is set as a processing called when this menu is selected.

In the main flow of FIG. 3, a storage area for a table for storing a table (to be described in detail later) necessary for creating a browser is secured in the storage device 30 (step 201). Subsequently, a window for displaying a browser is created in the display (step 20).
2). Then, the browser is displayed in the window created for displaying the browser (step 203). The browser display in the window is performed, for example, by a method as shown in FIG. 2, the details of which will be described later.

FIG. 4 shows a basic flow when the browser displayed in the window is closed. This process is called when the user attempts to close the browser. 4th
In the figure, first, the window created for browser display is deleted (step 204). Then, the storage area for the table in the storage device 30 used for creating the browser is released (step 205).

FIG. 5 is a flowchart showing the process of “displaying a browser in a window” in step 203 of the main flow in FIG. First, the direction in which the box representing each node is drawn is set to “up → down”, and the root node for browser display is set to the one designated by the user when the browser creation command is issued (step 20).
6). Subsequently, a box representing each node is drawn in the window created for browser display according to the hierarchical structure of the links (step 300). The details of this step 300 will be described later with reference to FIG. Once the boxes representing each node have been previously drawn, then an arrow representing the network structure of the link is drawn between each box (step 400). The details of this step 400 will be described later with reference to FIG.

FIG. 6 shows step 30 of the flowchart shown in FIG.
This shows details of the “draw node” process shown in FIG. In FIG. 6, first, a basic point for drawing a box representing a node is set at a predetermined position on the upper left of a window created for browser display (step 301).
Then, the child of the root node specified by the user is set to 1
And take it as the new root node, reverse the direction of travel and draw a box of nodes from the base point (step 30
3). Here, if the previous traveling direction was “up → down”, then “right →
The direction of travel is reversed to “left” or “right → left” to “up → down”. This step 303 is called recursively.

Next, a box including all the boxes drawn in step 303 is drawn. If no box is drawn in step 303, the smallest box is drawn at the position of the reference point (step 304). Next, the information of the box drawn in step 304 is written in a table in the storage device 30.
An example of a table in the storage device 30 is shown in Table 1.

Here, the depth is the depth of the hierarchical structure, X of the coordinates of the box,
Y represents the coordinates of the upper left corner of the box as shown in FIG. 7, w represents the horizontal length of the box, and h represents the vertical length of the box.

Next, the position of the basic point is shifted downward if the traveling direction is “up → down”, and left if it is “right → left” (step 306). Subsequently, it is checked whether or not the number of children has been repeated. If there are any remaining children, the next child is extracted (step 308), and this process is repeated by the number of children of the root node (step 302).
In step 303, the reason why the box is drawn by reversing the traveling direction is to prevent the drawn box from being elongated. That is, as shown in FIG.
If you draw the box with "down", then draw the box with the direction of travel "right → left", then draw the box with the direction of travel "up → down", and so on. The box drawn by this does not stretch.

If it is determined in step 307 that the processing has been repeated by the number of all children, the “draw node” process ends.

FIG. 9 shows step 40 of the flowchart shown in FIG.
This shows details of the “draw a network arrow” process shown in FIG. In FIG. 9, first, this one of the root nodes is taken out and a network arrow is drawn using it as a new root node (step 402). This step 402 is called recursively. Next, it is checked whether the extracted root node has a network link (step 403). If it is determined that the network link is present, one of the network links
Take out one and check its link destination (step 405),
If the link destination node is in the table of the storage device 30 (step 406), an arrow indicating the link network structure is drawn between boxes based on the coordinate information of this table (step 407). Next, it is determined whether all links have been checked (step 408). If there are any remaining links, the next link is taken out (step 409), and this process is repeated by the number of network links (step 404).

Next, it is checked whether the above processing has been repeated for the number of children of the root node (step 410). If there are still remaining children, the next child is extracted (step 411), and this processing is repeated for the number of children of the root node (step 410). Step 401). In this way, arrows representing the hierarchical structure of links are drawn between boxes indicating each node. If it is determined in step 410 that the process has been repeated by the number of children, the process of “drawing a network arrow” is ended.

FIG. 10 shows a main flow of the input processing on the browser formed as described above. First, it is determined whether the input is a click operation with the mouse 70. If the input is a mouse click, a mouse click process is executed (step 208). Next, it is checked whether the input is the press of the delete key of the keyboard 60 (step 204). If the input is the press of the delete key, the node delete process is executed (step 21)
0). Next, it is checked whether the input is a press of the transcription key of the keyboard 60 (step 211). If the input is a depression of the transcription key, a node transcription process is executed (step 212). Note that the input processing on the browser includes other processing such as node movement processing and information display processing, which are omitted here.

Hereinafter, mouse click processing and deletion processing will be extracted and described in detail. From the description of the mouse click processing and the deletion processing, it can be understood that this embodiment enables processing of the entire lower node included in a certain node.

FIG. 11 shows details of the mouse click processing. In FIG. 11, first, the coordinates of the cursor of the mouse 70 displayed on the display 50 are obtained (step 221). If there is a currently selected node, the selection is canceled and the display is restored (step 22).
2). Next, the table in the storage device 30 is scanned, and the node having the deepest depth in the box containing the cursor is obtained (step 223). If there is a node included here (step 224), the node is selected, and the display of the node (display of a box) is inverted (step 255). In addition,
If there is no node including step 224, the mouse click process ends.

FIG. 12 shows details of the node deletion processing. In FIG. 12, if there is a selected node (step 261), the selected node is set as the root node (step 216), and the node is deleted (step 263). This node deletion processing will be described later in detail with reference to FIG. Upon completion of the node deletion processing, the browser is displayed again in the window (step 264). The processing in step 264 is the same as the processing shown in FIG.

In FIG. 13, in the node deletion process, first, one child of the root node is taken out and the node is deleted as a new root node (step 272). This step is called recursively. Next, the extracted node is deleted (step 273). Next, it is checked whether the above processing has been repeated for the number of children (step 274). If there are remaining children, the next child is extracted (step 275), and this processing is repeated for the number of children of the root node (step 271). If it is determined in step 274 that the processing has been repeated by the number of children, the child node deletion processing ends. In the above embodiment, only the mouse click processing and the deletion processing as the processing on the browser have been described in detail. However, the transcription processing, the movement processing, the information display processing, and the like can be executed in the same manner.

〔The invention's effect〕

As described above, according to the present invention, both the link hierarchical structure and the network structure can be clearly identified,
In addition, it is possible to provide a browser display method with excellent operability in which the inclusive relation of the hierarchical structure can be intuitively understood, and operations such as transfer, move, and delete including the entire lower nodes can be performed.

[Brief description of the drawings]

FIG. 1 is a block diagram schematically showing a hypermedia device to which one embodiment of a browser display method according to the present invention is applied;
FIG. 2 is a diagram showing an example of a browser displayed according to this embodiment, FIG. 3 is a flowchart showing a basic flow of browser creation according to this embodiment, FIG. 4 is a flowchart showing processing when the browser is closed. FIG. 5 is a flowchart showing details of processing for displaying a browser in the window of the flowchart shown in FIG. 3, FIG. 6 is a flowchart showing details of processing for drawing a node box of the flowchart shown in FIG. FIG. 7 is a view for explaining data of a table stored in the storage device in this embodiment, FIG. 8 is a view for explaining the processing of the flowchart shown in FIG. 6, and FIG.
FIG. 10 is a flowchart showing details of the process of drawing an arrow of a network in the flowchart shown in FIG. 5, FIG. 10 is a flowchart showing a basic flow of input processing on a browser in this embodiment, and FIG. 12 is a flowchart showing details of the mouse click process of the flowchart shown in FIG. 12, FIG. 12 is a flowchart showing details of the deletion process of the flowchart shown in FIG. 10, and FIG. 13 is a node deletion process of the flowchart shown in FIG. FIG. 14 is a flowchart showing details of processing, FIG. 14 is a diagram showing an example of a browser displayed by a conventional method, FIG. 15 is a diagram showing another example of a browser displayed by a conventional method, FIG. 16, FIG. FIG. 17 is a diagram for explaining the processing on the browser shown in FIG. 10 ... hypermedia database, 20 ... control device, 30 ... storage device, 40 ... input / output device, 50 ... display, 60 ... keyboard, 70 ... mouse

──────────────────────────────────────────────────続 き Continuation of the front page (58) Field surveyed (Int.Cl. ⁶ , DB name) G06F 17/30 JICST scientific and technical literature file

Claims (1)

(57) [Claims] In a browser display method for a hypermedia device, a hierarchical structure of a link is displayed from an inclusion relation of a closed figure indicating a node, and a network structure of the link is displayed by an arrow between the closed figures indicating the node. A browser display method for a hypermedia device, comprising: