CN103176993B - A kind of content presenting device and method - Google Patents

Abstract

The invention discloses a content presentation device suitable for presenting object topology graphically, which includes a page layout component adapted to define an area for graphical presentation; a position determination component adapted to determine the Determine the position of the corresponding object in the defined area, and determine the position of the starting point and the end point of one or more connection relationships in the defined area according to the position of each object; The location of the start point and the end point A line connecting the start point and the end point of each connection relationship is drawn in the defined area, and each object is drawn in the defined area, wherein the object is superimposed on the line. The invention also relates to a corresponding content presentation method.

Description

A content presentation device and method

technical field

The present invention relates to the field of network content display, in particular to a content presentation device and a corresponding presentation method for presenting network content at user equipment.

Background technique

As Internet-based applications become more and more extensive, network bandwidth increases continuously, and the processing performance of user equipment becomes more and more powerful. More and more applications are moving from traditional desktop applications to browser-based applications. The same is true for network management applications. Traditional network management applications usually adopt a client/server architecture. A traditional network management application client is installed at the terminal device, and the client communicates with the network management application server installed at the server to manage Administrators can manage multiple network devices through operations at the client. At present, with the application of web browsers more and more widely, various user devices, such as traditional desktop computers, laptop computers and current personal digital assistants, digital tablets, mobile terminals and smart phones, have built-in network browser. In order to make it easier for administrators to use various user devices for network management, a variety of network management applications based on web browsers have emerged so that system administrators can manage multiple network management applications through web browsers running on various user devices. network device.

In network management applications, an important aspect is to manage the network topology relationship between network devices. Usually, in order to give the administrator an intuitive feeling of the topology relationship, the topology relationship is generally shown in a graphical user interface, that is, a topology map, so that the administrator can conveniently view the topology map and perform corresponding management operations. When the network management application is based on the web browser, how to display the topology map in the web browser to facilitate the administrator to view and operate becomes a key aspect.

Currently, known implementation means that can be used in a web browser to display a topology map include Flash, SVG, and VML. However, although these methods have corresponding advantages, they also have obvious defects. For example, SVG can draw a topological map on a browser in the form of XML representation, and since SVG is a vector graphic, the image will not be distorted when the topological map is zoomed in/out. However, SVG has the following disadvantages. For example, SVG graphics are not supported by most mainstream browsers, so plug-ins need to be installed to display SVG graphics on browsers; and in order to fully achieve infinite scaling of SVG graphics, all elements on the topology map need to be in XML format. Therefore, it is necessary to convert the device icons on the topology map from ordinary bitmaps to vector graphics, which is difficult; in addition, the interaction between SVG and Javascript is poor, and dynamic effects (such as dynamic creation, deletion, and hidden network node, etc.). Using Flash to present network topology diagrams has the advantages of being rich in expression and able to realize most of the functions of desktop applications. However, Flash has the following disadvantages. In addition, Flash is not supported on Apple's IOS series operating platforms. Using VML to present network topology diagrams can draw various graphics in browser pages, but VML is only supported by browsers with the IE kernel, so there is an obvious limitation in the scope of application.

It can be seen from this that the current methods of displaying network topology diagrams in a web browser all have deficiencies. It should be seen that the above-mentioned problems also exist in other applications that need to display graphs such as topological graphs in a web browser with objects and connections between objects. What is expected is a graphical presentation device and method that can support most mainstream web browsers and is convenient for development and interaction.

Contents of the invention

In view of the above problems, the present invention is proposed to provide a content presentation device and a corresponding content presentation method that overcome the above problems or at least partially solve or alleviate the above problems.

According to one aspect of the present invention, a content presentation device is provided, which is suitable for graphically presenting one or more objects and one or more connections between these objects. The content presentation device includes a page layout component to define an area for graphical presentation in the content presentation device. The content presenting device further includes a position determination component, configured to determine the position of each object in the defined area according to the attributes of the object. Since the connection relationship of objects can generally be defined by the involved objects, the position determination component can determine the positions of the start and end points of one or more connection relationships in the defined area according to the position of each object. In the content rendering device, the graphic drawing part draws a line connecting the start and end points of each connection relationship in the defined area according to the positions of the start point and the end point of each connection relationship, and draws each object in the defined area , where the object is overlaid on top of the wire.

According to the content presentation device of the present invention, when presenting objects and their connection relationships, consider the size and position of the objects to obtain the graphic center of the objects, draw the connection relationships of the objects as simple lines, and then superimpose the objects on the lines superior. In this way, objects and their connections can be presented graphically in a convenient manner.

Optionally, in the content presentation device disclosed herein, whenever the presented object or its connection relationship changes, the position determination component will re-determine the position of each object and the start and end positions of each connection relationship, and The graphics drawing part redraws the objects and the connection lines corresponding to the connection relationship in the defined area.

Optionally, the content rendering device disclosed here can adopt HTML5 or a rendering mode compatible with HTML5, the page layout component can use the Canvas element in HTML to define the rendering area, and the graphics drawing component can use the Div element in HTML to define Define objects. For example, for each object, the graphic drawing component defines the size and position of the object using the first Div element, defines the icon corresponding to the object using the second Div element, and defines the object description corresponding to the object using the third Div element , where the second Div element and the third element are contained within the first Div element.

HTML5 is a standard specified by W3C in the near future. HTML5 is suitable for presenting webpages in various web browsers in various user equipment (including traditional computers and currently rapidly developing mobile terminals). Therefore, the adoption of HTML5 can make the content presentation device widely used in various devices.

According to another aspect of the present invention, a content presentation method is provided, which is suitable for graphically presenting one or more objects and one or more object connection relationships. The content presentation method includes defining an area for graphical presentation in the content presentation device; determining the position of the corresponding object in the defined area according to the attribute of each object, and determining the starting point and the connection relationship according to the position of each object The position of the end point in the defined area; and draw a line connecting the start and end points of each connection relationship in the defined area according to the position of the start point and end point of each connection relationship, and draw each object in the defined area , where each of the objects is superimposed on the line.

According to the content presentation method of the present invention, when presenting the object and its connection relationship, the size and position of the object are taken into consideration to obtain the graphic center of the object, the connection relationship of the object is drawn as a simple connection line, and then the object is superimposed on the connection line superior. In this way, objects and their connections can be presented graphically in a convenient manner.

The content presenting device and method disclosed herein are especially suitable for application in a web browser, and are especially suitable for applications that display network topology.

Description of drawings

Various other advantages and benefits will become apparent to those of ordinary skill in the art upon reading the following detailed description of the preferred embodiment. The drawings are only for the purpose of illustrating a preferred embodiment and are not to be considered as limiting the invention. Also throughout the drawings, the same reference numerals are used to designate the same components. In the attached picture:

FIG. 1 shows a schematic block diagram of a content presentation device according to an embodiment of the present invention;

FIG. 2 shows a schematic diagram of object relationships presented by a content presentation device according to an embodiment of the present invention;

Fig. 3 shows a schematic diagram of objects and object relationships presented by a content presentation device according to an embodiment of the present invention;

4A-4C show a schematic diagram of zooming in on an object presentation area according to an embodiment of the present invention;

Figure 5 shows a schematic diagram of an object definition according to one embodiment of the present invention; and

Fig. 6 schematically shows a flowchart of a content presentation method according to an embodiment of the present invention.

detailed description

The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments.

Fig. 1 shows a schematic block diagram of a content presentation device 100 according to an embodiment of the present invention. The content rendering device 100 may be a web browser adapted to render web pages. With the development of Internet and hardware and software technologies of mobile devices, various client applications that are not web browsers but adopt various web browser kernels (eg, IE kernel, etc.) have emerged. The content presentation device 100 may cover these applications, and all client applications that can present web pages are within the protection scope of the present invention.

The content presentation device 100 may present the content received by the content presentation device 100 in the presentation area 110 . In addition to presenting general content, such as web page content in HTML format, the content presentation device 100 is also suitable for graphically presenting one or more objects and the connection relationship between one or more of these objects. Many structures suitable for presentation can be expressed as objects and the connections between objects. For example, in the field of network management, the network topology can be expressed as each network unit and the connection relationship between network units; relationship. Therefore, how to present such objects and connection relationships between objects in a convenient manner in a content presentation device has very general applications.

The content presentation device 100 includes a page layout component 120 adapted to define in the presentation area 110 of the content presentation device 100 an object presentation area 112 specially used for graphically presenting these objects and connection relationships between objects. Optionally, the object presentation area 112 can be stretched, compressed and moved in the presentation area 100, and can also move following the presentation area. Generally speaking, when the position or size of the object presentation area 112 changes, the content presented in the object presentation area 112 should also change accordingly, which will be described in detail below.

The content presentation device 100 further includes a position determining component 130, configured to determine the positions of these objects and the object relationship in the object presentation area 112 according to the defined one or more objects and the object relationship between the one or more objects. Specifically, each object can be defined by one or more properties. Optionally, these properties include the object's initial size (eg, length and width), the object's initial position, and the like. For example, an object can have properties like:

top:10px;left:10px;width:50px;height:80px;ID:object1

The above attributes indicate that the object whose ID is object1 has a width of 50 pixels and a width of 80 pixels, and its upper left corner has coordinates (10, 10) in the coordinate system of the object rendering area 112 . In a client rendering device such as a web browser, the origin of various regions including the rendering region 110 and the object rendering region 112 is generally set at the upper left corner, the X axis extends rightward and the Y axis extends downward.

It should be noted that the size and size definitions of the above objects are defined relative to the object presentation area 110, since the object presentation area 112 is only a part of the presentation area 110, and the object will eventually be presented in the presentation area 110, so in order to To properly present an object in the area 110 , it is necessary to calculate the absolute size and position of the object in the object area 110 according to the relative initial size and the relative initial position of the object.

Optionally, the initial position of the object is defined using relative scale coordinates. The value of the scale coordinate is the ratio between the absolute value of the object in the object rendering area 102 and the size of the object rendering area. For example, assuming that the width of the object rendering area is W pixels and the height is H pixels, then the scale coordinates (Xp, Yp ) can be defined as:

Xp = X * 100 / W

Yp = Y * 100 / H

where a value of 100 means that the scale coordinate value is calculated as a percentage.

Then, when the node is rendered in the rendering area, the proportional coordinates (Xp, Yp) of the object can be converted into absolute coordinates (Xa, Yp) relative to the rendering area according to the following formula

Xa = (Xp * W / 100) + Xc

Ya = (Yp * H / 100) + Yc,

Where Xc and Yc are the absolute coordinate values of the upper left corner of the object presentation area 112 in the presentation area respectively.

The position determining component 130 can determine its absolute coordinate value for each object by using the above-mentioned conversion method. After determining the absolute coordinate value for each object, the position determining component 130 may also determine its coordinate for each object relationship. An object relationship can involve two or more objects, so an object relationship can be defined by the objects involved. Optionally, object relationships can be defined as follows:

<relation name=relation1 from=object1 to=object2 />

Which defines the object relationship relation1 points to object2 from object object1. Object relationships can be represented by lines pointing from one object to another. Alternatively, when an object relationship involves more than a plurality of objects, the object relationship may be represented by a star connection connecting the objects.

Therefore, the location determination component 130 needs to determine the start and end points of these links for each object relationship. Optionally, the start point and end point of the object relationship can be determined as the central position of the object involved in the object relationship. For example, when the coordinates of the upper left corner of the object are (Xa, Ya), and its width and length are Wa and La respectively, the coordinates at the center of the object are (Xa+Wa/2, Ya+La/2).

The content rendering device 100 also includes a graphic drawing part 140 . The graphic drawing component 140 receives the absolute coordinates of each object determined by the position determining component 130 and the start and end coordinates of the line corresponding to each object relationship, and then draws these objects and object relationships in the object presentation area 112 . The graphic drawing component 140 first draws the object relationship in the object presentation area 112. When the object relationship involves two objects, the object relationship can be drawn as a connecting line from the center of one object to the center of another object. And when the object relationship involves three or more objects, this can draw star-shaped lines connecting the object centers of the involved objects. For example, you can first determine the center position of the star according to the coordinates of the centers of these objects, and then draw a connecting line from the center of the star to the center of each object. It should be noted that the present invention is not limited to these star-shaped line connection manners, so the manners in which multiple object centers can be connected together are within the protection scope of the present invention.

FIG. 2 shows a schematic diagram after object relationships are drawn by the graphic drawing part 140 . As shown in FIG. 2 , various connections have been drawn in the object presentation area 112 at this time. Subsequently, the graphic drawing part 140 draws each object in the object presentation area 112 according to the absolute position of each object determined by the position determining part. Since the connecting lines connect the positions of the centers of objects, when objects are drawn, the objects are superimposed on the connecting lines. FIG. 3 shows a schematic diagram after objects and object relationships are drawn by the graphic drawing component 140 . As shown in Figure 3, objects are superimposed on top of the wires. It should be noted that although the above embodiment describes the process of drawing the connection first and then drawing the object, the order of the two can be arbitrary as long as the object is superimposed on the connection.

Optionally, the graphic drawing component 140 may first draw the object presentation area 112 in the presentation area 110 before drawing objects and object relationships.

In the content presentation device 100 shown in FIG. 1, the page layout component 120 firstly defines an object presentation area dedicated to presenting objects and object relationships, and then the position determination component 130 determines the absolute position of the presentation object according to the relative coordinates defined in advance of the object. coordinates, and determine the relationship between objects as lines connecting the centers of associated objects, and finally draw these lines and objects respectively by the graphics drawing component 140, so that objects are superimposed on the lines, thereby presenting these lines graphically Objects and corresponding object relationships. The content presentation device 100 provides a convenient way to graphically present object topology.

Optionally, the object presentation area 112 can move and zoom in the presentation area 110 (for example, based on the instruction of the user of the content presentation device 100), that is to say, the upper left corner coordinates, width and length of the object presentation area 112 are all Changes can happen. And when the position or size of the object rendering area 112 changes, the position determination component 130 recalculates the absolute position for each object and object relationship, and then the graphic drawing component 140 re-presents each object and object relationship according to the newly calculated position value. As a result, the rendered objects and their object relationships can automatically adapt to different page sizes. Even if these objects and their object relationships are displayed on monitors with different resolutions (the resolution of the monitor determines the size of the rendering area), or the size of the object rendering area is changed during use, the same effect can be obtained.

4A-4C show schematic diagrams of zooming related to an object presentation area according to an embodiment of the present invention. Fig. 4A shows a schematic diagram showing various objects and object relationships in an object presentation area according to an embodiment of the present invention. FIG. 4A illustrates network nodes and relationships between network nodes, that is, a network topology structure, as an example. FIG. 4B shows an illustration when the network topology in the object presentation area is not updated when the object presentation area is increased by 1.5 times along the width direction. FIG. 4C shows an illustration of the updated network topology in the object presentation area when the object presentation area increases by 1.5 times along the width direction according to an embodiment of the present invention.

As shown in FIGS. 4A-4C , if the size or position of the object presentation area changes, if the content presented in the object presentation area is not updated, the display effect will be poor. However, in the content presentation device 100 of the present invention, relative scale coordinates are used to define objects and object relationships, so the coordinates of objects and object relationships can be updated conveniently according to the coordinates of the object presentation area, and re-presented.

Optionally, the user of the content presentation device 100 can operate on the presented objects and/or object relationships. For example, users can modify object properties, move object locations, modify object relationships, add new associations between objects or delete existing associations, and so on. To this end, the content presentation device 100 may further include a user interface 150 adapted to receive user operations on these objects and/or object relationships. And similar to the above, after the user performs the above operations, the position determination component 130 can re-determine the position of each object and the start and end positions of each connection relationship based on the user operation, and the graphic drawing component 140 can re-determine the position in the object presentation area render these objects.

Also, as mentioned earlier, each object has corresponding properties. In addition to the corresponding position and size attributes, each object may also include attributes such as description of the object, icon of the object, and the like. When the graphic drawing part 140 draws an object, it may be considered to simultaneously present a description of the object and an object icon representing the object.

Optionally, the content presentation device 100 may use HTML5 to present the object topology. HTML5 is the latest web page rendering standard formulated by W3C, which can be conveniently displayed dynamically in web browsers. Certainly, the content presenting device 100 is not limited to adopting HTML5, and formats compatible with HTML5 that may appear in the future are all within the protection scope of the present invention. When the content presentation device 100 adopts HTML5 to perform topology presentation, the page layout component 120 can adopt HTML5 5 to define the object rendering area 112. The graphic drawing component 140 can use related functions in javascript (for example, including but not limited to, moveTo(x, y), lineTo(x, y), stroke(), etc.) to draw connection lines in the area defined by the canvas element To represent the connection relationship between objects. In addition, the graphics drawing component utilizes the div element in HTML to define and present objects.

Fig. 5 shows a schematic diagram of an object defined by a div element. As shown in Figure 5, an object can be defined by one or more divs, in which the outer solid line part of the object is defined by a div, which not only defines the size and position of the object, but also has the attribute z-index To define the layer of the object in the canvas, and the layer is an abstract concept in html, when the positions of two elements overlap, the element with a large z-index attribute will cover the element with a small z-index. Therefore, by assigning a large value to the z-index attribute in the object's div, you can ensure that the object overlaps the line of the object relationship.

Optionally, in each object content, for example, another div may be used to define the dotted line part above the interior drawn by the solid line, and in this part, the div defines the icon of the object. In addition, the dotted line part below the solid line drawn part can be defined with a div, and in this part, the description of the object is defined.

The objects shown in Figure 5 can be defined using the following div elements:

<div id="node1" style="position:absolute;top:100px;left:100px;z-index:100">

<div id="node1_icon" style="text-align: center; width: 100%">

<img src="icons/switcher.png" id="node1_icon_img" width='64' height='64'/>

</div>

<div id="node1_label" style="text-align: center; width: 100%">

router

</div>

</div>

The above div defines an object whose icon is the file icons/switcher.png and whose name is router.

It should be noted that the outer DIV is the key to define the object because it determines the position and size of the object, but it is used inside the object to define the object icon and describe the inner div to adopt other structures according to actual needs, such as only icons without Text, or only text without icons; you can also place icons or text directly inside the external DIV without using DIV to accommodate icons and text, and so on.

Fig. 6 schematically shows a flowchart of a content presentation method 600 according to an embodiment of the present invention. The method shown in FIG. 6 is suitable to be executed in the above-mentioned content presentation device 100 so as to present objects and connection relationships between objects in the content presentation device 100 (hereinafter collectively referred to as object topology). The method 600 begins with step S610, wherein an object presentation area for graphically presenting object topology is defined in the content presentation device. This step S610 can be executed by the page layout component 120 . Subsequently, in step S620, the position of each object in the object presentation area is determined according to the attribute of each object to be presented. After the positions of the objects are determined, the positions of the start point and the end point of one or more connection relationships in the object presentation area are also determined according to the position of each object and the objects involved in the object connection relationship. Step S620 is adapted to be performed in the location determining component 130 . As mentioned above, the initial position of the object can be defined by relative scale coordinates. In step S620, the relative scale coordinates of each object need to be converted into absolute coordinate values. Also, since object relationships can be defined by the objects involved. For example, when an object relationship involves more than a plurality of objects, the object relationship may be represented by a star connection connecting the objects. In step S620, it is necessary to determine the start and end points of these links for each object relationship. Optionally, the start point and end point of the object relationship may be determined as the central position of the object involved in the object relationship as described above.

After determining the position of the object and its connection relationship in step S620, in step S630, draw a line connecting the start point and end point of each connection relationship in the object presentation area according to the position of the start point and end point of each connection relationship. After drawing the connection lines representing the connection relationships of the objects, in step S630, each object is drawn in the object presentation area. It should be noted that the objects are usually superimposed on the connection lines. Step S630 may be performed by the graphic rendering component 140 .

Optionally, since the object presentation area can be moved and scaled, the object presentation method further includes, when the object presentation area moves and/or scales, re-determining the position of each object and the start and end positions of each connection relationship , and the process of re-drawing the object and the connection line corresponding to the connection relationship in the object presentation area.

In addition, optionally, the user of the content presentation device 100 may operate on the presented objects and/or object relationships. For example, users can modify object properties, move object locations, modify object relationships, add new associations between objects or delete existing associations, and so on. To this end, the content presentation method further includes the step of receiving various operations of the user, and when the user performs the operation, re-determines the position of each object and the start and end positions of each connection relationship based on the user operation, and re-determines the location of each object on the basis of the user operation. Steps for drawing objects and lines corresponding to connection relationships in the rendering area.

Also, as mentioned earlier, each object has corresponding properties. In addition to the corresponding position and size attributes, each object may also include attributes such as description of the object, icon of the object, and the like. When drawing an object, consider presenting both a description of the object and an object icon representing the object.

Optionally, the content presentation method 100 may use HTML5 to present the object topology. For example, an object rendering area can be defined with the canvas element in HTML 5. The line representing the connection relationship between objects can be defined in the canvas element by using related functions in javascript (for example, including but not limited to, moveTo(x,y), lineTo(x,y), stroke(), etc.) drawn in the area. In addition, the graphics drawing component utilizes the div element in HTML to define and present objects.

Optionally, as described above, when div is used to define an object, the content presentation method 100 may first use the first Div element to define the size and position of the object; then, respectively use the second Div element to define the corresponding The icon and the object description corresponding to the object are defined by the third Div element, and the second Div element and the third element are included in the first Div element.

The content presentation device and content presentation method according to the present invention provide a solution for graphically presenting object topology on a terminal device such as a web browser. The solution has the advantages of simple implementation and easy grasp by developers.

In addition, since the solution according to the present invention can be implemented using HTML 5, it supports various mainstream browsers, so that developers do not need to worry about browser compatibility issues.

It should be noted that among the various components of the content presentation device of the present invention, the components are logically divided according to the functions to be realized, but the present invention is not limited thereto, and each component can be divided as required Redivision or combination, for example, some components may be combined into a single component, or some components may be further broken down into more subcomponents.

The various component embodiments of the present invention may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof. Those skilled in the art should understand that a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all functions of some or all components in the content presentation device according to the embodiments of the present invention. The present invention can also be implemented as an apparatus or an apparatus program (for example, a computer program and a computer program product) for performing a part or all of the methods described herein. Such a program realizing the present invention can be stored on a computer-readable medium.

It should be noted that the above-mentioned embodiments illustrate rather than limit the invention, and that those skilled in the art will be able to design alternative embodiments without departing from the scope of the appended claims. In the claims, any reference signs placed between parentheses shall not be construed as limiting the claim. The word "comprising" does not exclude the presence of elements or steps not listed in a claim. The word "a" or "an" preceding an element does not exclude the presence of a plurality of such elements. The invention can be implemented by means of hardware comprising several distinct elements, and by means of a suitably programmed computer. In a unit claim enumerating several means, several of these means can be embodied by one and the same item of hardware. The use of the words first, second, and third, etc. does not indicate any order. These words can be interpreted as names.

Claims (10)

1. a content presenting device, is suitable to present the annexation between one or more object and one or more these objects graphically, and this content presenting device includes:

Page layout parts, be suitable to defined in described content presenting device for the region graphically presented；

Position determining component, be suitable to the attribute according to object each in one or more object and determine corresponding object position in defined region, determine the beginning and end of one or more annexation position in defined region according to the position of each object；And

Graphic plotting parts, the position being suitable to the beginning and end according to each annexation draws the line of the beginning and end connecting each annexation in defined region, and in defined region, draw each object, wherein said object is superimposed upon on described line;

Wherein said content presenting device is suitable for use with the presentation mode compatible with HTML5, the Canvas unit that page layout parts are suitable for use with in HTML usually defines described region, and the Div unit that described graphic plotting parts are suitable for use with in HTML usually defines one or more object and presents described object in defined region.

2. content presenting device as claimed in claim 1, the attribute of each object in one or more object wherein said includes one or more in the icon of the size of object, the object initial position in defined region, object factory and object, and each annexation in one or more annexation is defined by the object involved by annexation.

3. as described in claim 1 or 2 content presenting device, region defined in wherein said page layout parts can move in described content presenting device or scale, and

When defined region is moved or is scaled, described position determining component redefines the position of each object and the beginning and end position of each annexation, and described graphic plotting parts draw described object and the line corresponding to annexation again in defined region.

4. content presenting device as claimed in claim 1 or 2, also includes user interface, is suitable to receive user to one or more object and the operation of one or more annexation, and

Described position determining component redefines position and the beginning and end position of each annexation of each object based on described user operation, and described graphic plotting parts draw described object and the line corresponding to annexation again in defined region.

5. content presenting device as claimed in claim 1, wherein for each object, described graphic plotting parts utilize a Div unit usually to define the size and location of this object, utilize the 2nd Div element definition corresponding to the icon of this object, and utilizing the 3rd Div element definition corresponding to the object factory of this object, wherein said 2nd Div element and third element are included in a Div element.

6. a content presenting method, is suitable to present the annexation between one or more object and one or more these objects graphically, and the method includes:

Defined in content presenting device for the region that graphically presents；

Attribute according to object each in one or more object determines corresponding object position in defined region, determines the beginning and end of one or more annexation position in defined region according to the position of each object；And

The position of the beginning and end according to each annexation draws the line of the beginning and end connecting each annexation in defined region, and draws each object in defined region, and wherein said each object is superimposed upon on described line；

Wherein use and the presentation mode of HTML5 compatibility presents the annexation between one or more object and one or more these objects graphically, use the Canvas unit in HTML usually to define described region, and use the Div unit in HTML usually define one or more object and present described object in defined region.

7. content presenting method as claimed in claim 6, the attribute of each object in one or more object wherein said includes one or more in the size of object, the object initial position in defined region, object factory and object icon, and each annexation in one or more annexation is defined by the object involved by annexation.

8. the content presenting method as described in claim 6 or 7, wherein defined region can move in described content presenting device or scale, and the method also includes:

When defined region is moved or scaled, redefine the position of each object and the beginning and end position of each annexation, and in defined region, again draw described object and the line corresponding to annexation.

Content presenting method the most as claimed in claims 6 or 7, also includes: user is to one or more object and the operation of one or more annexation in reception, and

Redefine position and the beginning and end position of each annexation of each object based on described user operation, and in defined region, again draw described object and the line corresponding to annexation.

10. content presenting method as claimed in claim 6, wherein uses the Div unit in HTML usually to define one or more object and includes:

For each object,

A Div unit is utilized usually to define the size and location of this object；

Utilize the 2nd Div element definition corresponding to the icon of this object；And

The 3rd Div element definition is utilized to correspond to the object factory of this object,

Wherein said 2nd Div element and third element are included in a Div element.