Skip to content

Commit e126d20

Browse files
thingraphthingraph
authored
Merge pull request #20 from thingraph/feature/update-dwg_json_viewer
Update dwg_json_viewer
2 parents 330aea3 + 67545ea commit e126d20

1 file changed

Lines changed: 136 additions & 28 deletions

File tree

‎dwg_json_viewer.html‎

Lines changed: 136 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,12 @@
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Dwg Database JSON Viewer</title>
7-
<!-- <script src="https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/dist/jsoneditor.min.js"></script>
8-
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/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">
117
<style>
12-
#dwgInfo:empty {
8+
#dwgInfo:empty, #dxfInfo:empty {
139
height: 10px;
1410
}
1511

16-
#dwgInfo {
12+
#dwgInfo, #dxfInfo {
1713
margin-top: 10px;
1814
margin-bottom: 10px;
1915
}
@@ -24,37 +20,98 @@
2420
.table td {
2521
vertical-align: top;
2622
}
23+
.btn {
24+
display: inline-block;
25+
padding: 8px 12px;
26+
background-color: #4CAF50;
27+
color: white;
28+
border-radius: 4px;
29+
cursor: pointer;
30+
}
2731
</style>
2832
</head>
2933
<body>
3034
<h1>Dwg/dxf Database JSON Viewer</h1>
31-
<input type="file" id="fileInput" accept=".dwg,.dxf" />
32-
<div id="dwgInfo"></div>
3335
<table class="table">
36+
<tr>
37+
<td>
38+
<label for="fileInput" class="btn">Choose Dwg File</label>
39+
<input type="file" id="fileInput" accept=".dwg" style="display: none;" />
40+
<span id="dwgFileName">No File Chosen</span>
41+
<div id="dwgInfo"></div>
42+
</td>
43+
<td></td>
44+
<td>
45+
<label for="fileInputDxf" class="btn">Choose Dxf File</label>
46+
<input type="file" id="fileInputDxf" accept=".dxf" style="display: none;" />
47+
<span id="dxfFileName">No File Chosen</span>
48+
<div id="dxfInfo"></div>
49+
</td>
50+
</tr>
3451
<tr>
3552
<td>Database from libredwg-web</td>
36-
<td>Database in x-viewer</td>
53+
<td>Database in x-viewer parsed by libredwg-web</td>
54+
<td>Database in x-viewer parsed by x-viewer/core <span id="coreVersion"></span></td>
3755
</tr>
3856
<tr>
39-
<td><div id="dwgJsonEditor"></div></td>
40-
<td><div id="dxfJsonEditor"></div></td>
57+
<td><div id="jsonEditor1"></div></td>
58+
<td><div id="jsonEditor2"></div></td>
59+
<td><div id="jsonEditor3"></div></td>
4160
</tr>
4261
</table>
4362
<br>
4463
<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>
4564
<!-- <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-
}
65+
<script>
66+
// Auto-detect environment and load resources accordingly
67+
(function() {
68+
// Check if running locally (localhost, 127.0.0.1, or file:// protocol)
69+
const wl = window.location;
70+
const isDevEnv = wl.hostname === 'localhost' || wl.hostname === '127.0.0.1';
71+
72+
// Load jsoneditor based on environment
73+
const jsoneditorJsPath = isDevEnv
74+
? "libs/jsoneditor/jsoneditor.min.js"
75+
: "https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/dist/jsoneditor.min.js";
76+
77+
const jsoneditorCssPath = isDevEnv
78+
? "libs/jsoneditor/jsoneditor.min.css"
79+
: "https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/dist/jsoneditor.min.css";
80+
81+
// Load CSS
82+
const link = document.createElement('link');
83+
link.rel = 'stylesheet';
84+
link.href = jsoneditorCssPath;
85+
document.head.appendChild(link);
86+
87+
// Load JS
88+
const script = document.createElement('script');
89+
script.src = jsoneditorJsPath;
90+
document.head.appendChild(script);
91+
92+
// Set import map for x-viewer/core
93+
const corePath = isDevEnv
94+
? "../packages/core/dist/index.esm.js"
95+
: "https://cdn.jsdelivr.net/npm/@x-viewer/core@latest/dist/index.esm.js";
96+
97+
const importMap = document.createElement('script');
98+
importMap.type = 'importmap';
99+
importMap.textContent = JSON.stringify({
100+
imports: {
101+
"@x-viewer/core": corePath
102+
}
103+
});
104+
document.head.appendChild(importMap);
105+
})();
52106
</script>
53107
<script type="module">
54-
import { DxfParser } from "@x-viewer/core";
108+
import { DxfParser, VERSION } from "@x-viewer/core";
55109

56-
// const loader = new DxfLoader();
57-
// const parser = new DxfParser();
110+
// Display x-viewer/core version
111+
const coreVersionElement = document.getElementById('coreVersion');
112+
if (coreVersionElement && VERSION) {
113+
coreVersionElement.textContent = `(v${VERSION})`;
114+
}
58115

59116
const printDwgInfo = (version, codepage, stats) => {
60117
const infoElement = document.getElementById('dwgInfo');
@@ -63,19 +120,25 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
63120
}
64121

65122
// create the editor
66-
const dwgContainer = document.getElementById('dwgJsonEditor')
67-
const dxfContainer = document.getElementById('dxfJsonEditor')
123+
const container1 = document.getElementById('jsonEditor1')
124+
const container2 = document.getElementById('jsonEditor2')
125+
const container3 = document.getElementById('jsonEditor3')
68126
const options = {
69127
mode: 'view'
70128
}
71-
const dwgJsonEditor = new JSONEditor(dwgContainer, options)
72-
const dxfJsonEditor = new JSONEditor(dxfContainer, options)
129+
const jsonEditor1 = new JSONEditor(container1, options)
130+
const jsonEditor2 = new JSONEditor(container2, options)
131+
const jsonEditor3 = new JSONEditor(container3, options)
73132

74133
// handle file input change event
75134
const fileInput = document.getElementById('fileInput')
135+
const dwgFileNameElement = document.getElementById('dwgFileName')
76136
fileInput.addEventListener('change', function(event) {
77137
const file = event.target.files[0]
78138
if (file) {
139+
// Update file name display
140+
dwgFileNameElement.textContent = file.name
141+
79142
const reader = new FileReader();
80143
reader.onload = function(e) {
81144
const fileContent = e.target.result;
@@ -85,13 +148,13 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
85148
const parser = new DxfParser();
86149
if (file.name.endsWith(".dwg")) {
87150
const result = parser.libredwgConvertEx(fileContent);
88-
dwgJsonEditor.set(result.database);
151+
jsonEditor1.set(result.database);
89152
version = result.version;
90153
codepage = result.codepage;
91154
stats = result.stats;
92155
}
93156
const result = parser.parse(fileContent);
94-
dxfJsonEditor.set({
157+
jsonEditor2.set({
95158
tables: result.tables,
96159
objects: result.objects,
97160
header: result.header,
@@ -104,14 +167,59 @@ <h1>Dwg/dxf Database JSON Viewer</h1>
104167
printDwgInfo(version, codepage, stats);
105168
}
106169

107-
dwgJsonEditor.clear();
108-
dxfJsonEditor.clear();
170+
jsonEditor1.clear();
171+
jsonEditor2.clear();
109172
// read the file
110173
reader.readAsArrayBuffer(file)
111174
} else {
175+
dwgFileNameElement.textContent = 'No File Chosen'
112176
console.log('No file selected')
113177
}
114178
})
179+
180+
// handle dxf file input change event
181+
const fileInputDxf = document.getElementById('fileInputDxf')
182+
const dxfFileNameElement = document.getElementById('dxfFileName')
183+
fileInputDxf.addEventListener('change', function(event) {
184+
const file = event.target.files[0]
185+
if (file) {
186+
// Update file name display
187+
dxfFileNameElement.textContent = file.name
188+
189+
const reader = new FileReader();
190+
reader.onload = function(e) {
191+
const fileContent = e.target.result;
192+
const parser = new DxfParser();
193+
194+
// Parse DXF file using dxf-parser
195+
const result = parser.parse(fileContent);
196+
197+
// Display in the third column (dxf-parser result)
198+
jsonEditor3.set({
199+
tables: result.tables,
200+
objects: result.objects,
201+
header: result.header,
202+
entities: result.entities,
203+
classes: result.classes,
204+
blocks: result.blocks,
205+
});
206+
207+
// Display info
208+
const infoElement = document.getElementById('dxfInfo');
209+
infoElement.innerHTML = '';
210+
const version = result.header["$ACADVER"] || "Unknown";
211+
const codepage = result.header["$DWGCODEPAGE"] || "Unknown";
212+
infoElement.textContent = `Version: ${version}, Code Page: ${codepage}`;
213+
}
214+
215+
jsonEditor3.clear();
216+
// read the file
217+
reader.readAsArrayBuffer(file)
218+
} else {
219+
dxfFileNameElement.textContent = 'No File Chosen'
220+
console.log('No DXF file selected')
221+
}
222+
})
115223
</script>
116224
</body>
117225
</html>

0 commit comments

Comments
 (0)