Styling changes + tooltips and defaults

config.js

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

css/app.css

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

js/controllers/menu_controller.js

@@ -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 id = event?.params.node;
-        const status = event.target.checked;
+        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) {

js/scene.js

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

js/utils/environment.js

@@ -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 {Vector3} vector - An object with x,y,z coordinates
- * @param {THREE.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.classList.add('ms-1');
-    lightSlider.querySelector('input').step = step;
+    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.classList.add('ms-1');
-    exposureSlider.querySelector('input').step = step;
+    let input = exposureSlider.querySelector('input');
+    if (input) input.step = step;
 
     return exposureSlider;
 }

scenes/ssgp/index.html

@@ -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">
+            <details class="w-max-content">
-                <i class="bi bi-lightbulb me-1"></i> Illuminazione
+                <summary class="fs-5 ms-3 mb-3 mt-3">
-            </h2>
+                    <i class="bi bi-lightbulb me-1"></i> Illuminazione
-            <h3 class="fs-6 ms-4 mb-3 mt-3">
+                </summary>
-                Direzione (x, y, z)
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
-            </h3>
+                    Direzione (x, y, z)
-            <div data-sliders-container></div>
+                </h3>
-            <h3 class="fs-6 ms-4 mb-3 mt-3">
+                <div class="border border-1 rounded ms-4" data-sliders-container></div>
-                Intensità
+                <h3 class="fs-6 p-2 ms-4 mb-1 mt-3 border border-1 rounded bg-info-subtle">
-            </h3>
+                    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>
-            <div data-slider-exposure-container></div>
+                </h3>
-            <h2 class="fs-5 ms-2 mb-3 mt-3">
+                <div class="ms-4 border border-1 rounded" data-slider-exposure-container></div>
-                <i class="bi bi-brightness-high me-1"></i> Ambiente
+            </details>
-            </h2>
+            <details>
-            <div class="form-check form-switch ms-4 mt-2">
+                <summary class="fs-5 ms-3 mb-3 mt-3">
-                <input class="form-check-input" type="checkbox" role="switch"
+                    <i class="bi bi-brightness-high me-1"></i> Ambiente
-                    data-settings-target="ao" data-action="change->settings#toggleAO">
+                </summary>
-                <label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
+                <div class="form-check form-switch ms-4 mt-4">
-            </div>
+                    <input class="form-check-input" type="checkbox" role="switch"
-            <div class="form-check form-switch ms-4 mt-2">
+                        data-settings-target="ao" data-action="change->settings#toggleAO">
-                <input class="form-check-input" type="checkbox" role="switch"
+                    <label class="form-check-label" for="aoSwitch">Ambient occlusion</label>
-                    data-settings-target="shadows" data-action="change->settings#toggleShadows">
+                </div>
-                <label class="form-check-label" for="shadowsSwitch">Ombre</label>
+                <div class="form-check form-switch ms-4 mt-2">
-            </div>
+                    <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>