Method for merging cad software with web applications

Abstract

The application 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, thereby improving work efficiency and user experience. The technical scheme comprises the following steps: a remote Web end opens a background server graph on a Web page and carries out labeling; the background server is used for storing graph data and labeling data; and a native CAD end loads the graph data and the labeling data of the background server in a CAD drawing window through a Web container and carries out fusion.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of computer-aided design, and particularly relates to a CAD software fusion Web application method. BACKGROUND

[0002] With the rapid development of information technology, the functional requirements of computer-aided design (CAD) software are growing, especially in the fields of 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 ideas and plans. However, the current technical environment brings new challenges: users often need to frequently switch between professional CAD software and web browsers in order to access the latest web resources and services, which 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 web applications in native CAD software and achieve efficient collaboration under the mainstream Windows system. The present application is proposed to solve this difficulty. The existing related technologies are as follows:

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

[0004] In the prior art, the visualization of CAD models on the Web is achieved through lightweight processing. For example, the technology proposed by Wave Computer Technology Co., Ltd. converts complex geometric bodies into low-polygon meshes (model lightweight), and combines WebGL to realize real-time rendering and interaction on the browser side. This method solves the problem of high requirements of traditional CAD software on local hardware, but it needs to rely on special compression algorithms and middleware to adapt to different formats.

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

[0006] (1) Data identification and association: Shenzhen Poisson Software uses a unified identifier technology to associate CAD geometric models with CAE preprocessing models, avoiding repeated modeling caused by data fragmentation. Similarly, a three-dimensional collaborative design platform realizes multi-end data synchronization through automatic 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 needs to rely on geometric feature extraction algorithms and coordinate transformation logic.

[0008] The traditional CAD working mode cannot serve as a unified platform integrating local resources and online resources, so designers usually need to manage a large number of files, materials and information among different applications, which makes the information acquisition and update cumbersome and time-consuming. At the same time, the popularization of team collaboration and remote working mode further emphasizes the need for a solution that can seamlessly integrate various resources. Therefore, a method capable of deeply integrating web applications into CAD software has become the key to improving user experience and work efficiency. SUMMARY

[0009] The purpose of the present application is to overcome the deficiencies in the background art, and to provide a CAD software fusion web application method, 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 application is:

[0011] The CAD software fusion web application method comprises:

[0012] The remote web end opens the background server graphics and performs annotation after the web page is opened;

[0013] The background server is used to store graphic data and annotation data; the native CAD end loads the graphic data and annotation data of the background server in the CAD drawing window through the web container and performs fusion;

[0014] The method comprises the following steps:

[0015] Step 1, store the graphic data into the background server, the remote web end displays the graphic data stored in the background server, and the user annotates according to the graphic data;

[0016] Step 2, the remote web end updates the annotation data storage to the background server and notifies the web container to update;

[0017] Step 3, the web container acquires the graphic data and annotation data from the background server through the network API interface, and performs fusion with the CAD drawing window of the native CAD end;

[0018] Step 4, the native CAD end performs navigation operation, the native CAD end and the web container communicate asynchronously, or the native CAD end performs drawing operation, the native CAD end and the web container communicate synchronously.

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

[0020] The step 3 comprises that the native CAD end receives the update from the Web container through a WebMessageReceived event, and obtains the graphic data and the annotation data of the background server.

[0021] In the step 4,

[0022] The asynchronous communication comprises that the native CAD end transmits the navigation interaction action of the CAD drawing window to the Web container through a JSAPI interface, so as to realize the synchronous operation on the graphics of the Web container.

[0023] The bidirectional communication comprises that the Web container performs bidirectional communication with the native CAD end through a HostObjects method, 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, the graphic data and the annotation data loaded by the WebView2 control are used as the bottom layer of the CAD drawing window and other layers of the CAD drawing window to realize the up-and-down superimposed display.

[0025] The WebView2 control is established in the following manner:

[0026] 1) Create a WebView2 control instance:

[0027] 2) Define a 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) The Web container calls the JSAPI interface:

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

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

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

[0035] The layer index value of the WebView2 control in the native CAD end 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 application are:

[0038] The present application integrates a Web container based on a native web page container control in CAD client software, superimposes a CAD drawing window and a native web page container control window, and realizes the fusion display of CAD native application and Web application. Users can access various online services and resources without leaving the CAD environment, and the Web container can serve as a reference layer for the CAD drawing window, greatly improving work efficiency and being very suitable for professional designers who need to refer to network resources. BRIEF DESCRIPTION OF DRAWINGS

[0039] Figure 1 is a flowchart of the present application.

[0040] Figure 2 is a native container architecture based on a web page.

[0041] Figure 3 is a schematic diagram of the remote Web end of the present application.

[0042] Figure 4 is a schematic diagram of the native CAD end of the present application.

[0043] Figure 5 is a schematic diagram of the native CAD end of the present application. DETAILED DESCRIPTION

[0044] The inventor found that the defect in the prior art was caused by the fact that the CAD software could not load external Web application data, so that the data resources on the Web application could not be obtained. After studying the commonly used CAD software on the market, the inventor found that the defect could be solved by integrating a Web container based on a native web page container control in CAD client software, superimposing a CAD drawing window and a native web page container control window, and realizing the fusion display of CAD native application and Web application. The present application can allow users to access various online services and resources without leaving the CAD environment, and the Web application can serve as a reference layer for the CAD drawing, greatly improving work efficiency.

[0045] The existing native container architecture based on a web page has the following three types:

[0046] 1. CefSharp framework application:

[0047] CefSharp framework built with Chromium kernel, supports cross-platform web application loading, commonly used for integrating cloud services or online mapping data real-time calling;

[0048] 2、Lightweight WebBrower container plug-in:

[0049] Encapsulate Web function module through lightweight technology, which can reduce local resource occupation.

[0050] 3、WebView2 control integration:

[0051] By embedding WebView2 control based on Edge kernel, the CAD interface can directly render web application, support online resource access and real-time data synchronization.

[0052] The application adopts WebView2 control combined with JSAPI interface to realize bidirectional interaction between CAD graphics and Web data.

[0053] In order to make the purpose, technical scheme and advantages of the application more clear and obvious, the application will be further described in detail below in combination with the drawings and examples. It should be understood that the specific examples described herein are only used to explain the application, and are not used to limit the application.

[0054] As shown in Figure 1 A CAD software fusion Web application method, including a remote Web end, a background server and a native CAD end.

[0055] The remote Web end opens the graphics of the background server and performs annotation after the Web page. The native CAD end loads the graphic data and annotation data of the background server in the CAD drawing window through the Web container, and performs fusion operation through the CAD drawing window and the Web container window. Fusion means that one window is overlaid in front of or behind another window, and through the operation of the top window (CAD drawing window), the bottom window (Web container window) is linked, so that the user will not perceive the existence of the two windows when operating.

[0056] The background server is used for storing graphic data and annotation data.

[0057] The method includes the following steps:

[0058] Step 1, the graphic data is stored in the background server, the Web page of the remote Web end displays the graphic data stored in the background server, and the user annotates according to the graphic data.

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

[0060] The user can operate on the graphics opened by the web page of the remote web end, including creating a new annotation, modifying an annotation, and deleting an annotation.

[0061] Step 2, the remote web end updates the annotation data to the background server, and notifies the web container to update the graphics data and the annotation data.

[0062] Step 3, the web container acquires the graphics data and the annotation data from the background server through a network API interface.

[0063] The native CAD end receives the update from the background server through a WebMessageReceived event, and acquires the graphics data and the annotation data of the background server.

[0064] Step 4, asynchronous communication and synchronous communication

[0065] (1) When the native CAD end performs a navigation operation, the native CAD end and the web container communicate asynchronously:

[0066] The native CAD end transmits the user interaction action of the CAD drawing window to the web container through a JSAPI interface, so as to realize the synchronous operation of the graphics of the web container.

[0067] The CAD drawing window of the native CAD end captures the navigation interaction action of the user, and sends a group of interaction action data to the web container through a JSAPI interface. The web container converts the received interaction action data into a corresponding navigation interaction operation behavior.

[0068] The navigation operation includes zooming, changing a viewing angle, etc.

[0069] (2) When the native CAD end performs a drawing operation, the native CAD end and the web container communicate synchronously:

[0070] When the mouse is clicked on the CAD drawing window of the native CAD end, the native CAD end calls a JSAPI interface to notify the web container to take a point. The web container performs bidirectional communication with the native CAD end through a HostObjects mode. The native CAD end acquires the three-dimensional coordinates of the corresponding point in the web container.

[0071] The drawing operation includes drawing a line, etc.

[0072] I. Native CAD end

[0073] In the native CAD end, the CAD is embedded in the Web container, that is, the WebView2 control. The WebView2 control loads the graphic data and annotation data in real time, and the Web container content is used as the bottom layer of the CAD window. The CAD drawing window (the layer above the bottom layer) realizes up-down superimposed display (as shown in Figure 4 ).

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

[0075] In the native CAD end, the WebView2 control is embedded:

[0076] In the native CAD environment, the WebView2 control is used to expose the C# method to the JavaScript call in the Web container, so as to realize the transparent display of the graphic data and annotation data in the Web container in the CAD drawing window.

[0077] This step needs to be implemented:

[0078] 1. Customizing the native Web container control and adding it to the CAD native environment; adding the Web container in the CAD window control to provide Web loading capability and realize visual interaction capability;

[0079] 2. Based on the CAD native client API and event processing mechanism, an event listening 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; realizing the data communication capability between the CAD native drawing control and the Web application, realizing the communication and interaction of image data, interactive data and basic auxiliary data.

[0080] The specific code is as follows:

[0081] / / The code creates a WebView2 host object, exposes the C# method to the JS call, and realizes the submission of 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] / / Expose the annotation submission method 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 the CAD API to parse the JSON and generate the annotation entity

[0092] }

[0093] / / Initialize the 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 for establishing the 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 into the WinForms / WPF project window.

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

[0108] 3. Define the native API interface:

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

[0110] ② Cross-process communication, ensure that these methods meet COM visibility.

[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, i.e. JSAPI interface can be called by Web container;

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

[0114] 5. Web container calls 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 handle the return value or callback.

[0117] 6. End the process

[0118] ① Test and debug: test the packaged JSAPI using WebView2 in different browsers and operating systems, and use the developer tools for debugging;

[0119] ② Optimization and release: optimize the code and performance according to the test results, package and release the application, and ensure the compatibility of the WebView2 Runtime.

[0120] Native API interface: the interface provided by the host software (such as AutoCAD, MicroStation, etc.) to the external secondary development;

[0121] JSAPI interface: encapsulate the native API interface, dedicated to the Web container call, in this way, the JS code logic in the Web container can call the native API interface.

[0122] II. Asynchronous communication and bidirectional communication

[0123] 1. Asynchronous communication: the user navigates the CAD drawing window in the native CAD end (including image zoom, image reduction, image rotation, image movement operation during drawing interaction), and the navigation interaction action is 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 performs the corresponding drawing interaction action to make the Web container content realize synchronous navigation operation.

[0124] Asynchronous communication includes:

[0125] ① Native API interface asynchronous method implementation: 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 processing asynchronous response: the Web container processes the asynchronous response of the native API interface through Promise, async / await or other mechanisms. Ensure the correctness and robustness of the asynchronous process.

[0127] 2. Bidirectional communication: the user performs drawing operations in the CAD drawing window of the native CAD end (the native CAD end takes two-dimensional screen coordinates), and the Web container communicates with the native CAD end through HostObjects. The Web container provides spatial coordinates (Web container three-dimensional coordinates corresponding to two-dimensional screen coordinates) and returns the spatial coordinates to the CAD drawing window of the native CAD end through the JSAPI interface, thereby taking the spatial coordinates of the Web container three-dimensional model.

[0128] Bidirectional communication includes:

[0129] ① Web container sends messages to the native CAD end:

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

[0131] ② The CAD drawing window of the native CAD end receives and processes Web container messages:

[0132] Subscribe to the CoreWebView2.WebMessageReceived event in the native CAD-side 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 CAD drawing window of the native CAD side is on the top, and the Web container is on the bottom (the container loads a three-dimensional model), at this time the two are completely superimposed. Since the native CAD window is set to be semi-transparent, the user can see the three-dimensional 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 turn to generate a polyline:

[0136] a) The native CAD side calls the Web container: every time the mouse is clicked, the CAD drawing window calls the JSAPI interface (the JSAPI interface carries the screen two-dimensional coordinates when the mouse is clicked) to inform the Web container that the point needs to be taken. After the Web container obtains the screen two-dimensional coordinates, it calculates the three-dimensional coordinate point corresponding to the two-dimensional coordinates with the three-dimensional model;

[0137] b) The Web container calls the native CAD side: the Web container takes the three-dimensional coordinate point, and returns the three-dimensional coordinate point to the CAD drawing window of the native CAD side through the JSAPI interface, so as to take the three-dimensional coordinate point of the three-dimensional model;

[0138] c) After the above a) and b) processes, one point taking operation is completed, and by connecting multiple points in turn, a polyline is obtained.

[0139] Three, the content of the Web container window as the bottom layer of the CAD drawing window:

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

[0141] This step needs to be implemented: custom native web page container control layer order is placed at the bottom, through the CAD control layer index value, the custom native web page container control layer index is set to negative value, to ensure that it is at the bottom of all windows; The web application is displayed below the CAD native drawing control, so that the web application can be used as the background or auxiliary display layer of CAD drawing, enhancing the visual effect also supports the semi-transparent display of web container control, by setting the CAD drawing window transparency attribute value to 0.6 to achieve semi-transparent effect, so that Web container web application and CAD drawing content can be more harmoniously integrated together.

[0142] The specific principle is as follows:

[0143] 1. Adjust the layer index:

[0144] ① CAD software usually supports layer management, 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 negative, it can be ensured that it is displayed below all window controls with positive index values.

[0146] 2. Set the transparency:

[0147] ① The CAD drawing window background provides a transparency attribute, allowing the transparency of its display content to be adjusted;

[0148] ② By setting the CAD drawing window background transparency attribute value to 0.6 (or other values between 0 and 1), a semi-transparent effect can be achieved, 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 that the WebView2 SDK has been referenced in the project, and the necessary development tools and libraries have been 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 the layer index:

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

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

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

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

[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. Load and display web content:

[0163] (1) Load the web content (such as HTML pages, JavaScript applications, etc.) to be displayed 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. Test and optimize:

[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 according to the test results to ensure stable operation and achieve the expected visual effect in different environments.

[0168] 7. Release and application:

[0169] (1) Package and release 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, the invention successfully realizes the function of placing the layer order of the WebView2 native web page container control below the CAD native drawing control and serving as a background or auxiliary display layer. This not only enhances the visual effect, but also supports the semi-transparent display of the web page container control, making the web page application and CAD drawing content more harmoniously integrated together.

[0172] II. Remote Web End

[0173] The remote Web end obtains a three-dimensional model from the background server and opens it, uses a marking tool (a marking software of the three-dimensional real scene acquisition platform, an existing software) to mark, and saves the marking data in the background server.

[0174] The Web container obtains graphic data and marking data from the background server through a network API interface, and is fused with a CAD drawing window of the native CAD end. The marking data drawn by the user in the remote Web end is displayed in the CAD environment. The marking interface is as shown in Figure 3 .

[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 marking data format is JSON format, which is compatible with MXCAD, and is convenient for the CAD end to parse.

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

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

[0193] {

[0194] "type": "circle_mark",

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

[0196] "radius": 50,

[0197] Comment: "Drainage holes need to be added".

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

[0199] }

[0200] In addition, for special types of annotations, custom annotation entities can be implemented using the McDbCustomEntity derived class.

[0201] The remote web client can adjust the name, camera view, and magnification of the 3D model, and save it as annotation data in the backend server. Correspondingly, when the web container loads the 3D model, it first presents the 3D model with the camera view and magnification adjusted on the remote web client. If there are any interactive operations in the CAD software (viewpoint, zoom), the web container then performs the same viewpoint and zoom operations on the 3D model.

[0202] Application Scenario 1 (Remote Collaboration):

[0203] (1) Remote team members open the graphic 3D file (3D file of engineering design, geological surveying, architectural planning, mechanical manufacturing, etc.) on the remote web terminal for annotation. Figure 3 );

[0204] (2) The remote Web client updates the labeled 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 client via 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 the graphic data and the annotation data in real time, and the data serves as a bottom layer (a reference layer during drawing) of a CAD drawing window, and the CAD drawing window and other layers are implemented to be displayed in a superimposed manner (up and down) Figure 4 );

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

[0210] During drawing, the reference layer needs to be observed from different angles and different positions, and the user performs operations such as zooming in, zooming out, rotating, or moving the graphic. The native CAD end transmits the interactive action of the CAD drawing window to the Web container through the JSAPI interface, and the graphic in the Web container is synchronized to perform operations such as zooming in, zooming out, rotating, or moving, thereby assisting the user to complete drawing.

[0211] During drawing, the mouse is clicked, the CAD drawing window notifies the Web container to take points, the Web container obtains corresponding three-dimensional coordinates according to the two-dimensional coordinates of the screen, and returns the three-dimensional coordinate points to the CAD drawing window of the native CAD end, so as to take the three-dimensional coordinate points of the three-dimensional model.

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

[0213] Application scenario 2 (version comparison):

[0214] Load the historical version graphic data into the Web container, and perform coincidence comparison with the current CAD drawing. When moving, zooming, rotating, or other operations are performed on the CAD drawing layer, the content of the Web container can be changed synchronously.

[0215] In summary, the application integrates the Web container (using the WebView2 control) into the native CAD, customizes the API of the native CAD as JSAPI, and realizes 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 realizes bidirectional communication between the native C# code and JavaScript through COM technology, and needs to use 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 to listen WebMessageReceived to implement JS to native asynchronous call response.

[0219] (4) Thread safety: all operations in the web container are required to be executed in the UI thread, and asynchronous methods need to be dispatched through Dispatcher. Security restrictions enable AreHostObjectsAllowed() to allow host object sensitive API to increase permission verification. Debugging support uses OpenDevToolsWindow() to debug JS and native interaction.

[0220] The preferred embodiments of the present application are illustrated in the drawings. However, the present application can be implemented in many different forms and is not limited to the embodiments described in this specification. Rather, the purpose of providing these embodiments is to make the disclosure of the present application more thorough and comprehensive.

Claims

1. A method for fusing CAD software with a web application, characterized in that, The application relates to a method for realizing remote Web annotation of CAD drawings, and a system thereof. The method comprises the following steps: Step 1: graphic data is stored in a background server, and a Web page of a remote Web end displays the graphic data stored in the background server, and a user carries out annotation according to the graphic data; Step 2: the remote Web end updates annotation data and stores the annotation data into the background server, and notifies a Web container to update; Step 3: the Web container acquires the graphic data and the annotation data from the background server through a network API interface, and carries out fusion with a CAD drawing window of a native CAD end; Step 4: the native CAD end carries out navigation operation, and the native CAD end and the Web container carry out asynchronous communication, or the native CAD end carries out drawing operation, and the native CAD end and the Web container carry out bidirectional communication; The remote Web end is a JS end; the native CAD end is a CAD end; and the Web container is a WebView2 control; In step 3, the native CAD end receives the update from the Web container through a WebMessageReceived event, and acquires the graphic data and the annotation data of the background server; In step 4, Asynchronous communication comprises the following steps: the native CAD end transmits navigation interaction of the CAD drawing window to the Web container through a JSAPI interface, so as to realize synchronous operation of the graphic of the Web container; Bidirectional communication comprises the following steps: the Web container carries out bidirectional communication with the native CAD end through a HostObjects mode, and the native CAD end acquires three-dimensional coordinates of the Web container; The native CAD end is embedded with the WebView2 control, the graphic data and the annotation data loaded by the WebView2 control are simultaneously used as a bottom layer of the CAD drawing window and other layers of the CAD drawing window, and the bottom layer and the other layers are displayed in a superimposed mode; Bidirectional communication: a user carries out drawing operation in the CAD drawing window of the native CAD end, the native CAD end acquires two-dimensional screen coordinates, the Web container carries out bidirectional communication with the native CAD end through the HostObjects mode, the Web container provides three-dimensional coordinates of the Web container corresponding to the two-dimensional screen coordinates, and the space coordinates are returned to the CAD drawing window of the native CAD end through the JSAPI interface, so as to acquire the space coordinates of the three-dimensional model of the Web container; Bidirectional communication comprises the following steps: ① The Web container sends a message to the native CAD end: the Web container uses a window.chrome.webview.postMessage method to send a message to the native CAD end, and the message content is a string or an object; ② The CAD drawing window of the native CAD end receives and processes the message of the Web container: ​ ​ ​ ​ A CoreWebView2.WebMessageReceived event is subscribed to a CAD drawing window at a native CAD end, and a received message is parsed and processed in an event handler; The drawing operation includes drawing a line.

2. The CAD software converged web application method of claim 1, wherein: The WebView2 control is established in the following manner: 1) An instance of the WebView2 control is created; 2) A native API interface is defined; 3) The native API interface is injected into the WebView2 control: ① The CoreWebView2.AddHostObjectToScript method is used to inject the created class instance into the JS environment of the WebView2 control; ② A global object name accessible in the JS environment is specified; 4) The Web container calls the JS API interface: ① The native API interface is called through the JS API interface in the HTML / JS code loaded by the WebView2 control; ② The method is called and the return value or callback is processed.

3. The CAD software converged web application method of claim 2, wherein: The asynchronous communication includes that the CAD drawing window of the native CAD end captures a user's navigation interaction action, sends a group of interaction action data to the Web container through the JS API interface, and the Web container converts the received interaction action data into a corresponding navigation interaction operation behavior.

4. The CAD software converged web application method of claim 3, 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.

5. The CAD software converged web application method of claim 4, wherein: The annotation data is in JSON format.

Images