Move per-hand peak labels into the free outer corners so they no longer cover the fingertip pads

ep0/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }
 

ep1/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }
 

ep2/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }
 

ep3/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }
 

ep4/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }
 

ep5/viewer.html

@@ -301,9 +301,15 @@ function drawTactile(i){
     ctx.fillStyle='#41505f'; ctx.font='6.2px ui-monospace,monospace';
     for(const n of (hd.lay.notes||[])) ctx.fillText(n.t,n.x,n.y);
     ctx.restore();
-    ctx.font='600 11px ui-monospace,monospace'; ctx.fillStyle=peak>0?'#e8b866':'#5c6a7a';
-    ctx.font='600 9.5px ui-monospace,monospace';
-    ctx.fillText(hd.name.toUpperCase()+(peak>0?' '+peak:' \u2014'),ox+2,11);
+    // 标签画在每只手的外上角(右手食指右侧/左手镜像), 那块是空的, 不占高度也不压指垫
+    var isL=(hd.name==='left'), cTop=(HH-BBOX.h*HSC)/2;
+    ctx.fillStyle=peak>0?'#e8b866':'#55636f';
+    ctx.font='600 9px ui-monospace,monospace';
+    ctx.textAlign=isL?'left':'right';
+    var lx=ox+(isL?BBOX.x*HSC+2:(BBOX.x+BBOX.w)*HSC-2);
+    ctx.fillText(hd.name.toUpperCase(),lx,cTop+10);
+    ctx.fillText(peak>0?String(peak):'\u2014',lx,cTop+21);
+    ctx.textAlign='left';
   });
 }