A shield propulsion flat section view progress display method based on SVG technology

Abstract

The application discloses a method for displaying progress of a shield propulsion plane profile based on SVG technology, which comprises the following steps: 1) obtaining coordinate information of a plane axis, a plane tunnel width line, a profile axis and a profile tunnel width line; 2) adding display content of the profile axis and the profile tunnel width line in a platform front-end html file Labels and <svg>Label; 3) using JavaScript language, according to the real-time data of shield propulsion process, the actual progress of shield machine in the plane profile is updated. This method fully meets the needs of shield construction control platform managers, and makes the relevant information at a glance. After obtaining the current shield machine advancing ring number, the shield machine picture is accurately displayed in the plane profile progress, and the actual state of shield propulsion is truly displayed. This method displays the shield propulsion progress in the form of SVG file in html format, and it will not be distorted or distorted when zooming in or out on different resolution computers, greatly improving the operation experience of managers.< / svg>

Description

Technical Field

[0001] This invention belongs to the technical field of plan and section progress display during tunnel boring machine (TBM) advancement, specifically relating to a method for displaying the progress of TBM advancement plan and section based on SVG technology. Background Technology

[0002] Personnel managing the tunnel boring machine (TBM) construction platform need to monitor the TBM's advancement process in real time via a web interface, especially the surrounding geological conditions, strata, and environmental information. Currently, no effective method has been found for displaying the TBM's progress. CAD format files cannot be displayed on the web interface, and other traditional image formats are static images, lacking dynamic interactive functions and animation effects. Summary of the Invention

[0003] To address the shortcomings of existing technologies, the purpose of this invention is to provide a method for displaying the progress of tunnel boring machine (TBM) advance plan and profile diagrams based on SVG technology, providing accurate, intuitive, and real-time information on the TBM advance progress for management personnel on the TBM construction control platform.

[0004] To achieve the above objectives, the present invention adopts the following technical solution:

[0005] A method for displaying the progress of a tunnel boring machine's (TBM) advance plan and profile based on SVG technology includes the following steps:

[0006] 1) Obtain the coordinate information of the axis lines of the plan view, the tunnel width lines of the plan view, the axis lines of the cross section view, and the tunnel width lines of the cross section view;

[0007] 2) Add the content to be displayed in the platform's front-end HTML file. Tags and <svg>Label;

[0008] 3) Using JavaScript, the actual advancement status of the tunnel boring machine is updated based on real-time data from the tunnel boring machine advancement process.

[0009] Furthermore, the coordinate information in step 1) is obtained through a tunnel geological map, specifically including the following process:

[0010] 1-1) Load the SVG file to the webpage asynchronously;

[0011] 1-2) Retrieve from SVG file using JavaScript's lastElementChild function <svg>The last one in the tag <g>The tag is then obtained using the firstElementChild and nextElementSibling functions. <polyline>The tags are used to obtain the coordinate information of the plan view axis, the plan view tunnel width line, the section view axis, and the section view tunnel width line;

[0012] 1-3) Declare a direction variable to represent the left and right advancing direction of the shield tunneling progress diagram.

[0013] Furthermore, step 2) includes the following process:

[0014] 2-1) Add a [something] to the platform's front-end HTML file. The `` tag is used to store the elements needed to display the plan and section diagrams, where the width and height are the width and height of the visible area of ​​the HTML page on the platform's front end;

[0015] 2-2) Add a [something] to the platform's front-end HTML file. <svg>The `` tag has the following attributes: `display` attribute set to `inline-block`; `preserveAspectRatio` attribute set to `xMidYMid slice` to preserve the aspect ratio when scaling the plan view; `translate` attribute set to the difference between two coordinate points dragged by the mouse; and `scale` attribute set to 1.

[0016] 2-3) In <svg>Add a tag <path>The `<tunnel>` tag has the following attributes: `id` with the value `plane_motionPath`; `stroke` with the value `blue` to display the completed tunnel sections; `fill` with the value `none`; `stroke-width` with the value `length` of the tunnel width line; `stroke-linecap` with the value `butt`; and `d` with the value `coordinates` of all points preceding the tunnel boring machine on the plan view axis or section view axis.

[0017] 2-4) In <svg>Add a tag <image>The tag should include the following attributes: `id` attribute with the value `plane_img`; `xlink:href` attribute with the value `storage path` for the tunnel boring machine image; `x` attribute with the value `0`; `y` attribute with the value `the opposite of half the tunnel width line length`; and `height` attribute with the value `the length of the tunnel width line`.

[0018] 2-5) In <svg>Add a tag <animatemotion>Add an `id` attribute to this tag, setting its value to `plane_animimg`; add an `xlink:href` attribute to this tag, setting its value to... <image>The tag's ID is #plane_img; add the begin attribute to this tag and set its value to 0s; add the dur attribute to this tag and set its value to the duration of the tunnel boring machine's smooth motion animation; add the fill attribute to this tag and set its value to freeze so that the tunnel boring machine image stays in the corresponding position after the animation ends; add the cy attribute to this tag and set its value to 0; add the rotate attribute to this tag and set its value to auto-reverse so that the tunnel boring machine image moves along the tunnel axis and can adaptively rotate the image as the tunnel boring machine advances from right to left;

[0019] 2-6) In <animatemotion>Add a tag <mpath>Tags are used to create motion animations of the aforementioned tunnel boring machine images and... <path>To establish the connection between them, add an id attribute to the tag and set its value to plane_mpath; add an xlink:href attribute to the tag and set its value to #plane_motionPath;

[0020] 2-7) Using the getBBox function, obtain the left x-position value, the top y-position value, the width and height of the bounding box on the current computer screen, and then set these four values ​​to... <svg>The property values ​​of the viewBox;

[0021] 2-8) in <svg>The `onmousemove` event is set on the tag to execute the corresponding JavaScript method when the progress display of the plan and section view is dragged with the mouse. This method implements the drag operation by changing the value of the `translate` attribute.

[0022] 2-9) in <svg>The `onmousewheel` event is set in the tag to execute a corresponding JavaScript method when the mouse wheel is scrolled on the progress display graphic of the plan and section view. This method achieves the zooming operation of the progress display graphic by changing the value of the `scale` attribute.

[0023] Furthermore, step 3) specifically includes the following process:

[0024] 3-1) Suppose there are p+1 points on the axis of the planar graph, namely point 0, point 1, ..., point p. The x and y coordinates of these points are known. Point 0 is located in the 0th ring, point p is located in the last ring, and the ring numbers of the remaining points are unknown.

[0025] 3-2) Calculate the total length L of the axis lines in the plan view;

[0026] 3-3) Calculate the cumulative length l of the i-th point on the axis of the planar graph. i The cumulative length l here i This refers to the sum of the lengths of the first i line segments;

[0027] 3-4) Calculate the ring number r corresponding to the i-th point using the following formula. i :

[0028]

[0029] Where R represents the total tunnel loop number, r i Round the result up.

[0030] 3-5) Determine the current propulsion ring number r during the shield tunneling process. c Between which two points on the axis of the planar diagram are the corresponding ring numbers, if the current advancing ring number r c Located at r i-1 ring and r i Between the rings, the point c corresponding to the tunnel boring machine should be located on the line segment formed by point i-1 and point i;

[0031] 3-6) Calculate the cumulative length l of point c. c :

[0032]

[0033] The x-coordinate of point c is calculated based on the similarity of triangles. c for:

[0034]

[0035] Then, the ordinate y of point c can be calculated. c for:

[0036]

[0037] Compared with the prior art, the present invention has the following advantages:

[0038] 1. The method described in this invention fully meets the needs of the personnel managing the shield tunneling construction control platform, making the relevant information readily available to them;

[0039] 2. This invention uses a method to calculate the real-time position of the tunnel boring machine (TBM) to obtain the current advance ring number of the TBM and accurately displays the TBM image on the plan view and cross-sectional view, thus realistically showing the actual state of the TBM's advance.

[0040] 3. This invention uses SVG files in HTML format to display the progress of the tunnel boring machine. It can be zoomed in and out on computers with different resolutions without distortion or loss of quality, which greatly improves the operating experience for managers. Attached Figure Description

[0041] Figure 1 This is a flowchart illustrating the method for displaying the progress of a shield tunneling advance plan and profile based on SVG technology, as provided by the present invention.

[0042] Figure 2 This is a schematic diagram for drawing the axis lines of the plan view, the tunnel width lines of the plan view, the axis lines of the section view, and the tunnel width lines of the section view.

[0043] Figure 3 This is a schematic diagram illustrating a method for updating the actual advancement status of a tunnel boring machine (TBM) based on real-time data from the TBM advancement process.

[0044] Figure 4 This is a schematic diagram illustrating the overall effect of the invention. Detailed Implementation

[0045] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments.

[0046] The process of creating an SVG file is as follows: In CAD drawing software, the plan view and cross-sectional view of a certain shield tunnel section are drawn at the top and bottom of the canvas, respectively. On the plan view, the polyline tool of the CAD drawing software is used to draw the plan view axis and the plan view tunnel width line. The plan view axis is located in the exact center of the shield tunnel, drawn from left to right without interruption, ensuring a complete polyline is drawn. The plan view tunnel width line is drawn from top to bottom, at any position in the tunnel, perpendicular to the plan view axis. A similar method is used to draw the cross-sectional view axis and cross-sectional tunnel width line on the cross-sectional view, such as... Figure 2 As shown.

[0047] Adjust the overall scaling ratio in the CAD drawing software to fill the drawing area as much as possible; convert the CAD file to SVG format using Any DWG to SVG Converter software; open the file with Notepad. <svg>Add an id attribute to the tag with the value svg; upload the SVG file to the tunnel boring machine construction management platform, and select the tunnel boring machine's advancement direction (from left to right or from right to left) in the background.

[0048] like Figure 1 As shown, a method for displaying the progress of a tunnel boring machine's (TBM) advance plan and profile based on SVG technology includes the following steps:

[0049] 1) Obtain the coordinate information of the axis line of the plan view, the tunnel width line of the plan view, the axis line of the cross section view, and the tunnel width line of the cross section view.

[0050] 1-1) Load the SVG file to the webpage asynchronously;

[0051] 1-2) Because the plan view axis lines, plan view tunnel width lines, section view axis lines, and section view tunnel width lines are drawn by the operators in strict order, a [details omitted] will be generated at the very end of the SVG file converted from the CAD file. <g>Tags, in <g>There are four tags <polyline>Label, <polyline>The labels contain the horizontal and vertical coordinates of multiple points on the polyline, and these four labels have a one-to-one correspondence with the aforementioned four lines;

[0052] Retrieved from the SVG file using JavaScript's lastElementChild function. <svg>The last one in the tag <g>The tag is then obtained using the firstElementChild and nextElementSibling functions. <polyline>The tags are used to obtain the coordinate information of the plan view axis, the plan view tunnel width line, the section view axis, and the section view tunnel width line;

[0053] 1-3) Since the tunnel boring machine can advance in two ways on the plan and section views—from left to right and from right to left—a direction variable also needs to be declared. The value of this variable is 1 or -1, where 1 indicates advancement from left to right and -1 indicates advancement from right to left. When the value of this variable is -1, the reverse method in JavaScript is used to reverse the points on the axis of the plan view and the axis of the section view.

[0054] 2) Add the content to be displayed in the platform's front-end HTML file. Tags and <svg>Label.

[0055] 2-1) Add a [something] to the platform's front-end HTML file. The `` tag is used to store all the elements needed to display the floor plan and cross-sectional views. This tag uses absolute layout, and its width and height are the width and height of the visible area of ​​the HTML page on the platform's front end.

[0056] 2-2) Add a [something] to the platform's front-end HTML file. <svg>The `` tag has the following attributes: `display` attribute set to `inline-block`; `preserveAspectRatio` attribute set to `xMidYMid slice` to preserve the aspect ratio when scaling the plan view; `translate` attribute set to the difference between two coordinate points dragged by the mouse; and `scale` attribute set to 1.

[0057] 2-3) to 2-6) in <svg>Add within tags <path> 、 <image> 、 <animatemotion>and <mpath>The operation of the label is explained using a plan view as an example; the operation on the cross-sectional view is similar.

[0058] exist <svg>Add a tag <path>a tag, adding an id attribute on the tag, and setting the attribute value as plane_motionPath; adding a stroke attribute on the tag, and setting the attribute value as blue, for showing the tunnel part that has been pushed forward; adding a fill attribute on the tag, and setting the attribute value as none; adding a stroke-width attribute on the tag, and setting the attribute value as the length of the tunnel width line; adding a stroke-linecap attribute on the tag, and setting the attribute value as butt; adding a d attribute on the tag, and setting the attribute value as the current coordinates of the shield machine and the coordinates of all points before the shield machine on the planar axis;

[0059] In <svg>Add one <image>A tag is added with an id attribute, and the attribute value is set as plane_img; an xlink:href attribute is added to the tag, and the attribute value is set as the storage path of the shield machine picture; an x attribute is added to the tag, and the attribute value is set as 0; a y attribute is added to the tag, and the attribute value is set as the opposite of half of the length of the tunnel width line; a height attribute is added to the tag, and the attribute value is set as the length of the tunnel width line. The above settings of the x, y and height attributes can realize the adaptive adjustment of the shield machine picture to the tunnel width in the plan view;

[0060] In <svg>Add one <animatemotion>The tag is used to realize the animation effect of the movement of the picture of the shield machine along the tunnel axis. An id attribute is added to the tag, and the attribute value is set as plane_animimg; an xlink:href attribute is added to the tag, and the attribute value is set as <image>The id of the tag is #plane_img; a begin attribute is added to the tag, and the attribute value is set as 0s; a dur attribute is added to the tag, and the attribute value is set as 10s, so as to realize a 10s smooth motion animation, and the attribute value can be adjusted according to the actual effect of the animation; a fill attribute is added to the tag, and the attribute value is set as freeze, so that the shield machine picture stays at the corresponding position after the animation ends; a cy attribute is added to the tag, and the attribute value is set as 0; a rotate attribute is added to the tag, and the attribute value is set as auto-reverse, so that the shield machine picture moves along the tunnel axis, and the shield machine picture can be automatically flipped in the case that the shield machine advances from right to left;

[0061] In <animatemotion>Add one <mpath>a tag for establishing the above shield machine picture motion animation and <path>The id attribute is added to the tag, and the attribute value is set as plane_mpath. The xlink:href attribute is added to the tag, and the attribute value is set as #plane_motionPath.

[0062] 2-7) In order to adapt the plane profile progress display graph to different sizes of computer screens, the left x position value, the upper edge y position value, and the width and height of the actual screen boundary box on the current computer display are obtained through the getBBox function, and then the four values are set as <svg>attribute value of the attribute viewBox of the SVG element;

[0063] 2-8) in <svg>The onmousemove event is set in the label to realize the execution of corresponding JavaScript method when the mouse is dragged to show the profile graph, and the method realizes the dragging operation by changing the attribute value of translate.

[0064] 2-9) in <svg>The onmousewheel event is set in the label to realize the execution of corresponding JavaScript method when the mouse wheel is scrolled on the planar profile progress display graph, and the method realizes the zooming operation of the progress display graph by changing the attribute value of scale.

[0065] 3) The actual advancing state of the shield machine is updated according to the real-time data of the shield advancing process by using the JavaScript language.

[0066] 3-1) Taking the plan as an example, it is assumed that there are p+1 points, i.e., point 0, point 1,..., and point p on the axis of the plan, and the horizontal and vertical coordinates of the points are known, point 0 is located at the position of the 0th ring, point p is located at the position of the last ring, and the ring numbers of the remaining points are unknown, as shown in Figure 3 ;

[0067] 3-2) The total length L of the axis of the plan is calculated.

[0068] 3-3) The cumulative length l i of the i th point on the axis of the plan is calculated, where the cumulative length l i refers to the sum of the lengths of the first i line segments.

[0069] 3-4) The ring number r i corresponding to the i th point is calculated by using the following formula:

[0070]

[0071] where R represents the total ring number of the tunnel, r i is the ring number corresponding to the point c, and the result is rounded up.

[0072] 3-5) The current advancing ring number r c is determined in the shield construction process, and the ring numbers corresponding to the two points located on the axis of the plan are determined, if the current advancing ring number r c is located between the r i-1 th ring and the r i th ring, then the point c corresponding to the shield machine should be located on the line segment formed by the i-1 th point and the i th point.

[0073] 3-6) The cumulative length l c of the point c is calculated:

[0074]

[0075] According to the similar triangle relationship shown in Figure 3 , the horizontal coordinate x c of the point c can be calculated as:

[0076]

[0077] Further calculate the ordinate y of point c c For:

[0078]

[0079] As Figure 4 shown, Figure 4 is the overall display effect of the present application. The method of the embodiment fully meets the needs of the shield construction control platform management personnel, so that the relevant information required by them is clear at a glance; the embodiment obtains the current shield advancing ring number through the real-time position calculation method of the shield machine, and accurately displays the shield machine picture in the plan view and the section view, truly showing the actual state of the shield advancing; the embodiment displays the shield advancing progress in the SVG file in the html format, and the magnification and reduction thereof on the computer with different resolutions will not be distorted or distorted, greatly improving the operation experience of the management personnel.

[0080] In summary, the shield advancing plan-section view progress display method based on the SVG technology of the above embodiment includes the following steps: 1) obtaining the coordinate information of the plan view axis, the plan view tunnel width line, the section view axis and the section view tunnel width line; 2) adding the Labels and <svg>The label; 3) using JavaScript language, according to the real-time data of shield propulsion process, the actual propulsion state of shield machine in the plane profile progress is updated. The above-mentioned embodiment method fully meets the needs of the management personnel of the shield construction control platform, so that the relevant information required by the management personnel is clear at a glance. The method accurately displays the shield machine picture in the plane profile progress after obtaining the current propulsion ring number of the shield machine, and truly displays the actual state of the shield propulsion. The method displays the shield propulsion progress in the SVG file in the html format. The method will not be distorted or distorted when it is enlarged or reduced on the computer with different resolutions, which greatly improves the operation experience of the management personnel.

[0081] The above describes the embodiments of the application in combination with the drawings, but the application is not limited to the above-mentioned embodiments, and various changes can be made according to the purpose of the application. Any change, modification, replacement, combination or simplification made according to the spirit and principle of the technical scheme of the application shall be an equivalent replacement mode. As long as it meets the purpose of the application, as long as it does not deviate from the technical principle and inventive concept of the application, it belongs to the protection scope of the application.< / svg> < / svg> < / svg> < / svg> < / path> < / mpath> < / animatemotion> < / image> < / animatemotion> < / svg> < / image> < / svg> < / path> < / svg> < / mpath> < / animatemotion> < / image> < / path> < / svg> < / svg> < / svg> < / polyline> < / g> < / svg> < / polyline> < / polyline> < / g> < / g> < / svg> < / svg> < / svg> < / svg> < / path> < / mpath> < / animatemotion> < / image> < / animatemotion> < / svg> < / image> < / svg> < / path> < / svg> < / svg> < / polyline> < / g> < / svg> < / svg>

Claims

1. A method for displaying the progress of shield tunneling plan and profile diagrams based on SVG technology, characterized in that, Includes the following steps: 1) Obtain the coordinate information of the axis lines of the plan view, the tunnel width lines of the plan view, the axis lines of the cross section view, and the tunnel width lines of the cross section view; 2) Add the content to be displayed in the platform's front-end HTML file. Tags and <svg> Label;< / svg> 3) Use JavaScript to update the actual advancement status of the tunnel boring machine based on real-time data from the tunnel boring machine advancement process; Step 3) is specifically... Includes the following processes: 3-1) Suppose there are p+1 points on the axis of the planar graph, namely point 0, point 1, ..., point p. The x and y coordinates of these points are known. Point 0 is located in the 0th ring, point p is located in the last ring, and the ring numbers of the remaining points are unknown. 3-2) Calculate the total length L of the axis lines in the plan view; 3-3) Calculate the cumulative length l of the i-th point on the axis of the planar graph. i The cumulative length l here i This refers to the sum of the lengths of the first i line segments; 3-4) Calculate the ring number r corresponding to the i-th point using the following formula. i : Where R represents the total tunnel loop number, r i Round the result up. 3-5) Determine the current propulsion ring number r during the shield tunneling process. c Between which two points on the axis of the planar diagram are the corresponding ring numbers, if the current advancing ring number r c Located at r i-1 ring and r i Between the rings, the point c corresponding to the tunnel boring machine should be located on the line segment formed by point i-1 and point i; 3-6) Calculate the cumulative length l of point c. c : The x-coordinate of point c is calculated based on the similarity of triangles. c for: Then, the ordinate y of point c can be calculated. c for:

2. The method for displaying the progress of shield tunneling plan and profile diagrams based on SVG technology according to claim 1, characterized in that, The coordinate information in step 1) is obtained through the tunnel geological map, specifically... Includes the following processes: 1-1) Load the SVG file to the webpage asynchronously; 1-2) Retrieve from SVG file using JavaScript's lastElementChild function <svg>The last one in the tag <g>The tag is then obtained using the firstElementChild and nextElementSibling functions. <polyline> The tags are used to obtain the coordinate information of the plan view axis, the plan view tunnel width line, the section view axis, and the section view tunnel width line;< / polyline> < / g> < / svg> 1-3) Declare a direction variable to represent the left and right advancing direction of the shield tunneling progress diagram.

3. The method for displaying the progress of shield tunneling plan and profile diagrams based on SVG technology according to claim 1, characterized in that, Step 2) includes the following process: 2-1) Add a [something] to the platform's front-end HTML file. The `` tag is used to store the elements needed to display the plan and section diagrams, where the width and height are the width and height of the visible area of ​​the HTML page on the platform's front end; 2-2) Add a [something] to the platform's front-end HTML file. <svg> The `` tag has the following attributes: `display` attribute set to `inline-block`; `preserveAspectRatio` attribute set to `xMidYMid slice` to preserve the aspect ratio when scaling the plan view; `translate` attribute set to the difference between two coordinate points dragged by the mouse; and `scale` attribute set to 1.< / svg> 2-3) In <svg>Add a tag <path> The `<tunnel>` tag has the following attributes: `id` with the value `plane_motionPath`; `stroke` with the value `blue` to display the completed tunnel sections; `fill` with the value `none`; `stroke-width` with the value `length` of the tunnel width line; `stroke-linecap` with the value `butt`; and `d` with the value `coordinates` of all points preceding the tunnel boring machine on the plan view axis or section view axis.< / path> < / svg> 2-4) In <svg>Add a tag <image> The tag should include the following attributes: `id` attribute with the value `plane_img`; `xlink:href` attribute with the value `storage path` for the tunnel boring machine image; `x` attribute with the value `0`; `y` attribute with the value `the opposite of half the tunnel width line length`; and `height` attribute with the value `the length of the tunnel width line`.< / image> < / svg> 2-5) In <svg>Add a tag <animatemotion>Add an `id` attribute to this tag, setting its value to `plane_animimg`; add an `xlink:href` attribute to this tag, setting its value to... <image>The tag's id, i.e., #plane_img; add the begin attribute to this tag and set its value to 0s; add the dur attribute to this tag and set its value to the duration of the tunnel boring machine's smooth motion animation;< / image> < / animatemotion> < / svg> Add the `fill` attribute to this tag and set its value to `freeze` so that the tunnel boring machine image stays in the corresponding position after the animation ends; add the `cy` attribute to this tag and set its value to 0; add the `rotate` attribute to this tag and set its value to `auto-reverse` so that the tunnel boring machine image moves along the tunnel axis and can adaptively flip the image as the tunnel boring machine advances from right to left. 2-6) In <animatemotion>Add a tag <mpath>Tags are used to create motion animations of the aforementioned tunnel boring machine images and... <path> To establish the connection between them, add an id attribute to the tag and set its value to plane_mpath; add an xlink:href attribute to the tag and set its value to #plane_motionPath;< / path> < / mpath> < / animatemotion> 2-7) Using the getBBox function, obtain the left x-position value, the top y-position value, the width and height of the bounding box on the current computer screen, and then set these four values ​​to... <svg> The property values ​​of the viewBox;< / svg> 2-8) in <svg> The `onmousemove` event is set on the tag to execute the corresponding JavaScript method when the progress display of the plan and section view is dragged with the mouse. This method implements the drag operation by changing the value of the `translate` attribute.< / svg> 2-9) in <svg> The `onmousewheel` event is set in the tag to execute a corresponding JavaScript method when the mouse wheel is scrolled on the progress display graphic of the plan and section view. This method achieves the zooming operation of the progress display graphic by changing the value of the `scale` attribute.< / svg>

Images