Minor adjustments

WIP ontology tree in menu
Rename js to src
2026-06-10 09:24:42 +02:00 · 2026-06-10 09:18:03 +02:00 · 2026-05-21 13:25:17 +02:00 · 2026-05-21 13:19:11 +02:00 · 2026-05-21 13:03:32 +02:00 · 2026-05-21 12:28:23 +02:00
26 changed files with 3151 additions and 163 deletions
--- a/assets/img/rilievo_ssgp_bezzi.jpg
+++ b/assets/img/rilievo_ssgp_bezzi.jpg
--- a/assets/img/rilievo_ssgp_bezzi.webp
+++ b/assets/img/rilievo_ssgp_bezzi.webp
--- a/assets/pano/hemi-green.jpg
+++ b/assets/pano/hemi-green.jpg
--- a/config.js
+++ b/config.js
@@ -16,16 +16,13 @@ const theater2Popup = `
 export const config = {
    scene : {
-        initialExposure: 0.95,
+        initialExposure: 1.2,
        autoLP: false,
        shadows: false,
-        initLightDir: [0.2,-0.3,-0.7],
+        initLightDir: [-0.3,-0.7,0.1],
-        initRotation: [0, 1.5, 0],
+        initRotation: [0, 190, 0],
        ambientOcclusion: false,
    },
    menu : {
        //audioBtn1
    },
    markers : [
        {
            id : "salvador",
@@ -49,12 +46,6 @@ export const config = {
            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',
@@ -115,10 +106,10 @@ export const config = {
                                // TEMP
                                content: {
                                    type: 'img',
-                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.jpg',
+                                    imgSrc: '/a/scaenae/assets/img/rilievo_ssgp_bezzi.webp',
-                                    title: 'Disegno della pianta del teatro',
+                                    title: 'Disegno della pianta del teatro SS. Giovanni e Paolo',
                                    description: `
-                                    Tommaso Bezzi: Disegno della pianta del teatro di S. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
+                                    Tommaso Bezzi: Disegno della pianta del teatro di SS. Giovanni e Paolo di Venezia, 1691-1693, Sir John Soane's Museum, Londra.
                                    `
                                }
                            },
@@ -172,11 +163,11 @@ export const config = {
                    }
                ]
            },
-            pano: `pano/gradient.jpg`,
+            pano: `pano/hemi-green.jpg`,
        }
    ],
    map : {
-        center: [45.30833, 12.240278],
+        center: [45.42833, 12.340278],
        initialZoom : 12,
        minZoom : 6,
        maxZoom : 18
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
    <script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
 	<!-- Main js entry -->
-	<script type="module" src="js/main.js"></script>
+	<script type="module" src="src/main.js"></script>
 </head>
 <body data-bs-theme="light">
--- a/js/ontology.js
+++ b/js/ontology.js
@@ -1,43 +0,0 @@
 /**
 * @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/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json
+++ b/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json
--- a/scenes/salvador/index.js
+++ b/scenes/salvador/index.js
@@ -1,8 +1,8 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initStimulus } from "../../js/utils/stimulus.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
 initStimulus();
@@ -10,6 +10,4 @@ AppState.currentScene = 'salvador';
 const marker = config.markers.find(m => m.id === 'salvador');
 AppState.normalizedNodes = normalizeNodes(marker.nodes).flat;
 console.debug(AppState.normalizedNodes);
 openScene(marker, AppState.normalizedNodes);
--- a/scenes/ssgp/index.html
+++ b/scenes/ssgp/index.html
@@ -58,25 +58,31 @@
 	<script type="module" src="./index.js"></script>
 </head>
-<body data-bs-theme="light" data-controller="menu" data-action="semantic-modal-show@document->menu#showSemanticModal">
+<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">
+        <div class="bg-dark-subtle position-absolute opacity-50 mt-1 ms-1 rounded">
-            <i class="bi bi-map-fill"></i>
+            <a class="btn aton-btn fs-5 p-1 text-white" href="/a/scaenae" id="back" title="Torna alla mappa">
-        </a>
+                <i class="bi bi-map-fill"></i>
-        <a class="btn aton-btn fs-5" title="Impostazioni" data-toolbar-target="settings"
+            </a>
-            data-action="toolbar#toggleSettings">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Impostazioni" data-toolbar-target="settings"
-            <i class="bi bi-gear-fill"></i>
+                data-action="toolbar#toggleSettings">
-        </a>
+                <i class="bi bi-gear-fill"></i>
-        <a class="btn aton-btn fs-5" title="Attiva / disattiva sezionamento"
+            </a>
-            data-clipper-target="trigger" data-action="clipper#toggleClipper">
+            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva / disattiva sezionamento"
-            <i class="bi bi-scissors"></i>
+                data-clipper-target="trigger" data-action="clipper#toggleClipper">
-        </a>
+                <i class="bi bi-scissors"></i>
            </a>
            <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva schermo intero" data-toolbar-target="fullscreen"
                data-action="toolbar#toggleFullscreen">
                <i class="bi bi-fullscreen"></i>
            </a>
        </div>
        <div class="d-none w-25
            position-absolute
            top-0 start-50
            translate-middle bg-light
-            px-4 pt-2 pb-2 bg-opacity-50
+            px-4 pt-2 pb-2 bg-opacity-75
            rounded-bottom-3
            mt-4 text-dark text-center"
        id="clipper-bar"
@@ -89,7 +95,7 @@
            <button class="btn aton-btn d-inline px-4 py-4" id="clipZ"
                data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
        </div>
-        <a class="btn aton-btn fs-5 float-end" id="menu" title="Menu"
+        <a class="btn aton-btn fs-5 float-end p-1 mt-1 text-white" id="menu" title="Menu"
            data-menu-target="trigger" data-action="menu#toggleMenu">
            <i class="bi bi-list"></i>
        </a>
@@ -158,7 +164,7 @@
    </template>
    <!-- TODO Make it a template -->
-   <div class="modal" id="semanticModal" tabindex="-1">
+   <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">
--- a/scenes/ssgp/index.js
+++ b/scenes/ssgp/index.js
@@ -1,8 +1,9 @@
-import { openScene } from "../../js/scene.js";
+import { openScene } from "../../src/scene.js";
 import { config } from "../../config.js";
-import AppState from "../../js/state.js";
+import AppState from "../../src/state.js";
-import { normalizeNodes } from "../../js/utils/nodeUtils.js";
+import { normalizeNodes } from "../../src/utils/nodeUtils.js";
-import { initStimulus } from "../../js/utils/stimulus.js";
+import { initStimulus } from "../../src/utils/stimulus.js";
 import { initAtonEvents } from "../../src/utils/aton.js";
 initStimulus();
@@ -16,33 +17,4 @@ AppState.treeNodes = tree;
 openScene(marker, AppState.normalizedNodes);
-// General hover/leave events handling for all semantic nodes.
+initAtonEvents();
 ATON.on("SemanticNodeHover", (semid) => {
        let node = ATON.getSemanticNode(semid);
        console.debug('Sem node:', 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;
        console.log(event);
        document.dispatchEvent(event);
    }
 });
--- a/src/controllers/clipper_controller.js
+++ b/src/controllers/clipper_controller.js
--- a/src/controllers/menu_controller.js
+++ b/src/controllers/menu_controller.js
@@ -6,7 +6,7 @@ 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';
+const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json';
 export default class extends Controller {
    static targets = ['trigger', 'layers', 'ontology'];
@@ -229,56 +229,26 @@ export default class extends Controller {
     * @param {HTMLElement} tab Tab content element
     */
    #buildOntologyMenu(ontology, tab) {
        console.debug(ontology);
        const mainNode = tab.querySelector('#ontology-list');
-        mainNode.textContent = ontology.ontology;
+        mainNode.innerHTML = html`
-
+            <span class="fs-5 fw-bold">${ontology.ontology}</span>
        let domainList = html`
            <ul class="list-group mt-2" id="domains-list"></ul>
        `;
        mainNode.classList.add('pb-3');
-        // Very fragile and ugly!!
+        let domainList = document.createElement('div');
        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;
        }
    }
    /**
     * 
     * @param {Event} event 
     */
    showSemanticModal(event) {
        console.debug('I have been triggered...');
-        const modal = document.querySelector('#semanticModal');
+        for (let domain of ontology.domains) {
-        const title = modal.querySelector('.modal-title');
+            const domainItem = document.createElement('div');
-        // Clear any existing content first
+            domainItem.className = 'border-start border-bottom rounded';
-        title.innerHTML = '';
+            domainItem.textContent = domain.label;
-        title.innerHTML = event.content?.title;
+            // Indentation...
-        const body = modal.querySelector('.modal-body');
+            domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
        body.innerHTML = '';
        const contentType = event.content?.type;
-        const content = document.createElement(contentType);
+            if (domain.depth === 1) domainItem.classList.add('fw-bold');
-        if (contentType === 'img') {
+
-            content.src = event.content?.imgSrc;
+            domainList.appendChild(domainItem);
            content.classList.add('img-fluid');
        }
-        const description = document.createElement('p');
+        mainNode.appendChild(domainList);
        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/src/controllers/modal_controller.js
+++ b/src/controllers/modal_controller.js
@@ -0,0 +1,41 @@
 import { Controller } from "@hotwired/stimulus";
 export default class extends Controller {
    static targets = ['modal'];
    connect() {
        console.log('#modal controller connected');
    }
    /**
     * 
     * @param {Event} event 
     */
    showSemanticModal(event) {
        const modal = this.modalTarget;
        const title = modal.querySelector('.modal-title');
        // Clear any existing content first
        title.innerHTML = '';
        title.innerHTML = event.content?.title;
        const body = modal.querySelector('.modal-body');
        body.innerHTML = '';
        const contentType = event.content?.type;
        const content = document.createElement(contentType);
        if (contentType === 'img') {
            content.src = event.content?.imgSrc;
            content.alt = event.content?.description.trim();
            content.classList.add('img-fluid');
        }
        body.appendChild(content);
        const description = document.createElement('p');
        description.textContent = event.content?.description.trim();
        description.classList.add('py-3', 'my-0', 'fst-italic');
        body.appendChild(description);
        bootstrap.Modal.getOrCreateInstance(modal).show();
    }
 }
--- a/src/controllers/settings_controller.js
+++ b/src/controllers/settings_controller.js
--- a/src/controllers/tabs_controller.js
+++ b/src/controllers/tabs_controller.js
--- a/src/controllers/toolbar_controller.js
+++ b/src/controllers/toolbar_controller.js
@@ -9,7 +9,7 @@ const panelHeader = html`
 `;
 export default class extends Controller {
-    static targets = ['settings'];
+    static targets = ['settings', 'fullscreen'];
    connect() {
        console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
        ATON.UI.showSidePanel({header: panelHeader});
        this.#buildSettingsPanel(ATON.UI.elSidePanel);
    }
    toggleFullscreen() {
        /**
         * @type {HTMLAnchorElement}
         */
        const target = this.fullscreenTarget;
        const icon = target.querySelector('i');
        if (!document.fullscreenElement) {
            document.body.requestFullscreen();
            icon.classList.remove('bi-fullscreen');
            icon.classList.add('bi-fullscreen-exit');
            target.title = 'Esci da schermo intero';
        } else {
            document.exitFullscreen();
            icon.classList.remove('bi-fullscreen-exit');
            icon.classList.add('bi-fullscreen');
            target.title = 'Attiva schermo intero';
        }
    }
    /**
     * Clone a <template> by id
     * @param {String} id
--- a/src/main.js
+++ b/src/main.js
--- a/src/map.js
+++ b/src/map.js
--- a/src/ontology.js
+++ b/src/ontology.js
@@ -0,0 +1,69 @@
 /**
 * @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 modules = ontology.modules;
    let tree = [];
    for (const module of modules) {
        if (module.id === 'Architecture') {
            console.debug(module.classTrees);
            for (const classTree of module.classTrees) {
                traverseClasses(classTree, tree);
            }
        }
    }
    return {
        ontology: "Architecture",
        domains: tree
    };
 }
 /**
 * 
 * @param {Object} ontologyClass 
 * @param {Array<Object>} tree 
 * @param {Number} depth
 */
 function traverseClasses(ontologyClass, tree, depth = 1) {
    const ontologyNode = {
        id: ontologyClass.id,
        label: ontologyClass.label,
        depth,
        children: [],
    };
    tree.push(ontologyNode);
    if (ontologyClass.children && Array.isArray(ontologyClass.children)) {
        for(const child of ontologyClass.children) {
            ontologyNode.children.push(
                traverseClasses(child, tree, depth + 1)
            );
        }
    }
 }
 /**
 * Load an ontology from its JSON description
 * @param {String} jsonPath The path (URI) of the ontology JSON file
 * @returns {Object}
 */
 export async function loadOntology(jsonPath) {
    const ontology = await fetch(jsonPath)
        .then(res => res.json())
        .catch(err => console.error(err));
    return ontology;
 }
--- a/src/scene.js
+++ b/src/scene.js
@@ -132,7 +132,11 @@ function loadNodes(nodes) {
 */
 function createSemanticNode(model, id) {
    // Default/highlight materials for semantic node
-    let matSemDef = ATON.MatHub.materials.semanticShape;
+    let matSemDef = new THREE.MeshStandardMaterial({
        color: '#f7e6af',
        transparent: true,
        opacity: 0.2,
    });
    let matSemHL  = ATON.MatHub.materials.semanticShapeHL;
    const semNode = ATON.createSemanticNode(id)
--- a/src/state.js
+++ b/src/state.js
--- a/src/utils/aton.js
+++ b/src/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/src/utils/clipping.js
+++ b/src/utils/clipping.js
--- a/src/utils/environment.js
+++ b/src/utils/environment.js
--- a/src/utils/nodeUtils.js
+++ b/src/utils/nodeUtils.js
--- a/src/utils/stimulus.js
+++ b/src/utils/stimulus.js
@@ -3,6 +3,7 @@ import SettingController from '../controllers/settings_controller.js';
 import ToolbarController from '../controllers/toolbar_controller.js';
 import ClipperController from '../controllers/clipper_controller.js';
 import MenuController from '../controllers/menu_controller.js';
 import ModalController from '../controllers/modal_controller.js';
 /**
 * Initialize Stimulus controllers
@@ -13,4 +14,5 @@ export function initStimulus() {
    Stimulus.register("toolbar", ToolbarController);
    Stimulus.register("clipper", ClipperController);
    Stimulus.register("menu", MenuController);
    Stimulus.register("modal", ModalController);
 }
Author	SHA1	Message	Date
Nicolò P.	28a34905c7	Minor adjustments	2026-06-10 09:24:42 +02:00
Nicolò P.	8aa3f7cde8	WIP ontology tree in menu	2026-06-10 09:18:03 +02:00
Nicolò P.	0c3a049d12	Rename js to src	2026-05-21 13:25:17 +02:00
Nicolò P.	3305e74776	Add fullscreen option	2026-05-21 13:19:11 +02:00
Nicolò P.	8ce7492f4e	Minor changes	2026-05-21 13:03:32 +02:00
Nicolò P.	03b9b9157b	Change pano again...	2026-05-21 12:28:23 +02:00
Nicolò P.	eb7efbf616	Style toolbar	2026-05-21 11:42:52 +02:00
Nicolò P.	b80504aec4	Reduce default lighting a bit	2026-05-21 11:23:40 +02:00
Nicolò P.	db2fc2d066	Change pano	2026-05-21 10:38:35 +02:00
Nicolò P.	491371e495	Change default env settings	2026-05-21 10:35:59 +02:00
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