Tentative instance attachment

NOTE: no action on sem node click

config.js

@@ -16,11 +16,12 @@ const theater2Popup = `
 
 export const config = {
     scene : {
-        initialExposure: 0.7,
+        initialExposure: 1.2,
         autoLP: false,
-    },
+        shadows: false,
-    menu : {
+        initLightDir: [-0.3,-0.7,0.1],
-        //audioBtn1
+        initRotation: [0, 190, 0],
+        ambientOcclusion: false,
     },
     markers : [
         {
@@ -29,13 +30,11 @@ export const config = {
             uri : `${BASE_URI}/scenes/salvador/`,
             popup: theater1Popup,
             coords: [45.4363, 12.3352],
-            nodes: [
+            nodes: {
-                {
                     label: 'Teatro',
                     model: "teatro_san_salvador_20250926.gltf",
                     isMain: true,
                 },
-            ],
             pano: `pano/gradient.jpg`,
         },
         {
@@ -44,29 +43,21 @@ export const config = {
             uri : `${BASE_URI}/scenes/ssgp/`,
             popup: theater2Popup,
             coords: [45.4401, 12.3408],
-            nodes: [
+            nodes: {
-                {
                 label: 'Teatro',
                 children: [
-                        /*
-                        {
-                            label: 'Struttura complessiva',
-                            model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
-                        },
-                        */
                     {
                         label: 'Involucro',
                         model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
                         isMain: true,
                         opacity: 0.2,
                     },
-                    ]
-                },
                     {
-                    label: 'Sala / Auditorium',
+                        label: 'Sala / cavea',
+                        color: 'rgb(212, 96, 75)',
                         children: [
                             {
-                            label: 'Peplano / Platea',
+                                label: 'Peplano / platea',
                                 model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
                             },
                             {
@@ -106,13 +97,24 @@ export const config = {
                     },
                     {
                         label: 'Scena',
+                        color: 'rgb(75, 100, 212)',
                         children: [
                             {
                                 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',
+                                label: 'Boccascena / proscenio',
                                 model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
                             },
                             {
@@ -127,6 +129,7 @@ export const config = {
                     },
                     {
                         label: 'Spazi tecnici',
+                        color: 'rgb(42, 139, 75)',
                         children: [
                             {
                                 label: 'Spazio tecnico superiore',
@@ -140,16 +143,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: 'Orchestra',
+                        color: 'rgb(195, 153, 235)',
                         children: [
                             {
                                 label: 'Fossa orchestra',
@@ -157,12 +161,13 @@ export const config = {
                             },
                         ]
                     }
-            ],
+                ]
-            pano: `pano/gradient.jpg`,
+            },
+            pano: `pano/hemi-green.jpg`,
         }
     ],
     map : {
-        center: [45.30833, 12.240278],
+        center: [45.42833, 12.340278],
         initialZoom : 12,
         minZoom : 6,
         maxZoom : 18

css/app.css

@@ -1,26 +1,198 @@
+: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;
 }
-.c-hand {
+
-    cursor: pointer;
-}
 input[type="checkbox"] {
     cursor: pointer;
 }
+
+.c-hand {
+    cursor: pointer;
+}
+
+.w-max-content {
+    width: max-content;
+}
+
 #clipper-bar .btn {
     background-repeat: no-repeat;
     background-position: center;
     background-size: 80%;
 }
+
 #map {
     height: 100%;
 }
+
 #clipX {
     background-image: url('/a/scaenae/assets/icons/section_x.png');
 }
+
 #clipY {
     background-image: url('/a/scaenae/assets/icons/section_y.png');
 }
+
 #clipZ {
     background-image: url('/a/scaenae/assets/icons/section_z.png');
 }
+
+.tab-pane details > summary {
+    padding-left: 0;
+    list-style-position: outside;
+}
+#instances li > a {
+    color: #dee2e6;
+}
+#instances li > a:hover {
+    color: var(--bs-nav-link-color);
+    text-decoration: underline;
+}
+#instance-panel {
+    z-index: 999;
+}
+/* Tooltips from https://codepen.io/pure-css/pen/bddggP */
+span:after {
+   text-align: left;
+   white-space: normal;
+}
+
+span:focus {
+   outline: none;
+}
+
+.app-tooltip {
+    cursor: help;
+    position: relative;
+}
+
+/*== common styles for both parts of app-tooltip tip ==*/
+.app-tooltip::before,
+.app-tooltip::after {
+    left: 50%;
+    opacity: 0;
+    position: absolute;
+    z-index: -100;
+}
+
+.app-tooltip:hover::before,
+.app-tooltip:focus::before,
+.app-tooltip:hover::after,
+.app-tooltip:focus::after {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+    z-index: 100; 
+}
+
+/*== pointer tip ==*/
+.app-tooltip::before {
+    border-style: solid;
+    border-width: 1em 0.75em 0 0.75em;
+    border-color: #3E474F transparent transparent transparent;
+    bottom: 100%;
+    content: "";
+    margin-left: -0.5em;
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s;
+    transform:  scale(.6) translateY(-90%);
+} 
+
+.app-tooltip:hover::before,
+.app-tooltip:focus::before {
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+}
+
+/*== speech bubble ==*/
+.app-tooltip::after {
+    background: #3E474F;
+    border-radius: .25em;
+    bottom: 180%;
+    color: #EDEFF0;
+    content: attr(data-tip);
+    margin-left: -4.75em;
+    padding: 1em;
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
+    transform:  scale(.6) translateY(50%);  
+    width: 17.5em;
+}
+
+.app-tooltip:hover::after,
+.app-tooltip:focus::after  {
+    transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
+}
+
+@media (max-width: 760px) {
+  .app-tooltip::after { 
+        font-size: .75em;
+        margin-left: -5em;
+        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);
+    }
+  }
+}

index.html

@@ -51,7 +51,7 @@
     <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
 
 	<!-- Main js entry -->
-	<script type="module" src="js/main.js"></script>
+	<script type="module" src="src/main.js"></script>
 </head>
 
 <body data-bs-theme="light">

js/ontology.js

@@ -1,16 +0,0 @@
-/**
- * @module Ontology
- */
-
-/**
- * Load an ontology from its JSON description
- * @param {String} jsonPath The path (URI) of the ontology JSON file
- * @returns {Object}
- */
-export async function loadOntology(jsonPath) {
-    const ontology = await fetch(jsonPath)
-        .then(res => res.json())
-        .catch(err => console.error(err));
-
-    return ontology;
-}

js/ui.js

@@ -1,283 +0,0 @@
-import AppState from "./state.js";
-import { changeLightDirection, toggleAmbientOcclusion } from "./utils/environment.js";
-import { resetClipping, addClippingPlane } from "./utils/clipping.js";
-
-/**
- * @module UI
- */
-
-const domParser = new DOMParser;
-
-const contentMenuTabs = `
-    <!-- Nav tabs -->
-    <ul class="nav nav-pills" id="content-tabs" role="tablist">
-        <li class="nav-item" role="presentation">
-            <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
-                <i class="bi bi-boxes me-1"></i> Elementi 3D
-            </button>
-        </li>
-        <li class="nav-item" role="presentation">
-            <button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
-                <i class="bi bi-diagram-3 me-1"></i> Contenuti
-            </button>
-        </li>
-    </ul>
-
-    <!-- Tab panes -->
-    <div class="tab-content ps-4 ms-3 overflow-y-auto">
-        <div class="tab-pane active p-3 ms-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
-        <div class="tab-pane p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
-    </div>
-`;
-
-const audioExample = `
-    <button type="button" id="audio-example" class="text-left btn aton-btn fs-6 mx-2" data-bs-toggle="modal" data-bs-target="#audio1">
-        <i class="bi bi-play-btn me-2"></i> Esempio audio (<em>Che fiero costume</em>)
-    </button>
-`;
-
-/**
- * 
- * @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();
-        });
-    }
-}
-/**
- * Resets the UI state (essentially hides the clipper toolbar if visible...)
- * @todo Other elements to reset?? Restore inital lighting conditions and viewpoint...
- */
-function reset() {
-    document.querySelector('#clipper-bar')?.classList.add('d-none');
-    document.querySelector('#clipper')?.classList.remove('border', 'border-2', 'border-white');
-}
-
-/**
- * 
- * @param {HTMLElement} target 
- * @param {NodeListOf<HTMLButtonElement>} btns 
- * @param {String} axis - One of 'x', 'y', 'z'
- */
-function showClipping(target, btns, axis) {
-    if (axis) {
-        addClippingPlane(axis, -1);
-        target.classList.add('border', 'border-2', 'border-warning');
-        btns.forEach(btn => {
-            if (btn.id !== target.id) {
-                btn.classList.remove('border', 'border-2', 'border-warning');
-            }
-        });
-    }
-}
-/**
- * @todo Get clipping button from state? Review logic!! 
- * @param {String} triggerSelector 
- * @param {String} targetSelector The selector for the target toolbar to be displayed
- */
-function toggleClipperBar(triggerSelector, targetSelector) {
-    const trigger = document.querySelector(triggerSelector);
-    const toolbar = document.querySelector(targetSelector);
-    const btns = toolbar.querySelectorAll('button');
-    const clipTargets = {
-        clipX: {axis: 'x'},
-        clipY: {axis: 'y'},
-        clipZ: {axis: 'z'},
-    };
-
-    if (!AppState.clipping.listeners.button) {
-        trigger.addEventListener(
-            'click',
-            () => {
-                toolbar.classList.toggle('d-none');
-                const aoCurrentState = AppState.ambientOcclusion;
-
-                if (!toolbar.classList.contains('d-none')) {
-                    AppState.clipping.enabled = true;
-                    toggleAmbientOcclusion(false);
-
-                    btns.forEach(btn => {
-                        btn.classList.remove('border', 'border-2', 'border-warning');
-                    });
-
-                    trigger.className += ' border border-2 border-white';
-                    toolbar.addEventListener('click', event => {
-                        showClipping(event.target, btns, clipTargets[event.target.id]?.axis);
-                    });
-                } else {
-                    resetClipping();
-                    let noBorder = trigger.className.replace(/ border.*$/g, '');
-                    trigger.className = noBorder;
-                    toggleAmbientOcclusion(aoCurrentState);
-                }
-            }
-        );
-        AppState.clipping.listeners.button = true;
-    }
-}
-/**
- * A left side settings panel
- * @param {String} triggerId - The settings button id
- */
-function toggleSettingsPanel(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-    const lightHeading = document.createElement('h2');
-    lightHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    lightHeading.innerHTML = '<i class="bi bi-lightbulb me-1"></i> Direzione luce';
-    const envHeading = document.createElement('h2');
-    envHeading.className = 'fs-5 ms-2 mb-3 mt-3';
-    envHeading.innerHTML = '<i class="bi bi-brightness-high me-1"></i> Ambiente';
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelLeft();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-gear-fill me-1"></i> Impostazioni'});
-        ATON.UI.elSidePanel.appendChild(lightHeading);
-
-        const lightSliderX = createLightSlider('x', 'Asse X', [-2, 2], 0.1);
-        const lightSliderY = createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
-        const lightSliderZ = createLightSlider('z', 'Asse Z', [-2, 2], 0.1);
-
-        ATON.UI.elSidePanel.appendChild(lightSliderX);
-        ATON.UI.elSidePanel.appendChild(lightSliderY);
-        ATON.UI.elSidePanel.appendChild(lightSliderZ);
-
-        ATON.UI.elSidePanel.appendChild(envHeading);
-
-        const ambientOcclSwitch = document.createElement('div');
-        ambientOcclSwitch.className = 'form-check form-switch ms-4 mt-2';
-        ambientOcclSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="aoSwitch" title="Abilita / disabilita ambient occlusion">
-            <label class="form-check-label" for="aoSwitch"><em>Ambient occlusion</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
-        `;
-
-        const shadowsSwitch = document.createElement('div');
-        shadowsSwitch.className = 'form-check form-switch ms-4 mt-2';
-        shadowsSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="shadowsSwitch" title="Abilita / disabilita ombre">
-            <label class="form-check-label" for="shadowsSwitch">Ombre <i class="bi bi-info-circle ms-2 c-hand" title=""></i></label>
-        `;
-
-        shadowsSwitch.querySelector('input[type="checkbox"]').checked = AppState.shadows;
-        ambientOcclSwitch.querySelector('input[type="checkbox"]').checked = AppState.ambientOcclusion;
-
-        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
-        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
-
-        // TODO: move somewhere else...
-        document.querySelector('#aoSwitch').addEventListener(
-            'change',
-            event => {
-                toggleAmbientOcclusion(event.target.checked);
-                AppState.ambientOcclusion = event.target.checked;
-            }
-        );
-        document.querySelector('#shadowsSwitch').addEventListener(
-            'change',
-            event => {
-                const checked = event.target.checked;
-                ATON.toggleShadows(checked);
-                AppState.shadows = checked;
-            }
-        );
-    });
-}
-/**
- * 
- * @param {String} direction - The axis direction, one of 'x','y','z'
- * @param {String} label - The slider label
- * @param {Number[]} range - The slider's range
- * @param {Number} step - The slider's step
- */
-function createLightSlider(direction, label, range, step) {
-    const currentVal = ATON.getMainLightDirection()[direction];
-    const lightSlider = ATON.UI.createSlider({
-        range,
-        label,
-        value: Number.parseFloat(currentVal).toPrecision(1),
-        oninput: val => {
-            const lightDir = ATON.getMainLightDirection();
-            // Keep existing direction values for the other axes
-            lightDir[direction] = Number.parseFloat(val);
-            changeLightDirection(lightDir);
-        },
-    });
-
-    lightSlider.classList.add('ms-4');
-    lightSlider.querySelector('input').step = step;
-
-    return lightSlider;
-}
-/**
- * Right-side main menu panel
- * @param {String} triggerId - The menu button id
- */
-function toggleContentMenu(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelRight();
-        ATON.UI.showSidePanel({header: 'Menu'});
-        // Append tabs, then tab panes
-        const tabs = domParser.parseFromString(contentMenuTabs, 'text/html');
-        ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
-        ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
-        buildLayersMenu(AppState.normalizedNodes, ATON.UI.elSidePanel.querySelector('#layer'));
-    });
-}
-/**
- * @todo Don't rebuild it every time the side panel is shown...
- * @param {Array} nodes The scenes nodes (IDs and status)
- * @param {HTMLElement} sidePanel ATON's side panel element
- */
-function buildLayersMenu(nodes, sidePanel) {
-    for(let node of nodes) {
-        const menuItem = document.createElement('div');
-        menuItem.className = `form-check form-switch ms-${node.depth} ps-${node.depth} mt-2`;
-        const checkbox = document.createElement('input');
-        checkbox.type = 'checkbox';
-        checkbox.className = "form-check-input";
-        checkbox.checked = node.active;
-        checkbox.role = 'switch';
-        checkbox.title = "Mostra / nascondi layer";
-
-        menuItem.appendChild(checkbox);
-
-        const label = document.createElement('label');
-        label.className = "form-check-label";
-        label.textContent = node.label;
-        
-        menuItem.appendChild(label);
-
-        sidePanel.appendChild(menuItem);
-        // Will this ever work??
-        menuItem.addEventListener('change', event => toggleNode(node.label, event.target.checked));
-    }
-
-    /**
-     * This is terrible...
-     * @param {String} id 
-     * @param {Boolean} status 
-     */
-    const toggleNode = (id, status) => {
-        ATON.getSceneNode(id).toggle(status);
-        AppState.normalizedNodes.find(n => n.label === id).active = status;
-    }
-}
-
-/**
- * Initialize required components for scene UI
- */
-export function initUI() {
-    toggleSettingsPanel('settings');
-    toggleContentMenu('menu');
-    toggleClipperBar('#clipper', '#clipper-bar');
-}

js/utils/environment.js

@@ -1,22 +0,0 @@
-// Global ATON and THREE
-
-/**
- * @module Environment
- */
-
-/**
- * 
- * @param {THREE.Vector3} vector - An object with x,y,z coordinates
- */
-export function changeLightDirection (vector) {
-    ATON.setMainLightDirection(vector);
-}
-
-/**
- * 
- * @param {Boolean} isEnabled 
- */
-export function toggleAmbientOcclusion (isEnabled) {
-    ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
-    console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
-}

scenes/salvador/index.html

@@ -46,6 +46,13 @@
     <script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
     <script type="text/javascript" src="/dist/ATON.min.js"></script>
 
+    <script type="importmap">
+        {
+            "imports": {
+                "@hotwired/stimulus": "../../vendor/@hotwired/stimulus/dist/stimulus.js"
+            }
+        }
+    </script>
 	<!-- Main js entry -->
 	<script type="module" src="./index.js"></script>
 </head>

scenes/salvador/index.js

@@ -1,14 +1,13 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initUI, pauseAudio } from "../../js/ui.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
+
+initStimulus();
 
 AppState.currentScene = 'salvador';
-AppState.sceneHasAudio = true;
 const marker = config.markers.find(m => m.id === 'salvador');
-AppState.normalizedNodes = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
 
 openScene(marker, AppState.normalizedNodes);
-initUI();
-pauseAudio('[data-bs-dismiss="modal"]');

scenes/ssgp/index.html

@@ -46,42 +46,146 @@
     <script type="text/javascript" src="../../vendor/three/examples/js/controls/DragControls.js"></script>
     <script type="text/javascript" src="/dist/ATON.min.js"></script>
 
+     <script type="importmap">
+        {
+            "imports": {
+                "@hotwired/stimulus": "../../vendor/@hotwired/stimulus/dist/stimulus.js"
+            }
+        }
+    </script>
+
 	<!-- Main js entry -->
 	<script type="module" src="./index.js"></script>
 </head>
 
-<body data-bs-theme="light">
+<body data-bs-theme="light" data-controller="menu modal node" data-action="semantic-modal-show@document->modal#showSemanticModal">
-    <div id="toolbar" class="aton-toolbar-top w-100">
+    <div id="toolbar" class="aton-toolbar-top w-100"
-        <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
+        data-controller="toolbar clipper" data-clipper-enabled-value="false">
+        <div class="bg-dark-subtle position-absolute opacity-50 mt-1 ms-1 rounded">
+            <a class="btn aton-btn fs-5 p-1 text-white" href="/a/scaenae" id="back" title="Torna alla mappa">
                 <i class="bi bi-map-fill"></i>
             </a>
-        <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Impostazioni" data-toolbar-target="settings"
+                data-action="toolbar#toggleSettings">
                 <i class="bi bi-gear-fill"></i>
             </a>
-        <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva / disattiva sezionamento"
+                data-clipper-target="trigger" data-action="clipper#toggleClipper">
                 <i class="bi bi-scissors"></i>
             </a>
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
+                data-action="toolbar#toggleFullscreen">
+                <i class="bi bi-fullscreen"></i>
+            </a>
+        </div>
         <div class="d-none w-25
             position-absolute
             top-0 start-50
             translate-middle bg-light
-            px-4 pt-2 pb-2 bg-opacity-50
+            px-4 pt-2 pb-2 bg-opacity-75
             rounded-bottom-3
             mt-4 text-dark text-center"
-        id="clipper-bar">
+        id="clipper-bar"
-            <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
+        data-clipper-target="clipper">
-            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
+            <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="clipY" title="Sezione Y"></button>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
-            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
+                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"
+                data-clipper-target="axis" data-clipper-axis-param="y" data-action="clipper#clip" title="Sezione Y"></button>
+            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
+                data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
         </div>
-        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
+        <a class="btn aton-btn fs-5 float-end p-1 mt-1 text-white" id="menu" title="Menu"
+            data-menu-target="trigger" data-action="menu#toggleMenu">
             <i class="bi bi-list"></i>
         </a>
     </div>
 
+    <!-- Settings menu template (except dynamic light sliders) -->
+    <template id="tmpl-settings">
+        <div data-controller="settings">
+            <details class="w-max-content">
+                <summary class="fs-5 ms-3 mb-3 mt-3">
+                    <i class="bi bi-lightbulb me-1"></i> Illuminazione
+                </summary>
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
+                    Direzione (x, y, z)
+                </h3>
+                <div class="border border-1 rounded ms-4" data-sliders-container></div>
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
+                    Intensità <span class="d-inline app-tooltip" data-tip="Le modifiche di intensità hanno effetto solo se Ambient Occlusion non è attivo" tabindex="1"><i class="bi bi-info-circle ms-1"></i></span>
+                </h3>
+                <div class="ms-4 border border-1 rounded" data-slider-exposure-container></div>
+            </details>
+            <details>
+                <summary class="fs-5 ms-3 mb-3 mt-3">
+                    <i class="bi bi-brightness-high me-1"></i> Ambiente
+                </summary>
+                <div class="form-check form-switch ms-4 mt-4">
+                    <input class="form-check-input" type="checkbox" role="switch"
+                        data-settings-target="ao" data-action="change->settings#toggleAO">
+                    <label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
+                </div>
+                <div class="form-check form-switch ms-4 mt-2">
+                    <input class="form-check-input" type="checkbox" role="switch"
+                        data-settings-target="shadows" data-action="change->settings#toggleShadows">
+                    <label class="form-check-label" for="shadowsSwitch">
+                        Ombre <span class="d-inline app-tooltip" data-tip="Attivare le ombre può rallentare l'applicazione" tabindex="2"><i class="bi bi-info-circle ms-1"></i></span>
+                    </label>
+                </div>
+            </details>
+        </div>
+    </template>
 
-    <!-- TODO CSS-only popover -->
+    <template id="tmpl-menu-tabs">
-    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+        <!-- Nav tabs -->
+        <ul class="nav nav-pills" id="content-tabs" role="tablist">
+            <li class="nav-item" role="presentation">
+                <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="true">
+                    <i class="bi bi-boxes me-1"></i> Elementi 3D
+                </button>
+            </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="false">
+                    <i class="bi bi-diagram-3 me-1"></i> Ontologia
+                </button>
+            </li>
+        </ul>
+        <!-- Tab panes -->
+        <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"></div>
+        </div>
+    </template>
+
+    <!-- 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> 
+
+    <!-- Instance panel (template it...)-->
+    <div class="position-absolute top-0 start-0 w-25 h-100 container instance-panel d-none bg-dark" data-node-target="panel">
+        <div class="container border-bottom border-secondary-subtle w-100">
+            <h1 class="fs-4 py-2 text-center"></h1>
+        </div>
+        <div class="row h-100">
+            <div class="border-end border-secondary-subtle h-100" id="properties-panel">
+                <ul id="properties-list"></ul>
+            </div>
+            <div class="d-none" id="attachment-panel"></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

@@ -1,16 +1,20 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initUI } from "../../js/ui.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
-import { loadOntology } from "../../js/ontology.js";
+import { initAtonEvents } from "../../src/utils/aton.js";
+
+initStimulus();
 
 AppState.currentScene = 'ssgp';
 const marker = config.markers.find(m => m.id === 'ssgp');
-AppState.normalizedNodes = normalizeNodes(marker.nodes);
+const {flat, tree} = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = flat;
+AppState.treeNodes = tree;
+
+// TODO: add Map object for lookup optimization
 
 openScene(marker, AppState.normalizedNodes);
-initUI();
 
-// DEBUG
+initAtonEvents();
-console.debug(await loadOntology('ontology.json'));

src/controllers/clipper_controller.js

@@ -0,0 +1,74 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { addClippingPlane, resetClipping } from "../utils/clipping.js";
+import { toggleAmbientOcclusion } from "../utils/environment.js";
+
+/**
+ * Handle events for the clipper toolbar,
+ * related to the clipping module
+ */
+export default class extends Controller {
+    static targets = ['trigger', 'clipper', 'axis'];
+    static values = { enabled: Boolean };
+
+    connect() {
+        console.log('#clipper controller connected');
+    }
+
+    clip(event) {
+        /**
+         * @type {string}
+         */
+        const label = event.params.axis;
+        /**
+         * @type {HTMLButtonElement}
+         */
+        const target = event.target;
+        /**
+         * @type {NodeListOf<HTMLButtonElement>}
+         */
+        const axes = this.axisTargets;
+        const classes = ['border', 'border-2', 'border-warning'];
+
+        addClippingPlane(label, -1);
+        target.classList.add(...classes);
+
+        for (const btn of axes) {
+            if (btn.id !== target.id) {
+                btn.classList.remove(...classes);
+            }
+        }
+    }
+    /**
+     * Toggle clipper toolbar
+     */
+    toggleClipper() {
+        /**
+         * @type {HTMLElement}
+         */
+        const trigger = this.triggerTarget;
+        this.clipperTarget.classList.toggle('d-none');
+        // If the toolbar is shown, clipping is enabled and vice versa
+        this.enabledValue = !this.clipperTarget.classList.contains('d-none');
+
+        this.axisTargets.forEach(btn => {
+            btn.classList.remove('border', 'border-2', 'border-warning');
+        });
+
+        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;
+    }
+}
+

src/controllers/menu_controller.js

@@ -0,0 +1,316 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus";
+import AppState from "../state.js";
+import { loadOntology, traverseOntology, Ontology } from "../ontology.js";
+
+const html = String.raw;
+const domParser = new DOMParser;
+// TODO: hard-coded, but follows a convention...
+const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json';
+
+export default class extends Controller {
+    static targets = ['trigger', 'layers', 'ontology'];
+
+    async connect() {
+        console.log('#menu controller connected');
+        this.ontologyObject = await loadOntology(ontologyJsonPath);
+        AppState.ontology = this.ontologyObject;
+    }
+    /**
+     * Open settings panel
+     */
+    async toggleMenu() {
+        ATON.UI.setSidePanelRight();
+        ATON.UI.showSidePanel({header: 'Menu'});
+        this.#buildMenuPanel(ATON.UI.elSidePanel);
+        this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
+        this.#buildOntologyMenu(await traverseOntology(this.ontologyObject), this.ontologyTarget);
+    }
+    /**
+     * @param {Event} event 
+     */
+    toggleNode(event) {
+
+        console.debug(AppState.treeNodes);
+
+        /**
+         * The node's id
+         * @type {string}
+         */
+        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);
+            this.#syncGroupCheckboxes(node, status, this.layersTarget);
+        } else {
+            ATON.getSceneNode(id).toggle(status);
+            node.active = status;
+        }
+    }
+    /**
+     * Recursively toggle children in a nodes group
+     * @param {Object} groupNode
+     * @param {Boolean} status
+     */
+    #toggleGroup(groupNode, status) {
+        for (const child of groupNode.children) {
+            child.active = status;
+            if (child.model) {
+                ATON.getSceneNode(child.id).toggle(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}"]`
+            );
+
+            if (checkbox) checkbox.checked = status;
+            
+            if (child.children.length > 0) {
+                this.#syncGroupCheckboxes(child, status, container);
+            }
+        }
+    }
+    /**
+     * Clone a <template> by id
+     * @param {String} id
+     * @returns {DocumentFragment}
+     */
+    #cloneTemplate(id) {
+        return document.getElementById(id)?.content?.cloneNode(true);
+    }
+    /**
+     * Create the left-side settings panel
+     * content
+     * @param {Element} panel 
+     */
+    #buildMenuPanel(panel) {
+        const fragment = this.#cloneTemplate('tmpl-menu-tabs');
+
+        panel.appendChild(fragment);
+    }
+    /**
+     * @todo Don't rebuild it every time, use caching, return a container with checkboxes
+     * @param {Array<import("../state.js").NormalizedSceneNode>} tree The normalized scene nodes tree
+     * @param {HTMLElement} tab Tab content element
+     */
+    #buildLayersMenu(tree, tab) {
+        const heading = document.createElement('h1');
+        heading.classList.add('fs-5', 'fw-bold', 'ms-0');
+        heading.textContent = 'Teatro'; // Hard-coded!!
+
+        tab.appendChild(heading);
+
+        for (const node of tree) {
+            tab.appendChild(
+                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
+     * @param {Array<{id: string, tree: Array<Object>}>} domains The traversed ontology domains
+     * @param {HTMLElement} tab Tab content element
+     */
+    #buildOntologyMenu(domains, tab) {
+        const ontology = new Ontology;
+        ontology.data = this.ontologyObject; 
+
+        const tabs = this.#createOntologyTabs().tabs;
+        const content = this.#createOntologyTabs().content;
+
+        tab.appendChild(tabs);
+        tab.appendChild(content);
+
+        const classesTab = content.querySelector('#classes');
+
+        for (let domain of domains) {
+            const heading = document.createElement('span');
+            heading.className ="fs-5 fw-bold";
+            heading.textContent = domain.id;
+            classesTab.appendChild(heading);
+
+            let domainList = document.createElement('div');
+
+            // Traverse class trees for each domain
+            for (let item of domain.tree) {
+                const domainItem = document.createElement('div');
+                domainItem.className = 'border-start border-bottom rounded border-1 border-light-subtle';
+                domainItem.textContent = item.label.it ?? item.label.en;
+                // Indentation...
+                domainItem.classList.add(`ms-${item.depth}`, `ps-${item.depth}`, 'py-2');
+
+                if (item.depth === 1) domainItem.classList.add('fw-bold');
+
+                domainList.appendChild(domainItem);
+            }
+
+            classesTab.appendChild(domainList);
+        }
+
+        const instancesTab = content.querySelector('#instances');
+        const navList = instancesTab.querySelector('ul');
+        const sortedItLabels = ontology.getInstanceLabels().map(l => l.it).sort();
+
+        for (let label of sortedItLabels) {
+            const instanceItem = document.createElement('li');
+            instanceItem.className = 'nav-item border-bottom ps-3 py-2 c-hand';
+            instanceItem.innerHTML = html`
+                <a class="nav-link">${label}</a>
+            `;
+            instanceItem.setAttribute('data-node-id-param', label);
+            instanceItem.setAttribute('data-action', 'click->node#open');
+
+            navList.appendChild(instanceItem);
+        }
+    }
+
+    /**
+     * @returns {{tabs: HTMLUListElement, content: HTMLDivElement}}
+     */
+    #createOntologyTabs() {
+        const tabs = html`
+            <ul class="nav nav-pills" role="tablist" id="ontoTabs">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="classes-tab" data-bs-toggle="tab" data-bs-target="#classes" type="button"
+                        role="tab" aria-controls="classes-tab-pane" aria-selected="true">Classi</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="instances-tab" data-bs-toggle="tab" data-bs-target="#instances" type="button"
+                        role="tab" aria-controls="instances-tab-pane" aria-selected="true">Istanze</button>
+                </li>
+            </ul>
+        `;
+        const content = html`
+            <div class="tab-content" id="ontoTabsContent">
+                <div class="tab-pane fade p-3 show active" id="classes" role="tabpanel" aria-labelledby="classes-tab" tabindex="0"></div>
+                <div class="tab-pane fade" id="instances" role="tabpanel" aria-labelledby="instances-tab" tabindex="0">
+                    <ul class="nav flex-column"></ul>
+                </div>
+            </div>
+        `;
+
+        return {
+            tabs: domParser.parseFromString(tabs, 'text/html').querySelector('ul'),
+            content: domParser.parseFromString(content, 'text/html').querySelector('div'), 
+        };
+    }
+}

src/controllers/modal_controller.js

@@ -0,0 +1,41 @@
+
+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.alt = event.content?.description.trim();
+            content.classList.add('img-fluid');
+        }
+
+        body.appendChild(content);
+
+        const description = document.createElement('p');
+        description.textContent = event.content?.description.trim();
+        description.classList.add('py-3', 'my-0', 'fst-italic');
+
+        body.appendChild(description);
+
+        bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+}

src/controllers/node_controller.js

@@ -0,0 +1,130 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { createSemanticNode } from "../scene.js";
+import { Ontology } from "../ontology.js";
+
+const html = String.raw;
+const assetsBase = "/a/scaenae/assets";
+/**
+ * Handle events for the clipper toolbar,
+ * related to the clipping module
+ */
+export default class extends Controller {
+    static targets = ['instance', 'node', 'panel'];
+    static values = {
+        id: String,
+    };
+
+    connect() {
+        console.log('#node controller connected');
+    }
+
+    /**
+     * Transition to ATON node (request POV)
+     * if instance is architectural and
+     * open the instance panel
+     */
+    open({ params: {id} }) {
+        // First disable transparent envelope node, if active
+        ATON.getSceneNode(AppState.mainNodeId).toggle(false);
+
+        const node = ATON.getSceneNode(id);
+        const normNode = AppState.normalizedNodes.find(n => n.id === id);
+
+        if (node) ATON.Nav.requestPOVbyNode(node);
+        if (normNode) this.addSemanticNode(normNode);
+
+        const ontology = new Ontology;
+        ontology.data = AppState.ontology;
+
+        const instance = ontology.getInstanceByLabel(id, 'it');
+        if (instance) this.openInstancePanel(instance);
+    }
+
+    /**
+     * Attaches a semantic node to
+     * an existing scene node using
+     * its 3D model for the semantic shape
+     * @param {import("../state.js").NormalizedSceneNode} normNode
+     */
+    addSemanticNode(normNode) {
+        // First remove any existing sem node
+        if (AppState.currentSemNodeId) {
+            ATON.SemFactory.deleteSemanticNode(AppState.currentSemNodeId);
+        }
+        createSemanticNode(normNode.model, normNode.label);
+        AppState.currentSemNodeId = normNode.label;
+    }
+
+    /**
+     * Populates an instance panel based on the
+     * instance data and opens it
+     * @param {Object} instance 
+     */
+    openInstancePanel(instance) {
+        const properties = instance.literalProperties;
+        // Populate left side properties column
+        /**
+         * @type {HTMLDivElement}
+         */
+        const panel = this.panelTarget;
+        const propPanel = panel.querySelector('#properties-panel');
+        const attachmentPanel = panel.querySelector('#attachment-panel');
+        const list = panel.querySelector('#properties-list');
+        list.innerHTML = '';
+
+        panel.querySelector('h1').textContent = instance.label.it;
+
+        let attachment = '';
+
+        // Reset attachment panel if previously activated...
+        attachmentPanel.classList.add('d-none');
+        attachmentPanel.classList.remove('col-7');
+        propPanel.classList.remove('col-5');
+
+        for (const prop of properties) {
+            // Include only DC properties (OK?)
+            const [schema, term] = prop.property.split(':');
+            if (schema === 'dcterms' && Object.keys(prop.propertyLabel).length !== 0) {
+                const item = document.createElement('li');
+                item.className = 'py-2';
+
+                item.innerHTML = html`
+                    <span class="text-primary-emphasis d-inline-block">${prop.propertyLabel.it ?? prop.propertyLabel.en}</span>
+                    <br />
+                    ${prop.value.value}
+                `;
+
+                list.appendChild(item);
+
+                // This will spawn bugs!!
+                if (term === 'identifier'
+                    && (prop.value.value.includes('.jpeg') || prop.value.value.includes('.pdf'))) {
+                        attachment = prop.value.value;
+                }
+            }
+
+            if (term === 'format') {
+                propPanel.classList.add('col-5');
+                attachmentPanel.classList.add('col-7');
+                attachmentPanel.classList.remove('d-none');
+
+                const attachmentType = prop.value.value;
+                // Idiotic!!
+                const folder = attachmentType.includes('image') ? assetsBase + '/img/' : assetsBase + '/pdf/';
+                const attachmentItem = document.createElement('img');
+                attachmentItem.className = 'img-fluid mt-3';
+                attachmentItem.src = folder + attachment;
+
+                attachmentPanel.appendChild(attachmentItem);
+            }
+        }
+
+        panel.classList.remove('d-none');
+    }
+
+    closeInstancePanel() {
+
+    }
+}

src/controllers/settings_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+
+export default class extends Controller {
+    static targets = ['ao', 'shadows'];
+
+    connect() {
+        console.log('#settings controller connected');
+        this.aoTarget.checked = AppState.ambientOcclusion;
+        this.shadowsTarget.checked = AppState.shadows;
+    }
+    /**
+     * Toggle Ambient Occlusion
+     * @param {Event} event 
+     */
+    toggleAO(event) {
+        ATON.FX.togglePass(ATON.FX.PASS_AO, event.target.checked);
+        AppState.ambientOcclusion = event.target.checked;
+    }
+    /**
+     * Toggle shadows
+     * @param {Event} event 
+     */
+    toggleShadows(event) {
+        ATON.toggleShadows(event.target.checked);
+        AppState.shadows = event.target.checked;
+    }
+}

src/controllers/tabs_controller.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['active', 'tab', 'content'];
+
+    connect() {
+        console.log('#tabs controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    activate(event) {
+        event.preventDefault();
+        this.deactivate();
+        const activeId = event.currentTarget.dataset.id;
+
+        event.currentTarget.parentElement.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    reset() {
+        this.deactivate();
+        const activeId = this.activeTarget.dataset.id;
+
+        this.activeTarget.classList.add('active');
+        this.contentTargets.find(c => c.dataset.id === activeId)
+            .classList.remove('d-hide');
+    }
+
+    deactivate() {
+        this.tabTargets.forEach(tab => {
+            tab.classList.remove('active');
+        });
+
+        this.contentTargets.forEach(content => {
+            content.classList.add('d-hide');
+        });
+    }
+}

src/controllers/toolbar_controller.js

@@ -0,0 +1,71 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { createExposureSlider, createLightSlider } from "../utils/environment.js";
+
+const html = String.raw;
+const panelHeader = html`
+    <i class="bi bi-gear-fill me-1"></i> Impostazioni
+`;
+
+export default class extends Controller {
+    static targets = ['settings', 'fullscreen'];
+
+    connect() {
+        console.log('#toolbar controller connected');
+    }
+    /**
+     * Open settings panel
+     * @param {Event} event 
+     */
+    toggleSettings(event) {
+        ATON.UI.setSidePanelLeft();
+        ATON.UI.showSidePanel({header: panelHeader});
+        this.#buildSettingsPanel(ATON.UI.elSidePanel);
+    }
+    toggleFullscreen() {
+        /**
+         * @type {HTMLAnchorElement}
+         */
+        const target = this.fullscreenTarget;
+        const icon = target.querySelector('i');
+        if (!document.fullscreenElement) {
+            document.body.requestFullscreen();
+            icon.classList.remove('bi-fullscreen');
+            icon.classList.add('bi-fullscreen-exit');
+            target.title = 'Esci da schermo intero';
+        } else {
+            document.exitFullscreen();
+            icon.classList.remove('bi-fullscreen-exit');
+            icon.classList.add('bi-fullscreen');
+            target.title = 'Attiva schermo intero';
+        }
+    }
+    /**
+     * Clone a <template> by id
+     * @param {String} id
+     * @returns {DocumentFragment}
+     */
+    #cloneTemplate(id) {
+        return document.getElementById(id).content.cloneNode(true);
+    }
+    /**
+     * Create the left-side settings panel
+     * content
+     * @param {Element} panel 
+     */
+    #buildSettingsPanel(panel) {
+        const fragment = this.#cloneTemplate('tmpl-settings');
+        let sliderContainer = fragment.querySelector('[data-sliders-container]');
+        let exposureContainer = fragment.querySelector('[data-slider-exposure-container]'); 
+
+        ['x', 'y', 'z'].forEach((axis, i) => {
+            const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
+            sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
+        })
+
+        exposureContainer.appendChild(createExposureSlider('Valore', [0, 5]));
+
+        panel.appendChild(fragment);
+    }
+}

src/ontology.js

@@ -0,0 +1,124 @@
+/**
+ * @module Ontology
+ */
+
+export class Ontology {
+    #data;
+
+    /**
+     * @param {Object} data The parsed ontology object (from JSON)
+     */
+    set data(data) {
+        this.#data = data;
+    }
+
+    /**
+     * @param {String} id 
+     */
+    getInstanceById(id) {
+        return this.#data.instancesById[id];
+    }
+
+    /**
+     * @todo Revise loop approach... 
+     * @param {String} label
+     * @param {String} lang The language identifier, either 'en' or 'it'
+     * @returns {Object} The instance object as per onto JSON... (document it!!)
+     */
+    getInstanceByLabel(label, lang) {
+        if (!['en','it'].includes(lang)) {
+            throw new Error(`Invalid language string provided: '${lang}'`);
+        }
+
+        let instance = {};
+
+        for (const key of Object.keys(this.#data.instancesById)) {
+            const currentInstance = this.#data.instancesById[key]; 
+            const currentLabel = currentInstance.label[lang]; 
+            if (currentLabel === label) {
+                instance = currentInstance;
+                break;
+            }
+        }
+
+        return instance;
+    }
+
+    /**
+     * @returns {Array<{en: string, it: string}>} The bloody array of label objects
+     */
+    getInstanceLabels() {
+        const data = this.#data;
+        const instances = [];
+        
+        for (const key of Object.keys(data.instancesById)) {
+            instances.push(data.instancesById[key]?.label);
+        }
+
+        return instances;
+    }
+}
+
+/**
+ * @todo Temporarily returns domains and ontology labels only
+ * Traverse an ontology from its JSON description
+ * @param {Object} ontologyObject The parsed ontology JSON
+ * @returns {Object}
+ */
+export async function traverseOntology(ontologyObject) {
+    //const ontology = await loadOntology(jsonPath);
+    const modules = ontologyObject.domains;
+
+    const domains = [];
+
+    for (const module of modules) {
+        let tree = [];
+        for (const classTree of module.classTrees) {
+            traverseClasses(classTree, tree);
+        }
+        domains.push({
+            id: module.label.it ?? module.label.en,
+            tree
+        });
+    }
+
+    return domains;
+}
+
+/**
+ * 
+ * @param {Object} ontologyClass 
+ * @param {Array<Object>} tree 
+ * @param {Number} depth
+ */
+function traverseClasses(ontologyClass, tree, depth = 1) {
+    const ontologyNode = {
+        id: ontologyClass.id,
+        label: ontologyClass.label,
+        depth,
+        children: [],
+    };
+
+    tree.push(ontologyNode);
+
+    if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
+        for(const child of ontologyClass.children) {
+            ontologyNode.children.push(
+                traverseClasses(child, tree, depth + 1)
+            );
+        }
+    }
+}
+
+/**
+ * Load an ontology from its JSON description
+ * @param {String} jsonPath The path (URI) of the ontology JSON file
+ * @returns {Object}
+ */
+export async function loadOntology(jsonPath) {
+    const ontology = await fetch(jsonPath)
+        .then(res => res.json())
+        .catch(err => console.error(err));
+
+    return ontology;
+}

src/scene.js

@@ -34,15 +34,19 @@ function init () {
     // All assets for this app are stored here
     ATON.setPathCollection('/a/scaenae/assets/');
     // Initial light direction
-    ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
+    ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
-    ATON.toggleShadows(true);
+    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;
+    AppState.shadows = config.scene.shadows;
+    AppState.lightDirection = ATON.getMainLightDirection();
+    AppState.exposure = config.scene.initialExposure;
 
     ATON.Nav.setUserControl(true);
+    // Avoid semantic occlusion
+    ATON._bQuerySemOcclusion = false;
 }
 /**
  * @param {Object} marker - The marker object from config
@@ -57,12 +61,12 @@ export function openScene (marker, nodes) {
 
     ATON.setMainPanorama(marker.pano);
     // TODO: hardcoded...
-    AppState.initialRotation = new THREE.Vector3(0, 1.5, 0);
+    AppState.initialRotation = new THREE.Vector3(...config.scene.initRotation);
 
     ATON.setAutoLP(config.scene.autoLP);
     AppState.lightProbe = config.scene.autoLP;
-    toggleAmbientOcclusion(true);
+    toggleAmbientOcclusion(config.scene.ambientOcclusion);
-    AppState.ambientOcclusion = true;
+    AppState.ambientOcclusion = config.scene.ambientOcclusion;
     AppState.root = ATON.getRootScene();
 }
 
@@ -74,10 +78,17 @@ function loadNodes(nodes) {
     nodes.forEach(n => {
         let node = ATON.createSceneNode(n.label);
         node.load(n.model);
-        node.setRotation(0, 1.5, 0);
+        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) {
+        if (n.opacity !== undefined && n.opacity !== null) {
             node.setMaterial(new THREE.MeshPhongMaterial({
                 transparent: true,
                 opacity: n.opacity,
@@ -85,6 +96,9 @@ function loadNodes(nodes) {
             }));
         }
 
+        // Disable a node for picking (shadows, light probe etc.)
+        if (n.isInvisible) node.hide();
+
         node.attachToRoot();
 
         if (n.isMain) {
@@ -93,10 +107,44 @@ 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,
+            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}
+ */
+export function createSemanticNode(model, id) {
+    // Default/highlight materials for semantic node
+    let matSemDef = new THREE.MeshStandardMaterial({
+        color: '#81eb81',
+        transparent: true,
+        opacity: 0.4,
+    });
+    let matSemHL  = new THREE.MeshStandardMaterial({
+        color: '#e9757b',
+        transparent: true,
+        opacity: 0.5,
+    });
+
+
+    const semNode = ATON.createSemanticNode(id)
+        .setCloneOnLoadHit(false)
+        .load(model)
+        .setDefaultAndHighlightMaterials(matSemDef, matSemHL)
+        .attachToRoot();
+    
+    semNode.setRotation(...config.scene.initRotation);
+
+    return semNode;
+}

src/state.js

@@ -20,14 +20,30 @@ let AppState = {
     // {id: String, active: Boolean}
     nodes: [],
     /**
-     * @property {NormalizedSceneNode[]} normalizedNodes
+     * @type {NormalizedSceneNode[]} normalizedNodes
      */
     normalizedNodes: [],
+    /**
+     * The loaded ontology object
+     */
+    ontology: {},
+    treeNodes: {},
+    // Redundant??
+    semanticNodes: new Map,
+    /**
+     * @type {String|null}
+     */
+    currentSemNodeId: null,
     mainNodeId: null,
     currentScene: null,
     sceneHasAudio: false,
     layersMenuBuilt: false,
     initialRotation: null,
+    lightDirection: [],
+    /**
+     * @type {Number}
+     */
+    exposure: null,
     camera: null,
     renderer: null,
     ambientOcclusion : true,

src/utils/aton.js

@@ -0,0 +1,40 @@
+// 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);
+        }
+    });
+    */
+}

src/utils/clipping.js

@@ -18,6 +18,9 @@ function createClippingPlaneMesh (boundingSphere) {
         new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
     );
 
+    mesh.castShadow = false;
+    mesh.receiveShadow = false;
+
     return mesh;
 }
 

src/utils/environment.js

@@ -0,0 +1,82 @@
+/** @import { Vector3 } from 'three' */
+
+// Global ATON and THREE
+
+import AppState from "../state.js";
+
+/**
+ * @module Environment
+ */
+
+/**
+ * @param {Vector3} vector - An object with x,y,z coordinates
+ */
+export function changeLightDirection(vector) {
+    ATON.setMainLightDirection(vector);
+}
+
+/**
+ * 
+ * @param {Boolean} isEnabled 
+ */
+export function toggleAmbientOcclusion(isEnabled) {
+    ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
+    console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
+}
+/**
+ * Slider to change light direction, based on ATON.UI
+ * @param {String} direction - The axis direction, one of 'x','y','z'
+ * @param {String} label - The slider label
+ * @param {[number, number]} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+export function createLightSlider(direction, label, range, step) {
+    const currentVal = AppState.lightDirection[direction];
+
+    const lightSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: Number.parseFloat(currentVal).toPrecision(2),
+        oninput: val => {
+            const lightDir = AppState.lightDirection;
+
+            // Keep existing direction values for the other axes
+            lightDir[direction] = Number.parseFloat(val);
+            changeLightDirection(lightDir);
+            AppState.lightDirection = lightDir;
+        },
+    });
+
+    lightSlider.classList.add('ms-1');
+    const input = lightSlider.querySelector('input');
+    if (input) input.step = step;
+
+    return lightSlider;
+}
+/**
+ * Slider to change the env exposure level, based on ATON.UI
+ * @param {String} label - The slider label
+ * @param {[number, number]} range - The slider's range
+ * @param {Number} step - The slider's step
+ */
+export function createExposureSlider(label, range, step = 0.05) {
+    const currentVal = String(AppState.exposure);
+
+    const exposureSlider = ATON.UI.createSlider({
+        range,
+        label,
+        value: Number.parseFloat(currentVal).toPrecision(1),
+        oninput: val => {
+            ATON.setExposure(val);
+            AppState.exposure = val;
+
+            console.debug('Current exposure:', ATON.getExposure());
+        },
+    });
+
+    exposureSlider.classList.add('ms-1');
+    let input = exposureSlider.querySelector('input');
+    if (input) input.step = step;
+
+    return exposureSlider;
+}

src/utils/nodeUtils.js

@@ -20,6 +20,7 @@
  * @property {Boolean} isMain
  * @property {Number|null} opacity
  * @property {Boolean} active
+ * @property {String} content
  */
 
 /**
@@ -28,44 +29,49 @@
  * @param {Array} flatList 
  * @param {Number} depth
  */
-function traverse(node, flatList, depth = 1) {
+function traverseTree(node, flatList, depth = 1, inheritedColor = null) {
     if (!node.label) {
         console.error("Node missing label:", node);
         return;
     }
 
+    const color = node.color ?? inheritedColor;
+
     const normNode = {
         ...node,
         id: node.id ?? node.label,
         isMain: node.isMain ?? false,
         active: true,
+        color: color ?? null,
+        depth,
+        children: [],
     };
     if (node.model) {
        normNode.model = node.model; 
     }
-    flatList.push({
+
-        ...normNode,
+    flatList.push(normNode);
-        depth
+
-    });
     if (node.children && Array.isArray(node.children)) {
-        for(let child of node.children) {
+        for(const child of node.children) {
-            traverse(child, flatList, depth + 1);
+            normNode.children.push(
+                traverseTree(child, flatList, depth + 1, color)
+            );
         }
     }
+
+    return normNode;
 }
 
 /**
  * Create a flat list of nodes from
  * the nested structure in config
  * @param {Array} nodes
- * @returns {NormalizedSceneNode[]} 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);
 
-    for (let node of nodes) {
+    return {flat: flatList, tree: normNode.children};
-        traverse(node, flatList);
-    }
-
-    return flatList;
 }

src/utils/stimulus.js

@@ -0,0 +1,20 @@
+import { Application } from '@hotwired/stimulus';
+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';
+import NodeController from '../controllers/node_controller.js';
+
+/**
+ * Initialize Stimulus controllers
+ */
+export function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register("settings", SettingController);
+    Stimulus.register("toolbar", ToolbarController);
+    Stimulus.register("clipper", ClipperController);
+    Stimulus.register("menu", MenuController);
+    Stimulus.register("modal", ModalController);
+    Stimulus.register("node", NodeController);
+}

types/aton.d.ts

@@ -0,0 +1,59 @@
+declare global {
+    const THREE: typeof import('three');
+}
+
+declare namespace ATON {
+    function realize(): void;
+    function setPathCollection(path: string): void;
+    function setMainLightDirection(v: THREE.Vector3): void;
+    function getMainLightDirection(): THREE.Vector3;
+    function toggleShadows(enabled: boolean): void;
+    function setExposure(value: number): void;
+    function setMainPanorama(path: string): void;
+    function setAutoLP(enabled: boolean): void;
+    function enableClipPlanes(): void;
+    function disableClipPlanes(): void;
+    function addClipPlane(normal: THREE.Vector3, point: THREE.Vector3): THREE.Plane;
+    function createSceneNode(id: string): SceneNode;
+    function getSceneNode(id: string): SceneNode;
+    function getRootScene(): THREE.Object3D;
+
+    interface SceneNode {
+        load(path: string): SceneNode;
+        setRotation(x: number, y: number, z: number): SceneNode;
+        setMaterial(material: THREE.Material): SceneNode;
+        attachToRoot(): SceneNode;
+        toggle(visible: boolean): SceneNode;
+        getBound(): THREE.Sphere;
+        add(object: THREE.Object3D): void;
+        remove(object: THREE.Object3D): void;
+    }
+
+    namespace Nav {
+        let _camera: THREE.Camera;
+        function setUserControl(enabled: boolean): void;
+        function requestPOVbyNode(n: ATON.SceneNode, duration: number): void;
+    }
+
+    namespace UI {
+        let elSidePanel: HTMLElement;
+        function init(): void;
+        function addBasicEvents(): void;
+        function setSidePanelLeft(): void;
+        function setSidePanelRight(): void;
+        function showSidePanel(options: { header: string }): void;
+        function createSlider(options: {
+            range: [number, number];
+            label: string;
+            value: number | string;
+            oninput: (val: string) => void;
+        }): HTMLElement;
+    }
+
+    namespace FX {
+        const PASS_AO: number;
+        function togglePass(pass: number, enabled: boolean): void;
+    }
+
+    let _renderer: THREE.WebGLRenderer;
+}