Try different semantic material

Add modal controller
ATON utils + optimize image asset
2026-05-21 09:47:32 +02:00 · 2026-05-21 09:36:25 +02:00 · 2026-05-21 09:30:25 +02:00 · 2026-05-20 20:34:46 +02:00 · 2026-05-20 18:32:07 +02:00 · 2026-05-20 14:16:01 +02:00
35 changed files with 2060 additions and 466 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -7,3 +7,6 @@
 *.obj

 vendor/
+.vscode
+
+docs/
--- a/assets/icons/section_x.png
+++ b/assets/icons/section_x.png
--- a/assets/icons/section_y.png
+++ b/assets/icons/section_y.png
--- a/assets/icons/section_z.png
+++ b/assets/icons/section_z.png
--- a/assets/img/rilievo_ssgp_bezzi.webp
+++ b/assets/img/rilievo_ssgp_bezzi.webp
--- a/assets/pano/defsky-grass.jpg
+++ b/assets/pano/defsky-grass.jpg
--- a/assets/pano/gradient.jpg
+++ b/assets/pano/gradient.jpg
--- a/assets/pano/hemi-grey.jpg
+++ b/assets/pano/hemi-grey.jpg
--- a/config.js
+++ b/config.js
@@ -1,3 +1,5 @@
+const BASE_URI = "/a/scaenae";
+
 const theater1Popup = `
    <div class="text-center">
        <h1 class="fs-4">Teatro San Salvador, Venezia</h1>
@@ -5,41 +7,178 @@ const theater1Popup = `
    </div>
 `;

-const audioBtn1 = `
-    <button type="button" 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>
+const theater2Popup = `
+    <div class="text-center">
+        <h1 class="fs-4">Teatro Santi Giovanni e Paolo, Venezia</h1>
+        <button type="button" class="btn btn-dark" id="ssgp">Apri scena 3D</button>
+    </div>
 `;

 export const config = {
    scene : {
-        initialExposure: 0.6,
+        initialExposure: 0.95,
        autoLP: false,
-        clipping: {
-            defaultPoint: [
-                -20.3,
-                7.3,
-                -18.3
-            ],
-        }
+        shadows: false,
+        initLightDir: [0.2,-0.3,-0.7],
+        initRotation: [0, 1.5, 0],
+        ambientOcclusion: false,
    },
    menu : {
-        audioBtn1
+        //audioBtn1
    },
    markers : [
        {
            id : "salvador",
            label : "Teatro San Salvador, Venezia",
+            uri : `${BASE_URI}/scenes/salvador/`,
            popup: theater1Popup,
            coords: [45.4363, 12.3352],
-            model: "teatro_san_salvador_20250926.gltf",
-            pano: "hemi-grey.jpg",
+            nodes: {
+                    label: 'Teatro',
+                    model: "teatro_san_salvador_20250926.gltf",
+                    isMain: true,
+                },
+            pano: `pano/gradient.jpg`,
+        },
+        {
+            id : "ssgp",
+            label : "Teatro Santi Giovanni e Paolo, Venezia",
+            uri : `${BASE_URI}/scenes/ssgp/`,
+            popup: theater2Popup,
+            coords: [45.4401, 12.3408],
+            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',
+                        color: 'rgb(212, 96, 75)',
+                        children: [
+                            {
+                                label: 'Peplano / Platea',
+                                model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
+                            },
+                            {
+                                label: 'Ordini di palchi',
+                                children: [
+                                    {
+                                        label: 'Ordine 1',
+                                        model: 'models/ssgp/Teatro_SSGP_Ordine1.glb',
+                                    },
+                                    {
+                                        label: 'Ordine 2',
+                                        model: 'models/ssgp/Teatro_SSGP_Ordine2.glb',
+                                    },
+                                    {
+                                        label: 'Ordine 3',
+                                        model: 'models/ssgp/Teatro_SSGP_Ordine3.glb',
+                                    },
+                                    {
+                                        label: 'Ordine 4',
+                                        model: 'models/ssgp/Teatro_SSGP_Ordine4.glb',
+                                    },
+                                    {
+                                        label: 'Ordine 5',
+                                        model: 'models/ssgp/Teatro_SSGP_Ordine5.glb',
+                                    },
+                                ]
+                            },
+                            {
+                                label: 'Parapetto',
+                                model: 'models/ssgp/Teatro_SSGP_parapetto_scala_piani.glb',
+                            },
+                            {
+                                label: 'Percorsi pubblico',
+                                model: 'models/ssgp/Teatro_SSGP_Percorsi_scale_corridoi.glb',
+                            },
+                        ]
+                    },
+                    {
+                        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',
+                                model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
+                            },
+                            {
+                                label: 'Quinte architettoniche fisse',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_fisse.glb',
+                            },
+                            {
+                                label: 'Quinte architettoniche mobili',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_quinte_architettoniche_mobili.glb',
+                            },
+                        ]
+                    },
+                    {
+                        label: 'Spazi tecnici',
+                        color: 'rgb(42, 139, 75)',
+                        children: [
+                            {
+                                label: 'Spazio tecnico superiore',
+                                model: 'models/ssgp/Teatro_SSGP_Layer_Spazio_tecnico_sup_soffitta.glb',
+                                children: [
+                                    {
+                                        label: 'Graticcia',
+                                        model: 'models/ssgp/Teatro_SSGP_Graticcia.glb',
+                                    },
+                                    {
+                                        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',
+                                model: 'models/ssgp/Teatro_SSGP_Fossa_orchestra.glb',
+                            },
+                        ]
+                    }
+                ]
+            },
+            pano: `pano/gradient.jpg`,
        }
    ],
    map : {
-        center: [43.570833, 12.140278],
-        initialZoom : 7,
+        center: [45.30833, 12.240278],
+        initialZoom : 12,
        minZoom : 6,
-        maxZoom : 15
+        maxZoom : 18
    }
-}
+}
--- a/css/app.css
+++ b/css/app.css
@@ -0,0 +1,188 @@
+: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;
+}
+
+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;
+}
+/* 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);
+    }
+  }
+}
--- a/index.html
+++ b/index.html
@@ -27,10 +27,10 @@
 	<link rel="manifest" href="app.webmanifest">

 	<!-- Web-app ID -->
-	<meta name="aton:appid" content="app_template">
+	<meta name="aton:appid" content="scaenae">

 	<meta name="title" content="SCAENE">
-	<meta name="description" content="__APPDESC__">
+	<meta name="description" content="Web App 3D per il progetto PRINN 'SCAENAE'">

    <!-- Add meta theme-color -->
    <meta name="theme-color" content="#000000" />
@@ -39,6 +39,7 @@
    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="./css/app.css">
    <link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">

    <!-- Vendors -->
@@ -51,83 +52,8 @@

 	<!-- Main js entry -->
 	<script type="module" src="js/main.js"></script>
-
-    <style>
-        body {
-            height: 100vh;
-        }
-        .c-hand {
-            cursor: pointer;
-        }
-        input[type="checkbox"] {
-            cursor: pointer;
-        }
-    </style>
 </head>

 <body data-bs-theme="light">
-    <div class="map" id="map" style="height: 100%;"></div>
-    <div class="d-none" id="scene">
-        <div id="toolbar" class="aton-toolbar-top w-100">
-            <a class="btn aton-btn fs-5" 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">
-                <i class="bi bi-gear-fill"></i>
-            </a>
-            <a class="btn aton-btn fs-5" id="clipper" title="Clipper">
-                <i class="bi bi-scissors"></i>
-            </a>
-            <div class="d-none
-                position-absolute
-                top-0 start-50
-                translate-middle bg-light
-                px-4 pt-2 pb-2 bg-opacity-50
-                rounded-bottom-3
-                mt-4 text-dark text-center"
-            id="clipper-bar">
-                <span class="pt-4 pb-1 d-block fw-bold">Sezionamento</span>
-                <button class="btn aton-btn d-inline" id="clipX" title="Sezione X">X</button>
-                <button class="btn aton-btn d-inline" id="clipY" title="Sezione Y">Y</button>
-                <button class="btn aton-btn d-inline" id="clipZ" title="Sezione Z">Z</button>
-            </div>
-            <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
-                <i class="bi bi-list"></i>
-            </a>
-        </div>
-
-
-        <!-- TODO CSS-only popover -->
-        <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
-
-        <div class="aton-poweredby" >
-            <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
-        </div>
-    </div>
-
-    <!-- Info / media modal -->
-    <div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-        <div class="modal-header">
-            <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
-            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
-            <h2 class="fs-5 font-bold text-center">Informazioni</h2>
-            <p class="mt-2">
-                L'aria "Che fiero costume" bla bla...
-            </p>
-            <p>
-                Un po' di elucubrazioni sull'opera lirica nel barocco ecc...
-            </p>
-            <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
-            <audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
-        </div>
-        <div class="modal-footer">
-            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
-        </div>
-        </div>
-    </div>
-    </div>
+    <div class="map" id="map"></div>
 </body>
--- a/js/controllers/clipper_controller.js
+++ b/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');
+        });
+
+        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;
+    }
+}
+
--- a/js/controllers/menu_controller.js
+++ b/js/controllers/menu_controller.js
@@ -0,0 +1,252 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus";
+import AppState from "../state.js";
+import { traverseOntology } from "../ontology.js";
+
+const html = String.raw;
+const domParser = new DOMParser;
+// TODO: hard-coded, but follows a convention...
+const ontologyJsonPath = location.pathname + 'ontology.json';
+
+export default class extends Controller {
+    static targets = ['trigger', 'layers', 'ontology'];
+
+    connect() {
+        console.log('#menu controller connected');
+    }
+    /**
+     * 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(ontologyJsonPath), 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 {Object} ontology The traversed ontology object (temp)
+     * @param {HTMLElement} tab Tab content element
+     */
+    #buildOntologyMenu(ontology, tab) {
+        console.debug(ontology);
+
+        const mainNode = tab.querySelector('#ontology-list');
+        mainNode.textContent = ontology.ontology;
+
+        let domainList = html`
+            <ul class="list-group mt-2" id="domains-list"></ul>
+        `;
+
+        // Very fragile and ugly!!
+        mainNode.innerHTML += domainList;
+        domainList = tab.querySelector('#domains-list');
+        
+        for(let domain of ontology.domains) {
+            const domainItem = html`
+                <li class="list-group-item">${domain.label}</li>
+            `;
+            domainList.innerHTML += domainItem;
+        }
+    }
+}
--- a/js/controllers/modal_controller.js
+++ b/js/controllers/modal_controller.js
@@ -0,0 +1,39 @@
+
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+    static targets = ['modal'];
+
+    connect() {
+        console.log('#modal controller connected');
+    }
+    /**
+     * 
+     * @param {Event} event 
+     */
+    showSemanticModal(event) {
+        const modal = this.modalTarget;
+        const title = modal.querySelector('.modal-title');
+        // Clear any existing content first
+        title.innerHTML = '';
+        title.innerHTML = event.content?.title;
+        const body = modal.querySelector('.modal-body');
+        body.innerHTML = '';
+        const contentType = event.content?.type;
+
+        const content = document.createElement(contentType);
+        if (contentType === 'img') {
+            content.src = event.content?.imgSrc;
+            content.classList.add('img-fluid');
+        }
+
+        const description = document.createElement('p');
+        description.textContent = event.content?.description;
+        description.classList.add('py-3', 'my-2', 'fst-italic');
+
+        body.appendChild(content);
+        body.appendChild(description);
+
+        bootstrap.Modal.getOrCreateInstance(modal).show();
+    }
+}
--- a/js/controllers/settings_controller.js
+++ b/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;
+    }
+}
--- a/js/controllers/tabs_controller.js
+++ b/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');
+        });
+    }
+}
+
--- a/js/controllers/toolbar_controller.js
+++ b/js/controllers/toolbar_controller.js
@@ -0,0 +1,53 @@
+// 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'];
+
+    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]');
+        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);
+    }
+}
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,4 @@
 import Map from "./map.js";
-import Scene from "./scene.js";
 /*
 	Main js entry for ATON web-app

@@ -7,31 +6,10 @@ import Scene from "./scene.js";
 // Realize our app
 let APP = ATON.App.realize();

-APP.UI = {};
-
-/**
- * 
- * @param {String} triggerSelector - Usually, the close modal trigger element(s) selector
- */
-APP.UI.pauseAudio = function(triggerSelector) {
-    // What if more than one audio element is playing?
-    const audio = document.querySelector('audio');
-    document.querySelectorAll(triggerSelector).forEach(el => {
-        el.addEventListener('click', () => audio.pause());
-    });
-    document.querySelector('.modal').addEventListener('blur', () => {
-        audio.pause();
-    });
-}
-
-
 // APP.setup() is required for web-app initialization
 // You can place here UI setup (HTML), events handling, etc.
 APP.setup = ()=>{
    Map.init('map');
-    Scene.toggleScene('back');
-    APP.UI.pauseAudio('[data-bs-dismiss="modal"');
-    //APP.UI.showClipper('#clipper');
 };

 /* If you plan to use an update routine (executed continuously), you can place its logic here.
--- a/js/map.js
+++ b/js/map.js
@@ -1,8 +1,7 @@
 // Global Leaflet and ATON

 import {config} from '../config.js';
-import Scene from './scene.js';
-import { AppState } from './state.js';
+import AppState from './state.js';

 const Map = {};

@@ -23,21 +22,30 @@ Map.init = function(mapContainerId) {

    baseMap.addTo(map);

+    //const markerIcon = L.divIcon({className: 'bi bi-bank text-large'});
+
    config.markers.forEach(marker => {
        const popup = this.domParser.parseFromString(marker.popup, 'text/html')
            .querySelector('div');
        popup.querySelector('button').onclick = () => {
-            Scene.openScene(marker);
+            this.goToScene(marker.uri);
            map.getContainer().classList.toggle('d-none');
        };

-        L.marker(marker.coords).addTo(map)
-            .bindPopup(popup)
-            .openPopup();
-        
+        L.marker(marker.coords,).addTo(map)
+            .bindPopup(popup, {autoClose:false, /*closeOnClick:false*/})
+            .togglePopup();
    });

    AppState.map = map;
 }

+/**
+ * 
+ * @param {String} uri The scene's absolute URI (from config)
+ */
+Map.goToScene = function (uri) {
+    location.href = uri;
+}
+
 export default Map;
--- a/js/ontology.js
+++ b/js/ontology.js
@@ -0,0 +1,43 @@
+/**
+ * @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
+ * @returns {Object}
+ */
+export async function loadOntology(jsonPath) {
+    const ontology = await fetch(jsonPath)
+        .then(res => res.json())
+        .catch(err => console.error(err));
+
+    return ontology;
+}
--- a/js/scene.js
+++ b/js/scene.js
@@ -1,70 +1,18 @@
 // Global ATON

-import { AppState, getSceneStatus, setSceneStatus } from "./state.js";
+import AppState from "./state.js";
 import { config } from "../config.js";
-
-const material = {
-    color: "#fff",
-    //color: "#e6f2ff",
-    emissive: true,
-};
-
-const Scene = {};
-
-Scene.UI = {};
-
-Scene.UI.domParser = new DOMParser;
+import { toggleAmbientOcclusion } from "./utils/environment.js";

 /**
- * @todo Get clipping button from state? Review logic!! 
- * @param {String} triggerSelector 
- * @param {String} targetSelector The selector for the target toolbar to be displayed
+ * @module Scene
 */
-Scene.UI.toggleClipper = function(triggerSelector, targetSelector) {
-    const trigger = document.querySelector(triggerSelector);
-    const toolbar = document.querySelector(targetSelector);
-    trigger.addEventListener(
-        'click',
-        () => {
-            toolbar.classList.toggle('d-none');
-            const aoCurrentState = AppState.ambientOcclusion;
-            if (!AppState.clipping.enabled) {
-                AppState.clipping.enabled = true;
-                trigger.className += ' border border-2 border-white';
-                Scene.toggleAmbientOcclusion(false);
-                toolbar.addEventListener('click', event => {
-                    console.log('Clipping target:', event.target);
-                    if (event.target.id === 'clipX') {
-                            // Clip along X...
-                            Scene.addClippingPlane('x', -1);
-                    }
-                    else if (event.target.id === 'clipY') {
-                            // Clip along Y...
-                            Scene.addClippingPlane('y', -1);
-                    }
-                    else if (event.target.id === 'clipZ') {
-                            // Clip along Z...
-                            Scene.addClippingPlane('z', 1);
-                    }
-                });
-            } else {
-                AppState.clipping.enabled = false;
-                ATON.disableClipPlanes();
-                AppState.root.remove(AppState.clipping.helper);
-                AppState.clipping.helper = null;
-                let noBorder = trigger.className.replace(/ border.*$/g, '');
-                trigger.className = noBorder;
-                Scene.toggleAmbientOcclusion(aoCurrentState);
-            }
-        }
-    );
-}

 /**
 * @todo Experimental...
 * @param {THREE.Object3D} object - A THREE Object3D instance
 */
-Scene.showEdges = function(object) {
+function showEdges (object) {
    const edgeMaterial = new THREE.LineBasicMaterial( { color: 0x000000 } );

    object.traverse(function(child) {
@@ -79,274 +27,125 @@ Scene.showEdges = function(object) {
    });
 }

-/**
- * @param {String} axis - The axis along wich the plane's normal should be directed,
- *                        one of 'x', 'y', 'z'
- * @param {Number} orientation - Positive (1) or negative (-1) orientation on the axis
- */
-Scene.addClippingPlane = function(axis, orientation = -1) {
-    axis = axis.toLowerCase();
-    const defaultPoint = new THREE.Vector3(
-        ...config.scene.clipping.defaultPoint
-    );
-    const vector = [
-        axis === 'x' ? orientation : 0,
-        axis === 'y' ? orientation : 0,
-        axis === 'z' ? orientation : 0,
-    ];
-
-    // First, add a default clipping plane
-    // at a predefined point (bad?)
-    Scene.activateClipper(vector, defaultPoint);
-    console.log(vector, defaultPoint);
-
-    window.addEventListener('mousedown', event => {
-        // Activate clipping when left-clicking on the scene
-        if (AppState.clipping.enabled && event.buttons === 1) {
-            Scene.activateClipper(vector);
-        }
-    });
-}
-
-/**
- * @todo WIP!
- * Activate clipping plane
- * @param {Number[]} vector - The vector array to direct the plane
- */
-Scene.activateClipper = function(vector, point = null) {
-    point ??= ATON.getSceneQueriedPoint();
-
-    if (point) {
-        console.log('Queried point:', point);
-
-        // First remove any existing clipping planes
-        ATON.disableClipPlanes();
-        // Normal of the clipping plane along the Y axis facing down
-        const plane = ATON.addClipPlane(new THREE.Vector3(...vector), point);
-        // Add a visible plane helper for the clipping plane
-        const helper = new THREE.PlaneHelper(plane, 24, 0xffff00);
-        // Remove any already visbile helper plane
-        if (AppState.clipping.helper !== null) AppState.root.remove(AppState.clipping.helper);
-        AppState.root.add(helper);
-        AppState.clipping.helper = helper;
-        console.log("I'm clipping, baby!");
-    }
-}
-
-/**
- * 
- * @param {THREE.Vector3} vector - An object with x,y,z coordinates
- */
-Scene.changeLightDirection = function(vector) {
-    ATON.setMainLightDirection(vector);
-}
-
-/**
- * 
- * @param {Boolean} isEnabled 
- */
-Scene.toggleAmbientOcclusion = function(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
- */
-Scene.createLightSlider = function(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);
-            this.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
- */
-Scene.toggleContentMenu = function(triggerId) {
-    const btn = document.querySelector(`#${triggerId}`);
-    const audio1 = this.UI.domParser.parseFromString(config.menu.audioBtn1, 'text/html')
-        .querySelector('button');
-
-    btn.addEventListener('click', () => {
-        ATON.UI.setSidePanelRight();
-        ATON.UI.showSidePanel({header: '<i class="bi bi-music-note-list me-1"></i> Contenuti'});
-        ATON.UI.elSidePanel.appendChild(audio1);
-    });
-}
-
-/**
- * A left side settings panel
- * @param {String} triggerId - The settings button id
- */
-Scene.toggleSettingsPanel = function(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 = this.createLightSlider('x', 'Asse X', [-2, 2], 0.1);
-        const lightSliderY = this.createLightSlider('y', 'Asse Y', [-2, 2], 0.1);
-        const lightSliderZ = this.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>
-        `;
-
-        const lightProbeSwitch = document.createElement('div');
-        lightProbeSwitch.className = 'form-check form-switch ms-4 mt-2';
-        lightProbeSwitch.innerHTML = `
-            <input class="form-check-input" type="checkbox" role="switch" id="lpSwitch" title="Abilita / disabilita mappa HDRi">
-            <label class="form-check-label" for="lpSwitch">Mappa HDRi <em>(light probe)</em> <i class="bi bi-info-circle ms-2 c-hand"></i></label>
-        `;
-
-        shadowsSwitch.querySelector('input[type="checkbox"').checked = AppState.shadows;
-        ambientOcclSwitch.querySelector('input[type="checkbox"').checked = AppState.ambientOcclusion;
-        lightProbeSwitch.querySelector('input[type="checkbox"').checked = AppState.lightProbe;
-
-        ATON.UI.elSidePanel.appendChild(ambientOcclSwitch);
-        ATON.UI.elSidePanel.appendChild(shadowsSwitch);
-        ATON.UI.elSidePanel.appendChild(lightProbeSwitch);
-
-        // TODO: move somewhere else...
-        document.querySelector('#aoSwitch').addEventListener(
-            'change',
-            event => {
-                this.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;
-            }
-        );
-        // Not working properly?
-        document.querySelector('#lpSwitch').addEventListener(
-            'change',
-            event => {
-                const checked = event.target.checked;
-                ATON.setAutoLP(checked);
-                //if (!checked) ATON.clearLightProbes();
-                AppState.lightProbe = checked;
-                if (checked) ATON.updateLightProbes();
-                console.log('Light probe: ', checked);
-            }
-        );
-    });
-}
-
-Scene.init = function() {
+function init () {
    ATON.realize();
    ATON.UI.addBasicEvents();
    ATON.UI.init();
    // All assets for this app are stored here
-    ATON.setPathCollection('./assets/');
+    ATON.setPathCollection('/a/scaenae/assets/');
    // Initial light direction
-    ATON.setMainLightDirection(new THREE.Vector3(0.2,-0.3,-0.7));
-    ATON.toggleShadows(true);
+    ATON.setMainLightDirection(new THREE.Vector3(...config.scene.initLightDir));
+    ATON.toggleShadows(config.scene.shadows);
    ATON.setExposure(config.scene.initialExposure);
-    // Open settings side panel when clicking on settings btn
-    Scene.toggleSettingsPanel('settings');
-    Scene.toggleContentMenu('menu');

-}
-/**
- * @param {String} id - The back-to-map button id
- */
-Scene.toggleScene = function(id) {
-    const btn = document.querySelector(`#${id}`);
-    const scene = document.querySelector('#scene');
+    AppState.camera = ATON.Nav._camera;
+    AppState.renderer = ATON._renderer;
+    AppState.shadows = config.scene.shadows;
+    AppState.lightDirection = ATON.getMainLightDirection();
+    AppState.exposure = config.scene.initialExposure;

-    btn.addEventListener('click', () => {
-        scene.classList.toggle('d-none');
-        // Pause rendering the 3D scene to free resources (hopefully)
-        // when browsing the map
-        ATON.renderPause();
-        document.querySelector('#map').classList.toggle('d-none');
-        AppState.map.invalidateSize();
-    });
+    ATON.Nav.setUserControl(true);
+    // Avoid semantic occlusion
+    ATON._bQuerySemOcclusion = false;
 }
 /**
 * @param {Object} marker - The marker object from config
+ * @param {Object[]} nodes - The flat list of nodes for this scene
 */
-Scene.openScene = function(marker) {
-    let canvas = document.querySelector('canvas');
-    let scene = document.querySelector('#scene');
+export function openScene (marker, nodes) {
+    init();
+    // Filter nodes with models first
+    nodes = nodes.filter(n => n.model);
+    // Load 3D models and create nodes
+    loadNodes(nodes);

-    if (canvas === null) {
-        Scene.init();
-    }
+    ATON.setMainPanorama(marker.pano);
+    // TODO: hardcoded...
+    AppState.initialRotation = new THREE.Vector3(...config.scene.initRotation);

-    scene.classList.toggle('d-none');
-    ATON.renderResume();
-
-    if (!getSceneStatus(marker.id)) {
-        // Set scene as active
-        setSceneStatus(marker.id, true);
-        // Load 3D model
-        let mainNode = ATON.createSceneNode(marker.label).load(marker.model);
-        ATON.setMainPanorama(marker.pano);
-        //mainNode.setMaterial(new THREE.MeshPhongMaterial(material));
-        mainNode.setRotation(0, 1.5, 0)
-        Scene.showEdges(mainNode);
-
-        mainNode.attachToRoot();
-
-        ATON.setAutoLP(config.scene.autoLP);
-        AppState.lightProbe = config.scene.autoLP;
-        Scene.toggleAmbientOcclusion(true);
-        AppState.ambientOcclusion = true;
-
-        Scene.UI.toggleClipper('#clipper', '#clipper-bar');
-
-        AppState.root = ATON.getRootScene();
-    }
+    ATON.setAutoLP(config.scene.autoLP);
+    AppState.lightProbe = config.scene.autoLP;
+    toggleAmbientOcclusion(config.scene.ambientOcclusion);
+    AppState.ambientOcclusion = config.scene.ambientOcclusion;
+    AppState.root = ATON.getRootScene();
 }

-export default Scene;
+/**
+ * 
+ * @param {Object[]} nodes 
+ */
+function loadNodes(nodes) {
+    nodes.forEach(n => {
+        let node = ATON.createSceneNode(n.label);
+        node.load(n.model);
+        node.setRotation(...config.scene.initRotation);
+
+        /*
+        node.setMaterial(new THREE.MeshPhongMaterial({
+            transparent: false,
+            color: n.color ?? '#fff',
+        }));
+        */
+
+        // Apply any transparency before attaching to scene
+        if (n.opacity !== undefined && n.opacity !== null) {
+            node.setMaterial(new THREE.MeshPhongMaterial({
+                transparent: true,
+                opacity: n.opacity,
+                color: '#fff'
+            }));
+        }
+
+        // Disable a node for picking (shadows, light probe etc.)
+        if (n.isInvisible) node.hide();
+
+        node.attachToRoot();
+
+        if (n.isMain) {
+            AppState.mainNodeId = n.label;
+            // ATON.Node.getBound() returns a THREE.Sphere object
+            AppState.clipping.boundingSphere = node.getBound();
+        }
+
+        if (n.isSemantic) {
+            createSemanticNode(n.model, n.label);
+            AppState.semanticNodes.set(n.label, n.content);
+            //ATON.getSemanticRoot().attach(semNode);
+        }
+
+        AppState.nodes.push({
+            id: n.label,
+            active: n.isInvisible ? false: true,
+            isSemantic: n.isSemantic
+        });
+    });
+    
+    if (!AppState.clipping.boundingSphere) {
+        console.error("No bounding sphere computed, clipping will fail. Ensure one node has 'isMain: true'.");
+    }
+}
+/**
+ * Creates a semantic annotation from a model
+ * @param {string} model The model's path to load
+ * @param {string} id The original scene node ID (3D object)
+ * @returns {ATON.SceneNode}
+ */
+function createSemanticNode(model, id) {
+    // Default/highlight materials for semantic node
+    let matSemDef = new THREE.MeshPhongMaterial({
+        color: '#ecee66',
+        transparent: true,
+        opacity: 0.3,
+    });
+    let matSemHL  = ATON.MatHub.materials.semanticShapeHL;
+
+    const semNode = ATON.createSemanticNode(id)
+        .setCloneOnLoadHit(false)
+        .load(model)
+        .setDefaultAndHighlightMaterials(matSemDef, matSemHL)
+        .attachToRoot();
+    
+    semNode.setRotation(...config.scene.initRotation);
+
+    return semNode;
+}
--- a/js/state.js
+++ b/js/state.js
@@ -1,37 +1,92 @@
-export const AppState = {
+/**
+ * @namespace AppState
+ */
+
+/**
+ * @typedef {Object} NormalizedSceneNode
+ * @property {String} label Required
+ * @property {String} id
+ * @property {String} model
+ * @property {Boolean} isMain
+ * @property {Number|null} opacity
+ * @property {Boolean} active
+ */
+
+let AppState = {
+    // The Leaflet map object
+    map : null,
    // The root scene object
    root: null,
-    scenes : [
-        {
-            id : "salvador",
-            active : false
-        }
-    ],
+    // {id: String, active: Boolean}
+    nodes: [],
+    /**
+     * @type {NormalizedSceneNode[]} normalizedNodes
+     */
+    normalizedNodes: [],
+    treeNodes: {},
+    semanticNodes: new Map,
+    mainNodeId: null,
+    currentScene: null,
+    sceneHasAudio: false,
+    layersMenuBuilt: false,
+    initialRotation: null,
+    lightDirection: [],
+    /**
+     * @type {Number}
+     */
+    exposure: null,
+    camera: null,
+    renderer: null,
    ambientOcclusion : true,
    shadows : true,
    lightProbe : false,
-    map : null,
    clipping : {
        enabled: false,
+        plane : null,
+        controls: null,
+        onDrag: null,
        helper : null,
+        arrow : null,
+        boundingSphere: null,
+        listeners: {
+            button: false,
+            plane: false,
+        },
+        vector: null,
+    },
+    /**
+     * Reset the overall app state
+     * to default values but keep map
+     * 
+     * @param {L.Map} map - The Leaflet map object
+     */
+    resetSceneState(map) {
+        AppState = {
+            root: null,
+            mainNodeId: null,
+            initialRotation: null,
+            camera: null,
+            renderer: null,
+            ambientOcclusion : true,
+            shadows : true,
+            lightProbe : false,
+            map,
+            clipping : {
+                enabled: false,
+                plane : null,
+                controls: null,
+                onDrag: null,
+                helper : null,
+                arrow : null,
+                boundingSphere: null,
+                listeners: {
+                    button: false,
+                    plane: false,
+                },
+                vector: null,
+            }
+        }
    }
 }

-/**
- * @todo Buggyyyyy!!!!
- * @param {String} id 
- * @returns {Boolean}
- */
-export function getSceneStatus(id) {
-    return AppState.scenes.find(s => s.id === id).active;
-}
-
-/**
- * @todo Buggyyyyy!!!!
- * @param {String} id 
- * @param {Boolean} status 
- * @returns {Boolean}
- */
-export function setSceneStatus(id, status) {
-    return AppState.scenes.find(s => s.id === id).active = status;
-}
+export default AppState;
--- a/js/utils/aton.js
+++ b/js/utils/aton.js
@@ -0,0 +1,38 @@
+// Global ATON
+
+import AppState from "../state.js";
+
+/**
+ * @module AtonUtils
+ */
+/**
+ * Initializes required ATON events for interactions
+ * with semantic nodes
+ */
+export function initAtonEvents() {
+    // General hover/leave events handling for all semantic nodes.
+    ATON.on("SemanticNodeHover", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.highlight();
+    });
+
+    ATON.on("SemanticNodeLeave", (semid) => {
+        let node = ATON.getSemanticNode(semid);
+        if (node) node.restoreDefaultMaterial();
+    });
+
+    // Triggers on mouse click / tap events
+    ATON.on("Tap", (e) => {
+        let node = ATON.getHoveredSemanticNode();
+        if (node) {
+            // Retrieve semantic node from AppState to trigger a modal with its content
+            const content = AppState.semanticNodes.get(node.nid);
+            
+            // Triggers a modal to show the content (listened by Stimulus)
+            const event = new Event('semantic-modal-show');
+            event.content = content;
+
+            document.dispatchEvent(event);
+        }
+    });
+}
--- a/js/utils/clipping.js
+++ b/js/utils/clipping.js
@@ -0,0 +1,157 @@
+// Global ATON and THREE
+
+import AppState from "../state.js";
+
+/**
+ * @module Clipping
+ */
+
+/**
+ * 
+ * @param {THREE.Sphere} boundingSphere - The bounding sphere for the main node
+ * @returns {THREE.Mesh}
+ */
+function createClippingPlaneMesh (boundingSphere) {
+    const planeSize = boundingSphere.radius * 1.5;
+    const mesh = new THREE.Mesh(
+        new THREE.PlaneGeometry(planeSize, planeSize),
+        new THREE.MeshBasicMaterial({ color: 0xffff00, opacity: 0.05, side: THREE.DoubleSide, transparent: true })
+    );
+
+    mesh.castShadow = false;
+    mesh.receiveShadow = false;
+
+    return mesh;
+}
+
+/**
+ * 
+ * @param {THREE.Mesh} planeMesh 
+ * @param {THREE.ArrowHelper} arrowHelper 
+ * @param {String} axis 
+ */
+function dragClipper (planeMesh, axis) {
+    const controls = new THREE.DragControls(
+        [planeMesh],
+        ATON.Nav._camera,
+        ATON._renderer.domElement,
+    ); 
+
+    const startPosition = new THREE.Vector3();
+    // Only move along the selected axis (exlude the others)
+    const excludedAxes = ['x', 'y', 'z'].filter(a => a != axis);
+
+    if (AppState.clipping.enabled && AppState.clipping.vector) {
+        controls.addEventListener('dragstart', function (event) {
+            startPosition.copy(event.object.position);
+            ATON.Nav.setUserControl(false);
+        });
+
+        controls.addEventListener('drag', function(event) {
+            const point = event.object.position;
+            updateClipper(AppState.clipping.vector, point);
+            for (const a of excludedAxes) {
+                event.object.position[a] = startPosition[a];
+            }
+        });
+
+        controls.addEventListener('dragend', function (event) {
+            ATON.Nav.setUserControl(true);
+        });
+
+        AppState.clipping.controls = controls;
+    }
+}
+
+/**
+ * @param {String} axis - The axis along which the plane's normal should be directed,
+ *                        one of 'x', 'y', 'z'
+ * @param {Number} orientation - Positive (1) or negative (-1) orientation on the axis
+ */
+export function addClippingPlane (axis, orientation = -1) {
+    axis = axis.toLowerCase();
+    const bound = AppState.clipping.boundingSphere;
+
+    if (!bound) return;
+
+    const vector = [
+        axis === 'x' ? orientation : 0,
+        axis === 'y' ? orientation : 0,
+        axis === 'z' ? orientation : 0,
+    ];
+
+    AppState.clipping.vector = vector;
+
+    // First, add a default clipping plane
+    // at a default point (calculated...)
+    const defaultPoint = bound.center.clone();
+    activateClipper(vector, axis, defaultPoint);
+}
+
+/**
+ * @todo WIP!
+ * Activate clipping plane
+ * @param {Number[]} vector - The vector array to direct the plane
+ * @param {String} axis - The x,y,z axis
+ * @param {?THREE.Vector3} point - The queried scene point
+ */
+function activateClipper (vector, axis, point = null) {
+    ATON.enableClipPlanes();
+    updateClipper(vector, point);
+    dragClipper(AppState.clipping.helper, axis);
+}
+
+/**
+ * 
+ * @param {THREE.Vector3} vector 
+ * @param {THREE.Vector3} point 
+ */
+function updateClipper (vector, point) {
+    // Useless guard...
+    if (vector) {
+        // Normal of the clipping plane along the axis facing down
+        const normal = new THREE.Vector3(...vector).normalize();
+        const plane = AppState.clipping.plane ?? ATON.addClipPlane(normal, point);
+        // Add a visible plane helper for the clipping plane
+        const visiblePlane = AppState.clipping.helper ?? createClippingPlaneMesh(AppState.clipping.boundingSphere);
+
+        if (!AppState.clipping.helper) {
+            AppState.root.add(visiblePlane);
+            AppState.clipping.helper = visiblePlane;
+        } 
+
+        visiblePlane.position.copy(point);
+        visiblePlane.lookAt(point.clone().add(normal));
+
+        plane.setFromNormalAndCoplanarPoint(normal, point);
+        AppState.clipping.plane = plane;
+    }
+}
+/**
+ * Reset clipping state after disabling from UI
+ * @todo DragControls errors!!
+ */
+export function resetClipping () {
+    AppState.clipping.enabled = false;
+    ATON.disableClipPlanes();
+
+    if (AppState.clipping.controls) {
+        AppState.clipping.controls.deactivate();
+        // Manually remove event listeners from DragControls!!
+        AppState.renderer.domElement.removeEventListener( 'pointermove', AppState.clipping.controls.onPointerMove );
+        AppState.renderer.domElement.removeEventListener( 'pointerdown', AppState.clipping.controls.onPointerDown );
+        AppState.renderer.domElement.removeEventListener( 'pointerup', AppState.clipping.controls.onPointerCancel );
+        AppState.renderer.domElement.removeEventListener( 'pointerleave', AppState.clipping.controls.onPointerCancel )
+        AppState.clipping.controls = null;
+    }
+
+    if (AppState.clipping.helper) {
+        AppState.clipping.helper.removeFromParent();
+        AppState.root.remove(AppState.clipping.helper);
+        AppState.clipping.helper = null;
+    }
+    AppState.clipping.plane = null;
+    AppState.clipping.vector = null;
+    // Ensure nav controls are reactivated!
+    ATON.Nav.setUserControl(true);
+}
--- a/js/utils/environment.js
+++ b/js/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;
+}
--- a/js/utils/nodeUtils.js
+++ b/js/utils/nodeUtils.js
@@ -0,0 +1,76 @@
+/**
+ * @module nodeUtils
+ * Utilities to process scene nodes.
+ */
+
+/**
+ * @typedef {Object} SceneNode
+ * @property {String} label Required
+ * @property {String} model
+ * @property {Boolean} isMain
+ * @property {Number|null} opacity
+ * @property {SceneNode[]|null} children
+ */
+
+/**
+ * @typedef {Object} NormalizedSceneNode
+ * @property {String} label Required
+ * @property {String} id
+ * @property {String} model
+ * @property {Boolean} isMain
+ * @property {Number|null} opacity
+ * @property {Boolean} active
+ */
+
+/**
+ * 
+ * @param {SceneNode} node 
+ * @param {Array} flatList 
+ * @param {Number} depth
+ */
+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);
+
+    if (node.children && Array.isArray(node.children)) {
+        for(const child of node.children) {
+            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 {{flat: NormalizedSceneNode[], tree: NormalizedSceneNode[]}} A flat list of nodes
+**/
+export function normalizeNodes (nodes) {
+    let flatList = [];
+    const normNode = traverseTree(nodes, flatList);
+
+    return {flat: flatList, tree: normNode.children};
+}
--- a/js/utils/stimulus.js
+++ b/js/utils/stimulus.js
@@ -0,0 +1,18 @@
+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';
+
+/**
+ * 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);
+}
--- a/jsdoc.json
+++ b/jsdoc.json
@@ -0,0 +1,20 @@
+{
+    "source": {
+        "include": ["js/"]
+    },
+
+    "opts": {
+        "plugins": ["plugins/markdown"],
+        "markdown": {
+        "tags": ["module", "namespace"]
+        },
+        "encoding": "utf8",
+        "destination": "docs/",
+        "recurse": true,
+        "verbose": true,
+        "theme_opts": {
+            "theme": "light",
+            "title": "SCAENAE - ATON-based Web App"
+        }
+    }
+}
--- a/package.json
+++ b/package.json
@@ -6,6 +6,9 @@
  "author": "Nicolò P. <nicolo.paraciani@cnr.it>",
  "license": "MIT",
  "dependencies": {
-    "leaflet": "^1.9.4"
-  }
+    "@hotwired/stimulus": "^3.2.2",
+    "leaflet": "^1.9.4",
+    "three": "0.147"
+  },
+  "devDependencies": {}
 }
--- a/scenes/salvador/index.html
+++ b/scenes/salvador/index.html
@@ -0,0 +1,121 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
+
+    <!-- Add iOS meta tags and icons -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="SCAENE">
+    <link rel="apple-touch-icon" href="appicon.png">
+
+    <!-- OpenGraph tags -->
+    <meta property="og:title" content="SCAENE" />
+    <meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
+    <meta property="og:image" content="../../appicon.png" />
+	<meta property="og:image:secure_url" content="../../appicon.png" />
+	<meta property="og:image:type" content="image/png" />
+	<meta property="og:image:width" content="200" />
+	<meta property="og:image:height" content="200" />
+
+	<!-- Web-app ID -->
+	<meta name="aton:appid" content="app_scaenae">
+
+	<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+	<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+
+    <!-- Add meta theme-color -->
+    <meta name="theme-color" content="#000000" />
+
+    <title>SCAENE</title>
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../../css/app.css">
+
+    <!-- Vendors -->
+    <script type="text/javascript" src="/vendors/vendors.min.js"></script>
+    <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+    <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
+    <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">
+    <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">
+            <i class="bi bi-map-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
+            <i class="bi bi-gear-fill"></i>
+        </a>
+        <a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
+            <i class="bi bi-scissors"></i>
+        </a>
+        <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
+            rounded-bottom-3
+            mt-4 text-dark text-center"
+        id="clipper-bar">
+            <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="clipY" title="Sezione Y"></button>
+            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
+        </div>
+        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
+            <i class="bi bi-list"></i>
+        </a>
+    </div>
+
+    <!-- TODO CSS-only popover -->
+    <div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
+
+    <div class="aton-poweredby" >
+        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
+    </div>
+
+    <!-- Info / media modal -->
+    <div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
+        <div class="modal-dialog">
+            <div class="modal-content">
+            <div class="modal-header">
+                <h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <h2 class="fs-5 font-bold text-center">Informazioni</h2>
+                <p class="mt-2">
+                    L'aria "Che fiero costume" bla bla...
+                </p>
+                <p>
+                    Lorem ipsum dolor...
+                </p>
+                <h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
+                <audio class="w-100 p-2 mt-1" src="/a/scaenae/assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</body>
--- a/scenes/salvador/index.js
+++ b/scenes/salvador/index.js
@@ -0,0 +1,13 @@
+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 { initStimulus } from "../../js/utils/stimulus.js";
+
+initStimulus();
+
+AppState.currentScene = 'salvador';
+const marker = config.markers.find(m => m.id === 'salvador');
+AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
+
+openScene(marker, AppState.normalizedNodes);
--- a/scenes/ssgp/index.html
+++ b/scenes/ssgp/index.html
@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="icon" href="../../appicon.png" sizes="512x512" type="image/png">
+
+    <!-- Add iOS meta tags and icons -->
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="SCAENE">
+    <link rel="apple-touch-icon" href="appicon.png">
+
+    <!-- OpenGraph tags -->
+    <meta property="og:title" content="SCAENE" />
+    <meta property="og:description" content="Web App 3D per il progetto PRIN 'SCAENAE'" />
+    <meta property="og:image" content="../../appicon.png" />
+	<meta property="og:image:secure_url" content="../../appicon.png" />
+	<meta property="og:image:type" content="image/png" />
+	<meta property="og:image:width" content="200" />
+	<meta property="og:image:height" content="200" />
+
+	<!-- Web-app ID -->
+	<meta name="aton:appid" content="app_scaenae">
+
+	<meta name="title" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+	<meta name="description" content="SCAENAE - Teatro Santi Giovanni e Paolo, Venezia">
+
+    <!-- Add meta theme-color -->
+    <meta name="theme-color" content="#000000" />
+
+    <title>SCAENE</title>
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
+    <link rel="stylesheet" type="text/css" href="/res/css/main.css">
+    <link rel="stylesheet" type="text/css" href="../../css/app.css">
+
+    <!-- Vendors -->
+    <script type="text/javascript" src="/vendors/vendors.min.js"></script>
+    <script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+    <script type="text/javascript" src="/dist/THREE.bundle.js"></script>
+    <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" data-controller="menu modal" data-action="semantic-modal-show@document->modal#showSemanticModal">
+    <div id="toolbar" class="aton-toolbar-top w-100"
+        data-controller="toolbar clipper" data-clipper-enabled-value="false">
+        <a class="btn aton-btn fs-5" href="/a/scaenae" id="back" title="Torna alla mappa">
+            <i class="bi bi-map-fill"></i>
+        </a>
+        <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" 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
+            position-absolute
+            top-0 start-50
+            translate-middle bg-light
+            px-4 pt-2 pb-2 bg-opacity-50
+            rounded-bottom-3
+            mt-4 text-dark text-center"
+        id="clipper-bar"
+        data-clipper-target="clipper">
+            <span class="pt-5 pb-2 d-block fw-bold">Sezione</span>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX"
+                data-clipper-target="axis" data-clipper-axis-param="x" data-action="clipper#clip" title="Sezione X"></button>
+            <button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY"
+                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"
+            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>
+
+    <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="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
+                    <i class="bi bi-diagram-3 me-1"></i> Contenuti
+                </button>
+            </li>
+        </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">
+                <!-- Temporary -->
+                <ul class="list-group me-4 ms-0">
+                    <li class="list-group-item pt-2 pb-2" id="ontology-list"> </li>
+                </ul>
+            </div>
+        </div>
+    </template>
+
+    <!-- TODO Make it a template -->
+   <div class="modal" id="semanticModal" tabindex="-1" data-modal-target="modal">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
+                </div>
+                <div class="modal-body"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
+                </div>
+            </div>
+        </div>
+    </div> 
+
+    <div class="aton-poweredby" >
+        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
+    </div>
+</body>
--- a/scenes/ssgp/index.js
+++ b/scenes/ssgp/index.js
@@ -0,0 +1,20 @@
+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 { initStimulus } from "../../js/utils/stimulus.js";
+import { initAtonEvents } from "../../js/utils/aton.js";
+
+initStimulus();
+
+AppState.currentScene = 'ssgp';
+const marker = config.markers.find(m => m.id === 'ssgp');
+const {flat, tree} = normalizeNodes(marker.nodes);
+AppState.normalizedNodes = flat;
+AppState.treeNodes = tree;
+
+// TODO: add Map object for lookup optimization
+
+openScene(marker, AppState.normalizedNodes);
+
+initAtonEvents();
--- a/scenes/ssgp/ontology.json
+++ b/scenes/ssgp/ontology.json
@@ -0,0 +1,230 @@
+{
+  "ontology": "Baroque Theatre Ontology (BT)",
+  "generatedOn": "2026-01-29",
+  "note": "Only bt: classes and bt: subclass relations; excludes Core; no CIDOC/BOT equivalences included.",
+  "domains": {
+    "TheatreArchitecture": [
+      {
+        "id": "bt:ArchitecturalComponent",
+        "label": "ArchitecturalComponent",
+        "children": [
+          {
+            "id": "bt:ArchitecturalWings",
+            "label": "ArchitecturalWings",
+            "children": []
+          },
+          {
+            "id": "bt:Gridiron",
+            "label": "Gridiron",
+            "children": []
+          },
+          {
+            "id": "bt:Proscenium",
+            "label": "Proscenium",
+            "children": []
+          },
+          {
+            "id": "bt:StructuralBackdrop",
+            "label": "StructuralBackdrop",
+            "children": []
+          },
+          {
+            "id": "bt:TechnicalGallery",
+            "label": "TechnicalGallery",
+            "children": []
+          },
+          {
+            "id": "bt:Trapdoor",
+            "label": "Trapdoor",
+            "children": []
+          }
+        ]
+      },
+      {
+        "id": "bt:ArchitecturalSpace",
+        "label": "ArchitecturalSpace",
+        "children": [
+          {
+            "id": "bt:Auditorium",
+            "label": "Auditorium",
+            "children": [
+              {
+                "id": "bt:BoxTier",
+                "label": "BoxTier",
+                "children": [
+                  {
+                    "id": "bt:Box",
+                    "label": "Box",
+                    "children": []
+                  }
+                ]
+              },
+              {
+                "id": "bt:Gallery",
+                "label": "Gallery",
+                "children": []
+              },
+              {
+                "id": "bt:Stalls",
+                "label": "Stalls",
+                "children": []
+              }
+            ]
+          },
+          {
+            "id": "bt:BackstageArea",
+            "label": "BackstageArea",
+            "children": []
+          },
+          {
+            "id": "bt:CirculationRoute",
+            "label": "CirculationRoute",
+            "children": []
+          },
+          {
+            "id": "bt:Entrance",
+            "label": "Entrance",
+            "children": []
+          },
+          {
+            "id": "bt:OrchestraPit",
+            "label": "OrchestraPit",
+            "children": []
+          },
+          {
+            "id": "bt:Stage",
+            "label": "Stage",
+            "children": [
+              {
+                "id": "bt:Overstage",
+                "label": "Overstage",
+                "children": []
+              },
+              {
+                "id": "bt:Understage",
+                "label": "Understage",
+                "children": []
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "bt:TheatreBuilding",
+        "label": "TheatreBuilding",
+        "children": []
+      }
+    ],
+    "ScenicApparatus": [
+      {
+        "id": "bt:ScenicApparatus",
+        "label": "ScenicApparatus",
+        "children": [
+          {
+            "id": "bt:Backdrop",
+            "label": "Backdrop",
+            "children": [
+              {
+                "id": "bt:FixedBackdrop",
+                "label": "FixedBackdrop",
+                "children": []
+              },
+              {
+                "id": "bt:MobileBackdrop",
+                "label": "MobileBackdrop",
+                "children": []
+              }
+            ]
+          },
+          {
+            "id": "bt:LightingDevice",
+            "label": "LightingDevice",
+            "children": []
+          },
+          {
+            "id": "bt:ScenicMachine",
+            "label": "ScenicMachine",
+            "children": [
+              {
+                "id": "bt:FlightMechanism",
+                "label": "FlightMechanism",
+                "children": []
+              },
+              {
+                "id": "bt:MovingDevice",
+                "label": "MovingDevice",
+                "children": []
+              }
+            ]
+          },
+          {
+            "id": "bt:ScenicObject",
+            "label": "ScenicObject",
+            "children": []
+          },
+          {
+            "id": "bt:SoundEffectDevice",
+            "label": "SoundEffectDevice",
+            "children": []
+          }
+        ]
+      }
+    ],
+    "PerformativeEvent": [
+      {
+        "id": "bt:PerformativeEvent",
+        "label": "PerformativeEvent",
+        "children": [
+          {
+            "id": "bt:PublicCelebration",
+            "label": "PublicCelebration",
+            "children": []
+          },
+          {
+            "id": "bt:Rehearsal",
+            "label": "Rehearsal",
+            "children": []
+          },
+          {
+            "id": "bt:TheatricalPerformance",
+            "label": "TheatricalPerformance",
+            "children": []
+          }
+        ]
+      }
+    ],
+    "DocumentaryResource": [
+      {
+        "id": "bt:DocumentaryResource",
+        "label": "DocumentaryResource",
+        "children": [
+          {
+            "id": "bt:DigitalModel",
+            "label": "DigitalModel",
+            "children": []
+          },
+          {
+            "id": "bt:IconographicSource",
+            "label": "IconographicSource",
+            "children": []
+          },
+          {
+            "id": "bt:TechnicalDocument",
+            "label": "TechnicalDocument",
+            "children": []
+          },
+          {
+            "id": "bt:TextualSource",
+            "label": "TextualSource",
+            "children": []
+          }
+        ]
+      },
+      {
+        "id": "bt:DocumentationEvent",
+        "label": "DocumentationEvent",
+        "children": []
+      }
+    ]
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,7 +2,17 @@
 # yarn lockfile v1


+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/@hotwired/stimulus/-/stimulus-3.2.2.tgz"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 leaflet@^1.9.4:
  version "1.9.4"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"
+  resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz"
  integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
+
+three@0.147:
+  version "0.147.0"
+  resolved "https://registry.npmjs.org/three/-/three-0.147.0.tgz"
+  integrity sha512-LPTOslYQXFkmvceQjFTNnVVli2LaVF6C99Pv34fJypp8NbQLbTlu3KinZ0zURghS5zEehK+VQyvWuPZ/Sm8fzw==
Author	SHA1	Message	Date
Nicolò P.	fc4dd8af62	Try different semantic material	2026-05-21 09:47:32 +02:00
Nicolò P.	c837a6e55f	Add modal controller	2026-05-21 09:36:25 +02:00
Nicolò P.	4dccd58bf3	ATON utils + optimize image asset	2026-05-21 09:30:25 +02:00
Nicolò P.	9a0d769e0f	Sample semantic modal	2026-05-20 20:34:46 +02:00
Nicolò P	55f10e62d9	Listen for ATON Tap event	2026-05-20 18:32:07 +02:00
Nicolò P	b90d1614e9	Semantic node on 'palcoscenico'	2026-05-20 14:16:01 +02:00
Nicolò P	f5f105e786	Test semantic node	2026-05-20 11:45:51 +02:00
Nicolò P.	aa9a6f56b6	clipping: Fix wrong AO handling	2026-05-19 07:49:40 +02:00
Nicolò P.	106841f6ef	Disable colors + restore clipping	2026-05-19 07:40:45 +02:00
Nicolò P.	9ae4b0bb8f	Fix node status sync error (WIP) TODO: Use Map object to optimize node lookup	2026-05-18 12:40:32 +02:00
Nicolò P.	6777037d3d	Menu toggles styling and icons	2026-05-18 10:08:07 +02:00
Nicolò P.	800edc41b9	Add color swatches to layer groups (tentative)	2026-05-15 20:17:16 +02:00
Nicolò P.	5b1f828abd	Don't use Bootstrap switches in layers menu	2026-05-15 19:59:37 +02:00
Nicolò P	11acecd33d	Draft groups in layers menu TODO: don't use Bootstrap's switches!!	2026-05-15 17:32:06 +02:00
Nicolò P.	87245233b7	Node group colors and toggling (draft)	2026-05-14 16:53:28 +02:00
Nicolò P.	589b551558	Styling changes + tooltips and defaults	2026-05-11 11:31:38 +02:00
Nicolò P	cabfe687e2	Handle invisible nodes (temp)	2026-04-22 10:34:27 +02:00
Nicolò P	26733a4b84	Remove UI module	2026-04-22 10:30:04 +02:00
Nicolò P	380999ff4b	Add exposure slider (not working?)	2026-04-22 09:35:33 +02:00
Nicolò P	d0d24c0e6c	Fix handling of light direction (hopefully)	2026-04-22 09:06:29 +02:00
Nicolò P.	becb0865b9	Move menu building to Stimulus (WIP) TODO: cache menu container, build ontology and load templates from external HTML source.	2026-04-21 17:53:23 +02:00
Nicolò P.	26bea5daae	Move UI logic to Stimulus: toolbar only	2026-04-21 15:30:35 +02:00
Nicolò P	d37e72390d	Fix config for salvador	2026-04-17 18:12:23 +02:00
Nicolò P	7a6e084a97	Disable shadows for clipping plane	2026-04-17 18:12:08 +02:00
Nicolò P.	337bcce0bb	Better config defaults	2026-04-16 15:23:16 +02:00
Nicolò P	12ae63d332	Draft ontology menu	2026-04-08 11:39:57 +02:00
Nicolò P	556086117b	Theater at top level in menu	2026-04-08 10:59:58 +02:00
Nicolò P.	c6e0314769	Minor fixes and guard clauses TODO: Bootstrap ms-* and ps-* can't account for all possible levels of indentation/nesting...	2026-04-07 22:03:16 +02:00
Nicolò P.	a617985789	Draft Ontology module	2026-04-07 16:45:28 +02:00
Nicolò P.	1117018fad	Add JSDoc config	2026-04-07 16:36:32 +02:00
Nicolò P.	36f118e5c7	Fix state path + minor changes	2026-04-07 16:26:54 +02:00
Nicolò P.	6e02236124	Refactor into proper modules	2026-04-07 15:53:43 +02:00
Nicolò P.	39c3b1b537	Spread config node in normalisation + types	2026-04-07 13:05:48 +02:00
Nicolò P.	a3ca2eb372	Fix bug with clipping	2026-04-07 12:37:43 +02:00
Nicolò P.	9a8f6c7dc5	Structured layers menu (WIP)	2026-04-07 10:57:11 +02:00
Nicolò P	2df5a71241	WIP: first reworking based on requirements NOTE: node loading logic not working yet!	2026-02-20 17:25:10 +01:00
Nicolò P.	32424e7b0b	Tabs in content menu	2026-01-18 15:59:24 +01:00
Nicolò P.	9c29894241	Fix config error	2026-01-17 15:41:30 +01:00
Nicolò P.	168c725650	Layers logic (WIP) + some refactoring	2026-01-16 17:56:53 +01:00
Nicolò P.	bd93f8ba2a	Fix audio example issues	2026-01-14 16:59:31 +01:00
Nicolò P.	e85bd4f959	Restructure to use separate scenes Uses pseudo-router logic...	2026-01-14 16:42:47 +01:00
Nicolò P.	8c1da5e4e2	Rewrite scene switching logic (with bugs!!)	2026-01-12 21:48:26 +01:00
Nicolò P.	91961ec216	Fix clipping state bug (partial)	2026-01-11 22:27:36 +01:00
Nicolò P.	8434f3bdc9	Draggable clipping plane (buggy...) TODO: refactor to avoid unnecessary object creation	2026-01-07 16:55:32 +01:00
Nicolò P.	db689c0fa3	Minor improvements: clipping, state management Warning: potentially very buggy!!	2025-12-31 19:50:40 +01:00
Nicolò P.	bc703623e8	Add SSGP + dynamic state	2025-12-15 12:19:54 +01:00
Nicolò P	378f5f5b24	Another icon...	2025-10-29 22:21:42 +01:00
Nicolò P	3d746196ff	Change pano + autoLP	2025-10-28 14:09:51 +01:00
Nicolò P	db28e66c28	WIP clipping icons	2025-10-27 10:34:29 +01:00
Nicolò P.	7412dd08bd	Reset borders (clipping tool)	2025-10-25 12:56:04 +02:00
Nicolò P.	0dda5f0344	Some UI changes for clipping	2025-10-24 08:38:54 +02:00