CAD (Computer Aided Design) software fusion Web application method

Abstract

The invention relates to the field of computer aided design, and aims to provide a CAD software fusion Web application method, so that a user can access online resources and services without leaving a CAD environment, and the working efficiency and the user experience are improved. According to the technical scheme, the method comprises the steps that a remote Web end opens a graph of a background server on a Web page and marks the graph; the background server is used for storing the graphic data and the annotation data; and the native CAD end loads the graphic data and the annotation data of the background server in the CAD drawing window through the Web container and fuses the graphic data and the annotation data.

Description

Technical Field

[0001] The present invention relates to the field of computer-aided design, and in particular to a method for integrating CAD software with a Web application. Background Art

[0002] With the rapid development of information technology, users' demand for the functions of computer-aided design (CAD) software continues to grow, especially in professional fields such as engineering design, geological surveying and mapping, architectural planning, and mechanical manufacturing. Professionals in these fields rely on accurate and efficient design tools to realize their creativity and planning. However, the current technological environment has brought new challenges: in order to access the latest network resources and services, users often need to frequently switch between professional CAD software and web browsers. This operation not only interrupts the workflow and reduces work efficiency, but also brings additional complexity to data management and synchronization. It is very difficult to embed native CAD software into web applications and achieve efficient collaboration under mainstream Windows systems. The patent of this invention is proposed to solve this difficulty. The existing related technologies are as follows:

[0003] 1. Lightweight interaction technology between CAD and Web

[0004] Currently, the mainstream approach to web-based visualization of CAD models is lightweight processing. For example, Inspur Smart Technology's technology converts complex geometry into low-polygon meshes (model lightweighting) and combines them with WebGL to enable real-time browser rendering and interaction. This approach addresses the high requirements of traditional CAD software for local hardware, but requires specialized compression algorithms and middleware to adapt to different formats.

[0005] 2. Cross-platform data integration and synchronization

[0006] (1) Data identification and association: Shenzhen Poisson Software uses unified identifier technology to associate CAD geometric models with CAE pre-processing models, avoiding duplicate modeling due to data fragmentation. Similarly, the 3D collaborative design platform achieves multi-terminal data synchronization through automated MBS model decomposition and version comparison.

[0007] (2) Model alignment technology: The three-dimensional model fusion method realizes the integration of multi-source model data through feature point matching (such as plane feature point alignment), which relies on geometric feature extraction algorithms and coordinate transformation logic.

[0008] Traditional CAD workflows lack the ability to serve as a unified platform for integrating local and online resources. Consequently, designers often need to manage large volumes of files, data, and information across disparate applications, making accessing and updating information cumbersome and time-consuming. Furthermore, the increasing prevalence of team collaboration and remote work further emphasizes the need for a solution that seamlessly integrates these diverse resources. Therefore, a method for deeply integrating web applications into CAD software has become crucial for improving user experience and productivity. Summary of the Invention

[0009] The purpose of the present invention is to overcome the deficiencies in the above-mentioned background technology and provide a method for integrating CAD software with Web applications so that users can access online resources and services without leaving the CAD environment, thereby improving work efficiency and user experience.

[0010] The technical solution of the present invention is:

[0011] CAD software integration with Web application methods, including:

[0012] On the remote web client, open the graphics of the backend server on the web page and mark them;

[0013] The backend server is used to store graphic data and annotation data. The native CAD client uses the Web container to load the graphic data and annotation data from the backend server into the CAD drawing window and fuse them.

[0014] The method comprises the following steps:

[0015] Step 1: Graphic data is stored in the backend server. The web page on the remote web client displays the graphic data stored in the backend server, and the user makes annotations based on the graphic data.

[0016] Step 2: The remote Web client updates the annotation data and stores it in the backend server, and notifies the Web container to update.

[0017] Step 3: The web container obtains graphic data and annotation data from the backend server through the network API interface, and integrates them with the CAD drawing window of the native CAD terminal;

[0018] Step 4: The native CAD end performs navigation operations, and the native CAD end communicates with the Web container asynchronously. Alternatively, the native CAD end performs drawing operations, and the native CAD end communicates with the Web container synchronously.

[0019] The remote Web end is the JS end; the native CAD end is the CAD end; and the Web container is the WebView2 control.

[0020] The step 3 includes: the native CAD end receives updates from the Web container through the WebMessageReceived event, and obtains the graphic data and annotation data from the background server.

[0021] In the step 4,

[0022] Asynchronous communication includes: the native CAD end transmits the navigation interaction actions of the CAD drawing window to the Web container through the JSAPI interface to achieve synchronous operation of the Web container's graphics;

[0023] The two-way communication includes: the Web container communicates with the native CAD end in a two-way manner through HostObjects, and the native CAD end obtains the three-dimensional coordinates of the Web container.

[0024] The native CAD end is embedded with a WebView2 control, and the graphic data and annotation data loaded by the WebView2 control in real time are simultaneously displayed as the bottom layer of the CAD drawing window and the CAD drawing windows of other layers in an overlaid manner.

[0025] The method for establishing the WebView2 control is as follows:

[0026] 1) Create a WebView2 control instance:

[0027] 2) Define the native API interface:

[0028] 3) Inject the native API interface into the WebView2 control:

[0029] ①Use the CoreWebView2.AddHostObjectToScript method to inject the created class instance into the JS environment of the WebView2 control;

[0030] ②Specify a global object name accessible in the JS environment;

[0031] 4) Web container calls JSAPI interface:

[0032] ① In the HTML / JS code loaded by the WebView2 control, call the native API interface through the JSAPI interface;

[0033] ②Call the method and process the return value or callback.

[0034] The asynchronous communication includes: the CAD drawing window of the native CAD end captures the user's navigation interaction action, sends a set of interaction action data to the Web container through the JSAPI interface, and the Web container converts the received interaction action data into corresponding navigation interaction operation behavior.

[0035] In the native CAD end, the layer index value of the WebView2 control is set to a negative value, and the transparency attribute value of the CAD drawing window is set to 0.6.

[0036] The annotation data is in JSON format.

[0037] The beneficial effects of the present invention are:

[0038] This invention integrates a web container based on a native web container control within the CAD client software, overlaying the CAD drawing window with the native web container control window, achieving a fusion display of native CAD applications and web applications. Users can access various online services and resources without leaving the CAD environment. The web container also serves as a reference layer in the CAD drawing window, significantly improving work efficiency and making it ideal for professional designers who need to reference online resources. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 It is a flow chart of the present invention.

[0040] Figure 2 This is a diagram of the native container architecture based on a web page.

[0041] Figure 3 It is a schematic diagram of the remote Web terminal of the present invention.

[0042] Figure 4 This is one of the schematic diagrams of the native CAD end of the present invention.

[0043] Figure 5 This is the second schematic diagram of the native CAD end of the present invention. DETAILED DESCRIPTION

[0044] While using CAD software for design work, the inventor discovered that this prior art defect is caused by the CAD software's inability to load external web application data, making it unable to access data resources on the web application. After studying commonly used CAD software on the market, the inventor discovered that this defect can be resolved by integrating a web container based on the native web container control into the CAD client software, overlaying the CAD drawing window with the native web container control window, and achieving a fused display of the CAD native application and the web application. This invention allows users to access various online services and resources without leaving the CAD environment, while the web application can serve as a reference layer for CAD drawing, greatly improving work efficiency.

[0045] There are three existing web-based native container architectures:

[0046] 1. CefSharp framework application:

[0047] The plug-in is built using the CefSharp framework of the Chromium kernel, which supports cross-platform web application loading and is often used to integrate cloud services or real-time call of online surveying and mapping data;

[0048] 2. Lightweight WebBrowser container plug-in:

[0049] By encapsulating Web function modules through lightweight technology, local resource usage can be reduced.

[0050] 3. WebView2 control integration:

[0051] By embedding the WebView2 control based on the Edge kernel, Web applications can be directly rendered within the CAD interface, supporting online resource access and real-time data synchronization.

[0052] The present invention adopts WebView2 control combined with JSAPI interface to realize two-way interaction between CAD graphics and Web data.

[0053] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0054] like Figure 1 As shown, a method for integrating CAD software with Web applications includes a remote Web terminal, a background server and a native CAD terminal.

[0055] On the remote web client, open and annotate graphics from the backend server on a web page. On the native CAD client, load the graphics and annotation data from the backend server into the CAD drawing window through the web container, and then merge the CAD drawing window with the web container window. Fusion means overlaying one window on top of another, linking the top window (CAD drawing window) with the bottom window (web container window) so that the user is unaware of the two windows during operation.

[0056] The backend server is used to store graphic data and annotation data.

[0057] The method comprises the following steps:

[0058] Step 1: Graphic data is stored in the backend server. The web page of the remote web terminal displays the graphic data stored in the backend server, and the user makes annotations based on the graphic data.

[0059] Graphics data includes pictures of the model and point clouds of the model.

[0060] Users can perform operations on the graphics opened on the web page of the remote web client, including creating new annotations, modifying annotations, and deleting annotations.

[0061] Step 2: The remote Web client updates the annotation data and stores it in the background server, and notifies the Web container to update the graphic data and associate it with the annotation data using the same ID.

[0062] Step 3: The Web container obtains the graphic data and annotation data from the backend server through the network API interface.

[0063] The native CAD end receives updates from the background server through the WebMessageReceived event and obtains the graphic data and annotation data from the background server.

[0064] Step 4. Asynchronous communication and synchronous communication

[0065] (1) When the native CAD side performs navigation operations, the native CAD side communicates asynchronously with the Web container:

[0066] The native CAD client passes the user interaction actions of the CAD drawing window to the Web container through the JSAPI interface to achieve synchronous operations on the graphics of the Web container;

[0067] The CAD drawing window on the native CAD side captures the user's navigation interaction actions and sends a set of interaction action data to the Web container through the JSAPI interface. The Web container converts the received interaction action data into corresponding navigation interaction operation behaviors.

[0068] Navigation operations include zooming in and out, changing viewing angles, etc.

[0069] (2) When the native CAD side performs drawing operations, the native CAD side communicates synchronously with the Web container:

[0070] When the mouse clicks on the CAD drawing window of the native CAD end, the native CAD end calls the JSAPI interface to notify the web container to obtain the point. The web container communicates with the native CAD end in a two-way manner through HostObjects, and the native CAD end obtains the 3D coordinates of the corresponding point in the web container.

[0071] Drawing operations include drawing lines, etc.

[0072] 1. Native CAD terminal

[0073] In the native CAD terminal, CAD has a built-in Web container, which is the WebView2 control. The WebView2 control loads graphic data and annotation data in real time. At the same time, the Web container content is used as the bottom layer of the CAD window, and is displayed in a top-down manner with the CAD drawing window of other layers (the layer above the bottom layer) (such as Figure 4 shown).

[0074] The Web container content can be an HTML page, a JavaScript application, etc. The Web content of the present invention is image data and annotation data.

[0075] Embed the WebView2 control in the native CAD terminal:

[0076] The WebView2 control is used in the native CAD environment to expose C# methods to JavaScript calls in the Web container, enabling the transparent display of graphic data and annotation data in the Web container in the CAD drawing window.

[0077] This step requires the implementation of:

[0078] 1. Customize the native web container control and add it to the CAD native environment; add the web container to the CAD window control to provide web page loading capabilities and achieve visual interaction capabilities;

[0079] 2. Based on the CAD native client API and event processing mechanism, an event monitoring and processing mechanism is established to ensure that the data between the web application and the CAD drawing control can be synchronized and updated in real time; the data communication capability between the CAD native drawing control and the web application is realized, and the communication and interaction of image data, interactive data, and basic auxiliary data is realized.

[0080] The specific code is as follows:

[0081] / / The code creates a WebView2 host object, exposes the C# method to JS calls, and submits the annotation data to the CAD environment;

[0082] using Autodesk.AutoCAD.Runtime;using Microsoft.Web.WebView2.Core;

[0083] public class AnnotationHost : IExtensionApplication

[0084] {

[0085] private CoreWebView2 _webView;

[0086] / / Method for submitting annotations exposed to JS

[0087] public void SubmitAnnotation(string jsonData)

[0088] {

[0089] var doc = Application.DocumentManager.MdiActiveDocument;

[0090] doc.Editor.WriteMessage($"Received annotation data: {jsonData}");

[0091] / / Call CAD API to parse Json and generate annotation entities

[0092] }

[0093] / / Initialize WebView2

[0094] public void Initialize()

[0095] {

[0096] var webView = new CoreWebView2Environment();

[0097] _webView = webView.CreateWebView2Async(handle).Result;

[0098] _webView.AddHostObjectToScript("cadHost", this);

[0099] webView.Navigate("http: / / localhost:3000");

[0100] }

[0101] }

[0102] The method of creating a WebView2 control is as follows:

[0103] 1. Prepare the development environment:

[0104] Install Visual Studio and ensure that the WebView2 SDK is referenced in the project.

[0105] 2. Create a WebView2 control instance:

[0106] ①Drag and drop the WebView2 control to the form in the WinForms / WPF project;

[0107] ②Initialize the WebView2 control and wait for it to load.

[0108] 3. Define native API interface:

[0109] ① Create a class in C# that contains methods that need to be exposed to JS, that is, the JSAPI interface can be called by the Web container;

[0110] ②Cross-process communication: ensure that these methods are visible to COM.

[0111] 4. Inject the native API interface into the WebView2 control:

[0112] ① Use the CoreWebView2.AddHostObjectToScript method to inject the created class instance into the JS environment of the WebView2 control, that is, the JSAPI interface can be called by the Web container;

[0113] ②Specify a global object name accessible in the JS environment.

[0114] 5. The Web container calls the JSAPI interface:

[0115] ① In the HTML / JS code loaded by the WebView2 control, call the native API interface through JSAPI;

[0116] ②Call the method and process the return value or callback.

[0117] 6. End the process

[0118] ① Testing and debugging: Test the encapsulated JSAPI on different browsers and operating systems and use WebView2's developer tools for debugging;

[0119] ②Optimize and release: Optimize code and performance based on test results, package and release the application, and ensure compatibility with WebView2 Runtime.

[0120] Native API interface: The interface provided by the host software (such as AutoCAD, MicroStation and other client software) for external secondary development;

[0121] JSAPI interface: encapsulates the native API interface and calls it specifically for the Web container. In this way, the JS code logic in the Web container can call the native API interface.

[0122] 2. Asynchronous Communication and Bidirectional Communication

[0123] 1. Asynchronous communication: When a user performs navigation operations in the CAD drawing window of the native CAD client (including image zooming, zooming out, rotating, and moving during drawing interactions), these navigation interactions are converted into parameters and notified to the web container through the JSAPI interface. The web container parses the parameters carried in the JSAPI interface and executes the corresponding drawing interactions, enabling synchronous navigation operations within the web container content.

[0124] Asynchronous communication includes:

[0125] ① Implementation of asynchronous methods in native API interfaces: If the native API interface contains asynchronous methods, ensure that these methods can correctly handle asynchronous operations. Use Task or async / await mode to implement asynchronous logic.

[0126] ② Web container handles asynchronous responses: The web container handles asynchronous responses from native API interfaces through Promise, async / await, or other mechanisms, ensuring the correctness and robustness of asynchronous processes.

[0127] 2. Two-way communication: Users draw in the CAD drawing window of the native CAD end (the native CAD end obtains 2D screen coordinates). The web container communicates with the native CAD end in two directions through HostObjects. The web container provides spatial coordinates (3D web container coordinates corresponding to 2D screen coordinates) and returns the spatial coordinates to the CAD drawing window of the native CAD end through the JSAPI interface, thereby obtaining the spatial coordinates of the web container's 3D model.

[0128] Two-way communication includes:

[0129] ①The web container sends a message to the native CAD client:

[0130] Use the window.chrome.webview.postMessage method in the Web container to send a message to the native CAD end. The message content can be a string, object, etc.

[0131] ② The CAD drawing window on the native CAD side receives and processes the Web container message:

[0132] Subscribe to the CoreWebView2.WebMessageReceived event in the native CAD drawing window, and parse and process the received message in the event handler.

[0133] Take drawing a polyline as an example:

[0134] (1) The native CAD drawing window is on top, and the web container is on the bottom (with the 3D model loaded in it). At this point, the two are completely overlapped. Since the native CAD window is set to semi-transparent, the user can see the 3D model and annotations in the web container through the CAD drawing window;

[0135] (2) When the user draws a polyline, click several points on the CAD drawing window with the mouse and connect them in sequence to generate the polyline:

[0136] a) The native CAD client calls the web container: Each time the mouse is clicked, the CAD drawing window calls the JSAPI interface (the JSAPI interface carries the 2D screen coordinates of the mouse click) to notify the web container that a point needs to be retrieved. After the web container obtains the 2D screen coordinates, it calculates them with the 3D model to obtain the 3D coordinate point corresponding to the 2D coordinates.

[0137] b) The web container calls the native CAD end: The web container obtains the 3D coordinate points and returns them to the CAD drawing window of the native CAD end through the JSAPI interface, thereby obtaining the 3D coordinate points of the 3D model;

[0138] c) After the above steps a) and b) a point selection operation is completed, and a polyline is obtained by connecting multiple points in sequence.

[0139] 3. Web container window content as the bottom layer of the CAD drawing window:

[0140] In order to place the layer order of the WebView2 control below the CAD drawing window of the native CAD end as a background or auxiliary display layer, it is necessary to adjust the layer index (index) and set it to the background transparency of the CAD drawing window.

[0141] This step requires the following: placing the custom native web container control layer order at the bottom, and setting the custom native web container control layer index to a negative value through the CAD control's layer index value to ensure that it is at the bottom of all windows; displaying the web application below the CAD native drawing control, so that the web application can serve as the background or auxiliary display layer of the CAD drawing, enhancing the visual effect; and supporting the semi-transparent display of the web container control. By setting the CAD drawing window transparency property value to 0.6, a semi-transparent effect is achieved, allowing the Web container web application and the CAD drawing content to be more harmoniously integrated.

[0142] The specific principles are as follows:

[0143] 1. Adjust the layer index:

[0144] ①CAD software usually supports layer management, and each drawing element or window control can be assigned a layer index value;

[0145] ②By setting the layer index value of the custom WebView2 control to a negative value, you can ensure that it is displayed under all window controls with positive index values.

[0146] 2. Set transparency:

[0147] ①The CAD drawing window background provides transparency properties, allowing you to adjust the transparency of its displayed content;

[0148] ② By setting the CAD drawing window background transparency property to 0.6 (or other values ​​between 0 and 1), you can achieve a semi-transparent effect, making the web application and CAD drawing content more harmoniously integrated. The default value is 0.6, and the transparency value can be adjusted during use.

[0149] The specific development process is as follows:

[0150] 1. Prepare the development environment:

[0151] Make sure the WebView2 SDK is referenced in the project and the necessary development tools and libraries are installed.

[0152] 2. Create a WebView2 control instance:

[0153] (1) Drag and drop the WebView2 control to the form in the WinForms / WPF project;

[0154] (2) Initialize the WebView2 control and wait for it to load.

[0155] 3. Set layer index:

[0156] (1) Traverse the layer list in the CAD software and find or create a layer for placing the WebView2 control;

[0157] (2) Set the index value of the layer to a negative value (such as -1) to ensure that it is below all layers with positive index values;

[0158] (3) Associate the WebView2 control with this layer.

[0159] 4. Adjust the transparency of CAD drawing window controls:

[0160] (1) Find the transparency property in the property settings of the CAD drawing window control;

[0161] (2) Set the CAD drawing window background transparency property value to 0.6 (or other required value) to achieve a semi-transparent effect.

[0162] 5. Loading and displaying web content:

[0163] (1) Load the web content to be displayed (such as HTML pages, JavaScript applications, etc.) in the WebView2 control;

[0164] (2) Ensure that the web content and CAD drawing content can be correctly superimposed and displayed, and that the web content as a background or auxiliary layer does not affect the main operation of the CAD drawing.

[0165] 6. Testing and optimization:

[0166] (1) Test the display effect and performance of the WebView2 control on different operating systems and CAD software versions;

[0167] (2) Optimize the code based on the test results to ensure stable operation and achieve the expected visual effects in different environments.

[0168] 7. Release and application:

[0169] (1) Package and publish the optimized code as an executable CAD plug-in or extension;

[0170] (2) Load and enable the plug-in in the CAD software to ensure that users can easily access and use the WebView2 function.

[0171] Through the above process, this invention successfully implements the functionality of placing the WebView2 native web container control's drawing layer order below the native CAD drawing control, using it as a background or auxiliary display layer. This not only enhances the visual effect but also supports the semi-transparent display of the web container control, allowing the web application and CAD drawing content to be more harmoniously integrated.

[0172] 2. Remote Web Client

[0173] The remote web client obtains the 3D model from the backend server and opens it, and uses annotation tools (annotation software of the 3D real scene acquisition platform, existing software) to annotate it, and the annotation data is saved in the backend server.

[0174] The Web container obtains graphic data and annotation data from the backend server through the network API interface, and integrates it with the CAD drawing window of the native CAD end. The annotation data drawn by the user on the remote Web end is displayed in the CAD environment. The annotation interface is as follows Figure 3 shown.

[0175] The specific code is as follows:

[0176] The web container calls the CAD native method through the hostObjects interface of WebView2.

[0177] export default function AnnotationTool() {

[0178] const handleSubmit = (annotation) => {

[0179] if (window.chrome?.webview?.hostObjects?.cadHost) {

[0180] window.chrome.webview.hostObjects.cadHost

[0181] .SubmitAnnotation(JSON.stringify(annotation));

[0182] }

[0183] };

[0184] return (

[0185]

[0186] <canvas onDrawEnd="{handleSubmit}">< / canvas>

[0187] );

[0189] }

[0190] The annotation data format is JSON format, which is compatible with MXCAD and is easy to parse on the CAD side.

[0191] The annotation data includes type, two-dimensional coordinates, three-dimensional coordinates, size, and annotations.

[0192] The code for the labeled data grid is as follows:

[0193] {

[0194] "type": "circle_mark",

[0195] "center": {x:100, y:200},

[0196] "radius": 50,

[0197] "comment": "Need to add drainage holes",

[0198] "point": { x:0.7897 , y:-1.8976 , z:10.9853},

[0199] }

[0200] In addition, for special types of annotations, use the McDbCustomEntity derived class to implement a custom annotation entity.

[0201] The remote web client can adjust the 3D model's name, camera perspective, and magnification, and store this as annotation data on the backend server. Accordingly, when the web container loads the 3D model, it first renders the model using the camera perspective and magnification adjusted by the remote web client. If CAD operations (perspective and zoom) are required, the web container then performs the same perspective and zoom adjustments on the 3D model.

[0202] Application scenario 1 (remote collaboration):

[0203] (1) Offsite team members open graphic 3D files (such as engineering design, geological surveying, architectural planning, and mechanical manufacturing) on ​​the remote web terminal and mark them. Figure 3 );

[0204] (2) The remote Web client updates the annotation data and stores it in the backend server, and notifies the Web container to update;

[0205] (3) The Web container obtains graphic data and annotation data from the backend server through the network API interface;

[0206] (4) The Web container communicates bidirectionally with the native CAD end through HostObjects;

[0207] (5) The native CAD client receives updates from the Web container through the WebMessageReceived event and obtains the graphic data and annotation data from the backend server;

[0208] The WebView2 control loads graphic data and annotation data in real time. These data are used as the bottom layer of the CAD drawing window (the reference layer when drawing), and are displayed in an overlapping manner with the CAD drawing windows of other layers ( Figure 4 );

[0209] (6) The user draws on the native CAD side (other layers besides the reference layer);

[0210] When drawing, users need to observe the reference layer from different angles and positions, and perform operations such as zooming in, zooming out, rotating, or moving the graphics. The native CAD end transmits the interactive actions of the CAD drawing window to the web container through the JSAPI interface. The graphics in the web container are zoomed in, zoomed out, rotated, or moved synchronously, thus assisting users in completing the drawing.

[0211] When you click the mouse while drawing, the CAD drawing window notifies the web container to take a point. The web container obtains the corresponding 3D coordinate based on the 2D coordinate on the screen and returns the 3D coordinate point to the CAD drawing window on the native CAD end, thereby obtaining the 3D coordinate point of the 3D model.

[0212] (7) After the drawing is completed, save the drawing data (other layers except the reference layer) on the native CAD side as a local file ( Figure 5 ).

[0213] Application scenario 2 (version comparison):

[0214] Load historical versions of graphic data into the web container and compare them with the current CAD drawing. Move, scale, rotate, and other operations on the CAD drawing layer will synchronize the web container content.

[0215] In summary, the present invention integrates a Web container (using the WebView2 control) into native CAD, and customizes the native CAD API to encapsulate it as JSAPI to implement data communication between the Web container application and the native CAD application. The key points are as follows:

[0216] (1) Interface interaction: The Web container uses COM technology to implement two-way communication between native C# code and JavaScript, and requires the use of the IDispatch interface to define the host object;

[0217] (2) Host object injection: Inject the .NET object into the Web container context through the AddHostObjectToScript method and expose it as a global variable that can be called by JS;

[0218] (3) Asynchronous callback processing: Use ICoreWebView2 event listener WebMessageReceived to implement asynchronous call response from JS to native.

[0219] (4) Thread safety: All operations within the web container must be executed on the UI thread, and asynchronous methods must be dispatched through the Dispatcher. Security restrictions: Enable AreHostObjectsAllowed() to allow host object-sensitive APIs to increase permission checks. Debugging supports using OpenDevToolsWindow() to debug JS and native interactions.

[0220] The accompanying drawings show preferred embodiments of the present invention. However, the present invention can be implemented in many different forms and is not limited to the embodiments described in this specification. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present invention more thorough and comprehensive.

Claims

1. A method for integrating CAD software with a Web application, characterized in that: include: On the remote web client, open the graphics of the backend server on the web page and mark them; Backend server, used to store graphic data and annotation data; On the native CAD side, the graphic data and annotation data from the backend server are loaded and integrated in the CAD drawing window through the Web container; The method comprises the following steps: Step 1: Graphic data is stored in the backend server. The web page on the remote web client displays the graphic data stored in the backend server, and the user makes annotations based on the graphic data. Step 2: The remote Web client updates the annotation data and stores it in the backend server, and notifies the Web container to update. Step 3: The web container obtains graphic data and annotation data from the backend server through the network API interface, and integrates them with the CAD drawing window of the native CAD terminal; Step 4: The native CAD end performs navigation operations, and the native CAD end communicates with the Web container asynchronously. Alternatively, the native CAD end performs drawing operations, and the native CAD end communicates with the Web container synchronously.

2. The method for integrating CAD software with Web applications according to claim 1, wherein: The remote Web end is the JS end; the native CAD end is the CAD end; and the Web container is the WebView2 control.

3. The method for integrating CAD software with Web applications according to claim 2, wherein: The step 3 includes: the native CAD end receives updates from the Web container through the WebMessageReceived event, and obtains the graphic data and annotation data from the background server.

4. The method for integrating CAD software with Web applications according to claim 3, wherein: In the step 4, Asynchronous communication includes: the native CAD end transmits the navigation interaction actions of the CAD drawing window to the Web container through the JSAPI interface to achieve synchronous operation of the Web container's graphics; The two-way communication includes: the Web container communicates with the native CAD end in a two-way manner through HostObjects, and the native CAD end obtains the three-dimensional coordinates of the Web container.

5. The method for integrating CAD software with Web applications according to claim 4, characterized in that: The native CAD end is embedded with a WebView2 control, and the graphic data and annotation data loaded by the WebView2 control in real time are simultaneously displayed as the bottom layer of the CAD drawing window and the CAD drawing windows of other layers in an overlaid manner.

6. The method for integrating CAD software with Web applications according to claim 5, wherein: The method for establishing the WebView2 control is as follows: 1) Create a WebView2 control instance: 2) Define the native API interface: 3) Inject the native API interface into the WebView2 control: ①Use the CoreWebView2.AddHostObjectToScript method to inject the created class instance into the JS environment of the WebView2 control; ②Specify a global object name accessible in the JS environment; 4) Web container calls JSAPI interface: ① In the HTML / JS code loaded by the WebView2 control, call the native API interface through the JSAPI interface; ②Call the method and process the return value or callback.

7. The method for integrating CAD software with Web applications according to claim 6, wherein: The asynchronous communication includes: the CAD drawing window of the native CAD end captures the user's navigation interaction action, sends a set of interaction action data to the Web container through the JSAPI interface, and the Web container converts the received interaction action data into corresponding navigation interaction operation behavior.

8. The method for integrating CAD software with Web applications according to claim 7, wherein: In the native CAD end, the layer index value of the WebView2 control is set to a negative value, and the transparency attribute value of the CAD drawing window is set to 0.

6.

9. The method for integrating CAD software with Web applications according to claim 8, wherein: The annotation data is in JSON format.

Images