CN115512063A

CN115512063A - Method, device, medium and electronic equipment for displaying communication state

Info

Publication number: CN115512063A
Application number: CN202211304685.XA
Authority: CN
Inventors: 刘金; 汪峥
Original assignee: Beijing Topsec Technology Co Ltd; Beijing Topsec Network Security Technology Co Ltd; Beijing Topsec Software Co Ltd
Current assignee: Beijing Topsec Technology Co Ltd; Beijing Topsec Network Security Technology Co Ltd; Beijing Topsec Software Co Ltd
Priority date: 2022-10-24
Filing date: 2022-10-24
Publication date: 2022-12-23

Abstract

The embodiment of the application provides a method, a device, a medium and electronic equipment for displaying a communication state, wherein the method comprises the following steps: acquiring a communication state according to the system flow monitoring data; the method comprises the steps of obtaining at least one target flying line on a 3D earth assembly, wherein each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line through settable flying line parameters; and displaying the communication state by adopting the at least one target flying line. Some embodiments of the present application are not limited to one color line pattern, or to the restriction of adapting only one tunneling state, the method has the advantages that the flying line special effect is good and smooth, the independent use or the matched use with a frame is convenient, and the configuration can be flexibly carried out according to the requirements.

Description

Method, device, medium and electronic equipment for displaying communication state

Technical Field

The present application relates to the field of large-screen information systems, and in particular, to a method, an apparatus, a medium, and an electronic device for displaying a communication state.

Background

With the progress of the WEB front-end technology and the continuous improvement of the performance of hardware equipment, the large-screen information system has more and more functional requirements for data display. Compared with the traditional animation effect, the method is not enough to support the current large-data multi-dimensional presentation. Js is also receiving more and more attention as an important technology in the WEB front-end technology, and the excellent tunnel flying line effect can enable a large-screen interface to be clearer and more reasonable, and a visual program is high to help business personnel to find and diagnose business problems.

On the current large screen project on the Internet, all the large screen projects support the special effect of the tunnel fly line, data can be described in a graph and text mode, and the fly line can be drawn on a curve. However, the flying line special effect line patterns realized by the flying line special effect line patterns are not good enough, flexible parameter configuration cannot be realized so as to achieve the purpose that the flying line special effect line patterns can be used in any system scene, and the flying line special effect line patterns have limitations and poor adaptability and cannot meet diversified requirements of users.

Disclosure of Invention

The embodiments of the present disclosure are not limited to a color line pattern or only a restriction of adapting to a tunnel communication state, and the present disclosure provides a method that is beautiful and smooth, facilitates independent use or use in cooperation with a frame, and can be flexibly configured according to requirements.

In a first aspect, an embodiment of the present application provides a method for showing a communication state, where the method includes: acquiring a communication state according to the system flow monitoring data; the method comprises the steps of obtaining at least one target flying line on a 3D earth component, wherein each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters; and displaying the communication state by adopting the at least one target flying line.

Some embodiments of the application provide a technical scheme that can set up the display effect of flying line in a flexible way, promote the display effect to communication state.

In some embodiments, the acquiring at least one target flight line on the 3D earth component comprises: adopting three.js to initialize the environment to obtain a target scene; creating a bottom line in the target scene; creating at least one fly line; and performing animation and rendering on the at least one flying line to obtain the at least one target flying line.

Some embodiments of the present application provide a method of creating a fly-line using three.

In some embodiments, said creating a bottom line in said target scene comprises: acquiring coordinates of two control points according to the coordinates of the starting point and the coordinates of the ending point of each object; creating a curve according to the starting point, the ending point and the two control points; inserting a set number of points on the curve to obtain coordinate values of all the points; storing the coordinate values of all the points into a point set path array; and obtaining the bottom line according to the data in the point set path array.

Some embodiments of the present application provide a method of creating a bottom line.

In some embodiments, said deriving said base line from data in said array of point set paths comprises: assigning the numerical value in the point set path array to a bottom line geometric body to obtain an initial bottom line; setting the material of the initial bottom line; and obtaining the bottom line according to the initial bottom line and the material.

Some embodiments of the present application provide a process for completing the creation of a bottom line from a set of points.

In some embodiments, the material comprises: color and line width.

In some embodiments, the creating at least one fly line comprises: obtaining data in each flying line path array according to the data in the point set path array and the intercepted starting point and length of each flying line; assigning the data in each flying line path array to a corresponding flying line geometry to obtain each initial flying line; setting the material of the initial flying line to obtain each flying line; and storing the data corresponding to each flying wire into a flying wire array.

Some embodiments of the present application provide a method for obtaining a point set on a flying lead path, and provide a technical solution for obtaining a flying lead according to the point set.

In some embodiments, the setting of the material of the initial flying line includes: setting the initial flying line to be a gradient color or a pure color, wherein the value of the gradient color is obtained by a color difference method of the bottom line and the initial flying line, and the pure color is used for representing that the color values of the bottom line and the initial flying line are the same.

The material of the fly line of some embodiments of this application can set up to gradient or pure tone, promotes the fly line display effect.

In some embodiments, the animating and rendering the at least one fly line to obtain the at least one target fly line includes: and the browser periodically calls a rendering method to respectively render all flying lines in the at least one flying line to obtain the at least one target flying line.

According to the method and the device, the rendering of the animation is performed by the requestanimation Fram function, so that complicated steps are removed, and the performance is improved.

In a second aspect, some embodiments of the present application provide an apparatus for demonstrating communication status, the apparatus comprising: and the communication state acquisition module is configured to acquire a communication state according to the system flow monitoring data. The target flying line acquisition module is configured to acquire at least one target flying line on the 3D earth component, wherein each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters. A presentation module configured to present the communication status with the at least one target flying line.

In a third aspect, some embodiments of the present application provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, may implement the method as described in any of the embodiments of the first aspect.

In a fourth aspect, some embodiments of the present application provide an electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the program, may implement the method according to any of the embodiments of the first aspect.

Drawings

To more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are required to be used in the embodiments of the present application will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and that those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.

Fig. 1 is an architecture diagram of a system for displaying communication states according to an embodiment of the present application;

fig. 2 is a flowchart of a method for showing a communication status according to an embodiment of the present application;

FIG. 3 is a block diagram of an apparatus for displaying communication status according to an embodiment of the present application;

fig. 4 is a schematic composition diagram of an electronic device according to an embodiment of the present application.

Detailed Description

The technical solutions in the embodiments of the present application will be described below with reference to the drawings in the embodiments of the present application.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present application, the terms "first", "second", and the like are used only for distinguishing the description, and are not construed as indicating or implying relative importance.

Referring to fig. 1, fig. 1 is a system for displaying a communication state according to an embodiment of the present application, where the system includes a server 100 and a terminal device 200, and the terminal device 200 has a large-screen display panel.

In some embodiments of the present application, the server 100 may apply a next generation secure operating system NGTOS, and monitor network traffic through the NGTOS system to obtain a communication status of the network. The server 100 transmits the obtained communication state to the terminal device 200, which displays the communication state through the large-screen display panel.

A method performed by the terminal device 200 for presenting a communication status is exemplarily set forth below in connection with fig. 2.

As shown in fig. 2, an embodiment of the present application provides a method for presenting a communication state, where the method includes: s101, acquiring a communication state according to system flow monitoring data; s102, obtaining at least one target flying line on the 3D earth component, wherein each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters; s103, displaying the communication state by adopting the at least one target flying line.

Some embodiments of the application provide a technical scheme that can set up flying lead display effect in a flexible way, promote the display effect to communication state.

The following exemplarily explains the implementation process of S101.

The acquiring of the communication state involved in S101 may be reading the communication state from the storage unit, or obtaining the communication state according to the monitored system traffic data.

The following exemplarily sets forth the implementation of S102.

In some embodiments of the present application, S102 illustratively includes the following four steps:

firstly, adopting three.js to initialize the environment to obtain a target scene.

Some embodiments of the present application draw smooth, attractive fly-lines, i.e., curves, by way of three. Some embodiments of the present application may configure json through a 3d earth component to control the display effect of different flying lines on an interface, where a static path attribute is tunnel flying line interface data, a type is an object array, each object may configure a starting point longitude and latitude, a finishing point longitude and latitude, a bottom line color, and a flying line color, where the flying line effect has two display forms, one is a solid color display, that is, the bottom line and the flying line color are set to the same color value; the other is fading, i.e., the base line and fly line color values are different.

And secondly, creating a bottom line in the target scene.

In some embodiments, said deriving said base line from data in said array of point set paths comprises: assigning the numerical values in the point set path array to a bottom line geometric body to obtain an initial bottom line; setting the material of the initial bottom line; and obtaining the bottom line according to the initial bottom line and the material.

In some embodiments, the materials include: color and line width.

For example, the process of creating a bottom line in the target scene in some embodiments of the present application includes:

1) In order to draw a bezier curve, two middle control points are first found according to the start point and the end point.

a) Firstly, converting longitude and latitude coordinates of a starting point and a terminating point in each object into xyz coordinates according to a static Path attribute configured in json.

b) Secondly, calculating a vector included angle according to a calculation formula (vo 0.Angleto (v 3) × 7)/Math.PI by using v0 (a starting coordinate point) and v3 (a terminating coordinate point), obtaining a control curve radian by using the vector included angle, and obtaining a normal vector by using new THEE.Vector3 (0,0,0); and finally, obtaining the coordinates of the specified proportion position between the two points through the starting point (end point), the vertex and the curve radian, and obtaining the middle two control points.

c) The middle two control point coordinates are found and a bezier curve is drawn for the purpose below.

2) Draw a Bezier curve, to achieve 3) create the bottom line.

a) Draw a smooth three-dimensional cubic bezier curve using the same. Cubicbezier curve3 (), created by defining the start point, the end point, and two control points in the previous step

b) 120 segments are inserted between curves in the last step by using a getPoints () method provided by a curve base class (120 segments are most fit to actual needs through code actual test), 121 points are obtained (the more the curve is divided, the denser the division is, the more the points are, the smoother the curve is), and the points are stored in a point path array, and for the 3 rd step, the point array is assigned to a bottom line geometric body.

3) A bottom line is created.

a) Line objects are created using the method. LineGeometry () constructor, and the above 121 point array is assigned to the instance object of LineGeometry by the setpoints () method.

b) Linematerial () constructor is used to set the material of the line, i.e., line color, line width, etc.

c) Line2 () constructor is used to draw line segments in conjunction with material.

In a second step, at least one fly line is created.

In some embodiments, the creating at least one fly line comprises: according to the data in the point set path array and the starting point and the length of each intercepted flying line, obtaining data in each fly-line path array; assigning the data in each flying line path array to a corresponding flying line geometry to obtain each initial flying line; setting the material of the initial flying line to obtain each flying line; and storing the data corresponding to each flying wire into a flying wire array.

For example, creating at least one fly line in some embodiments of the present application illustratively includes:

and intercepting the starting point and the intercepting length of the flying line by using the point path array set, and storing the obtained path array of the flying line into a flyPoint array for assigning to a flying line geometry.

Flying leads were created by the same method as in step 3).

Different from the step 3), the method is characterized in that the material of the fly line is set, the material of the fly line needs to be set with gradient color, the gradient color value is obtained by a bottom line and fly line color interpolation method, the color of the line is set, and the bottom line and the fly line are set to be pure color when the color values of the bottom line and the fly line are the same; when the color values are different, the color is gradually changed.

The resulting line model is stored in the array lineArr.

static Path loops the array creation step 3) and step 4) until the loop ends, using the lineArr fly line to perform the animation effect for the loop in step 5).

And fourthly, performing animation and rendering on the at least one flying line to obtain the at least one target flying line.

In some embodiments, the animating and rendering the at least one fly line to obtain the at least one target fly line includes: and the browser periodically calls a rendering method to respectively render all flying lines in the at least one flying line to obtain the at least one target flying line. According to the method and the device, the rendering of the animation is performed by the requestanimation Fram function, so that complicated steps are removed, and the performance is improved.

For example, in some embodiments of the present application, animating and rendering the at least one fly line to obtain the at least one target fly line includes:

a) According to the stored lineArr after the static Path circulation is finished, the array is circulated, by combining project requirements, after actual test, the starting point +0.02 of the intercepted flying line is added with 1 for each time, and then the flying line in the new flying line path array creation step 4) is obtained by using the new intercepting starting point and the new intercepting length.

b) And finally, calling a render method about once every 16.7ms by default through a thread.js built-in request animation framework function browser so as to realize the communication tunnel fly line special effect.

Some embodiments of the present application provide a method of creating a fly line using three.

The technical solution of the present application is described below with reference to two examples.

Example 1: fly-line monochrome display

1) The static path attribute configured in json of the 3d earth component is an object array type, wherein two color values set by a color attribute in the object are the same.

2) When the two color values are the same, the color is displayed in a single color.

Example 2: fly-line gradual change display

1) The static Path attribute configured in the json of the 3d earth component is an object array type, wherein two color values set by the color attribute in the object are different.

2) When the two color values are different, the color will show up as a gradient.

Referring to fig. 3, fig. 3 shows an apparatus for demonstrating a communication state provided by an embodiment of the present application, it should be understood that the apparatus corresponds to the above-mentioned method embodiment of fig. 2, and is capable of performing various steps related to the above-mentioned method embodiment, and specific functions of the apparatus may be referred to the above description, and a detailed description is appropriately omitted herein to avoid repetition. The device comprises at least one software functional module which can be stored in a memory in the form of software or firmware or solidified in an operating system of the device, and the device for showing the communication state comprises: the device comprises a communication state acquisition module 101, a target flying wire acquisition module 102 and a display module 103.

And the communication state acquisition module is configured to acquire a communication state according to the system flow monitoring data.

The target flying line acquiring module 102 is configured to acquire at least one target flying line on the 3D earth component, where each entry target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters.

A display module 103 configured to display the communication state using the at least one target flying line.

It is clear to those skilled in the art that, for convenience and brevity of description, the specific working process of the apparatus described above may refer to the corresponding process in the foregoing method, and will not be described in too much detail herein.

Some embodiments of the application provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, may implement the method according to any of the embodiments described above.

As shown in fig. 4, some embodiments of the present application provide an electronic device 400, which includes a memory 410, a processor 420, and a computer program stored in the memory 410 and executable on the processor 420, wherein the processor 420 can implement the method according to any of the embodiments when reading the program through a bus 430 and executing the program.

Processor 520 may process digital signals and may include various computing structures. Such as a complex instruction set computer architecture, a architecturally reduced instruction set computer architecture, or an architecture that implements a combination of multiple instruction sets. In some examples, processor 520 may be a microprocessor.

Memory 510 may be used to store instructions that are executed by processor 520 or data related to the execution of the instructions. The instructions and/or data may include code for performing some or all of the functions of one or more of the modules described in embodiments of the application. The processor 520 of the disclosed embodiment may be used to execute the instructions in the memory 510 to implement the method shown in fig. 2. Memory 510 includes dynamic random access memory, static random access memory, flash memory, optical memory, or other memory known to those skilled in the art.

In the several embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other manners. The apparatus embodiments described above are merely illustrative, and for example, the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

In addition, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist alone, or two or more modules may be integrated to form an independent part.

The functions may be stored in a computer-readable storage medium if they are implemented in the form of software functional modules and sold or used as separate products. Based on such understanding, the technical solutions of the present application or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.

The above description is only an example of the present application and is not intended to limit the scope of the present application, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, improvement and the like made within the spirit and principle of the present application shall be included in the protection scope of the present application. It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

The above description is only for the specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think of the changes or substitutions within the technical scope of the present application, and shall be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising a … …" does not exclude the presence of another identical element in a process, method, article, or apparatus that comprises the element.

Claims

1. A method for presenting communication status, the method comprising:

acquiring a communication state according to the system flow monitoring data;

the method comprises the steps of obtaining at least one target flying line on a 3D earth component, wherein each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters;

and displaying the communication state by adopting the at least one target flying line.

2. The method of claim 1, wherein said acquiring at least one target flight line on a 3D earth assembly comprises:

adopting three.js to initialize the environment to obtain a target scene;

creating a bottom line in the target scene;

creating at least one fly line;

and performing animation and rendering on the at least one flying line to obtain the at least one target flying line.

3. The method of claim 2, wherein said creating a bottom line in said target scene comprises:

acquiring coordinates of two control points according to the coordinates of the starting point and the coordinates of the ending point of each object;

creating a curve according to the starting point, the ending point and the two control points;

inserting a set number of points on the curve to obtain coordinate values of all the points;

storing the coordinate values of all the points into a point set path array;

and obtaining the bottom line according to the data in the point set path array.

4. The method of claim 3,

the obtaining the bottom line according to the data in the point set path array includes:

assigning the numerical value in the point set path array to a bottom line geometric body to obtain an initial bottom line;

setting the material of the initial bottom line;

and obtaining the bottom line according to the initial bottom line and the material.

5. The method of claim 4, wherein the material comprises: color and line width.

6. The method of claim 3, wherein the creating at least one fly line comprises:

obtaining data in each fly-line path array according to the data in the point set path array and the intercepted starting point and length of each fly-line;

assigning the data in each flying line path array to a corresponding flying line geometry to obtain each initial flying line;

setting the material of the initial flying line to obtain each flying line;

and storing the data corresponding to each flying wire into a flying wire array.

7. The method of claim 6, wherein said setting a material of said initial fly-line comprises: setting the initial flying line to be a gradient color or a pure color, wherein the value of the gradient color is obtained by a color difference method of the bottom line and the initial flying line, and the pure color is used for representing that the color values of the bottom line and the initial flying line are the same.

8. The method of claim 7, wherein the animating and rendering the at least one fly line to obtain the at least one target fly line comprises:

and the browser periodically calls a rendering method to respectively render all flying lines in the at least one flying line to obtain the at least one target flying line.

9. An apparatus for demonstrating communication status, the apparatus comprising:

a communication state acquisition module configured to acquire a communication state according to the system traffic monitoring data;

the system comprises a target flying line obtaining module, a data processing module and a data processing module, wherein the target flying line obtaining module is configured to obtain at least one target flying line on a 3D earth component, and each item target flying line in the at least one target flying line is obtained by setting a corresponding flying line according to settable flying line parameters;

a presentation module configured to present the communication status with the at least one target flying line.

10. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the method of any one of claims 1 to 8.

11. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor when executing the program is operable to implement the method of any one of claims 1-8.