Move menu building to Stimulus (WIP)

TODO: cache menu container, build ontology and load templates from external HTML source.

config.js

@@ -18,6 +18,9 @@ export const config = {
     scene : {
         initialExposure: 0.7,
         autoLP: false,
+        shadows: false,
+        initLightDir: [0.2,-0.3,-0.7],
+        initRotation: [0, 1.5, 0],
     },
     menu : {
         //audioBtn1
@@ -29,13 +32,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,9 +45,10 @@ export const config = {
             uri : `${BASE_URI}/scenes/ssgp/`,
             popup: theater2Popup,
             coords: [45.4401, 12.3408],
-            nodes: [
+            nodes: {
-                {
                 label: 'Teatro',
+                model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
+                opacity: 0.0,
                 children: [
                     /*
                     {
@@ -60,8 +62,6 @@ export const config = {
                         isMain: true,
                         opacity: 0.2,
                     },
-                    ]
-                },
                     {
                         label: 'Sala / Auditorium',
                         children: [
@@ -157,7 +157,8 @@ export const config = {
                             },
                         ]
                     }
-            ],
+                ]
+            },
             pano: `pano/gradient.jpg`,
         }
     ],

js/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');
+        });
+
+        // AO should be turned off if clipping is enabled
+        toggleAmbientOcclusion(!this.enabledValue);
+
+        if (this.enabledValue) {
+            trigger.className += ' border border-2 border-white';
+        }
+
+        if (!this.enabledValue) {
+            resetClipping();
+            trigger.className = trigger.className.replace(/ border.*$/g, '');
+        }
+
+        AppState.clipping.enabled = this.enabledValue;
+    }
+}
+

js/controllers/menu_controller.js

@@ -0,0 +1,78 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+
+const html = String.raw;
+const domParser = new DOMParser;
+
+export default class extends Controller {
+    static targets = ['trigger', 'layers', 'ontology'];
+
+    connect() {
+        console.log('#menu controller connected');
+    }
+    /**
+     * Open settings panel
+     * @param {Event} event 
+     */
+    toggleMenu(event) {
+        ATON.UI.setSidePanelRight();
+        ATON.UI.showSidePanel({header: 'Menu'});
+        this.#buildMenuPanel(ATON.UI.elSidePanel);
+        this.#buildLayersMenu(AppState.normalizedNodes, this.layersTarget);
+    }
+    /**
+     * @param {Event} event 
+     */
+    toggleNode(event) {
+        /**
+         * The node's id
+         * @type {string}
+         */
+        const id = event.params.node;
+        const status = event.target.checked;
+        ATON.getSceneNode(id).toggle(status);
+        AppState.normalizedNodes.find(n => n.id === id).active = status;
+    }
+    /**
+     * 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} nodes The normalized scene nodes (IDs and status)
+     * @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>
+            `;
+
+            // Awful?
+            tab.appendChild(
+                domParser.parseFromString(menuItem, 'text/html').querySelector('div')
+            );
+        }
+    }
+}

js/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;
+    }
+}

js/controllers/tabs_controller.js

@@ -0,0 +1,42 @@
+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');
+        });
+    }
+}
+

js/controllers/toolbar_controller.js

@@ -0,0 +1,50 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { 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'];
+
+    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);
+    }
+    /**
+     * 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]');
+
+        ['x', 'y', 'z'].forEach((axis, i) => {
+            const label = ['Asse X', 'Asse Y', 'Asse Z'][i];
+            sliderContainer.appendChild(createLightSlider(axis, label, [-2, 2], 0.1));
+        })
+
+        panel.appendChild(fragment);
+    }
+}

js/ontology.js

@@ -2,6 +2,33 @@
  * @module Ontology
  */
 
+/**
+ * @todo Temporarily returns domains and ontology labels only
+ * Traverse an ontology from its JSON description
+ * @param {String} jsonPath The path (URI) of the ontology JSON file
+ * @returns {Object}
+ */
+export async function traverseOntology(jsonPath) {
+    const ontology = await loadOntology(jsonPath);
+    const domains = [];
+
+    for (const k of Object.keys(ontology)) {
+        if (k === 'domains') {
+            for (const domainKey of Object.keys(ontology[k])) {
+                domains.push({
+                    label: domainKey,
+                    child: ontology[k][domainKey][0].label,
+                });
+            }
+        }
+    }
+
+    return {
+        ontology: ontology.ontology,
+        domains
+    };
+}
+
 /**
  * Load an ontology from its JSON description
  * @param {String} jsonPath The path (URI) of the ontology JSON file

js/scene.js

@@ -34,13 +34,14 @@ 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;
 
     ATON.Nav.setUserControl(true);
 }
@@ -57,7 +58,7 @@ 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;
@@ -74,10 +75,10 @@ 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);
 
         // 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,

js/ui.js

@@ -1,41 +1,9 @@
 import AppState from "./state.js";
-import { changeLightDirection, toggleAmbientOcclusion } from "./utils/environment.js";
+import { traverseOntology } from "./ontology.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
@@ -54,230 +22,28 @@ export function pauseAudio(triggerSelector) {
     }
 }
 /**
- * Resets the UI state (essentially hides the clipper toolbar if visible...)
+ * @see traverseOntology
- * @todo Other elements to reset?? Restore inital lighting conditions and viewpoint...
+ * @param {Object} ontology The traversed ontology object (temp)
- */
-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) {
+function buildOntologyMenu(ontology, sidePanel) {
-    for(let node of nodes) {
+    const list = document.createElement('ul');
-        const menuItem = document.createElement('div');
+    list.className = 'list-group';
-        menuItem.className = `form-check form-switch ms-${node.depth} ps-${node.depth} mt-2`;
+    const mainNode = document.createElement('li');
-        const checkbox = document.createElement('input');
+    mainNode.className = 'list-group-item';
-        checkbox.type = 'checkbox';
+    mainNode.textContent = ontology.ontology;
-        checkbox.className = "form-check-input";
-        checkbox.checked = node.active;
-        checkbox.role = 'switch';
-        checkbox.title = "Mostra / nascondi layer";
     
-        menuItem.appendChild(checkbox);
+    const domainList = document.createElement('ul');
+    domainList.className = 'list-group';
 
-        const label = document.createElement('label');
+    for(let domain of ontology.domains) {
-        label.className = "form-check-label";
+        const domainItem = document.createElement('li');
-        label.textContent = node.label;
+        domainItem.textContent = domain.label;
-        
+        domainItem.className = 'list-group-item';
-        menuItem.appendChild(label);
+        domainList.appendChild(domainItem);
-
-        sidePanel.appendChild(menuItem);
-        // Will this ever work??
-        menuItem.addEventListener('change', event => toggleNode(node.label, event.target.checked));
     }
 
-    /**
+    mainNode.appendChild(domainList);
-     * This is terrible...
+    list.appendChild(mainNode);
-     * @param {String} id 
+    sidePanel.appendChild(list);
-     * @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/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;
 }
 

js/utils/environment.js

@@ -20,3 +20,29 @@ export function toggleAmbientOcclusion (isEnabled) {
     ATON.FX.togglePass(ATON.FX.PASS_AO, isEnabled);
     console.log('Ambient occlusion', isEnabled ? 'ON' : 'OFF');
 }
+/**
+ * 
+ * @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
+ */
+export 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;
+}

js/utils/nodeUtils.js

@@ -62,10 +62,7 @@ function traverse(node, flatList, depth = 1) {
 **/
 export function normalizeNodes (nodes) {
     let flatList = [];
-
+    traverse(nodes, flatList);
-    for (let node of nodes) {
-        traverse(node, flatList);
-    }
 
     return flatList;
 }

js/utils/stimulus.js

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

scenes/ssgp/index.html

@@ -46,19 +46,30 @@
     <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">
-    <div id="toolbar" class="aton-toolbar-top w-100">
+    <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">
             <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" 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" title="Attiva / disattiva sezionamento"
+            data-clipper-target="trigger" data-action="clipper#toggleClipper">
             <i class="bi bi-scissors"></i>
         </a>
         <div class="d-none w-25
@@ -68,17 +79,65 @@
             px-4 pt-2 pb-2 bg-opacity-50
             rounded-bottom-3
             mt-4 text-dark text-center"
-        id="clipper-bar">
+        id="clipper-bar"
+        data-clipper-target="clipper">
             <span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
-            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></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 me-5" id="clipY" title="Sezione Y"></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" id="clipZ" title="Sezione Z"></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" 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">
+            <h2 class="fs-5 ms-2 mb-3 mt-3">
+                <i class="bi bi-lightbulb me-1"></i> Direzione luce
+            </h2>
+            <div data-sliders-container></div>
+            <h2 class="fs-5 ms-2 mb-3 mt-3">
+                <i class="bi bi-brightness-high me-1"></i> Ambiente
+            </h2>
+            <div class="form-check form-switch ms-4 mt-2">
+                <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</label>
+            </div>
+        </div>
+    </template>
+
+    <template id="tmpl-menu-tabs">
+        <!-- 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="#content" 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-2" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
+            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
+        </div>
+    </template>
 
     <!-- TODO CSS-only popover -->
     <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>

scenes/ssgp/index.js

@@ -2,15 +2,12 @@ import { openScene } from "../../js/scene.js";
 import { config } from "../../config.js";
 import AppState from "../../js/state.js";
 import { normalizeNodes } from "../../js/utils/nodeUtils.js";
-import { initUI } from "../../js/ui.js";
+import { initStimulus } from "../../js/utils/stimulus.js";
-import { loadOntology } from "../../js/ontology.js";
+
+initStimulus();
 
 AppState.currentScene = 'ssgp';
 const marker = config.markers.find(m => m.id === 'ssgp');
 AppState.normalizedNodes = normalizeNodes(marker.nodes);
 
 openScene(marker, AppState.normalizedNodes);
-initUI();
-
-// DEBUG
-console.debug(await loadOntology('ontology.json'));