← back to Quadrille Showroom

PJ hero framing: focused board presents FLAT/dead-on (near-flat default) not a 65° V; add user-adjustable Wing° angle slider (0-90°, persisted, live); keep splay as walk-up browse gesture

b1e3c757a56f4593cfb715e2ca22c87a3e25e0e5 · 2026-06-27 11:05:51 -0700 · Steve

Files touched

• M public/js/showroom.js
• M public/showroom.html

Diff

commit b1e3c757a56f4593cfb715e2ca22c87a3e25e0e5
Author: Steve <steve@designerwallcoverings.com>
Date:   Sat Jun 27 11:05:51 2026 -0700

    PJ hero framing: focused board presents FLAT/dead-on (near-flat default) not a 65° V; add user-adjustable Wing° angle slider (0-90°, persisted, live); keep splay as walk-up browse gesture
---
 public/js/showroom.js | 29 +++++++++++++++++++++++++----
 public/showroom.html  |  3 +++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/public/js/showroom.js b/public/js/showroom.js
index f13bcc0..891fb6f 100644
--- a/public/js/showroom.js
+++ b/public/js/showroom.js
@@ -40,7 +40,13 @@ let wallsAutoClad = true;    // focusing a wing clads the room walls in its patt
 // like a sample book — left leaf mirrored, right leaf normal (same pattern, both sides).
 let proximityEnabled = true;
 const PROX_FT = 1.22;        // 4 feet, in meters
-let BOOK_OPEN = 1.134;       // 65° leaf hinge when open (Steve) — panels present 1 design
+let BOOK_OPEN = 1.134;       // 65° leaf splay — the walk-up BROWSE gesture only
+// Open-board VIEW angle when focused/perused — USER-ADJUSTABLE (slider, persisted).
+// Near-flat default so the design reads as a flat, dead-on PJ hero panel, not a V.
+let VIEW_OPEN = (function () {
+  const v = parseFloat(localStorage.getItem('qh_view_deg'));
+  return (v >= 0 && v <= 90 ? v : 8) * Math.PI / 180;
+})();
 
 // SHARED materials — key perf optimization
 const MAT = {};
@@ -1420,9 +1426,10 @@ function updateBooks(dt) {
   const k = Math.min(1, dt * 6); // ease toward target
   for (let i = 0; i < wingBoards.length; i++) {
     const p = wingBoards[i], ud = p.userData;
-    const wantOpen = (p === nearest) || (p === focusedWing && !ud.panelClosed);
-    const target = wantOpen ? BOOK_OPEN : 0;
-    if (wantOpen && !ud.imageLoaded) { ud.imageLoaded = true; loadWingBook(p); }
+    const isFocus = (p === focusedWing && !ud.panelClosed);
+    // Focused board → flat dead-on VIEW angle; a walked-up neighbour → browse splay.
+    const target = isFocus ? VIEW_OPEN : (p === nearest ? BOOK_OPEN : 0);
+    if ((isFocus || p === nearest) && !ud.imageLoaded) { ud.imageLoaded = true; loadWingBook(p); }
     if (Math.abs(ud.bookOpen - target) > 0.0008) {
       ud.bookOpen += (target - ud.bookOpen) * k;
     } else if (ud.bookOpen !== target) {
@@ -1667,6 +1674,20 @@ function initHUD() {
     stopPeruse(); currentSort = sortSel.value; await fetchWindow(0); rebuildWingWall();
   });
 
+  // Wing-angle slider — live, persisted. Controls the open-board VIEW angle.
+  const ang = document.getElementById('angle-range');
+  const angVal = document.getElementById('angle-val');
+  if (ang) {
+    ang.value = Math.round(VIEW_OPEN * 180 / Math.PI);
+    if (angVal) angVal.textContent = ang.value + '°';
+    ang.addEventListener('input', () => {
+      const deg = parseInt(ang.value) || 0;
+      VIEW_OPEN = deg * Math.PI / 180;            // updateBooks eases open boards to it live
+      localStorage.setItem('qh_view_deg', deg);
+      if (angVal) angVal.textContent = deg + '°';
+    });
+  }
+
   const dens = document.getElementById('density-range');
   if (dens) dens.addEventListener('change', async () => {
     stopPeruse(); windowSize = parseInt(dens.value) || 50; await fetchWindow(0); rebuildWingWall();
diff --git a/public/showroom.html b/public/showroom.html
index a8d3628..2c7599d 100644
--- a/public/showroom.html
+++ b/public/showroom.html
@@ -135,6 +135,9 @@
       <span id="density-wrap" title="Wings per wall">
         <span>Boards</span><input type="range" id="density-range" min="4" max="12" step="2" value="8">
       </span>
+      <span id="density-wrap" title="Open-board angle (0°=flat, dead-on)">
+        <span>Wing&deg;</span><input type="range" id="angle-range" min="0" max="90" step="5" value="8"><span id="angle-val">8&deg;</span>
+      </span>
     </div>
 
     <div id="bottom-bar">

← a08b36a PJ polish: true hi-res (4096px) engraved-brass wall wordmark  ·  back to Quadrille Showroom  ·  Floor normal+roughness maps derived locally from floor-oak.p df96412 →