Tentative instance attachment

Keep only one active semantic node
NOTE: no action on sem node click
2026-07-14 10:37:19 +02:00 · 2026-07-14 07:54:34 +02:00 · 2026-07-08 13:01:48 +02:00 · 2026-07-08 09:57:24 +02:00 · 2026-07-07 16:45:34 +02:00 · 2026-06-23 22:47:17 +02:00
15 changed files with 4737 additions and 60 deletions
--- a/assets/img/Rilievo
+++ b/assets/img/Rilievo
--- a/config.js
+++ b/config.js
@@ -53,11 +53,11 @@ export const config = {
                        opacity: 0.2,
                    },
                    {
-                        label: 'Sala / Auditorium',
+                        label: 'Sala / cavea',
                        color: 'rgb(212, 96, 75)',
                        children: [
                            {
-                                label: 'Peplano / Platea',
+                                label: 'Peplano / platea',
                                model: 'models/ssgp/Teatro_SSGP_Platea_peplano.glb',
                            },
                            {
@@ -114,7 +114,7 @@ export const config = {
                                }
                            },
                            {
-                                label: 'Boccascena / Proscenio',
+                                label: 'Boccascena / proscenio',
                                model: 'models/ssgp/Teatro_SSGP_Boccascena.glb',
                            },
                            {
--- a/css/app.css
+++ b/css/app.css
@@ -57,6 +57,16 @@ input[type="checkbox"] {
    padding-left: 0;
    list-style-position: outside;
 }
+#instances li > a {
+    color: #dee2e6;
+}
+#instances li > a:hover {
+    color: var(--bs-nav-link-color);
+    text-decoration: underline;
+}
+#instance-panel {
+    z-index: 999;
+}
 /* Tooltips from https://codepen.io/pure-css/pen/bddggP */
 span:after {
   text-align: left;
--- a/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json
+++ b/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json
--- a/scenes/ssgp/index.html
+++ b/scenes/ssgp/index.html
@@ -58,7 +58,7 @@
 	<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">
+<body data-bs-theme="light" data-controller="menu modal node" data-action="semantic-modal-show@document->modal#showSemanticModal">
    <div id="toolbar" class="aton-toolbar-top w-100"
        data-controller="toolbar clipper" data-clipper-enabled-value="false">
        <div class="bg-dark-subtle position-absolute opacity-50 mt-1 ms-1 rounded">
@@ -141,25 +141,20 @@
        <!-- 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">
+                <button class="nav-link active" id="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="true">
                    <i class="bi bi-boxes me-1"></i> Elementi 3D
                </button>
            </li>
            <li class="nav-item" role="presentation">
-                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="true">
-                    <i class="bi bi-diagram-3 me-1"></i> Contenuti
+                <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab" aria-controls="media" aria-selected="false">
+                    <i class="bi bi-diagram-3 me-1"></i> Ontologia
                </button>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content ps-2 ms-2 overflow-y-auto">
            <div class="tab-pane active ps-3 pt-0 mt-4 ms-0" data-menu-target="layers" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
-            <div class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0">
-                <!-- 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 class="tab-pane pt-3" data-menu-target="ontology" id="content" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
        </div>
    </template>

@@ -179,6 +174,19 @@
        </div>
    </div> 

+    <!-- Instance panel (template it...)-->
+    <div class="position-absolute top-0 start-0 w-25 h-100 container instance-panel d-none bg-dark" data-node-target="panel">
+        <div class="container border-bottom border-secondary-subtle w-100">
+            <h1 class="fs-4 py-2 text-center"></h1>
+        </div>
+        <div class="row h-100">
+            <div class="border-end border-secondary-subtle h-100" id="properties-panel">
+                <ul id="properties-list"></ul>
+            </div>
+            <div class="d-none" id="attachment-panel"></div>
+        </div>
+    </div>
+
    <div class="aton-poweredby" >
        <a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
    </div>
--- a/src/controllers/menu_controller.js
+++ b/src/controllers/menu_controller.js
@@ -1,18 +1,20 @@
 // Global ATON
 import { Controller } from "@hotwired/stimulus";
 import AppState from "../state.js";
-import { traverseOntology } from "../ontology.js";
+import { loadOntology, traverseOntology, Ontology } from "../ontology.js";

 const html = String.raw;
 const domParser = new DOMParser;
 // TODO: hard-coded, but follows a convention...
-const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json';
+const ontologyJsonPath = '/a/scaenae/scenes/BaroqueTheatreOntology_BT_v1_8_ATON_by_domain_with_instances.json';

 export default class extends Controller {
    static targets = ['trigger', 'layers', 'ontology'];

-    connect() {
+    async connect() {
        console.log('#menu controller connected');
+        this.ontologyObject = await loadOntology(ontologyJsonPath);
+        AppState.ontology = this.ontologyObject;
    }
    /**
     * Open settings panel
@@ -22,7 +24,7 @@ export default class extends Controller {
        ATON.UI.showSidePanel({header: 'Menu'});
        this.#buildMenuPanel(ATON.UI.elSidePanel);
        this.#buildLayersMenu(AppState.treeNodes, this.layersTarget);
-        this.#buildOntologyMenu(await traverseOntology(ontologyJsonPath), this.ontologyTarget);
+        this.#buildOntologyMenu(await traverseOntology(this.ontologyObject), this.ontologyTarget);
    }
    /**
     * @param {Event} event 
@@ -225,30 +227,90 @@ export default class extends Controller {
    /**
     * 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 {Array<{id: string, tree: Array<Object>}>} domains The traversed ontology domains
     * @param {HTMLElement} tab Tab content element
     */
-    #buildOntologyMenu(ontology, tab) {
-        const mainNode = tab.querySelector('#ontology-list');
-        mainNode.innerHTML = html`
-            <span class="fs-5 fw-bold">${ontology.ontology}</span>
-        `;
-        mainNode.classList.add('pb-3');
+    #buildOntologyMenu(domains, tab) {
+        const ontology = new Ontology;
+        ontology.data = this.ontologyObject; 

-        let domainList = document.createElement('div');
+        const tabs = this.#createOntologyTabs().tabs;
+        const content = this.#createOntologyTabs().content;

-        for (let domain of ontology.domains) {
-            const domainItem = document.createElement('div');
-            domainItem.className = 'border-start border-bottom rounded';
-            domainItem.textContent = domain.label;
-            // Indentation...
-            domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
+        tab.appendChild(tabs);
+        tab.appendChild(content);

-            if (domain.depth === 1) domainItem.classList.add('fw-bold');
+        const classesTab = content.querySelector('#classes');

-            domainList.appendChild(domainItem);
+        for (let domain of domains) {
+            const heading = document.createElement('span');
+            heading.className ="fs-5 fw-bold";
+            heading.textContent = domain.id;
+            classesTab.appendChild(heading);
+
+            let domainList = document.createElement('div');
+
+            // Traverse class trees for each domain
+            for (let item of domain.tree) {
+                const domainItem = document.createElement('div');
+                domainItem.className = 'border-start border-bottom rounded border-1 border-light-subtle';
+                domainItem.textContent = item.label.it ?? item.label.en;
+                // Indentation...
+                domainItem.classList.add(`ms-${item.depth}`, `ps-${item.depth}`, 'py-2');
+
+                if (item.depth === 1) domainItem.classList.add('fw-bold');
+
+                domainList.appendChild(domainItem);
+            }
+
+            classesTab.appendChild(domainList);
        }

-        mainNode.appendChild(domainList);
+        const instancesTab = content.querySelector('#instances');
+        const navList = instancesTab.querySelector('ul');
+        const sortedItLabels = ontology.getInstanceLabels().map(l => l.it).sort();
+
+        for (let label of sortedItLabels) {
+            const instanceItem = document.createElement('li');
+            instanceItem.className = 'nav-item border-bottom ps-3 py-2 c-hand';
+            instanceItem.innerHTML = html`
+                <a class="nav-link">${label}</a>
+            `;
+            instanceItem.setAttribute('data-node-id-param', label);
+            instanceItem.setAttribute('data-action', 'click->node#open');
+
+            navList.appendChild(instanceItem);
+        }
+    }
+
+    /**
+     * @returns {{tabs: HTMLUListElement, content: HTMLDivElement}}
+     */
+    #createOntologyTabs() {
+        const tabs = html`
+            <ul class="nav nav-pills" role="tablist" id="ontoTabs">
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link active" id="classes-tab" data-bs-toggle="tab" data-bs-target="#classes" type="button"
+                        role="tab" aria-controls="classes-tab-pane" aria-selected="true">Classi</button>
+                </li>
+                <li class="nav-item" role="presentation">
+                    <button class="nav-link" id="instances-tab" data-bs-toggle="tab" data-bs-target="#instances" type="button"
+                        role="tab" aria-controls="instances-tab-pane" aria-selected="true">Istanze</button>
+                </li>
+            </ul>
+        `;
+        const content = html`
+            <div class="tab-content" id="ontoTabsContent">
+                <div class="tab-pane fade p-3 show active" id="classes" role="tabpanel" aria-labelledby="classes-tab" tabindex="0"></div>
+                <div class="tab-pane fade" id="instances" role="tabpanel" aria-labelledby="instances-tab" tabindex="0">
+                    <ul class="nav flex-column"></ul>
+                </div>
+            </div>
+        `;
+
+        return {
+            tabs: domParser.parseFromString(tabs, 'text/html').querySelector('ul'),
+            content: domParser.parseFromString(content, 'text/html').querySelector('div'), 
+        };
    }
 }
--- a/src/controllers/node_controller.js
+++ b/src/controllers/node_controller.js
@@ -0,0 +1,130 @@
+// Global ATON
+import { Controller } from "@hotwired/stimulus"
+import AppState from "../state.js";
+import { createSemanticNode } from "../scene.js";
+import { Ontology } from "../ontology.js";
+
+const html = String.raw;
+const assetsBase = "/a/scaenae/assets";
+/**
+ * Handle events for the clipper toolbar,
+ * related to the clipping module
+ */
+export default class extends Controller {
+    static targets = ['instance', 'node', 'panel'];
+    static values = {
+        id: String,
+    };
+
+    connect() {
+        console.log('#node controller connected');
+    }
+
+    /**
+     * Transition to ATON node (request POV)
+     * if instance is architectural and
+     * open the instance panel
+     */
+    open({ params: {id} }) {
+        // First disable transparent envelope node, if active
+        ATON.getSceneNode(AppState.mainNodeId).toggle(false);
+
+        const node = ATON.getSceneNode(id);
+        const normNode = AppState.normalizedNodes.find(n => n.id === id);
+
+        if (node) ATON.Nav.requestPOVbyNode(node);
+        if (normNode) this.addSemanticNode(normNode);
+
+        const ontology = new Ontology;
+        ontology.data = AppState.ontology;
+
+        const instance = ontology.getInstanceByLabel(id, 'it');
+        if (instance) this.openInstancePanel(instance);
+    }
+
+    /**
+     * Attaches a semantic node to
+     * an existing scene node using
+     * its 3D model for the semantic shape
+     * @param {import("../state.js").NormalizedSceneNode} normNode
+     */
+    addSemanticNode(normNode) {
+        // First remove any existing sem node
+        if (AppState.currentSemNodeId) {
+            ATON.SemFactory.deleteSemanticNode(AppState.currentSemNodeId);
+        }
+        createSemanticNode(normNode.model, normNode.label);
+        AppState.currentSemNodeId = normNode.label;
+    }
+
+    /**
+     * Populates an instance panel based on the
+     * instance data and opens it
+     * @param {Object} instance 
+     */
+    openInstancePanel(instance) {
+        const properties = instance.literalProperties;
+        // Populate left side properties column
+        /**
+         * @type {HTMLDivElement}
+         */
+        const panel = this.panelTarget;
+        const propPanel = panel.querySelector('#properties-panel');
+        const attachmentPanel = panel.querySelector('#attachment-panel');
+        const list = panel.querySelector('#properties-list');
+        list.innerHTML = '';
+
+        panel.querySelector('h1').textContent = instance.label.it;
+
+        let attachment = '';
+
+        // Reset attachment panel if previously activated...
+        attachmentPanel.classList.add('d-none');
+        attachmentPanel.classList.remove('col-7');
+        propPanel.classList.remove('col-5');
+
+        for (const prop of properties) {
+            // Include only DC properties (OK?)
+            const [schema, term] = prop.property.split(':');
+            if (schema === 'dcterms' && Object.keys(prop.propertyLabel).length !== 0) {
+                const item = document.createElement('li');
+                item.className = 'py-2';
+
+                item.innerHTML = html`
+                    <span class="text-primary-emphasis d-inline-block">${prop.propertyLabel.it ?? prop.propertyLabel.en}</span>
+                    <br />
+                    ${prop.value.value}
+                `;
+
+                list.appendChild(item);
+
+                // This will spawn bugs!!
+                if (term === 'identifier'
+                    && (prop.value.value.includes('.jpeg') || prop.value.value.includes('.pdf'))) {
+                        attachment = prop.value.value;
+                }
+            }
+
+            if (term === 'format') {
+                propPanel.classList.add('col-5');
+                attachmentPanel.classList.add('col-7');
+                attachmentPanel.classList.remove('d-none');
+
+                const attachmentType = prop.value.value;
+                // Idiotic!!
+                const folder = attachmentType.includes('image') ? assetsBase + '/img/' : assetsBase + '/pdf/';
+                const attachmentItem = document.createElement('img');
+                attachmentItem.className = 'img-fluid mt-3';
+                attachmentItem.src = folder + attachment;
+
+                attachmentPanel.appendChild(attachmentItem);
+            }
+        }
+
+        panel.classList.remove('d-none');
+    }
+
+    closeInstancePanel() {
+
+    }
+}
--- a/src/controllers/tabs_controller.js
+++ b/src/controllers/tabs_controller.js
@@ -39,4 +39,3 @@ export default class extends Controller {
        });
    }
 }
-
--- a/src/ontology.js
+++ b/src/ontology.js
@@ -2,31 +2,87 @@
 * @module Ontology
 */

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

-    let tree = [];
+    const domains = [];

    for (const module of modules) {
-        if (module.id === 'Architecture') {
-            console.debug(module.classTrees);
-            for (const classTree of module.classTrees) {
-                traverseClasses(classTree, tree);
-            }
+        let tree = [];
+        for (const classTree of module.classTrees) {
+            traverseClasses(classTree, tree);
        }
+        domains.push({
+            id: module.label.it ?? module.label.en,
+            tree
+        });
    }

-    return {
-        ontology: "Architecture",
-        domains: tree
-    };
+    return domains;
 }

 /**
@@ -52,7 +108,6 @@ function traverseClasses(ontologyClass, tree, depth = 1) {
            );
        }
    }
-
 }

 /**
--- a/src/scene.js
+++ b/src/scene.js
@@ -107,12 +107,6 @@ function loadNodes(nodes) {
            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,
@@ -130,14 +124,19 @@ function loadNodes(nodes) {
 * @param {string} id The original scene node ID (3D object)
 * @returns {ATON.SceneNode}
 */
-function createSemanticNode(model, id) {
+export function createSemanticNode(model, id) {
    // Default/highlight materials for semantic node
    let matSemDef = new THREE.MeshStandardMaterial({
-        color: '#f7e6af',
+        color: '#81eb81',
        transparent: true,
-        opacity: 0.2,
+        opacity: 0.4,
    });
-    let matSemHL  = ATON.MatHub.materials.semanticShapeHL;
+    let matSemHL  = new THREE.MeshStandardMaterial({
+        color: '#e9757b',
+        transparent: true,
+        opacity: 0.5,
+    });
+

    const semNode = ATON.createSemanticNode(id)
        .setCloneOnLoadHit(false)
--- a/src/state.js
+++ b/src/state.js
@@ -23,8 +23,17 @@ let AppState = {
     * @type {NormalizedSceneNode[]} normalizedNodes
     */
    normalizedNodes: [],
+    /**
+     * The loaded ontology object
+     */
+    ontology: {},
    treeNodes: {},
+    // Redundant??
    semanticNodes: new Map,
+    /**
+     * @type {String|null}
+     */
+    currentSemNodeId: null,
    mainNodeId: null,
    currentScene: null,
    sceneHasAudio: false,
--- a/src/utils/aton.js
+++ b/src/utils/aton.js
@@ -22,6 +22,7 @@ export function initAtonEvents() {
    });

    // Triggers on mouse click / tap events
+    /*
    ATON.on("Tap", (e) => {
        let node = ATON.getHoveredSemanticNode();
        if (node) {
@@ -35,4 +36,5 @@ export function initAtonEvents() {
            document.dispatchEvent(event);
        }
    });
+    */
 }
--- a/src/utils/nodeUtils.js
+++ b/src/utils/nodeUtils.js
@@ -20,6 +20,7 @@
 * @property {Boolean} isMain
 * @property {Number|null} opacity
 * @property {Boolean} active
+ * @property {String} content
 */

 /**
--- a/src/utils/stimulus.js
+++ b/src/utils/stimulus.js
@@ -4,6 +4,7 @@ import ToolbarController from '../controllers/toolbar_controller.js';
 import ClipperController from '../controllers/clipper_controller.js';
 import MenuController from '../controllers/menu_controller.js';
 import ModalController from '../controllers/modal_controller.js';
+import NodeController from '../controllers/node_controller.js';

 /**
 * Initialize Stimulus controllers
@@ -15,4 +16,5 @@ export function initStimulus() {
    Stimulus.register("clipper", ClipperController);
    Stimulus.register("menu", MenuController);
    Stimulus.register("modal", ModalController);
+    Stimulus.register("node", NodeController);
 }
--- a/types/aton.d.ts
+++ b/types/aton.d.ts
@@ -0,0 +1,59 @@
+declare global {
+    const THREE: typeof import('three');
+}
+
+declare namespace ATON {
+    function realize(): void;
+    function setPathCollection(path: string): void;
+    function setMainLightDirection(v: THREE.Vector3): void;
+    function getMainLightDirection(): THREE.Vector3;
+    function toggleShadows(enabled: boolean): void;
+    function setExposure(value: number): void;
+    function setMainPanorama(path: string): void;
+    function setAutoLP(enabled: boolean): void;
+    function enableClipPlanes(): void;
+    function disableClipPlanes(): void;
+    function addClipPlane(normal: THREE.Vector3, point: THREE.Vector3): THREE.Plane;
+    function createSceneNode(id: string): SceneNode;
+    function getSceneNode(id: string): SceneNode;
+    function getRootScene(): THREE.Object3D;
+
+    interface SceneNode {
+        load(path: string): SceneNode;
+        setRotation(x: number, y: number, z: number): SceneNode;
+        setMaterial(material: THREE.Material): SceneNode;
+        attachToRoot(): SceneNode;
+        toggle(visible: boolean): SceneNode;
+        getBound(): THREE.Sphere;
+        add(object: THREE.Object3D): void;
+        remove(object: THREE.Object3D): void;
+    }
+
+    namespace Nav {
+        let _camera: THREE.Camera;
+        function setUserControl(enabled: boolean): void;
+        function requestPOVbyNode(n: ATON.SceneNode, duration: number): void;
+    }
+
+    namespace UI {
+        let elSidePanel: HTMLElement;
+        function init(): void;
+        function addBasicEvents(): void;
+        function setSidePanelLeft(): void;
+        function setSidePanelRight(): void;
+        function showSidePanel(options: { header: string }): void;
+        function createSlider(options: {
+            range: [number, number];
+            label: string;
+            value: number | string;
+            oninput: (val: string) => void;
+        }): HTMLElement;
+    }
+
+    namespace FX {
+        const PASS_AO: number;
+        function togglePass(pass: number, enabled: boolean): void;
+    }
+
+    let _renderer: THREE.WebGLRenderer;
+}
Author	SHA1	Message	Date
Nicolò P	faf9c3acea	Tentative instance attachment	2026-07-14 10:37:19 +02:00
Nicolò P.	5a72c91891	Keep only one active semantic node NOTE: no action on sem node click	2026-07-14 07:54:34 +02:00
Nicolò P	8fec26f69f	Idiotic instance panel...	2026-07-08 13:01:48 +02:00
Nicolò P.	56d3f0a20f	Add node controller	2026-07-08 09:57:24 +02:00
Nicolò P.	6a8acfeb0f	Classes and instances in ontology menu	2026-07-07 16:45:34 +02:00
Nicolò P.	60646cebf6	Keep all ontology domains in menu	2026-06-23 22:47:17 +02:00