Try different semantic material

TODO: Use Map object to optimize node lookup

config.js

@@ -16,7 +16,7 @@ const theater2Popup = `
 
 export const config = {
     scene : {
-        initialExposure: 0.85,
+        initialExposure: 0.95,
         autoLP: false,
         shadows: false,
         initLightDir: [0.2,-0.3,-0.7],
@@ -48,9 +48,6 @@ export const config = {
             coords: [45.4401, 12.3408],
             nodes: {
                 label: 'Teatro',
-                model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
-                opacity: 0.0,
-                isInvisible: true,
                 children: [
                     /*
                     {
@@ -114,6 +111,16 @@ export const config = {
                             {
                                 label: 'Palcoscenico',
                                 model: 'models/ssgp/Teatro_SSGP_Palcoscenico.glb',
+                                isSemantic: true,
+                                // TEMP
+                                content: {
+                                    type: 'img',
+                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.webp',
+                                    title: 'Disegno della pianta del teatro SS. Giovanni e Paolo',
+                                    description: `
+                                    Tommaso Bezzi: Disegno della pianta del teatro di SS. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
+                                    `
+                                }
                             },
                             {
                                 label: 'Boccascena / Proscenio',
@@ -145,17 +152,17 @@ export const config = {
                                         label: 'Ballatoio',
                                         model: 'models/ssgp/Teatro_SSGP_Ballatoio.glb',
                                     },
-                                    {
-                                        label: 'Spazio tecnico inferiore',
-                                        model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
-                                    },
-                                ]
+                                ],
+                            },
+                            {
+                                label: 'Spazio tecnico inferiore',
+                                model: 'models/ssgp/Teatro_SSGP_Spazio_tecnico_inf.glb',
                             },
                         ]
                     },
                     {
                         label: 'Orchestra',
-                        color: 'rgb(187, 120, 218)',
+                        color: 'rgb(195, 153, 235)',
                         children: [
                             {
                                 label: 'Fossa orchestra',

css/app.css

@@ -1,3 +1,20 @@
+:root {
+    --toggle-background-color-on: #6da0ff;
+    --toggle-background-color-off: darkgray;
+    --toggle-width: 32px;
+    --toggle-height: 15px;
+    --toggle-gutter: 2px;
+    --toggle-radius: 50%;
+    --toggle-control-size: 40px;
+    --toggle-control-color: white;
+    --toggle-control-speed: .15s;
+    --toggle-control-ease: ease-in;
+
+    /** Don't change calculated values! **/
+    --toggle-radius: calc(var(--toggle-height) / 2);
+    --toggle-control-size: calc(var(--toggle-height) - (var(--toggle-gutter) * 2));
+}
+
 body {
     height: 100vh;
 }
@@ -36,6 +53,10 @@ input[type="checkbox"] {
     background-image: url('/a/scaenae/assets/icons/section_z.png');
 }
 
+.tab-pane details > summary {
+    padding-left: 0;
+    list-style-position: outside;
+}
 /* Tooltips from https://codepen.io/pure-css/pen/bddggP */
 span:after {
    text-align: left;
@@ -112,3 +133,56 @@ span:focus {
         width: 10em; 
   }
 }
+/**
+* Toggle switch styles
+* From: https://codepen.io/AriTheElk/pen/YmxYZr
+*/
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: var(--toggle-width);
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 18px;
+  user-select: none;
+  color: #fff;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: var(--toggle-background-color-on);
+    
+    &:after {
+      left: calc(var(--toggle-width) - var(--toggle-control-size) - var(--toggle-gutter));
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: 25%;
+    left: 0;
+    height: var(--toggle-height);
+    width: var(--toggle-width);
+    border-radius: var(--toggle-radius);
+    background-color: var(--toggle-background-color-off);
+    transition: background-color var(--toggle-control-speed) var(--toggle-control-ease);
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: var(--toggle-gutter);
+      top: var(--toggle-gutter);
+      width: var(--toggle-control-size);
+      height: var(--toggle-control-size);
+      border-radius: var(--toggle-radius);
+      background: var(--toggle-control-color);
+      transition: left var(--toggle-control-speed) var(--toggle-control-ease);
+    }
+  }
+}

js/controllers/clipper_controller.js

@@ -56,16 +56,16 @@ export default class extends Controller {
             btn.classList.remove('border', 'border-2', 'border-warning');
         });
 
-        // AO should be turned off if clipping is enabled
-        toggleAmbientOcclusion(!this.enabledValue);
-
         if (this.enabledValue) {
+            // AO should be turned off if clipping is enabled
+            toggleAmbientOcclusion(false);
             trigger.className += ' border border-2 border-white';
         }
 
         if (!this.enabledValue) {
             resetClipping();
             trigger.className = trigger.className.replace(/ border.*$/g, '');
+            toggleAmbientOcclusion(AppState.ambientOcclusion);
         }
 
         AppState.clipping.enabled = this.enabledValue;

js/controllers/menu_controller.js

@@ -21,13 +21,16 @@ export default class extends Controller {
         ATON.UI.setSidePanelRight();
         ATON.UI.showSidePanel({header: 'Menu'});
         this.#buildMenuPanel(ATON.UI.elSidePanel);
-        this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
+        this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
         this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
     }
     /**
      * @param {Event} event 
      */
     toggleNode(event) {
+
+        console.debug(AppState.treeNodes);
+
         /**
          * The node's id
          * @type {string}
@@ -35,6 +38,15 @@ export default class extends Controller {
         const id = event?.params.node;
         const status = event?.target?.checked;
         const node = AppState.normalizedNodes.find(n => n.id === id);
+        /**
+         * @type {HTMLElement|null}
+         */
+        const eye = event.target.parentElement.querySelector('i');
+
+        if (eye) {
+            eye.classList.toggle('bi-eye');
+            eye.classList.toggle('bi-eye-slash');
+        }
 
         if (node.children.length > 0) {
             this.#toggleGroup(node, status);
@@ -51,23 +63,27 @@ export default class extends Controller {
      */
     #toggleGroup(groupNode, status) {
         for (const child of groupNode.children) {
+            child.active = status;
             if (child.model) {
                 ATON.getSceneNode(child.id).toggle(status);
-                child.active = status;
             }
             if (child.children.length > 0) {
                 this.#toggleGroup(child, status);
             }
         }
     }
+    /**
+     * Toggles checkboxes in a group based on status
+     * @param {Object} groupNode
+     * @param {Boolean} status
+     * @param {HTMLElement} container
+     */
     #syncGroupCheckboxes(groupNode, status, container) {
         for (const child of groupNode.children) {
             const checkbox = container.querySelector(
                 `[data-menu-node-param="${child.id}"]`
             );
 
-            console.debug(checkbox, child.id);
-
             if (checkbox) checkbox.checked = status;
             
             if (child.children.length > 0) {
@@ -95,27 +111,117 @@ export default class extends Controller {
     }
     /**
      * @todo Don't rebuild it every time, use caching, return a container with checkboxes
-     * @param {Array<import("../state.js").NormalizedSceneNode>} nodes The normalized scene nodes (IDs and status)
+     * @param {Array<import("../state.js").NormalizedSceneNode>} tree The normalized scene nodes tree
      * @param {HTMLElement} tab Tab content element
      */
-    #buildLayersMenu(nodes, tab) {
-        for(let node of nodes) {
-            const menuItem = html`
-                <div class="form-check form-switch ms-${node.depth} ps-${node.depth} mt-2">
-                    <input class="form-check-input" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
-                        title="Mostra / nascondi layer"
-                        data-menu-node-param="${node.id}"
-                        data-action="change->menu#toggleNode">
-                    <label class="form-check-label">${node.id}</label>
-                </div>
-            `;
+    #buildLayersMenu(tree, tab) {
+        const heading = document.createElement('h1');
+        heading.classList.add('fs-5', 'fw-bold', 'ms-0');
+        heading.textContent = 'Teatro'; // Hard-coded!!
 
-            // Awful?
+        tab.appendChild(heading);
+
+        for (const node of tree) {
             tab.appendChild(
-                domParser.parseFromString(menuItem, 'text/html').querySelector('div')
+                node.children.length > 0
+                    ? this.#createLayerGroup(node)
+                    : this.#createLayerToggle(node)
             );
         }
     }
+    /**
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @param {boolean} isGroup
+     * @returns {HTMLDivElement}
+     */
+    #createLayerToggle(node, isGroup = false) {
+        // This should be calculated somehow!
+        const labelIndent = node.depth < 3 ? '1.5rem' : '1rem';
+        const labelText = isGroup ? '<i class="bi bi-eye"></i>' : node.id;
+        const toggle = html`
+            <label class="toggle-control ms-${node.depth} ps-${node.depth} mt-1 mb-1">
+                <input id="${node.id}" type="checkbox" ${node.active ? 'checked' : ''} role="switch"
+                    data-menu-node-param="${node.id}"
+                    data-action="change->menu#toggleNode">
+                <span class="control"></span>
+                <span class="ps-2 fs-6" title="Mostra / nascondi ${isGroup ? 'gruppo' : 'layer'}" style="margin-left: ${labelIndent}">
+                    ${labelText}
+                </span>
+            </label>
+        `;
+
+        return domParser.parseFromString(toggle, 'text/html').querySelector('label');
+    }
+    /**
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @returns {HTMLDetailsElement}
+     */
+    #createLayerGroup(node) {
+        const { trigger, collapseDiv } = this.#createNodeCollapse(node);
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('w-max-content', 'ps-1', 'mb-1');
+            
+        collapseDiv.appendChild(this.#createLayerToggle(node, true));
+
+        for (const child of node.children) {
+            collapseDiv.appendChild(
+                child.children.length > 0
+                    ? this.#createLayerGroup(child)
+                    : this.#createLayerToggle(child)
+            );
+        }
+
+        wrapper.appendChild(trigger);
+        wrapper.appendChild(collapseDiv);
+        wrapper.classList.add('border-start', 'border-bottom', 'rounded', `ms-${node.depth}`);
+
+        return wrapper;
+    }
+    /**
+     * 
+     * @param {import("../state.js").NormalizedSceneNode} node 
+     * @returns {{trigger: HTMLButtonElement, collapseDiv: HTMLDivElement}}
+     */
+    #createNodeCollapse(node) {
+        const cleanId = node.id.replace(/[\s\/\-]+/g, '');
+        const trigger = document.createElement('button');
+        trigger.className = 'btn btn-link p-0 fs-6 fw-bold text-decoration-none text-reset';
+        trigger.setAttribute('data-bs-toggle', 'collapse');
+        trigger.setAttribute('data-bs-target', `#group-${cleanId}`);
+        trigger.setAttribute('data-action', 'menu#toggleChevron');
+        trigger.innerHTML = html`
+            <i class="bi bi-chevron-down me-1"></i>${node.id}
+        `;
+        // Add color "swatch" only for first level groups
+        /*
+        if (node.depth === 2) {
+            trigger.innerHTML += html`
+                <div class="d-inline-block border rounded ms-2"
+                    style="background-color: ${node.color}; height: 15px; width:15px">
+                </div>
+            `;
+        }
+        */
+
+        const collapseDiv = document.createElement('div');
+        collapseDiv.className = 'collapse';
+        collapseDiv.id = `group-${cleanId}`;
+
+        return {trigger, collapseDiv};
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    toggleChevron(event) {
+        /**
+         * @type {HTMLButtonElement} collapse
+         */
+        const collapse = event.target;
+        const icon = collapse.querySelector('i');
+        icon.classList.toggle('bi-chevron-down');
+        icon.classList.toggle('bi-chevron-up');
+    }
     /**
      * Temporary implementation to show domains only
      * @todo Don't rebuild it every time, use caching, return a container

js/controllers/modal_controller.js

@@ -0,0 +1,39 @@
+
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ['modal'];
+
+    connect() {
+        console.log('#modal controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    showSemanticModal(event) {
+        const modal = this.modalTarget;
+        const title = modal.querySelector('.modal-title');
+        // Clear any existing content first
+        title.innerHTML = '';
+        title.innerHTML = event.content?.title;
+        const body = modal.querySelector('.modal-body');
+        body.innerHTML = '';
+        const contentType = event.content?.type;
+
+        const content = document.createElement(contentType);
+        if (contentType === 'img') {
+            content.src = event.content?.imgSrc;
+            content.classList.add('img-fluid');
+        }
+
+        const description = document.createElement('p');
+        description.textContent = event.content?.description;
+        description.classList.add('py-3', 'my-2', 'fst-italic');
+
+        body.appendChild(content);
+        body.appendChild(description);
+
+        bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+}

js/scene.js

@@ -37,7 +37,6 @@ function init () {
     ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
     ATON.toggleShadows(config.scene.shadows);
     ATON.setExposure(config.scene.initialExposure);
-    // Open settings side panel when clicking on settings btn
 
     AppState.camera = ATON.Nav._camera;
     AppState.renderer = ATON._renderer;
@@ -46,6 +45,8 @@ function init () {
     AppState.exposure = config.scene.initialExposure;
 
     ATON.Nav.setUserControl(true);
+    // Avoid semantic occlusion
+    ATON._bQuerySemOcclusion = false;
 }
 /**
  * @param {Object} marker - The marker object from config
@@ -79,10 +80,12 @@ function loadNodes(nodes) {
         node.load(n.model);
         node.setRotation(...config.scene.initRotation);
 
+        /*
         node.setMaterial(new THREE.MeshPhongMaterial({
             transparent: false,
             color: n.color ?? '#fff',
         }));
+        */
 
         // Apply any transparency before attaching to scene
         if (n.opacity !== undefined && n.opacity !== null) {
@@ -104,10 +107,45 @@ function loadNodes(nodes) {
             AppState.clipping.boundingSphere = node.getBound();
         }
 
-        AppState.nodes.push({id: n.label, active: n.isInvisible ? false: true});
+        if (n.isSemantic) {
+            createSemanticNode(n.model, n.label);
+            AppState.semanticNodes.set(n.label, n.content);
+            //ATON.getSemanticRoot().attach(semNode);
+        }
+
+        AppState.nodes.push({
+            id: n.label,
+            active: n.isInvisible ? false: true,
+            isSemantic: n.isSemantic
+        });
     });
     
     if (!AppState.clipping.boundingSphere) {
         console.error("No bounding sphere computed, clipping will fail. Ensure one node has 'isMain: true'.");
     }
 }
+/**
+ * Creates a semantic annotation from a model
+ * @param {string} model The model's path to load
+ * @param {string} id The original scene node ID (3D object)
+ * @returns {ATON.SceneNode}
+ */
+function createSemanticNode(model, id) {
+    // Default/highlight materials for semantic node
+    let matSemDef = new THREE.MeshPhongMaterial({
+        color: '#ecee66',
+        transparent: true,
+        opacity: 0.3,
+    });
+    let matSemHL  = ATON.MatHub.materials.semanticShapeHL;
+
+    const semNode = ATON.createSemanticNode(id)
+        .setCloneOnLoadHit(false)
+        .load(model)
+        .setDefaultAndHighlightMaterials(matSemDef, matSemHL)
+        .attachToRoot();
+    
+    semNode.setRotation(...config.scene.initRotation);
+
+    return semNode;
+}

js/state.js

@@ -23,6 +23,8 @@ let AppState = {
      * @type {NormalizedSceneNode[]} normalizedNodes
      */
     normalizedNodes: [],
+    treeNodes: {},
+    semanticNodes: new Map,
     mainNodeId: null,
     currentScene: null,
     sceneHasAudio: false,

js/utils/aton.js

@@ -0,0 +1,38 @@
+// Global ATON
+
+import AppState from "../state.js";
+
+/**
+ * @module AtonUtils
+ */
+/**
+ * Initializes required ATON events for interactions
+ * with semantic nodes
+ */
+export function initAtonEvents() {
+    // General hover/leave events handling for all semantic nodes.
+    ATON.on("SemanticNodeHover", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.highlight();
+    });
+
+    ATON.on("SemanticNodeLeave", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.restoreDefaultMaterial();
+    });
+
+    // Triggers on mouse click / tap events
+    ATON.on("Tap", (e) => {
+        let node = ATON.getHoveredSemanticNode();
+        if (node) {
+            // Retrieve semantic node from AppState to trigger a modal with its content
+            const content = AppState.semanticNodes.get(node.nid);
+            
+            // Triggers a modal to show the content (listened by Stimulus)
+            const event = new Event('semantic-modal-show');
+            event.content = content;
+
+            document.dispatchEvent(event);
+        }
+    });
+}

js/utils/nodeUtils.js

@@ -66,11 +66,11 @@ function traverseTree(node, flatList, depth = 1, inheritedColor = null) {
  * Create a flat list of nodes from
  * the nested structure in config
  * @param {Array} nodes
- * @returns {{flat: NormalizedSceneNode[], normNode: object}} A flat list of nodes
+ * @returns {{flat: NormalizedSceneNode[], tree: NormalizedSceneNode[]}} A flat list of nodes
 **/
 export function normalizeNodes (nodes) {
     let flatList = [];
     const normNode = traverseTree(nodes, flatList);
 
-    return {flat: flatList, normNode};
+    return {flat: flatList, tree: normNode.children};
 }

js/utils/stimulus.js

@@ -3,6 +3,7 @@ import SettingController from '../controllers/settings_controller.js';
 import ToolbarController from '../controllers/toolbar_controller.js';
 import ClipperController from '../controllers/clipper_controller.js';
 import MenuController from '../controllers/menu_controller.js';
+import ModalController from '../controllers/modal_controller.js';
 
 /**
  * Initialize Stimulus controllers
@@ -13,4 +14,5 @@ export function initStimulus() {
     Stimulus.register("toolbar", ToolbarController);
     Stimulus.register("clipper", ClipperController);
     Stimulus.register("menu", MenuController);
+    Stimulus.register("modal", ModalController);
 }

scenes/salvador/index.js

@@ -10,6 +10,4 @@ AppState.currentScene = 'salvador';
 const marker = config.markers.find(m => m.id === 'salvador');
 AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
 
-console.debug(AppState.normalizedNodes);
-
 openScene(marker, AppState.normalizedNodes);

scenes/ssgp/index.html

@@ -58,7 +58,7 @@
 	<script type="module" src="./index.js"></script>
 </head>
 
-<body data-bs-theme="light" data-controller="menu">
+<body data-bs-theme="light" data-controller="menu modal" data-action="semantic-modal-show@document->modal#showSemanticModal">
     <div id="toolbar" class="aton-toolbar-top w-100"
         data-controller="toolbar clipper" data-clipper-enabled-value="false">
         <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
@@ -81,7 +81,7 @@
             mt-4 text-dark text-center"
         id="clipper-bar"
         data-clipper-target="clipper">
-            <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
+            <span class="pt-5 pb-2 d-block fw-bold">Sezione</span>
             <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
                 data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
             <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
@@ -146,8 +146,8 @@
             </li>
         </ul>
         <!-- 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-content ps-2 ms-2 overflow-y-auto">
+            <div class="tab-pane active ps-3 pt-0 mt-4 ms-0" 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">
                 <!-- Temporary -->
                 <ul class="list-group me-4 ms-0">
@@ -157,8 +157,21 @@
         </div>
     </template>
 
-    <!-- TODO CSS-only popover -->
-    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+    <!-- TODO Make it a template -->
+   <div class="modal" id="semanticModal" tabindex="-1" data-modal-target="modal">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
+                </div>
+                <div class="modal-body"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
+                </div>
+            </div>
+        </div>
+    </div> 
 
     <div class="aton-poweredby" >
         <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>

scenes/ssgp/index.js

@@ -3,11 +3,18 @@ import { config } from "../../config.js";
 import AppState from "../../js/state.js";
 import { normalizeNodes } from "../../js/utils/nodeUtils.js";
 import { initStimulus } from "../../js/utils/stimulus.js";
+import { initAtonEvents } from "../../js/utils/aton.js";
 
 initStimulus();
 
 AppState.currentScene = 'ssgp';
 const marker = config.markers.find(m => m.id === 'ssgp');
-AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
+const {flat, tree} = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = flat;
+AppState.treeNodes = tree;
+
+// TODO: add Map object for lookup optimization
 
 openScene(marker, AppState.normalizedNodes);
+
+initAtonEvents();