Tip: at present, we provide two CAD drawing browsing and editing programs in the web page. For details, see help.mxdraw.com/?pid=46

A new online CAD platform, based on JavaScript, WebGL, C++, node. js, three. js technology, the front desk uses html5 to process 2d and 3d CAD drawings online. It can be used for drawing management, communication, annotation, information extraction, three-dimensional display and other scenes, support DWG, DXF, DWF and other file formats, background using efficient C++ program development, asynchronous multithreading, multi-process architecture. Platform front and background provide JS language development interface, developers only need to know JS language, can quickly build their own online CAD drawing platform. The system can be used in Windows, Linux, Android, iOS and other systems, a real code, full platform support.

The online demo site:

www.mxdraw.com:3000/

MxCAD cloud:

www.mxdraw3d.com/

MxCAD Cloud image library:

www.mxdraw3d.com/drawinglibr…

Major features support all DWG drawing formats from AutoCAD R14 to AutoCAD 2021, with support for emerging AutoCAD file formats in the future.

Support in three dimensions: create the basic geometry, such as cone, column, ring geometry for Boolean operations (addition, subtraction and intersection operation), chamfering, oblique, hollow out, offset, scanning, spatial relations, geometry (normal, the dot product and cross product, projection, fitting, etc.), geometry analysis (center of mass, volume, curvature, etc.), space transformation, translation, scaling, rotation, and other functions.

Two-dimensional support: CAD drawings information search extraction, measuring distance, calculate area, notation, capture, orthogonal, curve discrete, offset, interrupt, array, extension, extension, record data, speaking, reading and writing, speaking, reading and writing, structure selection, animation, custom entity, groups, hyperlinks, Undo and Redo, dictionary, layer, annotation style, linear style, text style, viewport, layout, user coordinate system , system variables, drawing comparison, dynamic prompts, etc.

The main entities are: Straight line, arc, polylines, sample line, circle, elliptic, elliptic arc, IMAGE and point, piece of reference, the external reference, ray, cloud line, text, multiline text, alignment marks, rotating annotation, dra, diameter of annotation, angular dimension, layout, the viewport, layer, lines, text style, named dictionary, tagging, custom entity, agency entity Reactor, etc.

Main edits include: move, pinch point stretch, offset, delete, copy, paste, rotate, scale, mirror direction, discrete, pattern fill, solid fill, break, calculate curve length, area, nearest point, intersection point, leading Angle, text change line and so on.

Geometric operations: area, included Angle, vector, matrix, rotation, scaling, nearest point, nearest distance, vertical foot, parameter, mirror direction, translation, intersection, break, extension, shortest path, longest path.

Download the development kit Click on www.mxdraw.com/download.ht…

The downloaded file is the installation program. Double-click to install the development package as prompted. The default installation location is: C:\Users\MxDraw\Documents\MxKd\MxDrawCloudServer

Note: the content of the development package is very large, it takes a long time to install, please wait patiently!

The installation directory contains the following contents:

To run the demo, double-click the desktop shortcut:Start the start program, the interface is as follows:

Note: before startup, turn off 360 antivirus software, it will be false positives and block our server program access to the network.

Follow the interface operation, from top to bottom, click three buttons, start the service, note: make sure the firewall allows our service program to access the network.

Set up a firewall that allows us to access the grid for the following three applications:

Bin\Release\ mxserver. exe Bin\Release\node.exe SRC\TsWeb\nodejs\node.exe

The startup effect is as follows:

1, background website service program, if the user has their own website service, you do not need to start the program.

2. Background CAD service program, it is the background master service, used for the CAD data request response of the foreground.

3. Front desk demonstration effect:

After selecting the file:

Open 2d drawing:

Open 3d drawings:

3D drawing test:

How to browse the DWG file in your system First turn on the DWG file through our tool Bin/Release/MxFileConvert exe convert DWG files to our own format MXB format, it is a console application, can make the background automatically calls in the future. For example, convert my.dwg to my.dwg.mxb as follows:

MXB and my.dwg to the directory where the background program is located, so that the foreground program can automatically find and open the drawings, as follows:

AddFunSearchPath adds a directory to the background service search file. If you need to add a directory, modify the Bin\Release\mxconfig.js file as follows:

Let’s create a new HTML file, mxweb3Dtest.html. The code is as follows:

        MxFun.createMxObject("MxDraw2d","my.dwg");
        MxFun.createMxObject("MxDraw3d","test.obj");
        document.body.addEventListener('touchmove', function (e) {
            e.preventDefault()
        }, { passive: false })
        return 0;
    }
</script>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/mxfun.min.js"></script>
Copy the code

Then in the browser, access our HTML file and open the my.dwg file online. The code creates two controls, one two-dimensional and one three-dimensional, so it looks like this:

Principle that

The foreground webpage is developed using JS+ HTML5, without any plug-in installation. It is recommended to use the latest Chrome browser. CAD graphics are rendered based on WebGL, using three.js 3D open source platform.

The communication between the foreground and the background uses WebSocket, and the background uses node. js, TS, c++ language development, and the background interprets the DWG drawing format into one of our file formats, and then transmits it to the foreground for display.

The schematic diagram is as follows:

We provide a scheme to browse DWG drawings directly without background services. If the user needs: no need to edit DWG drawings, just browse and annotate DWG drawings online, it is more suitable for this scheme.

The scheme does not need to start mxServer. exe, DWG drawings transferred from the foreground to the background only need a format conversion, and can be directly loaded and displayed on the web page, the principle is as follows:

Detailed implementation steps are as follows:

Converting file formats

The DWG file is uploaded by the foreground to the background, and the background server program starts the mxFileconvert. exe process to convert DWG file format to WHG format, such as node.js code as follows:

/* POST upload listing. */router.post('/', upload.single('file'), function (req, res, Var file = req.file; // mxFileconvert. exe path to the server var pathConvertExt = '"' + __dirName + "/.. /.. /.. /Bin/Release/MxFileConvert.exe" + '"'; Var cmdParam = '{" srcPath ":"' + file.path + '"}'; var cmd = pathConvertExt + " " + cmdparam; const exec = child_process.exec; Exec (CMD, (err, stdout, stderr) => {if (err) {res.json('{"code": 1, "message": "exec cmd failed"}'); } else {// Conversion success, output json format string by command. Res.json (stdout); }}); });Copy the code

By default, the converted files are stored in DWG directory and WHG files are stored in BUF directory of DWG directory, as shown below:

A DWG file will convert many WGH files, and our conversion program will automatically divide a large DWG file into many small WGH files, which is convenient for the front desk to display while loading. The converted files are shown as follows:

The converted WGH files should be accessible and downloaded directly from HTPP website, as shown below:

Write the front desk code, load WGH files, display CAD drawings

Compile the following HTML file

This file is in our development package installation directory :SRC\TsWeb\public\mxstatic.html

Copy the code

http://localhost:3000/mxstatic.html?file=hhhh.dwg

The effect is shown below:

For more effects visit the website:

www.mxdraw3d.com/drawinglibr…

We provide the Linux version of the conversion program, the file in the installation directory: MxDrawCloudServer\Bin\Linux\Bin directory, as shown below:

Copy the files under this directory to Linux system, and then in the server background program, call MxDrawServer program to convert DWG file format to WGH file, the principle is the same as Windows system.

Manual conversion in Linux Shell is shown below:

Converted file contents:

Contents of the buf directory:

Once you have the WGH file on Linux, the steps to display DWG in the front loading display are the same as in Windows.

Test platforms: Ubuntu 20.04.1 LTS 64, centos-8-x86_64-1905

The recommended memory size for Linux VMS is 8 GB

CentOS system running our program, if the following error:

/lib64/libstdc++. So.6: version glibcxx_3.4.26 ‘not found /usr/lib64/libm.so. Version GLIBC_2. 29 ‘not found reference help file: mxtmpweb.mxdraw.f3322.net: 3562 / CentOSHelp….

Tip: the conversion directory is best placed in the user’s home directory.