Normalise ep4 to viewer.html (drop view.html); sidebar height now tracks the video column

ep0/viewer.html

@@ -56,6 +56,9 @@ canvas{width:100%;display:block;cursor:pointer}
 .tac-legend .grad{display:inline-block;width:70px;height:8px;border-radius:2px}
 .tac-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1b2028;border:1px solid #2a3340}
 @media(max-width:1200px){.layout{grid-template-columns:1fr}}
+
+.layout{align-items:start}
+.sidecol>.panel:first-child{flex:0 0 auto;min-height:60px;overflow:auto}
 </style></head><body>
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
@@ -219,7 +222,7 @@ function handLayout(mirror){
   const U=8.8, PX=14, PY=150, GAP=1.5;              // 手掌网格单位
   const CW=9.5,CH=5.4,G=1.3, PH=8*(CH+G)-G;         // 指尖阵列 20.3 x 52.3
   // 从左到右: 小指, 无名指, 中指, 食指(食指紧邻右侧拇指)
-  const FING=[['little',64,42,40],['ring',48,76,18],['middle',32,110,6],['index',16,140,20]];
+  const FING=[['little',64,42,70],['ring',48,76,48],['middle',32,110,36],['index',16,140,50]];
   outline.push({x:10,y:146,w:140,h:131,r:19,palm:true});          // 手掌轮廓(完整掌面)
   outline.push({x:40,y:275,w:56,h:19,r:9});                       // 手腕
   for(const [nm,off,cx,top] of FING){
@@ -255,8 +258,16 @@ function handLayout(mirror){
 }
 
 const HANDS=[{name:'left',base:0,lay:handLayout(true)},{name:'right',base:TAC_N,lay:handLayout(false)}];
+// 内容包围盒: 缩放时按它算, 避免上下留白吃掉尺寸
+const BBOX=(function(){var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+  HANDS.forEach(function(h){h.lay.cells.concat(h.lay.outline).forEach(function(o){
+    var a=o.rot||0,ca=Math.cos(a),sa=Math.sin(a);
+    [[0,0],[o.w,0],[0,o.h],[o.w,o.h]].forEach(function(p){        // 旋转矩形的四个真实角点
+      var X=o.x+p[0]*ca-p[1]*sa, Y=o.y+p[0]*sa+p[1]*ca;
+      x0=Math.min(x0,X);y0=Math.min(y0,Y);x1=Math.max(x1,X);y1=Math.max(y1,Y);});});});
+  return {x:x0-2,y:y0-2,w:x1-x0+4,h:y1-y0+4};})();
 const cHand=document.getElementById('cHand'), tacTip=document.getElementById('tacTip');
-const HW=372, HH=210, HSC=Math.min(HH/300,(HW/2-8)/220);
+let HW=372, HH=210, HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
 cHand.style.width=HW+'px'; cHand.style.height=HH+'px';
 document.getElementById('tacGrad').style.background='linear-gradient(90deg,'+RAMP.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`).join(',')+')';
 document.getElementById('tacPeakLbl').textContent=TAC_PEAK;
@@ -267,9 +278,9 @@ function drawTactile(i){
   _frame=i; _hit=[];
   const dpr=devicePixelRatio||1, ctx=cHand.getContext('2d');
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
-  const oy=(HH-300*HSC)/2;
+  const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=14+hi*(HW/2);
+    const ox=8+hi*(HW/2)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -393,4 +404,31 @@ window.addEventListener('load',update);
     if(d>0 && master.currentTime>=d-0.08) restart();
   },200);
 })();
+
+// ---- 侧栏高度贴合左侧视频列 ----
+function fitHand(){
+  var camPanel=document.querySelector('.layout > .panel');
+  var spans=document.querySelector('.sidecol > .panel:first-child');
+  var tac=document.querySelector('.tacpanel');
+  if(!camPanel||!spans||!tac) return;
+  spans.style.maxHeight='';                            // 先量自然高度
+  var availH=camPanel.getBoundingClientRect().height;
+  var chrome=tac.getBoundingClientRect().height-cHand.getBoundingClientRect().height;
+  var spansH=spans.getBoundingClientRect().height;
+  var h=availH-spansH-14-chrome;
+  if(h<150){                                           // 空间不够: 让 spans 滚动, 画布保底 150
+    h=150;
+    var cap=availH-14-chrome-h;
+    if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
+  }
+  h=Math.min(300,Math.max(150,Math.floor(h)));
+  var w=Math.max(280,Math.floor(tac.clientWidth-20));
+  if(h===HH && w===HW) return;
+  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
+  cHand.style.height=HH+'px';
+  drawTactile(_frame);
+}
+window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
+window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
+setTimeout(fitHand,150); setTimeout(fitHand,900);
 </script></body></html>

ep1/viewer.html

@@ -56,6 +56,9 @@ canvas{width:100%;display:block;cursor:pointer}
 .tac-legend .grad{display:inline-block;width:70px;height:8px;border-radius:2px}
 .tac-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1b2028;border:1px solid #2a3340}
 @media(max-width:1200px){.layout{grid-template-columns:1fr}}
+
+.layout{align-items:start}
+.sidecol>.panel:first-child{flex:0 0 auto;min-height:60px;overflow:auto}
 </style></head><body>
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
@@ -219,7 +222,7 @@ function handLayout(mirror){
   const U=8.8, PX=14, PY=150, GAP=1.5;              // 手掌网格单位
   const CW=9.5,CH=5.4,G=1.3, PH=8*(CH+G)-G;         // 指尖阵列 20.3 x 52.3
   // 从左到右: 小指, 无名指, 中指, 食指(食指紧邻右侧拇指)
-  const FING=[['little',64,42,40],['ring',48,76,18],['middle',32,110,6],['index',16,140,20]];
+  const FING=[['little',64,42,70],['ring',48,76,48],['middle',32,110,36],['index',16,140,50]];
   outline.push({x:10,y:146,w:140,h:131,r:19,palm:true});          // 手掌轮廓(完整掌面)
   outline.push({x:40,y:275,w:56,h:19,r:9});                       // 手腕
   for(const [nm,off,cx,top] of FING){
@@ -255,8 +258,16 @@ function handLayout(mirror){
 }
 
 const HANDS=[{name:'left',base:0,lay:handLayout(true)},{name:'right',base:TAC_N,lay:handLayout(false)}];
+// 内容包围盒: 缩放时按它算, 避免上下留白吃掉尺寸
+const BBOX=(function(){var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+  HANDS.forEach(function(h){h.lay.cells.concat(h.lay.outline).forEach(function(o){
+    var a=o.rot||0,ca=Math.cos(a),sa=Math.sin(a);
+    [[0,0],[o.w,0],[0,o.h],[o.w,o.h]].forEach(function(p){        // 旋转矩形的四个真实角点
+      var X=o.x+p[0]*ca-p[1]*sa, Y=o.y+p[0]*sa+p[1]*ca;
+      x0=Math.min(x0,X);y0=Math.min(y0,Y);x1=Math.max(x1,X);y1=Math.max(y1,Y);});});});
+  return {x:x0-2,y:y0-2,w:x1-x0+4,h:y1-y0+4};})();
 const cHand=document.getElementById('cHand'), tacTip=document.getElementById('tacTip');
-const HW=372, HH=210, HSC=Math.min(HH/300,(HW/2-8)/220);
+let HW=372, HH=210, HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
 cHand.style.width=HW+'px'; cHand.style.height=HH+'px';
 document.getElementById('tacGrad').style.background='linear-gradient(90deg,'+RAMP.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`).join(',')+')';
 document.getElementById('tacPeakLbl').textContent=TAC_PEAK;
@@ -267,9 +278,9 @@ function drawTactile(i){
   _frame=i; _hit=[];
   const dpr=devicePixelRatio||1, ctx=cHand.getContext('2d');
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
-  const oy=(HH-300*HSC)/2;
+  const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=14+hi*(HW/2);
+    const ox=8+hi*(HW/2)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -393,4 +404,31 @@ window.addEventListener('load',update);
     if(d>0 && master.currentTime>=d-0.08) restart();
   },200);
 })();
+
+// ---- 侧栏高度贴合左侧视频列 ----
+function fitHand(){
+  var camPanel=document.querySelector('.layout > .panel');
+  var spans=document.querySelector('.sidecol > .panel:first-child');
+  var tac=document.querySelector('.tacpanel');
+  if(!camPanel||!spans||!tac) return;
+  spans.style.maxHeight='';                            // 先量自然高度
+  var availH=camPanel.getBoundingClientRect().height;
+  var chrome=tac.getBoundingClientRect().height-cHand.getBoundingClientRect().height;
+  var spansH=spans.getBoundingClientRect().height;
+  var h=availH-spansH-14-chrome;
+  if(h<150){                                           // 空间不够: 让 spans 滚动, 画布保底 150
+    h=150;
+    var cap=availH-14-chrome-h;
+    if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
+  }
+  h=Math.min(300,Math.max(150,Math.floor(h)));
+  var w=Math.max(280,Math.floor(tac.clientWidth-20));
+  if(h===HH && w===HW) return;
+  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
+  cHand.style.height=HH+'px';
+  drawTactile(_frame);
+}
+window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
+window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
+setTimeout(fitHand,150); setTimeout(fitHand,900);
 </script></body></html>

ep2/viewer.html

@@ -56,6 +56,9 @@ canvas{width:100%;display:block;cursor:pointer}
 .tac-legend .grad{display:inline-block;width:70px;height:8px;border-radius:2px}
 .tac-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1b2028;border:1px solid #2a3340}
 @media(max-width:1200px){.layout{grid-template-columns:1fr}}
+
+.layout{align-items:start}
+.sidecol>.panel:first-child{flex:0 0 auto;min-height:60px;overflow:auto}
 </style></head><body>
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
@@ -219,7 +222,7 @@ function handLayout(mirror){
   const U=8.8, PX=14, PY=150, GAP=1.5;              // 手掌网格单位
   const CW=9.5,CH=5.4,G=1.3, PH=8*(CH+G)-G;         // 指尖阵列 20.3 x 52.3
   // 从左到右: 小指, 无名指, 中指, 食指(食指紧邻右侧拇指)
-  const FING=[['little',64,42,40],['ring',48,76,18],['middle',32,110,6],['index',16,140,20]];
+  const FING=[['little',64,42,70],['ring',48,76,48],['middle',32,110,36],['index',16,140,50]];
   outline.push({x:10,y:146,w:140,h:131,r:19,palm:true});          // 手掌轮廓(完整掌面)
   outline.push({x:40,y:275,w:56,h:19,r:9});                       // 手腕
   for(const [nm,off,cx,top] of FING){
@@ -255,8 +258,16 @@ function handLayout(mirror){
 }
 
 const HANDS=[{name:'left',base:0,lay:handLayout(true)},{name:'right',base:TAC_N,lay:handLayout(false)}];
+// 内容包围盒: 缩放时按它算, 避免上下留白吃掉尺寸
+const BBOX=(function(){var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+  HANDS.forEach(function(h){h.lay.cells.concat(h.lay.outline).forEach(function(o){
+    var a=o.rot||0,ca=Math.cos(a),sa=Math.sin(a);
+    [[0,0],[o.w,0],[0,o.h],[o.w,o.h]].forEach(function(p){        // 旋转矩形的四个真实角点
+      var X=o.x+p[0]*ca-p[1]*sa, Y=o.y+p[0]*sa+p[1]*ca;
+      x0=Math.min(x0,X);y0=Math.min(y0,Y);x1=Math.max(x1,X);y1=Math.max(y1,Y);});});});
+  return {x:x0-2,y:y0-2,w:x1-x0+4,h:y1-y0+4};})();
 const cHand=document.getElementById('cHand'), tacTip=document.getElementById('tacTip');
-const HW=372, HH=210, HSC=Math.min(HH/300,(HW/2-8)/220);
+let HW=372, HH=210, HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
 cHand.style.width=HW+'px'; cHand.style.height=HH+'px';
 document.getElementById('tacGrad').style.background='linear-gradient(90deg,'+RAMP.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`).join(',')+')';
 document.getElementById('tacPeakLbl').textContent=TAC_PEAK;
@@ -267,9 +278,9 @@ function drawTactile(i){
   _frame=i; _hit=[];
   const dpr=devicePixelRatio||1, ctx=cHand.getContext('2d');
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
-  const oy=(HH-300*HSC)/2;
+  const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=14+hi*(HW/2);
+    const ox=8+hi*(HW/2)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -393,4 +404,31 @@ window.addEventListener('load',update);
     if(d>0 && master.currentTime>=d-0.08) restart();
   },200);
 })();
+
+// ---- 侧栏高度贴合左侧视频列 ----
+function fitHand(){
+  var camPanel=document.querySelector('.layout > .panel');
+  var spans=document.querySelector('.sidecol > .panel:first-child');
+  var tac=document.querySelector('.tacpanel');
+  if(!camPanel||!spans||!tac) return;
+  spans.style.maxHeight='';                            // 先量自然高度
+  var availH=camPanel.getBoundingClientRect().height;
+  var chrome=tac.getBoundingClientRect().height-cHand.getBoundingClientRect().height;
+  var spansH=spans.getBoundingClientRect().height;
+  var h=availH-spansH-14-chrome;
+  if(h<150){                                           // 空间不够: 让 spans 滚动, 画布保底 150
+    h=150;
+    var cap=availH-14-chrome-h;
+    if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
+  }
+  h=Math.min(300,Math.max(150,Math.floor(h)));
+  var w=Math.max(280,Math.floor(tac.clientWidth-20));
+  if(h===HH && w===HW) return;
+  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
+  cHand.style.height=HH+'px';
+  drawTactile(_frame);
+}
+window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
+window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
+setTimeout(fitHand,150); setTimeout(fitHand,900);
 </script></body></html>

ep3/viewer.html

@@ -56,6 +56,9 @@ canvas{width:100%;display:block;cursor:pointer}
 .tac-legend .grad{display:inline-block;width:70px;height:8px;border-radius:2px}
 .tac-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1b2028;border:1px solid #2a3340}
 @media(max-width:1200px){.layout{grid-template-columns:1fr}}
+
+.layout{align-items:start}
+.sidecol>.panel:first-child{flex:0 0 auto;min-height:60px;overflow:auto}
 </style></head><body>
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
@@ -219,7 +222,7 @@ function handLayout(mirror){
   const U=8.8, PX=14, PY=150, GAP=1.5;              // 手掌网格单位
   const CW=9.5,CH=5.4,G=1.3, PH=8*(CH+G)-G;         // 指尖阵列 20.3 x 52.3
   // 从左到右: 小指, 无名指, 中指, 食指(食指紧邻右侧拇指)
-  const FING=[['little',64,42,40],['ring',48,76,18],['middle',32,110,6],['index',16,140,20]];
+  const FING=[['little',64,42,70],['ring',48,76,48],['middle',32,110,36],['index',16,140,50]];
   outline.push({x:10,y:146,w:140,h:131,r:19,palm:true});          // 手掌轮廓(完整掌面)
   outline.push({x:40,y:275,w:56,h:19,r:9});                       // 手腕
   for(const [nm,off,cx,top] of FING){
@@ -255,8 +258,16 @@ function handLayout(mirror){
 }
 
 const HANDS=[{name:'left',base:0,lay:handLayout(true)},{name:'right',base:TAC_N,lay:handLayout(false)}];
+// 内容包围盒: 缩放时按它算, 避免上下留白吃掉尺寸
+const BBOX=(function(){var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+  HANDS.forEach(function(h){h.lay.cells.concat(h.lay.outline).forEach(function(o){
+    var a=o.rot||0,ca=Math.cos(a),sa=Math.sin(a);
+    [[0,0],[o.w,0],[0,o.h],[o.w,o.h]].forEach(function(p){        // 旋转矩形的四个真实角点
+      var X=o.x+p[0]*ca-p[1]*sa, Y=o.y+p[0]*sa+p[1]*ca;
+      x0=Math.min(x0,X);y0=Math.min(y0,Y);x1=Math.max(x1,X);y1=Math.max(y1,Y);});});});
+  return {x:x0-2,y:y0-2,w:x1-x0+4,h:y1-y0+4};})();
 const cHand=document.getElementById('cHand'), tacTip=document.getElementById('tacTip');
-const HW=372, HH=210, HSC=Math.min(HH/300,(HW/2-8)/220);
+let HW=372, HH=210, HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
 cHand.style.width=HW+'px'; cHand.style.height=HH+'px';
 document.getElementById('tacGrad').style.background='linear-gradient(90deg,'+RAMP.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`).join(',')+')';
 document.getElementById('tacPeakLbl').textContent=TAC_PEAK;
@@ -267,9 +278,9 @@ function drawTactile(i){
   _frame=i; _hit=[];
   const dpr=devicePixelRatio||1, ctx=cHand.getContext('2d');
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
-  const oy=(HH-300*HSC)/2;
+  const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=14+hi*(HW/2);
+    const ox=8+hi*(HW/2)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -393,4 +404,31 @@ window.addEventListener('load',update);
     if(d>0 && master.currentTime>=d-0.08) restart();
   },200);
 })();
+
+// ---- 侧栏高度贴合左侧视频列 ----
+function fitHand(){
+  var camPanel=document.querySelector('.layout > .panel');
+  var spans=document.querySelector('.sidecol > .panel:first-child');
+  var tac=document.querySelector('.tacpanel');
+  if(!camPanel||!spans||!tac) return;
+  spans.style.maxHeight='';                            // 先量自然高度
+  var availH=camPanel.getBoundingClientRect().height;
+  var chrome=tac.getBoundingClientRect().height-cHand.getBoundingClientRect().height;
+  var spansH=spans.getBoundingClientRect().height;
+  var h=availH-spansH-14-chrome;
+  if(h<150){                                           // 空间不够: 让 spans 滚动, 画布保底 150
+    h=150;
+    var cap=availH-14-chrome-h;
+    if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
+  }
+  h=Math.min(300,Math.max(150,Math.floor(h)));
+  var w=Math.max(280,Math.floor(tac.clientWidth-20));
+  if(h===HH && w===HW) return;
+  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
+  cHand.style.height=HH+'px';
+  drawTactile(_frame);
+}
+window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
+window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
+setTimeout(fitHand,150); setTimeout(fitHand,900);
 </script></body></html>

ep4/viewer.html

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6bf2fe4455605ca1af3102dd615e0d0fd8206bc8b62fe3af920f46df4ad3953d
+size 607139

ep5/viewer.html

@@ -56,6 +56,9 @@ canvas{width:100%;display:block;cursor:pointer}
 .tac-legend .grad{display:inline-block;width:70px;height:8px;border-radius:2px}
 .tac-legend .sw{display:inline-block;width:9px;height:9px;border-radius:2px;background:#1b2028;border:1px solid #2a3340}
 @media(max-width:1200px){.layout{grid-template-columns:1fr}}
+
+.layout{align-items:start}
+.sidecol>.panel:first-child{flex:0 0 auto;min-height:60px;overflow:auto}
 </style></head><body>
 <header>
   <a class="back" href="../teleop.html">← all episodes</a>
@@ -219,7 +222,7 @@ function handLayout(mirror){
   const U=8.8, PX=14, PY=150, GAP=1.5;              // 手掌网格单位
   const CW=9.5,CH=5.4,G=1.3, PH=8*(CH+G)-G;         // 指尖阵列 20.3 x 52.3
   // 从左到右: 小指, 无名指, 中指, 食指(食指紧邻右侧拇指)
-  const FING=[['little',64,42,40],['ring',48,76,18],['middle',32,110,6],['index',16,140,20]];
+  const FING=[['little',64,42,70],['ring',48,76,48],['middle',32,110,36],['index',16,140,50]];
   outline.push({x:10,y:146,w:140,h:131,r:19,palm:true});          // 手掌轮廓(完整掌面)
   outline.push({x:40,y:275,w:56,h:19,r:9});                       // 手腕
   for(const [nm,off,cx,top] of FING){
@@ -255,8 +258,16 @@ function handLayout(mirror){
 }
 
 const HANDS=[{name:'left',base:0,lay:handLayout(true)},{name:'right',base:TAC_N,lay:handLayout(false)}];
+// 内容包围盒: 缩放时按它算, 避免上下留白吃掉尺寸
+const BBOX=(function(){var x0=1e9,y0=1e9,x1=-1e9,y1=-1e9;
+  HANDS.forEach(function(h){h.lay.cells.concat(h.lay.outline).forEach(function(o){
+    var a=o.rot||0,ca=Math.cos(a),sa=Math.sin(a);
+    [[0,0],[o.w,0],[0,o.h],[o.w,o.h]].forEach(function(p){        // 旋转矩形的四个真实角点
+      var X=o.x+p[0]*ca-p[1]*sa, Y=o.y+p[0]*sa+p[1]*ca;
+      x0=Math.min(x0,X);y0=Math.min(y0,Y);x1=Math.max(x1,X);y1=Math.max(y1,Y);});});});
+  return {x:x0-2,y:y0-2,w:x1-x0+4,h:y1-y0+4};})();
 const cHand=document.getElementById('cHand'), tacTip=document.getElementById('tacTip');
-const HW=372, HH=210, HSC=Math.min(HH/300,(HW/2-8)/220);
+let HW=372, HH=210, HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
 cHand.style.width=HW+'px'; cHand.style.height=HH+'px';
 document.getElementById('tacGrad').style.background='linear-gradient(90deg,'+RAMP.map(c=>`rgb(${c[0]},${c[1]},${c[2]})`).join(',')+')';
 document.getElementById('tacPeakLbl').textContent=TAC_PEAK;
@@ -267,9 +278,9 @@ function drawTactile(i){
   _frame=i; _hit=[];
   const dpr=devicePixelRatio||1, ctx=cHand.getContext('2d');
   cHand.width=HW*dpr; cHand.height=HH*dpr; ctx.setTransform(dpr,0,0,dpr,0,0); ctx.clearRect(0,0,HW,HH);
-  const oy=(HH-300*HSC)/2;
+  const oy=(HH-BBOX.h*HSC)/2-BBOX.y*HSC;
   HANDS.forEach((hd,hi)=>{
-    const ox=14+hi*(HW/2);
+    const ox=8+hi*(HW/2)-BBOX.x*HSC;
     ctx.save(); ctx.translate(ox,oy); ctx.scale(HSC,HSC);
     ctx.strokeStyle='#26313f'; ctx.lineWidth=1.1;
     for(const o of hd.lay.outline){ctx.save(); ctx.strokeStyle=o.palm?'#33475c':'#26313f';
@@ -393,4 +404,31 @@ window.addEventListener('load',update);
     if(d>0 && master.currentTime>=d-0.08) restart();
   },200);
 })();
+
+// ---- 侧栏高度贴合左侧视频列 ----
+function fitHand(){
+  var camPanel=document.querySelector('.layout > .panel');
+  var spans=document.querySelector('.sidecol > .panel:first-child');
+  var tac=document.querySelector('.tacpanel');
+  if(!camPanel||!spans||!tac) return;
+  spans.style.maxHeight='';                            // 先量自然高度
+  var availH=camPanel.getBoundingClientRect().height;
+  var chrome=tac.getBoundingClientRect().height-cHand.getBoundingClientRect().height;
+  var spansH=spans.getBoundingClientRect().height;
+  var h=availH-spansH-14-chrome;
+  if(h<150){                                           // 空间不够: 让 spans 滚动, 画布保底 150
+    h=150;
+    var cap=availH-14-chrome-h;
+    if(cap>60) spans.style.maxHeight=Math.floor(cap)+'px';
+  }
+  h=Math.min(300,Math.max(150,Math.floor(h)));
+  var w=Math.max(280,Math.floor(tac.clientWidth-20));
+  if(h===HH && w===HW) return;
+  HH=h; HW=w; HSC=Math.min(HH/BBOX.h,(HW/2-8)/BBOX.w);
+  cHand.style.height=HH+'px';
+  drawTactile(_frame);
+}
+window.addEventListener('resize',function(){clearTimeout(window.__fitT);window.__fitT=setTimeout(fitHand,120);});
+window.addEventListener('load',function(){fitHand();setTimeout(fitHand,400);});
+setTimeout(fitHand,150); setTimeout(fitHand,900);
 </script></body></html>

teleop.html

@@ -27,6 +27,6 @@ header{padding:22px 26px 6px}h1{margin:0 0 4px;font-size:22px}
 <a class="card" href="ep1/viewer.html"><div class="ph"><img src="ep1/thumb.jpg" alt="episode 1"><span class="pi"></span></div><div class="m"><div class="t">Episode 1 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.8s</span><span>563 frames</span></div></div></a>
 <a class="card" href="ep2/viewer.html"><div class="ph"><img src="ep2/thumb.jpg" alt="episode 2"><span class="pi"></span></div><div class="m"><div class="t">Episode 2 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.7s</span><span>562 frames</span></div></div></a>
 <a class="card" href="ep3/viewer.html"><div class="ph"><img src="ep3/thumb.jpg" alt="episode 3"><span class="pi"></span></div><div class="m"><div class="t">Episode 3 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>20.5s</span><span>614 frames</span></div></div></a>
-<a class="card" href="ep4/view.html"><div class="ph"><img src="ep4/thumb.jpg" alt="episode 4"><span class="pi"></span></div><div class="m"><div class="t">Episode 4 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>22.4s</span><span>673 frames</span></div></div></a>
+<a class="card" href="ep4/viewer.html"><div class="ph"><img src="ep4/thumb.jpg" alt="episode 4"><span class="pi"></span></div><div class="m"><div class="t">Episode 4 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>22.4s</span><span>673 frames</span></div></div></a>
 <a class="card" href="ep5/viewer.html"><div class="ph"><img src="ep5/thumb.jpg" alt="episode 5"><span class="pi"></span></div><div class="m"><div class="t">Episode 5 · Pick up the water bottle and put it in the basket</div><div class="r"><span class="chip">A2</span><span>18.4s</span><span>553 frames</span></div></div></a></div>
 </body></html>