1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+ < head >
4+ < meta charset ="UTF-8 ">
5+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
6+ < title > Dwg Database JSON Viewer</ title >
7+ <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected] /dist/jsoneditor.min.js"></script> 8+ <link href="https://cdn.jsdelivr.net/npm/[email protected] /dist/jsoneditor.min.css" rel="stylesheet"> --> 9+ < script src ="libs/jsoneditor/jsoneditor.min.js "> </ script >
10+ < link href ="libs/jsoneditor/jsoneditor.min.css " rel ="stylesheet ">
11+ < style >
12+ # dwgInfo : empty {
13+ height : 10px ;
14+ }
15+
16+ # dwgInfo {
17+ margin-top : 10px ;
18+ margin-bottom : 10px ;
19+ }
20+ .table {
21+ width : 100% ;
22+ table-layout : fixed;
23+ }
24+ .table td {
25+ vertical-align : top;
26+ }
27+ </ style >
28+ </ head >
29+ < body >
30+ < h1 > Dwg/dxf Database JSON Viewer</ h1 >
31+ < input type ="file " id ="fileInput " accept =".dwg,.dxf " />
32+ < div id ="dwgInfo "> </ div >
33+ < table class ="table ">
34+ < tr >
35+ < td > Database from libredwg-web</ td >
36+ < td > Database in x-viewer</ td >
37+ </ tr >
38+ < tr >
39+ < td > < div id ="dwgJsonEditor "> </ div > </ td >
40+ < td > < div id ="dxfJsonEditor "> </ div > </ td >
41+ </ tr >
42+ </ table >
43+ < br >
44+ < div > < a href ="https://mlightcad.github.io/libredwg-web/1_dwg_json_viewer.html " style ="color: #aaa; font-size: 8px; "> mlightcad dwg json viewer</ a > </ div >
45+ <!-- <script type="module" src="dist/libredwg-web.js" defer></script> -->
46+ < script type ="importmap ">
47+ {
48+ "imports" : {
49+ "@x-viewer/core" : "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js"
50+ }
51+ }
52+ </ script >
53+ < script type ="module ">
54+ import { DxfParser } from "@x-viewer/core" ;
55+
56+ // const loader = new DxfLoader();
57+ // const parser = new DxfParser();
58+
59+ const printDwgInfo = ( version , codepage , stats ) => {
60+ const infoElement = document . getElementById ( 'dwgInfo' ) ;
61+ infoElement . innerHTML = '' ;
62+ infoElement . textContent = `Version: ${ version } ${ codepage } ${ stats . unknownEntityCount } ;
63+ }
64+
65+ // create the editor
66+ const dwgContainer = document . getElementById ( 'dwgJsonEditor' )
67+ const dxfContainer = document . getElementById ( 'dxfJsonEditor' )
68+ const options = {
69+ mode : 'view'
70+ }
71+ const dwgJsonEditor = new JSONEditor ( dwgContainer , options )
72+ const dxfJsonEditor = new JSONEditor ( dxfContainer , options )
73+
74+ // handle file input change event
75+ const fileInput = document . getElementById ( 'fileInput' )
76+ fileInput . addEventListener ( 'change' , function ( event ) {
77+ const file = event . target . files [ 0 ]
78+ if ( file ) {
79+ const reader = new FileReader ( ) ;
80+ reader . onload = function ( e ) {
81+ const fileContent = e . target . result ;
82+ let version ;
83+ let codepage ;
84+ let stats = { unknownEntityCount : "" } ;
85+ const parser = new DxfParser ( ) ;
86+ if ( file . name . endsWith ( ".dwg" ) ) {
87+ const result = parser . libredwgConvertEx ( fileContent ) ;
88+ dwgJsonEditor . set ( result . database ) ;
89+ version = result . version ;
90+ codepage = result . codepage ;
91+ stats = result . stats ;
92+ }
93+ const result = parser . parse ( fileContent ) ;
94+ dxfJsonEditor . set ( {
95+ tables : result . tables ,
96+ objects : result . objects ,
97+ header : result . header ,
98+ entities : result . entities ,
99+ classes : result . classes ,
100+ blocks : result . blocks ,
101+ } ) ;
102+ version = version || result . header [ "$ACADVER" ] ;
103+ codepage = result . header [ "$DWGCODEPAGE" ] ;
104+ printDwgInfo ( version , codepage , stats ) ;
105+ }
106+
107+ dwgJsonEditor . clear ( ) ;
108+ dxfJsonEditor . clear ( ) ;
109+ // read the file
110+ reader . readAsArrayBuffer ( file )
111+ } else {
112+ console . log ( 'No file selected' )
113+ }
114+ } )
115+ </ script >
116+ </ body >
117+ </ html >
0 commit comments