Handle invisible nodes (temp)

config.js

@@ -49,6 +49,7 @@ export const config = {
                 label: 'Teatro',
                 model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
                 opacity: 0.0,
+                isInvisible: true,
                 children: [
                     /*
                     {

js/controllers/menu_controller.js

@@ -1,9 +1,12 @@
 // Global ATON
 import { Controller } from "@hotwired/stimulus"
 import AppState from "../state.js";
+import { traverseOntology } from "../ontology.js";
 
 const html = String.raw;
 const domParser = new DOMParser;
+// TODO: hard-coded, but follows a convention...
+const ontologyJsonPath = location.pathname + 'ontology.json';
 
 export default class extends Controller {
     static targets = ['trigger', 'layers', 'ontology'];
@@ -15,11 +18,12 @@ export default class extends Controller {
      * Open settings panel
      * @param {Event} event 
      */
-    toggleMenu(event) {
+    async toggleMenu() {
         ATON.UI.setSidePanelRight();
         ATON.UI.showSidePanel({header: 'Menu'});
         this.#buildMenuPanel(ATON.UI.elSidePanel);
         this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
+        this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
     }
     /**
      * @param {Event} event 
@@ -75,4 +79,31 @@ export default class extends Controller {
             );
         }
     }
+    /**
+     * Temporary implementation to show domains only
+     * @todo Don't rebuild it every time, use caching, return a container
+     * @param {Object} ontology The traversed ontology object (temp)
+     * @param {HTMLElement} tab Tab content element
+     */
+    #buildOntologyMenu(ontology, tab) {
+        console.debug(ontology);
+
+        const mainNode = tab.querySelector('#ontology-list');
+        mainNode.textContent = ontology.ontology;
+
+        let domainList = html`
+            <ul class="list-group mt-2" id="domains-list"></ul>
+        `;
+
+        // Very fragile and ugly!!
+        mainNode.innerHTML += domainList;
+        domainList = tab.querySelector('#domains-list');
+        
+        for(let domain of ontology.domains) {
+            const domainItem = html`
+                <li class="list-group-item">${domain.label}</li>
+            `;
+            domainList.innerHTML += domainItem;
+        }
+    }
 }

js/scene.js

@@ -88,6 +88,9 @@ function loadNodes(nodes) {
             }));
         }
 
+        // Disable a node for picking (shadows, light probe etc.)
+        if (n.isInvisible) node.hide();
+
         node.attachToRoot();
 
         if (n.isMain) {
@@ -96,7 +99,7 @@ function loadNodes(nodes) {
             AppState.clipping.boundingSphere = node.getBound();
         }
 
-        AppState.nodes.push({id: n.label, active: true});
+        AppState.nodes.push({id: n.label, active: n.isInvisible ? false: true});
     });
     
     if (!AppState.clipping.boundingSphere) {

js/ui.js

@@ -1,49 +0,0 @@
-import AppState from "./state.js";
-import { traverseOntology } from "./ontology.js";
-
-/**
- * @module UI
- */
-/**
- * 
- * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
- */
-export function pauseAudio(triggerSelector) {
-    // What if more than one audio element is playing?
-    const audio = document.querySelector('audio');
-
-    if (audio) {
-        document.querySelectorAll(triggerSelector).forEach(el => {
-            el.addEventListener('click', () => audio.pause());
-        });
-        document.querySelector('.modal').addEventListener('blur', () => {
-            audio.pause();
-        });
-    }
-}
-/**
- * @see traverseOntology
- * @param {Object} ontology The traversed ontology object (temp)
- * @param {HTMLElement} sidePanel ATON's side panel element
- */
-function buildOntologyMenu(ontology, sidePanel) {
-    const list = document.createElement('ul');
-    list.className = 'list-group';
-    const mainNode = document.createElement('li');
-    mainNode.className = 'list-group-item';
-    mainNode.textContent = ontology.ontology;
-    
-    const domainList = document.createElement('ul');
-    domainList.className = 'list-group';
-
-    for(let domain of ontology.domains) {
-        const domainItem = document.createElement('li');
-        domainItem.textContent = domain.label;
-        domainItem.className = 'list-group-item';
-        domainList.appendChild(domainItem);
-    }
-
-    mainNode.appendChild(domainList);
-    list.appendChild(mainNode);
-    sidePanel.appendChild(list);
-}

js/utils/environment.js

@@ -59,18 +59,18 @@ export function createLightSlider(direction, label, range, step) {
  * @param {Array<Number>} range - The slider's range
  * @param {Number} step - The slider's step
  */
-export function createExposureSlider(label, range, step = 0.2) {
+export function createExposureSlider(label, range, step = 0.05) {
     const currentVal = AppState.exposure;
 
     const exposureSlider = ATON.UI.createSlider({
         range,
         label,
-        value: Number.parseFloat(currentVal).toPrecision(2),
+        value: Number.parseFloat(currentVal).toPrecision(1),
         oninput: val => {
             ATON.setExposure(val);
             AppState.exposure = val;
 
-            console.debug(ATON.getExposure());
+            console.debug('Current exposure:', ATON.getExposure());
         },
     });
 

scenes/ssgp/index.html

@@ -134,7 +134,7 @@
                 </button>
             </li>
             <li class="nav-item" role="presentation">
-                <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
+                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
                     <i class="bi bi-diagram-3 me-1"></i> Contenuti
                 </button>
             </li>
@@ -142,7 +142,12 @@
         <!-- Tab panes -->
         <div class="tab-content ps-4 ms-3 overflow-y-auto">
             <div class="tab-pane active p-3 ms-2" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
-            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0">
+                <!-- Temporary -->
+                <ul class="list-group me-4 ms-0">
+                    <li class="list-group-item pt-2 pb-2" id="ontology-list"> </li>
+                </ul>
+            </div>
         </div>
     </template>