← back to Wallco Ai
drunk-curator: add dual rulers — pattern in inches (W×H), room wall in feet+inches (W×H)
a68dbc64cbc368db971d5949070c53f14a8faad6 · 2026-05-27 16:16:01 -0700 · Steve Abrams
Pattern pane: vertical inch ruler added alongside the existing horizontal one +
tag shows 'pattern N″ × N″'. Room pane: horizontal + vertical FEET+INCHES rulers
overlaid on the 96″ wall edges, height derived from the rendered wall aspect;
tag shows the wall size (e.g. 8′ × 4′6″).
Files touched
M public/admin/drunk-curator.html
Diff
commit a68dbc64cbc368db971d5949070c53f14a8faad6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Wed May 27 16:16:01 2026 -0700
drunk-curator: add dual rulers — pattern in inches (W×H), room wall in feet+inches (W×H)
Pattern pane: vertical inch ruler added alongside the existing horizontal one +
tag shows 'pattern N″ × N″'. Room pane: horizontal + vertical FEET+INCHES rulers
overlaid on the 96″ wall edges, height derived from the rendered wall aspect;
tag shows the wall size (e.g. 8′ × 4′6″).
---
public/admin/drunk-curator.html | 59 ++++++++++++++++++++++++++++++++++++++---
1 file changed, 56 insertions(+), 3 deletions(-)
diff --git a/public/admin/drunk-curator.html b/public/admin/drunk-curator.html
index f22c8eb..dbde684 100644
--- a/public/admin/drunk-curator.html
+++ b/public/admin/drunk-curator.html
@@ -61,6 +61,20 @@
.ruler .tick{position:absolute;top:0;width:1px;height:5px;background:#7a7a7a;}
.ruler .tick.maj{height:10px;background:#cfcfcf;}
.ruler .lab{position:absolute;top:8px;transform:translateX(-50%);font:700 8.5px sans-serif;color:#cfcfcf;white-space:nowrap;}
+ /* vertical inch ruler for the pattern HEIGHT (sits left of the tile) */
+ .tilebox{position:relative;display:flex;align-items:flex-start;gap:3px;}
+ .ruler.vert{height:auto;width:18px;}
+ .ruler.vert .tick{top:auto;right:0;left:auto;width:5px;height:1px;}
+ .ruler.vert .tick.maj{width:10px;}
+ .ruler.vert .lab{top:auto;right:9px;left:auto;transform:translateY(-50%);}
+ /* room wall rulers — FEET+INCHES, overlaid on the wall's top + left edges */
+ .rruler{position:absolute;z-index:6;pointer-events:none;}
+ .rruler.h{top:0;left:0;height:13px;} .rruler.v{top:0;left:0;width:13px;}
+ .rruler .rt{position:absolute;background:#fff;opacity:.85;}
+ .rruler.h .rt{top:0;width:1px;height:5px;} .rruler.h .rt.maj{height:9px;}
+ .rruler.v .rt{left:0;height:1px;width:5px;} .rruler.v .rt.maj{width:9px;}
+ .rruler .rl{position:absolute;font:800 8px sans-serif;color:#fff;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.9);}
+ .rruler.h .rl{top:5px;transform:translateX(-50%);} .rruler.v .rl{left:5px;transform:translateY(-50%);}
</style>
</head>
<body>
@@ -134,6 +148,40 @@ function applyScale(){
}
ruler.innerHTML=h;
}
+ // vertical inch ruler — pattern HEIGHT (tile is square, so = scaleInches)
+ const rv=document.getElementById('rulerV'), svh=document.getElementById('scalevalh');
+ if(svh) svh.textContent=scaleInches;
+ if(rv){
+ rv.style.height=W+'px'; let h='';
+ for(let inch=0; inch<=scaleInches; inch++){
+ const y=(inch*ppi).toFixed(1), maj=(inch%12===0)||inch===scaleInches;
+ h+=`<div class="tick${maj?' maj':''}" style="top:${y}px"></div>`;
+ if(maj) h+=`<div class="lab" style="top:${y}px">${inch}″</div>`;
+ }
+ rv.innerHTML=h;
+ }
+ drawRoomRulers();
+}
+// 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 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 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);
+ 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);
+ 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; }
}
addEventListener('resize',()=>{ if(document.querySelector('.scalewrap')) applyScale(); });
// Move through the queue WITHOUT deciding — lets Steve go back/forward to review
@@ -150,15 +198,20 @@ function render(){
const d=QUEUE[i], src=`/designs/img/by-id/${d.id}`;
$('#stage').innerHTML=`
<div class="panes">
- <div class="pane"><span class="tag">flat tile · <span id="scaleval">${scaleInches}</span>″ wide</span>
+ <div class="pane"><span class="tag">flat tile · pattern <span id="scaleval">${scaleInches}</span>″ × <span id="scalevalh">${scaleInches}</span>″ (in)</span>
<div class="scalewrap">
- <div class="scaleimg" id="scaleimg"><img class="tile" src="${src}" onerror="this.style.opacity=.25"><div class="eboxes" id="eboxes"></div></div>
+ <div class="tilebox">
+ <div class="ruler vert" id="rulerV"></div>
+ <div class="scaleimg" id="scaleimg"><img class="tile" src="${src}" onerror="this.style.opacity=.25"><div class="eboxes" id="eboxes"></div></div>
+ </div>
<div class="ruler" id="ruler"></div>
</div>
</div>
- <div class="pane"><span class="tag">room setting</span>
+ <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>
← b0965ac drunk-curator scale: drop slider, only 24/36/52in presets (s
·
back to Wallco Ai
·
room setting: 12×12ft square room + ft-in rulers framing it a174bb9 →