← back to Wallco Ai
room setting: 12×12ft square room + ft-in rulers framing it + 24/36/54 presets + Furniture/Extract buttons
a174bb9be813c73eef94aef8e6565e575a234f26 · 2026-05-27 16:25:07 -0700 · Steve Abrams
- WALL_INCHES 96→144; room forced square in JS (true 12′×12′), so all lines render
at a consistent realistic room scale.
- room rulers (H+V) in feet-inches 0′→12′ frame the room; pattern rulers stay in
inches (W×H). Width presets 24/36/54″ (54 = commercial standard).
- Furniture button cycles console/sofa/bed silhouettes; Extract-elements button
(→ /api/admin/drunk/extract) — both in a column right of the room.
Files touched
M public/admin/drunk-curator.html
Diff
commit a174bb9be813c73eef94aef8e6565e575a234f26
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 27 16:25:07 2026 -0700
room setting: 12×12ft square room + ft-in rulers framing it + 24/36/54 presets + Furniture/Extract buttons
- WALL_INCHES 96→144; room forced square in JS (true 12′×12′), so all lines render
at a consistent realistic room scale.
- room rulers (H+V) in feet-inches 0′→12′ frame the room; pattern rulers stay in
inches (W×H). Width presets 24/36/54″ (54 = commercial standard).
- Furniture button cycles console/sofa/bed silhouettes; Extract-elements button
(→ /api/admin/drunk/extract) — both in a column right of the room.
---
public/admin/drunk-curator.html | 71 +++++++++++++++++++++++++++--------------
1 file changed, 47 insertions(+), 24 deletions(-)
diff --git a/public/admin/drunk-curator.html b/public/admin/drunk-curator.html
index dbde684..30e732f 100644
--- a/public/admin/drunk-curator.html
+++ b/public/admin/drunk-curator.html
@@ -26,7 +26,11 @@
.extracted{position:fixed;top:60px;left:50%;transform:translateX(-50%);z-index:99;background:#1f6a2c;color:#fff;padding:8px 16px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:10px;}
.extracted img{height:42px;width:42px;object-fit:contain;background:#fff;border-radius:6px;}
/* right: CSS room setting */
- .room{position:relative;width:100%;height:100%;background:#cfc7ba;}
+ .room{position:relative;background:#cfc7ba;flex:0 0 auto;}
+ .roomrow{display:flex;gap:8px;align-items:flex-start;height:100%;justify-content:center;}
+ .roombtns{display:flex;flex-direction:column;gap:8px;padding-top:14px;}
+ .rb{background:#1d2023;color:var(--ink);border:1px solid #3a3f44;border-radius:9px;padding:11px 12px;font:600 12px sans-serif;cursor:pointer;white-space:nowrap;}
+ .rb:hover{filter:brightness(1.3);} .rb:active{transform:scale(.96);}
.wall{position:absolute;inset:0 0 24% 0;background-repeat:repeat;background-position:center top;background-size:24% auto;filter:brightness(.98);}
.wall::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 35%,transparent 55%,rgba(0,0,0,.28));} /* gentle room light */
.floor{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(#b9a684,#8d7a5b);}
@@ -104,7 +108,10 @@
<!-- vase + stems -->
<path d="M212 36 q-10 24 0 24 h22 q10 0 0 -24 z"/>
<path d="M220 36 q-6 -22 -16 -30 M226 36 q2 -24 14 -30 M223 36 q0 -26 0 -34" stroke="#2c2620" stroke-width="2.4" fill="none" stroke-linecap="round"/>
- </g></symbol></svg>
+ </g></symbol>
+ <symbol id="sofa" viewBox="0 0 320 150"><g fill="#2c2620"><rect x="30" y="70" width="260" height="55" rx="12"/><rect x="26" y="52" width="42" height="64" rx="12"/><rect x="252" y="52" width="42" height="64" rx="12"/><rect x="72" y="58" width="176" height="22" rx="9"/><rect x="46" y="123" width="14" height="20"/><rect x="260" y="123" width="14" height="20"/></g></symbol>
+ <symbol id="bed" viewBox="0 0 320 150"><g fill="#2c2620"><rect x="36" y="36" width="30" height="100" rx="4"/><rect x="36" y="88" width="248" height="40" rx="6"/><rect x="78" y="70" width="120" height="22" rx="9"/><rect x="50" y="128" width="12" height="14"/><rect x="270" y="122" width="12" height="20"/></g></symbol>
+ </svg>
<script>
const $=s=>document.querySelector(s);
@@ -113,11 +120,15 @@ const CATEGORY=new URLSearchParams(location.search).get('category')||'';
const q=s=>ADMIN?(s+(s.includes('?')?'&':'?')+'admin='+encodeURIComponent(ADMIN)):s;
let QUEUE=[], i=0, hot=0, not=0, streak=0, decided={};
// Repeat-scale preview: show the flat tile stretched to a real print width with an
-// inch ruler. 24/36/52″ are the standard wallpaper/panel widths. Persists.
-const SCALE_WIDTHS = [24, 36, 52]; // only these print widths — no slider
+// inch ruler. 24/36/54″ are the standard wallpaper/panel widths. Persists.
+const SCALE_WIDTHS = [24, 36, 54]; // only these print widths — no slider
const snapScale = n => SCALE_WIDTHS.reduce((a,b)=>Math.abs(b-n)<Math.abs(a-n)?b:a, 36);
let scaleInches = snapScale(parseInt(localStorage.getItem('drunk_scale_in'))||36);
-const WALL_INCHES = 96; // the room pane represents ~an 8ft wall, so the repeat shows at true relative size
+const WALL_INCHES = 144; // the room pane represents a 12ft × 12ft room (Steve 2026-05-27) — repeat shows at true relative size
+const FURN = ['console', 'sofa', 'bed']; // furniture silhouettes the "Furniture" button cycles for staging/scale
+let furnIdx = (parseInt(localStorage.getItem('drunk_furn')) || 0) % FURN.length;
+function genFurniture(){ furnIdx = (furnIdx + 1) % FURN.length; localStorage.setItem('drunk_furn', furnIdx);
+ const u = document.querySelector('#furn use'); if(u) u.setAttribute('href', '#' + FURN[furnIdx]); }
function setScale(n){
scaleInches = snapScale(parseInt(n)||36);
localStorage.setItem('drunk_scale_in', scaleInches);
@@ -134,7 +145,7 @@ function applyScale(){
const wrap=document.querySelector('.scalewrap'); if(!wrap) return;
const pane=wrap.closest('.pane'); if(!pane) return;
const avail=Math.max(120, Math.min(pane.clientWidth-12, pane.clientHeight-30)); // square fits both dims, leave room for ruler
- const ppi=avail/52; // 52″ = the widest, fills the pane
+ const ppi=avail/54; // 54″ = the widest, fills the pane
const W=Math.round(scaleInches*ppi);
const img=document.getElementById('scaleimg'); const ruler=document.getElementById('ruler');
if(img){ img.style.width=W+'px'; img.style.height=W+'px'; }
@@ -165,23 +176,29 @@ function applyScale(){
// Room wall rulers in FEET+INCHES. Wall = WALL_INCHES (96″/8ft) wide; height is
// derived from the rendered wall's aspect so the ruler matches what's shown.
function drawRoomRulers(){
- const room=document.querySelector('.room'), wall=document.querySelector('.wall'); if(!room||!wall) return;
- const wW=wall.clientWidth, wH=wall.clientHeight; if(!wW||!wH) return;
- const wHin=Math.round(WALL_INCHES*wH/wW);
+ const room=document.getElementById('room'); if(!room) return;
+ const row=room.closest('.roomrow'), pane=room.closest('.pane');
+ const btns=row?row.querySelector('.roombtns'):null;
+ // force the room SQUARE → true 12′×12′; side fits the pane minus the button column
+ const availW=(row?row.clientWidth:room.clientWidth)-(btns?btns.offsetWidth:0)-16;
+ const availH=(pane?pane.clientHeight:room.clientHeight)-26;
+ const side=Math.max(180, Math.min(availW, availH));
+ room.style.width=side+'px'; room.style.height=side+'px';
+ const ppi=side/WALL_INCHES;
const fmt=v=>{const f=Math.floor(v/12), i=Math.round(v%12); return i?`${f}′${i}″`:`${f}′`;};
- const tag=document.getElementById('roomtag'); if(tag) tag.textContent=`room setting · ${fmt(WALL_INCHES)} × ${fmt(wHin)} wall (ft·in)`;
+ const tag=document.getElementById('roomtag'); if(tag) tag.textContent=`room setting · ${fmt(WALL_INCHES)} × ${fmt(WALL_INCHES)} room (ft·in)`;
const rh=document.getElementById('roomRulerH');
- if(rh){ rh.style.width=wW+'px'; let s='';
- for(let inch=0; inch<=WALL_INCHES; inch+=6){ const maj=inch%12===0, x=(inch*wW/WALL_INCHES).toFixed(1);
+ if(rh){ rh.style.width=side+'px'; let s='';
+ for(let inch=0; inch<=WALL_INCHES; inch+=6){ const maj=inch%12===0, x=(inch*ppi).toFixed(1);
s+=`<div class="rt${maj?' maj':''}" style="left:${x}px"></div>`;
if(maj) s+=`<div class="rl" style="left:${x}px">${fmt(inch)}</div>`; }
rh.innerHTML=s; }
- const rv2=document.getElementById('roomRulerV');
- if(rv2){ rv2.style.height=wH+'px'; let s='';
- for(let inch=0; inch<=wHin; inch+=6){ const maj=inch%12===0, y=(inch*wH/wHin).toFixed(1);
+ const rv=document.getElementById('roomRulerV');
+ if(rv){ rv.style.height=side+'px'; let s='';
+ for(let inch=0; inch<=WALL_INCHES; inch+=6){ const maj=inch%12===0, y=(inch*ppi).toFixed(1);
s+=`<div class="rt${maj?' maj':''}" style="top:${y}px"></div>`;
if(maj) s+=`<div class="rl" style="top:${y}px">${fmt(inch)}</div>`; }
- rv2.innerHTML=s; }
+ rv.innerHTML=s; }
}
addEventListener('resize',()=>{ if(document.querySelector('.scalewrap')) applyScale(); });
// Move through the queue WITHOUT deciding — lets Steve go back/forward to review
@@ -207,20 +224,26 @@ function render(){
<div class="ruler" id="ruler"></div>
</div>
</div>
- <div class="pane"><span class="tag" id="roomtag">room setting · 8′ wall (ft·in)</span>
- <div class="room">
- <div class="wall" style="background-image:url('${src}')"></div>
- <div class="rruler h" id="roomRulerH"></div>
- <div class="rruler v" id="roomRulerV"></div>
- <div class="baseboard"></div><div class="floor"></div>
- <svg class="furn"><use href="#console"></use></svg>
+ <div class="pane"><span class="tag" id="roomtag">room setting · 12′ × 12′ room (ft·in)</span>
+ <div class="roomrow">
+ <div class="room" id="room">
+ <div class="wall" style="background-image:url('${src}')"></div>
+ <div class="rruler h" id="roomRulerH"></div>
+ <div class="rruler v" id="roomRulerV"></div>
+ <div class="baseboard"></div><div class="floor"></div>
+ <svg class="furn" id="furn"><use href="#${FURN[furnIdx]}"></use></svg>
+ </div>
+ <div class="roombtns">
+ <button class="rb" onclick="genFurniture()">🪑 Furniture</button>
+ <button class="rb" onclick="extract()">✂️ Extract elements</button>
+ </div>
</div>
</div>
</div>
<div class="scalebar">📏 Width
<button class="sb" data-in="24" onclick="setScale(24)">24″</button>
<button class="sb" data-in="36" onclick="setScale(36)">36″</button>
- <button class="sb" data-in="52" onclick="setScale(52)">52″</button>
+ <button class="sb" data-in="54" onclick="setScale(54)">54″</button>
<span><b id="scalenum">${scaleInches}</b>″ repeat · ruler in inches</span>
</div>
<div class="meta"><span>#${d.id} · ${d.category||''}</span><span>🕓 ${fmtDate(d.created_at)}</span></div>
← a68dbc6 drunk-curator: add dual rulers — pattern in inches (W×H), ro
·
back to Wallco Ai
·
curator: 24/36/54 widths + 12x12 sq room (fix 0x0 wall) + dr 39a931a →