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

Styling changes + tooltips and defaults

Browse Source
This commit is contained in:
Nicolò P.
2026-05-11 11:31:38 +02:00
parent cabfe687e2
commit 589b551558
8 changed files with 142 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/icons/section_x.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 42 KiB

BIN
assets/icons/section_z.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 51 KiB

3
config.js
View File

@@ -16,11 +16,12 @@ const theater2Popup = `
export const config = {
scene : {
initialExposure: 0.7,
initialExposure: 0.85,
autoLP: false,
shadows: false,
initLightDir: [0.2,-0.3,-0.7],
initRotation: [0, 1.5, 0],
ambientOcclusion: false,
},
menu : {
//audioBtn1

94
css/app.css
View File

@@ -1,26 +1,114 @@
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
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');
}
/* 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;
}
}

11
js/controllers/menu_controller.js
View File

@@ -1,5 +1,5 @@
// Global ATON
import { Controller } from "@hotwired/stimulus"
import { Controller } from "@hotwired/stimulus";
import AppState from "../state.js";
import { traverseOntology } from "../ontology.js";
@@ -16,7 +16,6 @@ export default class extends Controller {
}
/**
* Open settings panel
* @param {Event} event
*/
async toggleMenu() {
ATON.UI.setSidePanelRight();
@@ -33,8 +32,8 @@ export default class extends Controller {
* The node's id
* @type {string}
*/
const id = event.params.node;
const status = event.target.checked;
const id = event?.params.node;
const status = event?.target?.checked;
ATON.getSceneNode(id).toggle(status);
AppState.normalizedNodes.find(n => n.id === id).active = status;
}
@@ -44,7 +43,7 @@ export default class extends Controller {
* @returns {DocumentFragment}
*/
#cloneTemplate(id) {
return document.getElementById(id).content.cloneNode(true);
return document.getElementById(id)?.content?.cloneNode(true);
}
/**
* Create the left-side settings panel
@@ -58,7 +57,7 @@ export default class extends Controller {
}
/**
* @todo Don't rebuild it every time, use caching, return a container with checkboxes
* @param {Array} nodes The normalized scene nodes (IDs and status)
* @param {Array<import("../state.js").NormalizedSceneNode>} nodes The normalized scene nodes (IDs and status)
* @param {HTMLElement} tab Tab content element
*/
#buildLayersMenu(nodes, tab) {

4
js/scene.js
View File

@@ -64,8 +64,8 @@ export function openScene (marker, nodes) {
ATON.setAutoLP(config.scene.autoLP);
AppState.lightProbe = config.scene.autoLP;
toggleAmbientOcclusion(true);
AppState.ambientOcclusion = true;
toggleAmbientOcclusion(config.scene.ambientOcclusion);
AppState.ambientOcclusion = config.scene.ambientOcclusion;
AppState.root = ATON.getRootScene();
}

23
js/utils/environment.js
View File

@@ -1,3 +1,5 @@
/** @import { Vector3 } from 'three' */
// Global ATON and THREE
import AppState from "../state.js";
@@ -7,8 +9,7 @@ import AppState from "../state.js";
*/
/**
*
* @param {THREE.Vector3} vector - An object with x,y,z coordinates
* @param {Vector3} vector - An object with x,y,z coordinates
*/
export function changeLightDirection(vector) {
ATON.setMainLightDirection(vector);
@@ -26,14 +27,12 @@ export function toggleAmbientOcclusion(isEnabled) {
* 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 {Array<Number>} range - The slider's range
* @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];
console.debug(currentVal);
const lightSlider = ATON.UI.createSlider({
range,
label,
@@ -48,19 +47,20 @@ export function createLightSlider(direction, label, range, step) {
},
});
lightSlider.classList.add('ms-4');
lightSlider.querySelector('input').step = step;
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 {Array<Number>} range - The slider's range
* @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 = AppState.exposure;
const currentVal = String(AppState.exposure);
const exposureSlider = ATON.UI.createSlider({
range,
@@ -74,8 +74,9 @@ export function createExposureSlider(label, range, step = 0.05) {
},
});
exposureSlider.classList.add('ms-4');
exposureSlider.querySelector('input').step = step;
exposureSlider.classList.add('ms-1');
let input = exposureSlider.querySelector('input');
if (input) input.step = step;
return exposureSlider;
}

54
scenes/ssgp/index.html
View File

@@ -98,30 +98,36 @@
<!-- Settings menu template (except dynamic light sliders) -->
<template id="tmpl-settings">
<div data-controller="settings">
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-lightbulb me-1"></i> Illuminazione
</h2>
<h3 class="fs-6 ms-4 mb-3 mt-3">
Direzione (x, y, z)
</h3>
<div data-sliders-container></div>
<h3 class="fs-6 ms-4 mb-3 mt-3">
Intensità
</h3>
<div data-slider-exposure-container></div>
<h2 class="fs-5 ms-2 mb-3 mt-3">
<i class="bi bi-brightness-high me-1"></i> Ambiente
</h2>
<div class="form-check form-switch ms-4 mt-2">
<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</label>
</div>
<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>