Initial viewer implementation

buildingSMART · Nov 12, 2024 · 27c35cc · 27c35cc
1 parent 4216ede
commit 27c35cc
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 72 deletions.
diff --git a/todot.py → docs/scripts/todot.py b/todot.py → docs/scripts/todot.py
diff --git a/index.html → docs/viewer/index.html b/index.html → docs/viewer/index.html
@@ -4,11 +4,13 @@
 <head>
     <meta charset="UTF-8">
     <title>IFC5 View</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0" />
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
         }
 
         html,
@@ -18,20 +20,19 @@
 
         body>div>div {
             background: #eee;
-            border-radius: 4px;
-            border: solid 1px #ccc;
+            overflow-y: scroll;
         }
 
         .container {
             display: grid;
-            grid-template-rows: 1fr 1fr 1fr;
+            grid-template-rows: 2em 1fr 1fr 1fr 2em;
             grid-template-columns: 1fr 2fr;
             height: 100vh;
             width: 100vw;
         }
 
         .layers {
-            grid-row: 1;
+            grid-row: 2;
             grid-column: 1;
         }
 
@@ -63,26 +64,69 @@
             background-color: #ddd;
         }
 
-        .tree {
-            grid-row: 2;
+        .tree-container {
+            grid-row: 3;
             grid-column: 1;
+        }
+
+        .tree {
             padding: 0.5em;
+            font-size: 0.8em;
         }
 
         .tree div div {
             cursor: pointer;
             padding: 0.2em 0 0 1em;
             border-top: solid 1px #ddd;
+            line-height: 24px;
+        }
+
+        .tree .material-symbols-outlined {
+            vertical-align: -6px;
+            margin-left: 0.5em;
         }
 
         .viewport {
-            grid-row: 1 / 3;
+            grid-row: 2 / 4;
             grid-column: 2;
+            background: linear-gradient(#80a1c2, #eee);
         }
 
         .attributes {
-            grid-row: 3;
+            grid-row: 4;
+            grid-column: 1 / 3;
+        }
+
+        .table {
+            font-size: 0.8em;
+        }
+
+        .header {
+            grid-row: 1;
+            grid-column: 1 / 3;
+            background: #666;
+            line-height: 2em;
+            border-bottom: solid 1px #555;
+        }
+
+        .header h1 {
+            font-size: 1em;
+            font-weight: 100;
+            padding-left: 0.5em;
+        }
+
+        .header h1 span {
+            font-size: 50%;
+            opacity: 0.5;
+        }
+
+        .footer {
+            grid-row: 5;
             grid-column: 1 / 3;
+            background: white;
+            text-align: center;
+            font-size: 0.8em;
+            padding: 0.5em;
         }
 
         table {
@@ -99,21 +143,57 @@
             vertical-align: top;
             padding: 0.5em;
         }
+
+        h2 {
+            background: #aaa;
+            color: white;
+            border: solid 1px #888;
+            font-size: 0.8em;
+            font-weight: 100;
+            padding: 0.2em 0.5em;
+        }
+
+        input,button {
+            padding: 0.5em !important;
+            border: solid 1px gray;
+            border-radius: 5px;
+            background: #eee;
+        }
+        button {
+            padding: 10px !important;
+        }
+        input {
+            width: 70%;
+        }
     </style>
 </head>
 
 <body>
     <div class="container">
+        <div class="header"><h1>IFC5 view <span>BETA</span></h1></div>
         <div class='layers'>
+            <h2>Layer browser</h2>
             <div></div>
             <form id="fileForm">
                 <input type="file" id="fileInput" required>
-                <button type="submit">+</button>
+                <button class="file-upload-submit" type="submit">view ></button>
             </form>
         </div>
-        <div class='tree'></div>
+        <div class='tree-container'>
+            <h2>Model tree</h2>
+            <div class='tree'>
+
+            </div>
+        </div>
         <div class="viewport"></div>
-        <div class="attributes"></div>
+        <div class="attributes">
+            <h2>Selection attributes</h2>
+            <div class="table"></div>
+        </div>
+        <div class="footer">
+            This software is freely available for use, modification, and distribution under the MIT License, provided the original copyright notice and license terms are included.
+            <a href="https://github.com/buildingSMART/IFC5-development/">https://github.com/buildingSMART/IFC5-development/</a>
+        </div>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.142.0/examples/js/controls/OrbitControls.js"></script>

diff --git a/render.mjs → docs/viewer/render.mjs b/render.mjs → docs/viewer/render.mjs
@@ -265,12 +265,23 @@ function encodeHtmlEntities(str) {
     return div.innerHTML;
 };
 
+const icons = {
+    'UsdGeom:Mesh:points': 'deployed_code', 
+    'UsdGeom:BasisCurves:points': 'line_curve',
+    'UsdShade:Material:outputs:surface.connect': 'line_style'
+};
+
 function buildDomTree(prim, node) {
     const elem = document.createElement('div');
+    let span;
     elem.appendChild(document.createTextNode(prim.name ? prim.name.split('/').reverse()[0] : 'root'));
+    elem.appendChild(span = document.createElement('span'));
+    console.log(prim.name ? prim.name.split('/').reverse()[0] : 'root', ...Object.keys(prim.attributes || {}));
+    Object.entries(icons).forEach(([k, v]) => span.innerText += (prim.attributes || {})[k] ? v : ' ');
+    span.className = "material-symbols-outlined";
     elem.onclick = (evt) => {
         let rows = Object.entries(prim.attributes).map(([k, v]) => `<tr><td>${encodeHtmlEntities(k)}</td><td>${encodeHtmlEntities(typeof v === 'object' ? JSON.stringify(v) : v)}</td>`).join('');
-        document.querySelector('.attributes').innerHTML = `<table border="1">${rows}</table>`;
+        document.querySelector('.attributes .table').innerHTML = `<table border="0">${rows}</table>`;
         evt.stopPropagation();
     };
     node.appendChild(elem);

diff --git a/toposort.mjs b/toposort.mjs