nicolo/scaenae
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: nicolo:semantic
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates
...
compare: nicolo:28a34905c7d5dd19a4c7948faa3612a35939393d
Branches Tags
nicolo:master nicolo:ontology nicolo:semantic nicolo:grouped-menu nicolo:stimulus nicolo:structure-updates

10 Commits
semantic ... 28a34905c7

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
24 changed files with 3071 additions and 104 deletions
Expand all files Collapse all files

BIN
assets/pano/hemi-green.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

19
config.js
View File

@@ -16,16 +16,13 @@ const theater2Popup = `
export const config = { export const config = {
scene : { scene : {
initialExposure: 0.95, initialExposure: 1.2,
autoLP: false, autoLP: false,
shadows: 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, ambientOcclusion: false,
}, },
menu : {
//audioBtn1
},
markers : [ markers : [
{ {
id : "salvador", id : "salvador",
@@ -49,12 +46,6 @@ export const config = {
nodes: { nodes: {
label: 'Teatro', label: 'Teatro',
children: [ children: [
/*
{
label: 'Struttura complessiva',
model: 'models/ssgp/Teatro_SSGP_Full_ConSottrazioni.glb',
},
*/
{ {
label: 'Involucro', label: 'Involucro',
model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb', model: 'models/ssgp/Teatro_SSGP_Layer_Struttura_parete_di_fondo.glb',
@@ -172,11 +163,11 @@ export const config = {
} }
] ]
}, },
pano: `pano/gradient.jpg`, pano: `pano/hemi-green.jpg`,
} }
], ],
map : { map : {
center: [45.30833, 12.240278], center: [45.42833, 12.340278],
initialZoom : 12, initialZoom : 12,
minZoom : 6, minZoom : 6,
maxZoom : 18 maxZoom : 18

2
index.html
View File

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

43
js/ontology.js
View File

@@ -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;
}

2922
scenes/BaroqueTheatreOntology_BT_EN_v1_7_UI_by_domain_v3.json Normal file
View File

File diff suppressed because it is too large Load Diff

8
scenes/salvador/index.js
View File

@@ -1,8 +1,8 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.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(); initStimulus();

16
scenes/ssgp/index.html
View File

@@ -61,22 +61,28 @@
<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" data-action="semantic-modal-show@document->modal#showSemanticModal">
<div id="toolbar" class="aton-toolbar-top w-100" <div id="toolbar" class="aton-toolbar-top w-100"
data-controller="toolbar clipper" data-clipper-enabled-value="false"> 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">
<a class="btn aton-btn fs-5 p-1 text-white" href="/a/scaenae" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i> <i class="bi bi-map-fill"></i>
</a> </a>
<a class="btn aton-btn fs-5" title="Impostazioni" data-toolbar-target="settings" <a class="btn aton-btn fs-5 p-1 text-white" title="Impostazioni" data-toolbar-target="settings"
data-action="toolbar#toggleSettings"> data-action="toolbar#toggleSettings">
<i class="bi bi-gear-fill"></i> <i class="bi bi-gear-fill"></i>
</a> </a>
<a class="btn aton-btn fs-5" title="Attiva / disattiva sezionamento" <a class="btn aton-btn fs-5 p-1 text-white" title="Attiva / disattiva sezionamento"
data-clipper-target="trigger" data-action="clipper#toggleClipper"> data-clipper-target="trigger" data-action="clipper#toggleClipper">
<i class="bi bi-scissors"></i> <i class="bi bi-scissors"></i>
</a> </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 <div class="d-none w-25
position-absolute position-absolute
top-0 start-50 top-0 start-50
translate-middle bg-light 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 rounded-bottom-3
mt-4 text-dark text-center" mt-4 text-dark text-center"
id="clipper-bar" id="clipper-bar"
@@ -89,7 +95,7 @@
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" <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> data-clipper-target="axis" data-clipper-axis-param="z" data-action="clipper#clip" title="Sezione Z"></button>
</div> </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"> data-menu-target="trigger" data-action="menu#toggleMenu">
<i class="bi bi-list"></i> <i class="bi bi-list"></i>
</a> </a>

10
scenes/ssgp/index.js
View File

@@ -1,9 +1,9 @@
import { openScene } from "../../js/scene.js"; import { openScene } from "../../src/scene.js";
import { config } from "../../config.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 "../../js/utils/aton.js"; import { initAtonEvents } from "../../src/utils/aton.js";
initStimulus(); initStimulus();

0
js/controllers/clipper_controller.js → src/controllers/clipper_controller.js
View File

32
js/controllers/menu_controller.js → src/controllers/menu_controller.js
View File

@@ -6,7 +6,7 @@ import { traverseOntology } from "../ontology.js";
const html = String.raw; const html = String.raw;
const domParser = new DOMParser; const domParser = new DOMParser;
// TODO: hard-coded, but follows a convention... // 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 { export default class extends Controller {
static targets = ['trigger', 'layers', 'ontology']; static targets = ['trigger', 'layers', 'ontology'];
@@ -229,24 +229,26 @@ export default class extends Controller {
* @param {HTMLElement} tab Tab content element * @param {HTMLElement} tab Tab content element
*/ */
#buildOntologyMenu(ontology, tab) { #buildOntologyMenu(ontology, tab) {
console.debug(ontology);
const mainNode = tab.querySelector('#ontology-list'); 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) { for (let domain of ontology.domains) {
const domainItem = html` const domainItem = document.createElement('div');
<li class="list-group-item">${domain.label}</li> domainItem.className = 'border-start border-bottom rounded';
`; domainItem.textContent = domain.label;
domainList.innerHTML += domainItem; // Indentation...
} domainItem.classList.add(`ms-${domain.depth}`, `ps-${domain.depth}`, 'py-2');
if (domain.depth === 1) domainItem.classList.add('fw-bold');
domainList.appendChild(domainItem);
}
mainNode.appendChild(domainList);
} }
} }

10
js/controllers/modal_controller.js → src/controllers/modal_controller.js
View File

@@ -24,14 +24,16 @@ export default class extends Controller {
const content = document.createElement(contentType); const content = document.createElement(contentType);
if (contentType === 'img') { if (contentType === 'img') {
content.src = event.content?.imgSrc; content.src = event.content?.imgSrc;
content.alt = event.content?.description.trim();
content.classList.add('img-fluid'); 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(content);
const description = document.createElement('p');
description.textContent = event.content?.description.trim();
description.classList.add('py-3', 'my-0', 'fst-italic');
body.appendChild(description); body.appendChild(description);
bootstrap.Modal.getOrCreateInstance(modal).show(); bootstrap.Modal.getOrCreateInstance(modal).show();

0
js/controllers/settings_controller.js → src/controllers/settings_controller.js
View File

0
js/controllers/tabs_controller.js → src/controllers/tabs_controller.js
View File

20
js/controllers/toolbar_controller.js → src/controllers/toolbar_controller.js
View File

@@ -9,7 +9,7 @@ const panelHeader = html`
`; `;
export default class extends Controller { export default class extends Controller {
static targets = ['settings']; static targets = ['settings', 'fullscreen'];
connect() { connect() {
console.log('#toolbar controller connected'); console.log('#toolbar controller connected');
@@ -23,6 +23,24 @@ export default class extends Controller {
ATON.UI.showSidePanel({header: panelHeader}); ATON.UI.showSidePanel({header: panelHeader});
this.#buildSettingsPanel(ATON.UI.elSidePanel); 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 * Clone a <template> by id
* @param {String} id * @param {String} id

0
js/main.js → src/main.js
View File

0
js/map.js → src/map.js
View File

69
src/ontology.js Normal file
View File

@@ -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;
}

6
js/scene.js → src/scene.js
View File

@@ -132,10 +132,10 @@ function loadNodes(nodes) {
*/ */
function createSemanticNode(model, id) { function createSemanticNode(model, id) {
// Default/highlight materials for semantic node // Default/highlight materials for semantic node
let matSemDef = new THREE.MeshPhongMaterial({ let matSemDef = new THREE.MeshStandardMaterial({
color: '#ecee66', color: '#f7e6af',
transparent: true, transparent: true,
opacity: 0.3, opacity: 0.2,
}); });
let matSemHL = ATON.MatHub.materials.semanticShapeHL; let matSemHL = ATON.MatHub.materials.semanticShapeHL;

0
js/state.js → src/state.js
View File

0
js/utils/aton.js → src/utils/aton.js
View File

0
js/utils/clipping.js → src/utils/clipping.js
View File

0
js/utils/environment.js → src/utils/environment.js
View File

0
js/utils/nodeUtils.js → src/utils/nodeUtils.js
View File

0
js/utils/stimulus.js → src/utils/stimulus.js
View File