Saturated steam 10 bar
Condensate return
@@ -162,6 +213,7 @@ footer{flex:0 0 210px;display:grid;grid-template-columns:1.1fr 1fr 0.9fr;gap:10p
'use strict';
const NS='http://www.w3.org/2000/svg';
const $=id=>document.getElementById(id);
+const COMPACT=matchMedia('(max-height:560px)');
const L={pipes:$('lPipes'),mach:$('lMach'),tok:$('lTok'),top:$('lTop')};
function el(tag,attrs,parent,text){const e=document.createElementNS(NS,tag);for(const k in attrs)e.setAttribute(k,attrs[k]);if(text!=null)e.textContent=text;(parent||L.mach).appendChild(e);return e;}
const rnd=(a,b)=>a+Math.random()*(b-a);
@@ -716,7 +768,8 @@ const DETAILS={
hvac:{t:'Whole-factory HVAC',w:'The press room is held at 20 to 26 °C and 35 to 60 % RH per the Newbilt site requirements; galvanics, archive and audio rooms have their own zones. Temperature, humidity and particulate per zone are logged with production.',c:['Temperature, RH and PM per zone','Correlate any production window with plant conditions'],f:['~100 to 200 kW peak (estimate)','~1,500 m² conditioned']},
};
let selected=null;
-function select(id){
+function select(id,quiet){
+ if(!quiet&&COMPACT.matches)showPanel('detail',true);
if(selected)selected.g.classList.remove('sel');selected=M[id];selected.g.classList.add('sel');
const d=DETAILS[id];if(!d)return;
const p=$('detail');p.innerHTML='';
@@ -733,11 +786,75 @@ $('btnSteam').addEventListener('click',()=>{S.boiler.alarmUntil=S.t+22;log('Boil
$('btnLot').addEventListener('click',()=>{if(S.t
{if(e.code==='Space'&&e.target===document.body){e.preventDefault();$('btnPlay').click();}});
+/* ------------------------------------------------------------------ touch: pan, zoom, panel sheet */
+// The drawing zooms by changing the viewBox (same aspect ratio as the full
+// plant), so every coordinate in the sim stays as it is.
+const SV=$('svg'),BASE={w:1800,h:740},ZMAX=5,VB={x:0,y:0,w:BASE.w};
+function applyVB(){
+ VB.w=Math.min(BASE.w,Math.max(BASE.w/ZMAX,VB.w));const h=VB.w*BASE.h/BASE.w;
+ VB.x=Math.min(BASE.w-VB.w,Math.max(0,VB.x));VB.y=Math.min(BASE.h-h,Math.max(0,VB.y));
+ SV.setAttribute('viewBox',VB.x.toFixed(1)+' '+VB.y.toFixed(1)+' '+VB.w.toFixed(1)+' '+h.toFixed(1));
+ SV.classList.toggle('zoomed',VB.w{
+ if(e.pointerType==='mouse'&&e.button!==0)return;
+ PTR.set(e.pointerId,{x:e.clientX,y:e.clientY});
+ if(PTR.size===1)travel=0;
+ if(PTR.size===2)pinch=pinchState();
+});
+SV.addEventListener('pointermove',e=>{
+ const prev=PTR.get(e.pointerId);if(!prev)return;
+ const cur={x:e.clientX,y:e.clientY};PTR.set(e.pointerId,cur);
+ if(PTR.size===1){
+ travel+=Math.abs(cur.x-prev.x)+Math.abs(cur.y-prev.y);
+ // capture only once it is a drag, so a tap still clicks the station
+ if(travel>8){if(!SV.hasPointerCapture(e.pointerId))SV.setPointerCapture(e.pointerId);SV.classList.add('dragging');panBy(cur.x-prev.x,cur.y-prev.y);}
+ }else if(PTR.size===2&&pinch){
+ travel=99;const n=pinchState();
+ panBy(n.x-pinch.x,n.y-pinch.y);if(pinch.d>0)zoomAt(n.x,n.y,n.d/pinch.d);pinch=n;
+ }
+});
+function ptrUp(e){PTR.delete(e.pointerId);if(PTR.size<2)pinch=null;if(!PTR.size)SV.classList.remove('dragging');}
+['pointerup','pointercancel'].forEach(t=>SV.addEventListener(t,ptrUp));
+// a drag or pinch must not also select whatever is under the finger
+SV.addEventListener('click',e=>{if(travel>8){e.stopPropagation();e.preventDefault();}},true);
+SV.addEventListener('wheel',e=>{e.preventDefault();zoomAt(e.clientX,e.clientY,Math.exp(-e.deltaY*(e.deltaMode?0.05:0.0015)));},{passive:false});
+$('zIn').addEventListener('click',()=>zoomMid(1.5));
+$('zOut').addEventListener('click',()=>zoomMid(1/1.5));
+$('zFit').addEventListener('click',()=>{VB.x=0;VB.y=0;VB.w=BASE.w;applyVB();});
+document.addEventListener('keydown',e=>{
+ if(e.target!==document.body)return;
+ if(e.key==='+'||e.key==='=')zoomMid(1.5);else if(e.key==='-')zoomMid(1/1.5);else if(e.key==='0')$('zFit').click();
+});
+// Short screens: Detail / Log / Legend open one at a time as a sheet.
+function showPanel(name,keepOpen){
+ // a View button toggles its panel; picking a station always opens Detail
+ const open=!!name&&(keepOpen||!(document.body.dataset.panel===name&&document.body.classList.contains('sheet')));
+ if(open)document.body.dataset.panel=name;
+ document.body.classList.toggle('sheet',open);
+ document.querySelectorAll('#views button[data-view]').forEach(b=>b.classList.toggle('on',b.dataset.view===document.body.dataset.panel));
+ $('btnInfo').classList.toggle('on',open);
+}
+document.querySelectorAll('#views button[data-view]').forEach(b=>b.addEventListener('click',()=>showPanel(b.dataset.view,true)));
+$('sheetClose').addEventListener('click',()=>showPanel(null));
+$('btnInfo').addEventListener('click',()=>showPanel(document.body.dataset.panel||'detail'));
+const HDR=document.querySelector('header');
+new ResizeObserver(()=>document.documentElement.style.setProperty('--hdrH',HDR.offsetHeight+'px')).observe(HDR);
+
/* ------------------------------------------------------------------ bootstrap */
S.press.rack.push({id:'PR-26-041',stamper:'S-2261',color:PALETTE[41%PALETTE.length]});
log('Shift start 08:00. Boiler at pressure, chiller online, HVAC in range.','ok');
log('Material lab: lot 26-0912 released (moisture 0.03 %, heat stability OK, ΔE 0.3)','ok');
-select('press');
+select('press',true);
let last=performance.now();
function frame(now){
diff --git a/site/public/index.html b/site/public/index.html
index 0e86885..09cd2ec 100644
--- a/site/public/index.html
+++ b/site/public/index.html
@@ -57,7 +57,8 @@
The whole plant animated, from PVC intake and the material lab
through extruder, press, trim, optical inspection, finishing,
packaging and fulfillment, with the metal path, utilities and energy
- alongside. Every station is clickable.
+ alongside. Every station is clickable; on a phone, turn it sideways
+ and pinch to zoom.