add hide node

js/poseMaker.js

@@ -154,6 +154,10 @@ function cutOffPersonLimb(personIndex, limbIndex) {
   Redraw();
 }
 
+function toggleHideNode(personIndex, nodeIndex) {
+  poseData[personIndex][nodeIndex][2] = !poseData[personIndex][nodeIndex][2];
+}
+
 // ドラッグ中の各キーが押されているかどうかのフラグ
 var keyDownFlags = {};
 // マウスカーソル
@@ -255,7 +259,7 @@ function rotateAndProject(f, p, c, angle) {
   return [v2[0] + c[0], v2[1] + c[1]];
 }
 
-function drawBodyPose() {
+function drawBodyPose(saving) {
   let stickWidth = 4;
   let imageSize = Math.min(canvas.width, canvas.height);
   stickWidth *= imageSize / 512;
@@ -274,6 +278,7 @@ function drawBodyPose() {
       const p = pose[limbSeq[j][0]];
       const q = pose[limbSeq[j][1]];
       if (p == null || q == null) continue;
+      if (p[2] || q[2]) { continue; }
       const [X0, Y0] = p;
       const [X1, Y1] = q;
       let angle = Math.atan2(Y1 - Y0, X1 - X0);
@@ -296,10 +301,20 @@ function drawBodyPose() {
       const p = pose[j];
       if (p == null) continue;
       const [x, y] = p;
-      ctx.beginPath();
-      ctx.arc(x, y, stickWidth, 0, 2 * Math.PI);
-      ctx.fillStyle = `rgb(${colors[j].join(',')})`;
-      ctx.fill();
+      if (p[2]) {
+        if (!saving) {
+          ctx.beginPath();
+          ctx.arc(x, y, stickWidth, 0, 2 * Math.PI);
+          ctx.lineWidth = 1;
+          ctx.strokeStyle = `rgb(${colors[j].join(',')})`;
+          ctx.stroke();
+        }
+      } else {
+        ctx.beginPath();
+        ctx.arc(x, y, stickWidth, 0, 2 * Math.PI);
+        ctx.fillStyle = `rgb(${colors[j].join(',')})`;
+        ctx.fill();
+      }
       // ctx.fillStyle = 'rgb(255,255,255)'
       // ctx.fillText(j, x-3, y+4);
     }
@@ -352,10 +367,10 @@ function drawUI() {
   }
 }
 
-function Redraw() {
+function Redraw(saving) {
   clearCanvas();
   drawBackground();
-  drawBodyPose();
+  drawBodyPose(saving);
   drawUI();
 }
 
@@ -447,6 +462,7 @@ function handleMouseDown(event) {
 
   if (keyDownFlags["KeyD"]) {removePerson(personIndex);return;}
   if (keyDownFlags["KeyR"]) {repairPerson(personIndex);return;}
+  if (keyDownFlags["KeyH"]) {toggleHideNode(personIndex, nodeIndex);return;}
 
   if (keyDownFlags["KeyQ"] && minDist < 16) {
     console.log("pressed KeyQ");
@@ -635,24 +651,6 @@ function importPose(jsonData) {
   Redraw();
 }
 
-/*
-function savePose() {
-  const canvasUrl = canvas.toDataURL();
-
-  const createEl = document.createElement('a');
-  createEl.href = canvasUrl;
-
-  // This is the name of our downloaded file
-  createEl.download = "pose.png";
-
-  createEl.click();
-  createEl.remove();
-
-  var [candidate, subset] = poseDataToCandidateAndSubset(poseData);
-  return {candidate: candidate, subset: subset};
-}
-*/
-
 // crc32
 // CRC32を初期化
 function initCrc32Table() {
@@ -791,6 +789,7 @@ function mergeCanvasWithPose(keyword, content) {
 function savePose() {
   var [candidate, subset] = poseDataToCandidateAndSubset(poseData);
   let jsonData = {candidate: candidate, subset: subset};
+  Redraw(true);
 
   var url = mergeCanvasWithPose("openpose", JSON.stringify(jsonData));
 
@@ -803,6 +802,8 @@ function savePose() {
   createEl.click();
   createEl.remove();
 
+  Redraw();
+
   return jsonData;
 }
 

main.py

@@ -108,6 +108,7 @@ In this project, MMPose is used for pose estimation.
 - "X + drag" to **x-axis** pseudo-3D rotation
 - "C + drag" to **y-axis** pseudo-3D rotation
 - "R + click" to **repair**
+- "H + click" to **hide** node
 
 When using Q, X, C, R, pressing and dont release until the operation is complete.