forked from helenkwok/bim-gis-viewer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
141 lines (134 loc) · 6.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="static/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Load the `mapbox-gl-geocoder` plugin. -->
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="static/colorjoe.min.js"></script>
<link rel="stylesheet" href="static/colorjoe.css">
<title>BIM model viewer with GIS</title>
</head>
<body>
<div class="relative w-screen h-screen" id="viewer-container"></div>
<div class="hidden absolute top-0 left-0 w-screen h-screen z-50 flex justify-center items-center bg-neutral-500 bg-opacity-50" id="progress-container">
<div class="p-2 bg-white rounded-xl shadow-xl flex flex-col justify-center items-center gap-2 text-2xl">
<div class="flex justify-center items-center gap-2">
<p id="progress-label"></p>
<p id="progress-text"></p>
</div>
<img src ="static/loading.svg" alt="Loading IFC.js..."/>
</div>
</div>
<div class="absolute top-2 left-2 z-10 flex flex-col items-start gap-2">
<div class="flex flex-col items-start gap-2 p-2 bg-white rounded-xl shadow-xl">
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-xl shadow-xl flex justify-center items-center gap-2 disabled:bg-blue-300" id="sample-button">
<span class="material-icons material-symbols-outlined">
home
</span>
Open sample model
</button>
<div class="w-full text-center">OR</div>
<input class="hidden" type="file" id="file-input">
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-xl shadow-xl flex justify-center items-center gap-2 disabled:bg-blue-300" id="save-button">
<span class="material-icons material-symbols-outlined">
upload_file
</span>
Upload model
</button>
<button class="px-4 py-2 bg-red-500 text-white rounded-xl shadow-xl flex justify-center items-center gap-2 disabled:bg-red-300" id="remove-button">
<span class="material-icons material-symbols-outlined">
delete
</span>
Remove cached model
</button>
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-xl shadow-xl flex justify-center items-center gap-2 disabled:bg-blue-300" id="dim-button">
<span class="material-icons material-symbols-outlined">
straighten
</span>
Dimension
</button>
<button class="w-full bg-blue-500 disabled:bg-blue-300 rounded-xl shadow-xl disabled:pointer-events-none" id="map-button">
<a class="w-full px-4 py-2 text-white flex justify-center items-center gap-2" href='gis.html'>
<span class="material-icons material-symbols-outlined">
travel_explore
</span>
3D map viewer
</a>
</button>
<button class="w-full px-4 py-2 bg-blue-500 text-white rounded-xl shadow-xl flex justify-center items-center gap-2 disabled:bg-blue-300" id="guide-button">
<span class="material-icons material-symbols-outlined">
help
</span>
Keyboard guide
</a>
</button>
</div>
<div class="hidden flex flex-col items-start gap-2 p-2 bg-white rounded-xl shadow-xl" id="guide-container">
<table class="table-fixed">
<thead>
<tr>
<th colspan="2">
How to use:
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Add a clipping plane: </td>
<td>Click an element and press 'P'</td>
</tr>
<tr>
<td>Remove a clipping plane: </td>
<td>Select a clipping arrow and press 'O'</td>
</tr>
<tr>
<td>Take measurement: </td>
<td>1. Press 'Dimension' <br/> 2. Double click the starting point. To choose another point, press 'Esc' to cancel<br/> 3. Click the endpoint</td>
</tr>
<tr>
<td>Remove measurement label: </td>
<td>Select a measurement label and press 'Del'</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="absolute top-2 right-2 z-10 flex flex-col items-end gap-2">
<div class="hidden p-2 bg-white rounded-xl shadow-xl w-fit" id="palette-container">
<div class="colorjoe"></div>
</div>
<div class="hidden p-2 bg-white rounded-xl shadow-xl max-w-[50vh] max-h-[50vh] overflow-y-scroll" id="properties-container"></div>
</div>
<button class="fixed right-2 bottom-24 z-10 p-4 bg-blue-500 text-white rounded-full shadow-xl flex items-center justify-center" id="palette-button">
<span class="material-icons material-icons-outlined">
palette
</span>
</button>
<button class="fixed right-2 bottom-8 z-10 p-4 bg-blue-500 text-white rounded-full shadow-xl flex items-center justify-center">
<a class="flex items-center justify-center" href="https://github.com/helenkwok/bim-gis-viewer" target="_blank">
<span class="material-icons material-icons-outlined">
code
</span>
</a>
</button>
<footer class="fixed w-screen bottom-0 flex items-center justify-center z-10 pointer-events-none">
<div class="px-2 bg-neutral-200 bg-opacity-50">
Built with <a class="pointer-events-auto underline font-bold" href="https://ifcjs.github.io/info" target="_blank">
IFC.js
</a> and ❤ by <a class="pointer-events-auto underline font-bold text-xs lg:text-base" href="https://github.com/helenkwok" target="_blank">
Helen Kwok
</a> © 2022
</div>
</footer>
<script src="bundle/viewer.js"></script>
</body>
</html>