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

A kind of content presenting device and method Download PDF

Info

Publication number
CN103176993B
CN103176993B CN201110432332.3A CN201110432332A CN103176993B CN 103176993 B CN103176993 B CN 103176993B CN 201110432332 A CN201110432332 A CN 201110432332A CN 103176993 B CN103176993 B CN 103176993B
Authority
CN
China
Prior art keywords
annexation
region
content presenting
defined region
beginning
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201110432332.3A
Other languages
Chinese (zh)
Other versions
CN103176993A (en
Inventor
张磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Nsfocus Technologies Group Co Ltd
Original Assignee
Beijing NSFocus Information Security Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing NSFocus Information Security Technology Co Ltd filed Critical Beijing NSFocus Information Security Technology Co Ltd
Priority to CN201110432332.3A priority Critical patent/CN103176993B/en
Publication of CN103176993A publication Critical patent/CN103176993A/en
Application granted granted Critical
Publication of CN103176993B publication Critical patent/CN103176993B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a kind of content presenting device being suitable to present object topological structure graphically, it includes page layout parts, is suitable to definition for the region graphically presented;Position determining component, is suitable to the attribute according to each object and 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 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.The invention still further relates to corresponding content presenting method.

Description

A kind of content presenting device and method
Technical field
The present invention relates to Web content display field, particularly relate at subscriber equipment, present the content presenting device of Web content and corresponding rendering method.
Background technology
Along with application based on the Internet is more and more extensive, the network bandwidth is continuously increased and the process performance of subscriber equipment is the most powerful.Increasing application is transferred to application based on browser from traditional desktop application.Network management-application is also such, traditional network management-application generally uses user terminal/server framework, traditional network management-application client is installed at terminal unit, this client and be arranged on the network management-application server end at server and communicate, manager can manage multiple network equipment by the operation at client.At present, along with the application of web browser is more and more extensive, various subscriber equipmenies, the most traditional desktop computer, laptop computer and present personal digital assistant, digital flat panel, mobile terminal and smart mobile phone etc. are the most built-in web browser.Various subscriber equipment can be used to carry out network management for the ease of manager, occur in that multiple network management-application based on web browser at present, in order to system manager just can manage multiple network equipment by the web browser run on various subscriber equipmenies.
In network management-application, an important aspect is exactly to be managed the network topology between the network equipment.Generally, in order to give manager the direct feel to topological relation, this topological relation, i.e. topological diagram are typically shown in graphical user interface to graphically, in order to manager can check topological diagram easily and manage operation accordingly.When network management-application is based on web browser, show topological diagram the most in a web browser so that manager's viewing and operation become the aspect of key.
At present it is known that the realization rate showing topological diagram can be used in a web browser to include Flash, SVG and VML etc..Although but these modes all have corresponding advantage, but also having the obvious disadvantage that.Such as, SVG can with XML form of presentation drawing topological graph on a web browser, and due to be SVG be vector graphics, when topological diagram amplifies/reduces, image is undistorted.But SVG has as a drawback that, such as SVG figure is not supported by most major browsers, causes showing that SVG figure needs to install plug-in unit on a web browser;And in order to be fully achieved the electrodeless scaling of SVG figure, it is desirable on topological diagram, all elements is required for describing in XML mode, it is therefore desirable to from common bitmap-converted, the appliance icon on topological diagram is become vectogram, and the difficulty of do so is bigger;Additionally the interactivity of SVG with Javascript is poor, it is impossible to realize dynamic effect (such as dynamic creation, deleting, hide network node etc.).Use Flash to present network topological diagram and there is abundant expression forms, the advantage being capable of most functions that desktop application is had, but Flash has as a drawback that, the role of such as Flash exploitation deflection art designing, needs special developer could be competent at and need special developing instrument;It addition, Flash is not supported on the IOS sequence of maneuvers platform of Apple.Use VML to present network topological diagram and can draw various figure in browser page, but VML is only supported by the browser of IE kernel, therefore there is obvious range of application and limit.
It can thus be seen that in place of the currently used mode all Shortcomings showing network topological diagram in a web browser.It should be observed that other need the application showing the figure of annexation that be similar to topological diagram etc, that have between object and object in a web browser to equally exist the problems referred to above.Most of mainstream network browser can be supported, it is simple to the graphical display device developed and interact and mode it is desirable that a kind of.
Summary of the invention
In view of the above problems, it is proposed that the present invention is to provide a kind of and overcoming the problems referred to above or solve at least in part or slow down the content presenting device of the problems referred to above and corresponding content presenting method.
According to an aspect of the invention, it is provided a kind of content presenting device, be suitable to present the annexation between one or more object and one or more these objects graphically.This content presenting device includes page layout parts, in order to defined in this content presenting device for being patterned the region presented.This content presenting device also includes position determining component, for determining this object position in defined region according to the attribute of each object.Owing to the annexation of object typically can be defined by involved object, therefore position determining component can determine the beginning and end of one or more annexation position in defined region according to the position of each object.In this content presenting device, graphic plotting parts draw the line of the beginning and end connecting each annexation according to the position of the beginning and end of each annexation in defined region, and in defined region, draw each object, wherein object is superimposed upon on line.
According to present disclosure display device, when presenting object and annexation thereof, it is considered to the size and location of object obtains the centre of figure of object, the annexation of object is depicted as simple line, is then superimposed upon on line by object.As such, it is possible to one mode easily presents object and annexation thereof graphically.
Alternatively, in content presenting device disclosed herein, when the object presented or its annexation change, position determining component can redefine the position of each object and the beginning and end position of each annexation, and graphic plotting parts rendered object and the line corresponding to annexation in defined region again.
Alternatively, content presenting device disclosed herein can use HTML5 or the presentation mode compatible with HTML5, page layout parts can use the Canvas unit in HTML usually to define to present region, and graphic plotting parts can use the Div unit in HTML usually to define object.Such as, for each object, graphic plotting parts utilize a Div unit usually to define the size and location of object, utilize the 2nd Div element definition corresponding to the icon of this object, and utilize the 3rd Div element definition corresponding to the object factory of this object, wherein the 2nd Div element and third element are included in a Div element.
HTML5 be W3C in the standard specified in the recent period, HTML5 is suitable to present webpage in the various web browsers in various subscriber equipmenies (including traditional computer and at present fast-developing mobile terminal).Therefore use HTML5 so that content presenting device can be widely applied in various equipment.
According to another aspect of the present invention, it is provided that a kind of content presenting method, be suitable to present one or more object and one or more object annexation graphically.This content presenting method is included in content defined in display device for the region graphically presented;Attribute according to each object determines corresponding object position in defined region, determines the beginning and end of annexation position in defined region according to the position of each object;And in defined region, the line of beginning and end connecting each annexation is drawn according to the position of the beginning and end of each annexation, and in defined region, draw each object, wherein said each object is superimposed upon on described line.
According to present disclosure rendering method, when presenting object and annexation thereof, it is considered to the size and location of object obtains the centre of figure of object, the annexation of object is depicted as simple line, is then superimposed upon on line by object.As such, it is possible to one mode easily presents object and annexation thereof graphically.
Content presenting device disclosed herein and method are especially suitable for utilization in web browser, and are particularly suited for showing the application of network topology structure.
Accompanying drawing explanation
By reading the detailed description of hereafter preferred implementation, various other advantage and benefit those of ordinary skill in the art be will be clear from understanding.Accompanying drawing is only used for illustrating the purpose of preferred implementation, and is not considered as limitation of the present invention.And in whole accompanying drawing, it is denoted by the same reference numerals identical parts.In the accompanying drawings:
Fig. 1 shows the schematic block diagram of content presenting device according to an embodiment of the invention;
Fig. 2 shows the schematic diagram of the object relation that content presenting device presents according to an embodiment of the invention;
Fig. 3 shows the object and the schematic diagram of object relation that content presenting device presents according to an embodiment of the invention;
Fig. 4 A-4C shows that the most relevant object presents the schematic diagram that region zooms in and out;
Fig. 5 shows the schematic diagram of object definition according to an embodiment of the invention;And
Fig. 6 schematically shows the flow chart of content presenting method according to an embodiment of the invention.
Detailed description of the invention
The invention will be further described with specific embodiment below in conjunction with the accompanying drawings.
Fig. 1 shows the schematic block diagram of content presenting device 100 according to an embodiment of the invention.Content presenting device 100 can be adapted for presenting the web browser of Webpage.Along with the hardware and software technology of internet and mobile device develops, but occur in that various not web browser have employed the client application of various web browser kernel (such as, IE kernel etc.).Content presenting device 100 can contain these application, and all client application of Webpage that can present are all within protection scope of the present invention.
Content presenting device 100 can present, presenting region 110, the content that content presenting device 100 is received.Outside content presenting device 100 is except presenting the web page contents of general content, such as html format, it is further adapted for presenting the annexation between one or more object and one or more these objects graphically.The structure being much suitable to present can be expressed as the annexation between object and object.Such as, in field of network management, network topology structure can be expressed as the annexation between each NE and NE;In database field, in data base, the association between form may also indicate that as the incidence relation between each tables of data and these tables of data.Therefore, how in content presenting device, to present the annexation between this object and object in mode easily and there is the most universal application.
Content presenting device 100 includes page layout parts 120, is suitable to be specifically designed to the object of the annexation graphically presented between these object and objects defined in region 110 present region 112 in presenting of content presenting device 100.Alternatively, object presents region 112 and can be stretched, compresses and move in presenting region 100, and also can follow and present region and move.In general, when object presents the position in region 112 or size changes, object presents the content presented in region 112 and should also be as changing accordingly, and this will be described in detail below.
Content presenting device 100 also includes position determining component 130, for determining these objects and the object relation position in object presents region 112 according to the object relation between one or more object defined and one or more these objects.Specifically, each object can be defined by one or more attribute.Alternatively, these attributes include initial size (such as length and width) and the initial position etc. of object of object.Such as, an object can have the property that
top:10px;left:10px;width:50px;height:80px;ID:object1
The above-mentioned attribute specification object that ID is object1 has width and the width of 80 pixels of 50 pixels, and its upper left corner has coordinate (10,10) in object presents the coordinate system in region 112.In the client display device of such as web browser etc, typically by include presenting region 110 and object presents the initial point in the various regions including region 112 and is arranged on the upper left corner, the right extension of X axis and Y-axis downwardly extend.
Should be noted that, these sizes and the size of object is defined in relation to object and presents region 110 definition above, the part in region 110 is the most only presented owing to object presents region 112, object finally to present in presenting region 110, therefore to present object in presenting region 110 suitably, it is necessary to calculate object absolute size in subject area 110 and position according to the relative initial size of object and the relative initial position of object.
Alternatively, the initial position of object utilizes relative scale coordinate to define.The value of Scale Translate is the ratio that object absolute value in object presents region 102 and object present area size.For example it is assumed that it is W pixel that object presents the width in region, height is H pixel, then the coboundary distance presenting region relative to object is Y pixel, and boundary is that the Scale Translate (Xp, Yp) of node of X pixel can be defined as From Left:
Xp = X * 100 / W
Yp = Y * 100 / H
Wherein, value 100 means that Scale Translate value is calculated as a percentage.
Subsequently, when presenting this node in presenting region, according to equation below, the Scale Translate (Xp, Yp) of object can be converted into relative to the absolute coordinate (Xa, Yp) presenting region
Xa = (Xp * W / 100) + Xc
Ya=(Yp * H/100)+Yc,
Wherein Xc and Yc respectively object presents the upper left corner in region 112 absolute coordinate in presenting region.
Position determining component 130 can utilize above-mentioned conversion regime to be that each object determines its absolute coordinate.After determining its absolute coordinate for each object, position determining component 130 can also determine its coordinate for each object relation.Object relation can relate to two or with multiple objects, and therefore, object relation can be defined by involved object.Alternatively, object relation can be defined as follows:
<relation name=relation1 from=object1 to=object2 />
There is defined this object relation relation1 and point to object2 from object object1.Object relation can be stated by the line pointing to another object from an object.Or, when object relation relates to exceeding multiple object, object relation can be represented by the star line connecting these objects.
Therefore, position determining component 130 needs to determine the beginning and end of these lines for each object relation.It is alternatively possible to the beginning and end of object relation is defined as the center of object involved by object relation.Such as, the top left co-ordinate at object is (Xa, Ya), and when its width and length are respectively Wa and La, the coordinate of object centers position is (Xa+Wa/2, Ya+La/2).
Content presenting device 100 also includes graphic plotting parts 140.Graphic plotting parts 140 receive the beginning and end coordinate of the line corresponding to the absolute coordinate of each object determined by position determining component 130 and each object relation, then draw these objects and object relation in object presents region 112.Graphic plotting parts 140 first rendered object relation in object presents region 112, when object relation relates to two objects, object relation can be plotted as the line from an object centers to another object centers.And when object relation relates to three or more objects, this can draw the astroid of the object centers connecting involved object.For example, it is possible to first determine the center of star according to the coordinate of these object centers, then draw the line from star centre to each object centers.It should be noted that, the present invention is not limited to these astroid connected modes, it is possible to the mode multiple object centers linked together is all within protection scope of the present invention.
Fig. 2 shows being depicted the schematic diagram after object relation by graphic plotting parts 140.As in figure 2 it is shown, now depicted various line in object presents region 112.Subsequently, graphic plotting parts 140, according to the absolute position by object each determined by position determining component, draw each object in object presents region 112.Connect due to line is all the position of object centers, and therefore when rendered object, object is just superimposed upon on line.Fig. 3 shows and is depicted the schematic diagram after object and object relation by graphic plotting parts 140.As it is shown on figure 3, object is superimposed upon on line.Although it should be noted that, the process of rendered object after describing first drafting connection in the above-described embodiments, but as long as object is superimposed upon on connection, the order of the two is can be arbitrary.
Alternatively, graphic plotting parts 140 can be before rendered object and object relation, and first in presenting region 110, rendered object presents region 112.
In the content presenting device 100 shown in Fig. 1, first defined by page layout parts 120 and present the object of object and object relation specially and present region, then determined the absolute coordinate presenting object according to the relative coordinate of object predefined by position determining component 130, and object relation is defined as connecting the line at associated objects center, finally drawn these lines and object respectively by graphic plotting parts 140, so that object is superimposed upon on line, thus mode of graphically changing presents these objects and corresponding object relation.Content presenting device 100 provides one and presents object topological structure graphically in conveniently mode.
Alternatively, object presents region 112 and can move in presenting region 110 and zoom in and out (such as, can the instruction of user based on content presenting device 100 carry out), say, that object presents the top left co-ordinate in region 112, width and length and can change.And when object presents the position in region 112 or size changes, position determining component 130 recalculates absolute position for each object and object relation, and then graphic plotting parts 140 present each object and object relation again according to the new positional value calculated.Therefore, the object presented and object relation thereof can adapt to different page sizes automatically.Even if these objects and object relation thereof have the display of different resolution (resolution of display determines and presents the size in region) display, or in use change object and present the size in region, also can obtain identical effect.
Fig. 4 A-4C shows that the most relevant object presents the schematic diagram that region zooms in and out.Fig. 4 A shows according to one embodiment of the invention, presents region at object and present the schematic diagram of each object and object relation.Fig. 4 A is to be illustrated as a example by the relation between network node and network node, i.e. network topology structure.Fig. 4 B show object present region increase by 1.5 times in the width direction time, if object not presented the diagram when network topology in region is updated.Fig. 4 C shows according to one embodiment of present invention, when object present region increase by 1.5 times in the width direction time, mutually reply object present the diagram after the network topology structure in region is updated.
As shown in figs. 4 a-4 c, if object presents the size in region or position there occurs change, if the content presented during upgating object does not presents region, then display effect can be made not good enough.And present disclosure display device 100 have employed relative Scale Translate to define object and object relation, therefore can present the coordinate in region according to object easily and carry out the coordinate of upgating object and object relation, and again present.
Alternatively, the object presented and/or object relation can be operated by the user of content presenting device 100.Such as, user can revise the attribute of object, mobile object location, amendment object relation, add new association or delete the most relevant etc. between objects.To this end, content presenting device 100 can also include user interface 150, be suitable to receive user about these objects and/or the operation of object relation.And it is similar above-mentioned, after user carries out aforesaid operations, position determining component 130 can redefine position and the beginning and end position of each annexation of each object based on user operation, and graphic plotting parts 140 can present these objects again in object presents region.
It addition, as it was previously stated, each object has corresponding attribute.Each object is in addition to corresponding position and size attribute, it is also possible to include the description of object and the attribute of the icon etc of object.When graphic plotting parts 140 rendered object, it may be considered that present the description of object simultaneously and represent the object icon of object.
Alternatively, content presenting device 100 can use HTML5 to present the topological structure of object.HTML5 is that the up-to-date webpage formulated by W3C presents standard, can the most dynamically present.Certainly, content presenting device 100 can be not merely limited to use HTML5, and that be likely to occur in the future and that HTML5 is compatible form is all within protection scope of the present invention.When content presenting device 100 uses HTML5 to carry out topological structure in now, and page layout parts 120 can use HTML Canvas unit in 5 usually defines object and presents region 112.Graphic plotting parts 140 then can utilize the correlation function in javascript (such as, include but not limited to, moveTo(x, y), lineTo (x, y), stroke () etc.) in region defined in canvas element, drafting line represents the annexation between object.It addition, graphic plotting parts utilize the div unit in HTML usually define and present object.
Fig. 5 shows and utilizes the schematic diagram of object defined in div element.As shown in Figure 5, one object can utilize one or more div to define, wherein the outside bold portion of object is defined by a div, this div element is in addition to the size and location of definition object, also there is attribute z-index to define this object layer in canvas, and be an abstract conception in html middle level, when the location overlap of two elements, the element that z-index attribute is big can cover the little element of z-index.Therefore, by giving a bigger value for the attribute z-index in the div of object, it can be ensured that this object covers on the line of object relation.
Alternatively, in each contents of object, such as can define the dotted portion in the marked inner upper of solid line with another div, in the portion, div defines the icon of object.Can define with div it addition, mark the dotted portion of beneath portions at solid line, in the portion, define the description of this object.
Object shown in Fig. 5 can utilize following div unit usually to define:
<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>
Above-mentioned div defines an object, and its icon is file icons/switcher.png, and entitled router.
Should be noted that, outer layer DIV, owing to determining position and the size of object, is therefore the key defining object, but is used for defining object icon and describing internal div to use other structure according to actual needs inside object, such as only have icon without word, or only word without icon;Icon and word can also be accommodated without DIV, directly icon or word are placed in outside DIV inside etc..
Fig. 6 schematically shows the flow chart of content presenting method 600 according to an embodiment of the invention.Method shown in Fig. 6 is suitable to perform so that the annexation (hereinafter, being referred to as object topological structure) presented in content presenting device 100 between object and object in above-mentioned content presenting device 100.Method 600 starts from step S610, wherein presents region at the object being used for graphically presenting object topological structure defined in content presenting device.This step S610 can be performed by page layout parts 120.Subsequently, in step S620, determine this object position in object presents region according to the attribute of each object to be presented.After the position determining object, determine the beginning and end of one or more annexation position in object presents region always according to the object involved by the position of each object and object annexation.Step S620 is suitable to perform in position determining component 130.As it has been described above, the initial position of object can utilize relative scale coordinate to define, in step S620, needing the relative scale Coordinate Conversion of each object is absolute coordinate.Further, since object relation can be defined by involved object.Such as, when object relation relates to exceeding multiple object, object relation can be represented by the star line connecting these objects.In step S620, need to determine the beginning and end of these lines for each object relation.It is alternatively possible to as mentioned above the beginning and end of object relation is defined as the center of object involved by object relation.
After the position that step S620 determines object and annexation thereof, in step S630, in object presents region, draw the line of the beginning and end connecting each annexation according to the position of the beginning and end of each annexation.After depicting the line representing object annexation, in step S630, in object presents region, draw each object, it shall be noted that be that object is generally superimposed upon on line.Step S630 can be performed by graphic plotting parts 140.
Alternatively, can move and scale owing to object presents region, therefore, object rendering method also includes, when object present region be moved and/or scale time, redefine the position of each object and the beginning and end position of each annexation, and in object presents region, again draw described object and the process of the line corresponding to annexation.
Further optionally, the object presented and/or object relation can be operated by the user of content presenting device 100.Such as, user can revise the attribute of object, mobile object location, amendment object relation, add new association or delete the most relevant etc. between objects.For this, content presenting method also includes the step receiving the various operations of user, and when user operates, position and the beginning and end position of each annexation of each object, and rendered object and the step of the line corresponding to annexation in object presents region again is redefined based on user operation.
It addition, as it was previously stated, each object has corresponding attribute.Each object is in addition to corresponding position and size attribute, it is also possible to include the description of object and the attribute of the icon etc of object.When rendered object, it may be considered that present the description of object simultaneously and represent the object icon of object.
Alternatively, content presenting method 100 can use HTML5 to present the topological structure of object.Such as, object presents region and usually can define with the canvas unit in HTML 5.The line representing the annexation between object can utilize the correlation function in javascript (such as, to include but not limited to, moveTo(x, y), lineTo (x, y), stroke () etc.) draw in region defined in canvas element.It addition, graphic plotting parts utilize the div unit in HTML usually define and present object.
Alternatively, as it has been described above, when using div to define object, content presenting method 100 can usually define the size and location of this object first with a Div unit;Subsequently, it is utilized respectively the 2nd Div element definition and corresponding to the icon of this object and utilizes the 3rd Div element definition to correspond to the object factory of this object, and described 2nd Div element and third element are included in a Div element.
Provide the scheme presenting object topological structure on the terminal unit being easy within such as web browser graphically according to present disclosure display device and content presenting method, it is simple that the program has realization, is easily developed the advantage that personnel are grasped.
It addition, according to the solution of the present invention owing to HTML 5 can be utilized to carry out, therefore it supports various major browsers, developer is made to be not required to browser-safe sex chromosome mosaicism of worrying.
Should be noted that, in all parts of present disclosure display device, the function to be realized according to it and parts therein have been carried out logical partitioning, but, the present invention is not only restricted to this, can repartition all parts as required or combine, such as, can be single parts by some unit constructions, or some parts can be further broken into more subassembly.
The all parts embodiment of the present invention can realize with hardware, or realizes with the software module run on one or more processor, or realizes with combinations thereof.It will be understood by those of skill in the art that the some or all functions that microprocessor or digital signal processor (DSP) can be used in practice to realize the some or all parts in content presenting device according to embodiments of the present invention.The present invention is also implemented as part or all the equipment for performing method as described herein or device program (such as, computer program and computer program).The program of such present invention of realization can store on a computer-readable medium.
The present invention will be described rather than limits the invention to it should be noted above-described embodiment, and those skilled in the art can design alternative embodiment without departing from the scope of the appended claims.In the claims, any reference marks that should not will be located between bracket is configured to limitations on claims.Word " comprises " and does not excludes the presence of the element or step not arranged in the claims.Word "a" or "an" before being positioned at element does not excludes the presence of multiple such element.The present invention by means of including the hardware of some different elements and can realize by means of properly programmed computer.If in the unit claim listing equipment for drying, several in these devices can be specifically to be embodied by same hardware branch.Word first, second and third use do not indicate that any order.Can be title by these word explanations.

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.
CN201110432332.3A 2011-12-21 2011-12-21 A kind of content presenting device and method Active CN103176993B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201110432332.3A CN103176993B (en) 2011-12-21 2011-12-21 A kind of content presenting device and method

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201110432332.3A CN103176993B (en) 2011-12-21 2011-12-21 A kind of content presenting device and method

Publications (2)

Publication Number Publication Date
CN103176993A CN103176993A (en) 2013-06-26
CN103176993B true CN103176993B (en) 2016-08-24

Family

ID=48636874

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201110432332.3A Active CN103176993B (en) 2011-12-21 2011-12-21 A kind of content presenting device and method

Country Status (1)

Country Link
CN (1) CN103176993B (en)

Families Citing this family (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104573158A (en) * 2013-10-24 2015-04-29 中兴通讯股份有限公司 Pattern amplifying method and device in topological graph
CN104346170A (en) * 2014-10-15 2015-02-11 浪潮(北京)电子信息产业有限公司 Canvas-based topological graph generating method and device
CN105095593A (en) * 2015-08-13 2015-11-25 浪潮(北京)电子信息产业有限公司 Patterned topology generating method and system
CN105094838B (en) * 2015-08-13 2019-01-18 浪潮(北京)电子信息产业有限公司 A kind of patterned generation method of response type and system
CN106547419A (en) * 2015-09-23 2017-03-29 阿里巴巴集团控股有限公司 A kind of object rendering method and equipment
CN106652041A (en) * 2016-12-21 2017-05-10 武汉大学 HTML5-based three-dimensional virtual wiring method
CN109445778A (en) * 2018-09-13 2019-03-08 珠海豆饭科技有限公司 A kind of method and apparatus that the interface auxiliary based on SVG file generates

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2000042739A1 (en) * 1999-01-16 2000-07-20 New Access Communications System and method of simulating a star network topology
CN101729353A (en) * 2008-11-03 2010-06-09 华为技术有限公司 Method, device and system of network topology layout
CN101751383A (en) * 2009-12-30 2010-06-23 北京天融信科技有限公司 Method for describing network topology by using SVG
CN102185706A (en) * 2011-04-13 2011-09-14 北京航空航天大学 Method for generating IEEE1394 (Institute of Electrical and Electronics Engineers 1394) network topological graph

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7738397B2 (en) * 2004-02-19 2010-06-15 Intel Corporation Generating topology information identifying devices in a network topology

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2000042739A1 (en) * 1999-01-16 2000-07-20 New Access Communications System and method of simulating a star network topology
CN101729353A (en) * 2008-11-03 2010-06-09 华为技术有限公司 Method, device and system of network topology layout
CN101751383A (en) * 2009-12-30 2010-06-23 北京天融信科技有限公司 Method for describing network topology by using SVG
CN102185706A (en) * 2011-04-13 2011-09-14 北京航空航天大学 Method for generating IEEE1394 (Institute of Electrical and Electronics Engineers 1394) network topological graph

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于Web的网络管理中拓扑发现及显示算法的研究与实现;鲁成茂;《中国优秀硕士学位论文全文数据库 信息科技辑》;20060815;全文 *

Also Published As

Publication number Publication date
CN103176993A (en) 2013-06-26

Similar Documents

Publication Publication Date Title
CN103176993B (en) A kind of content presenting device and method
US20190043227A1 (en) Draggable Maps
US9866612B2 (en) Server-based browser system
US7210099B2 (en) Resolution independent vector display of internet content
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
US8606329B2 (en) Method and apparatus for rendering web pages utilizing external rendering rules
US20080077880A1 (en) Method and device for selecting and displaying a region of interest in an electronic document
US20040268299A1 (en) Application user interface template with free-form layout
US8872848B1 (en) Rendering vector data as tiles
WO2001052034A1 (en) Multiple graphics image viewer
WO2011091739A1 (en) Focal element display method and device and digital television receiving terminal
JP2011040034A (en) Website browsing system, server, and client terminal
JP2011186913A (en) Web site browsing system and server
US8122372B2 (en) Method and system for rendering web pages on a wireless handset
CN108268260A (en) It is a kind of quick micro- using assemble method based on integrated support technology
US9360339B2 (en) Rendering maps with canvas elements
CN111737618A (en) Vector diagram display method and device for Web end and computer equipment
CN204791004U (en) Medical treatment image inquiry system
US20170270218A1 (en) Mapping of Defined Regions Within a Webpage
US9024954B2 (en) Displaying partial logos
US20100251087A1 (en) Information browse apparatus
WO2012120704A1 (en) Web display program conversion system, web display program conversion method, and program for web display program conversion
JP2007003743A (en) Map data distribution service system, method therefor, server, mobile terminal, and recording medium
CN113722031A (en) Dynamic display method, device, medium and product of electronic signature
CN201820226U (en) Network data converter supporting multiple display modes

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant
CP01 Change in the name or title of a patent holder
CP01 Change in the name or title of a patent holder

Address after: 100089 Beijing city Haidian District Road No. 4 North wa Yitai five storey building

Patentee after: NSFOCUS Technologies Group Co.,Ltd.

Address before: 100089 Beijing city Haidian District Road No. 4 North wa Yitai five storey building

Patentee before: NSFOCUS INFORMATION TECHNOLOGY Co.,Ltd.