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

WIP: first reworking based on requirements

Browse Source 
NOTE: node loading logic not working yet!
This commit is contained in:
Nicolò P
2026-02-20 17:25:06 +01:00
parent 32424e7b0b
commit 2df5a71241
4 changed files with 125 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
js/ui.js
View File

@@ -12,21 +12,21 @@ UI.contentMenuTabs = `
<!-- Nav tabs -->
<ul class="nav nav-pills" id="content-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
<i class="bi bi-music-note-list me-1"></i> Media
<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="layer-tab" data-bs-toggle="tab" data-bs-target="#layer" type="button" role="tab" aria-controls="layer" aria-selected="false">
<i class="bi bi-stack me-1"></i> Layer
<button class="nav-link" id="media-tab" data-bs-toggle="tab" data-bs-target="#media" type="button" role="tab" aria-controls="media" aria-selected="true">
<i class="bi bi-diagram-3 me-1"></i> Contenuti
</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
<div class="tab-pane p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
<div class="tab-pane active p-3" id="layer" role="tabpanel" aria-labelledby="layer-tab" tabindex="0"></div>
<div class="tab-pane p-3" id="media" role="tabpanel" aria-labelledby="media-tab" tabindex="0"></div>
</div>
`;
@@ -166,20 +166,11 @@ UI.toggleSettingsPanel = function(triggerId) {
<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(
@@ -197,18 +188,6 @@ UI.toggleSettingsPanel = function(triggerId) {
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);
}
);
});
}
/**
@@ -246,19 +225,12 @@ UI.toggleContentMenu = function(triggerId) {
btn.addEventListener('click', () => {
ATON.UI.setSidePanelRight();
ATON.UI.showSidePanel({header: 'Contenuti'});
ATON.UI.showSidePanel({header: 'Menu'});
// Append tabs, then tab panes
const tabs = this.domParser.parseFromString(UI.contentMenuTabs, 'text/html');
ATON.UI.elSidePanel.appendChild(tabs.querySelector('#content-tabs'));
ATON.UI.elSidePanel.appendChild(tabs.querySelector('.tab-content'));
this.buildLayersMenu(AppState.nodes, ATON.UI.elSidePanel.querySelector('#layer'));
// This is just an example, at the moment... to be revised with config -> markers (scenes) -> menu
if (AppState.sceneHasAudio) {
let btn = this.domParser.parseFromString(UI.audioExample, 'text/html');
const audio = btn.querySelector('#audio-example');
ATON.UI.elSidePanel.querySelector('#media').appendChild(audio);
}
});
}
/**