Hugging Face's logo

Spaces:
AIARTCHAN
/
openpose_editor
Running

App Files Community
1
Kaeya commited on
Commit
20e8467
•
1 Parent(s): 7ff808f

Upload index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -24
index.html CHANGED
@@ -2,6 +2,7 @@
2
  <html style="width:100%; height:100%;">
3
  <head>
4
  <title>Openpose 사진 생성기</title>
 
5
  <style>
6
  *
7
  {
@@ -11,7 +12,7 @@
11
  color:white;
12
  font-size:16px;
13
  -webkit-user-select: none;
14
- -ms-user-select: none;
15
  user-select: none;
16
  }
17
  .vertex
@@ -110,7 +111,7 @@ let charDragging = 0;
110
  let boneImageX = 0;
111
  let boneImageY = 0;
112
 
113
-
114
  let v1_head;
115
  let v1_lefteye;
116
  let v1_leftear;
@@ -129,7 +130,7 @@ let v1_leftknee;
129
  let v1_rightknee;
130
  let v1_leftfeet;
131
  let v1_rightfeet;
132
-
133
  let e1_lefteye;
134
  let e1_leftear;
135
  let e1_righteye;
@@ -166,7 +167,7 @@ let v2_leftknee;
166
  let v2_rightknee;
167
  let v2_leftfeet;
168
  let v2_rightfeet;
169
-
170
  let e2_lefteye;
171
  let e2_leftear;
172
  let e2_righteye;
@@ -203,7 +204,7 @@ let v3_leftknee;
203
  let v3_rightknee;
204
  let v3_leftfeet;
205
  let v3_rightfeet;
206
-
207
  let e3_lefteye;
208
  let e3_leftear;
209
  let e3_righteye;
@@ -239,7 +240,7 @@ function onLoad()
239
  {
240
  document.body.addEventListener('paste', OnPaste);
241
 
242
-
243
  v1_head = document.getElementById("v1_head");
244
  v1_lefteye = document.getElementById("v1_lefteye");
245
  v1_leftear = document.getElementById("v1_leftear");
@@ -473,7 +474,7 @@ function imageDrop(e)
473
  function dragOverHandler(e)
474
  {
475
  e.preventDefault();
476
-
477
  }
478
 
479
  function fitChange()
@@ -600,7 +601,7 @@ function AdjustEdges1()
600
  e1_righteye.style.left = (v1_head_x + v1_righteye1_x) / 2 + "px";
601
  e1_righteye.style.width = Math.sqrt(((v1_righteye1_y - v1_head_y) ** 2 + (v1_righteye1_x - v1_head_x) ** 2)) + "px"
602
  e1_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_head_y, v1_righteye1_x - v1_head_x) + "rad)";
603
-
604
  e1_leftear.style.top = (v1_leftear_y + v1_lefteye1_y) / 2 + "px";
605
  e1_leftear.style.left = (v1_leftear_x + v1_lefteye1_x) / 2 + "px";
606
  e1_leftear.style.width = Math.sqrt(((v1_lefteye1_y - v1_leftear_y) ** 2 + (v1_lefteye1_x - v1_leftear_x) ** 2)) + "px"
@@ -610,12 +611,12 @@ function AdjustEdges1()
610
  e1_rightear.style.left = (v1_rightear_x + v1_righteye1_x) / 2 + "px";
611
  e1_rightear.style.width = Math.sqrt(((v1_righteye1_y - v1_rightear_y) ** 2 + (v1_righteye1_x - v1_rightear_x) ** 2)) + "px"
612
  e1_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_rightear_y, v1_righteye1_x - v1_rightear_x) + "rad)";
613
-
614
  e1_neck.style.top = (v1_head_y + v1_chest_y) / 2 + "px";
615
  e1_neck.style.left = (v1_head_x + v1_chest_x) / 2 + "px";
616
  e1_neck.style.width = Math.sqrt(((v1_chest_y - v1_head_y) ** 2 + (v1_chest_x - v1_head_x) ** 2)) + "px"
617
  e1_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_chest_y - v1_head_y, v1_chest_x - v1_head_x) + "rad)";
618
-
619
  e1_leftshoulder.style.top = (v1_leftshoulder_y + v1_chest_y) / 2 + "px";
620
  e1_leftshoulder.style.left = (v1_leftshoulder_x + v1_chest_x) / 2 + "px";
621
  e1_leftshoulder.style.width = Math.sqrt(((v1_chest_y - v1_leftshoulder_y) ** 2 + (v1_chest_x - v1_leftshoulder_x) ** 2)) + "px"
@@ -729,7 +730,7 @@ function AdjustEdges2()
729
  e2_righteye.style.left = (v2_head_x + v2_righteye2_x) / 2 + "px";
730
  e2_righteye.style.width = Math.sqrt(((v2_righteye2_y - v2_head_y) ** 2 + (v2_righteye2_x - v2_head_x) ** 2)) + "px"
731
  e2_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_head_y, v2_righteye2_x - v2_head_x) + "rad)";
732
-
733
  e2_leftear.style.top = (v2_leftear_y + v2_lefteye2_y) / 2 + "px";
734
  e2_leftear.style.left = (v2_leftear_x + v2_lefteye2_x) / 2 + "px";
735
  e2_leftear.style.width = Math.sqrt(((v2_lefteye2_y - v2_leftear_y) ** 2 + (v2_lefteye2_x - v2_leftear_x) ** 2)) + "px"
@@ -739,12 +740,12 @@ function AdjustEdges2()
739
  e2_rightear.style.left = (v2_rightear_x + v2_righteye2_x) / 2 + "px";
740
  e2_rightear.style.width = Math.sqrt(((v2_righteye2_y - v2_rightear_y) ** 2 + (v2_righteye2_x - v2_rightear_x) ** 2)) + "px"
741
  e2_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_rightear_y, v2_righteye2_x - v2_rightear_x) + "rad)";
742
-
743
  e2_neck.style.top = (v2_head_y + v2_chest_y) / 2 + "px";
744
  e2_neck.style.left = (v2_head_x + v2_chest_x) / 2 + "px";
745
  e2_neck.style.width = Math.sqrt(((v2_chest_y - v2_head_y) ** 2 + (v2_chest_x - v2_head_x) ** 2)) + "px"
746
  e2_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_chest_y - v2_head_y, v2_chest_x - v2_head_x) + "rad)";
747
-
748
  e2_leftshoulder.style.top = (v2_leftshoulder_y + v2_chest_y) / 2 + "px";
749
  e2_leftshoulder.style.left = (v2_leftshoulder_x + v2_chest_x) / 2 + "px";
750
  e2_leftshoulder.style.width = Math.sqrt(((v2_chest_y - v2_leftshoulder_y) ** 2 + (v2_chest_x - v2_leftshoulder_x) ** 2)) + "px"
@@ -857,7 +858,7 @@ function AdjustEdges3()
857
  e3_righteye.style.left = (v3_head_x + v3_righteye3_x) / 2 + "px";
858
  e3_righteye.style.width = Math.sqrt(((v3_righteye3_y - v3_head_y) ** 2 + (v3_righteye3_x - v3_head_x) ** 2)) + "px"
859
  e3_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_head_y, v3_righteye3_x - v3_head_x) + "rad)";
860
-
861
  e3_leftear.style.top = (v3_leftear_y + v3_lefteye3_y) / 2 + "px";
862
  e3_leftear.style.left = (v3_leftear_x + v3_lefteye3_x) / 2 + "px";
863
  e3_leftear.style.width = Math.sqrt(((v3_lefteye3_y - v3_leftear_y) ** 2 + (v3_lefteye3_x - v3_leftear_x) ** 2)) + "px"
@@ -867,12 +868,12 @@ function AdjustEdges3()
867
  e3_rightear.style.left = (v3_rightear_x + v3_righteye3_x) / 2 + "px";
868
  e3_rightear.style.width = Math.sqrt(((v3_righteye3_y - v3_rightear_y) ** 2 + (v3_righteye3_x - v3_rightear_x) ** 2)) + "px"
869
  e3_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_rightear_y, v3_righteye3_x - v3_rightear_x) + "rad)";
870
-
871
  e3_neck.style.top = (v3_head_y + v3_chest_y) / 2 + "px";
872
  e3_neck.style.left = (v3_head_x + v3_chest_x) / 2 + "px";
873
  e3_neck.style.width = Math.sqrt(((v3_chest_y - v3_head_y) ** 2 + (v3_chest_x - v3_head_x) ** 2)) + "px"
874
  e3_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_chest_y - v3_head_y, v3_chest_x - v3_head_x) + "rad)";
875
-
876
  e3_leftshoulder.style.top = (v3_leftshoulder_y + v3_chest_y) / 2 + "px";
877
  e3_leftshoulder.style.left = (v3_leftshoulder_x + v3_chest_x) / 2 + "px";
878
  e3_leftshoulder.style.width = Math.sqrt(((v3_chest_y - v3_leftshoulder_y) ** 2 + (v3_chest_x - v3_leftshoulder_x) ** 2)) + "px"
@@ -1216,7 +1217,7 @@ function ImageSave()
1216
 
1217
  function ImagetoFile(canvas)
1218
  {
1219
-
1220
  var link = document.getElementById("download");
1221
  link.href = canvas.toDataURL("image/png");
1222
  link.download = "capture.png";
@@ -1396,7 +1397,7 @@ function ImagetoFile(canvas)
1396
  <input id="check2_rightfeet" type="checkbox" style="left: 0.5em; top:0.4em;" checked onchange="checkstateChanged()">
1397
  <label for="check2_rightfeet" style="width:9.5em; height:1em; left: 2.5em;">오른쪽 발</label>
1398
  </div>
1399
-
1400
  <div style="width:12em; height:1.5em; position: relative; padding:0.25em; background-color: #888; background-clip: content-box; flex-shrink: 0;" onclick="ShowCheckboxes3()">
1401
  <div style="width:3em; height:1.5em; left:1em">사람 3</div>
1402
  <div id="button_show3" class="buttonhide" onclick="ShowChar3(event)"></div>
@@ -1495,7 +1496,7 @@ function ImagetoFile(canvas)
1495
  <div id="e1_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1496
  <div id="e1_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1497
  <div id="e1_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1498
-
1499
  <div id="e1_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1500
  <div id="e1_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1501
  <div id="e1_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
@@ -1515,7 +1516,7 @@ function ImagetoFile(canvas)
1515
  <div id="e2_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1516
  <div id="e2_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1517
  <div id="e2_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1518
-
1519
  <div id="e2_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1520
  <div id="e2_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1521
  <div id="e2_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
@@ -1535,7 +1536,7 @@ function ImagetoFile(canvas)
1535
  <div id="e3_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1536
  <div id="e3_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1537
  <div id="e3_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1538
-
1539
  <div id="e3_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1540
  <div id="e3_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1541
  <div id="e3_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
@@ -1565,7 +1566,7 @@ function ImagetoFile(canvas)
1565
  <div id="v1_leftfeet" class="vertex" style="top:90px; left:42px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
1566
  <div id="v1_rightfeet" class="vertex" style="top:90px; left:58px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
1567
 
1568
-
1569
  <div id="v2_head" class="vertex" style="top:16px; left:20px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1570
  <div id="v2_lefteye" class="vertex" style="top:14px; left:16px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1571
  <div id="v2_leftear" class="vertex" style="top:16px; left:12px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
@@ -1587,7 +1588,7 @@ function ImagetoFile(canvas)
1587
  <div id="v2_leftfeet" class="vertex" style="top:90px; left:12px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1588
  <div id="v2_rightfeet" class="vertex" style="top:90px; left:28px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1589
 
1590
-
1591
  <div id="v3_head" class="vertex" style="top:16px; left:80px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
1592
  <div id="v3_lefteye" class="vertex" style="top:14px; left:76px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
1593
  <div id="v3_leftear" class="vertex" style="top:16px; left:72px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
@@ -1627,4 +1628,4 @@ function ImagetoFile(canvas)
1627
  <div id="splitx" style="left:25%; width:4px; height:100%; background-color: silver; cursor:col-resize"
1628
  onmousedown="hResizeStart()"></div>
1629
  </body>
1630
- </html>
 
2
  <html style="width:100%; height:100%;">
3
  <head>
4
  <title>Openpose 사진 생성기</title>
5
+ <meta charset="utf-8">
6
  <style>
7
  *
8
  {
 
12
  color:white;
13
  font-size:16px;
14
  -webkit-user-select: none;
15
+ -ms-user-select: none;
16
  user-select: none;
17
  }
18
  .vertex
 
111
  let boneImageX = 0;
112
  let boneImageY = 0;
113
 
114
+
115
  let v1_head;
116
  let v1_lefteye;
117
  let v1_leftear;
 
130
  let v1_rightknee;
131
  let v1_leftfeet;
132
  let v1_rightfeet;
133
+
134
  let e1_lefteye;
135
  let e1_leftear;
136
  let e1_righteye;
 
167
  let v2_rightknee;
168
  let v2_leftfeet;
169
  let v2_rightfeet;
170
+
171
  let e2_lefteye;
172
  let e2_leftear;
173
  let e2_righteye;
 
204
  let v3_rightknee;
205
  let v3_leftfeet;
206
  let v3_rightfeet;
207
+
208
  let e3_lefteye;
209
  let e3_leftear;
210
  let e3_righteye;
 
240
  {
241
  document.body.addEventListener('paste', OnPaste);
242
 
243
+
244
  v1_head = document.getElementById("v1_head");
245
  v1_lefteye = document.getElementById("v1_lefteye");
246
  v1_leftear = document.getElementById("v1_leftear");
 
474
  function dragOverHandler(e)
475
  {
476
  e.preventDefault();
477
+
478
  }
479
 
480
  function fitChange()
 
601
  e1_righteye.style.left = (v1_head_x + v1_righteye1_x) / 2 + "px";
602
  e1_righteye.style.width = Math.sqrt(((v1_righteye1_y - v1_head_y) ** 2 + (v1_righteye1_x - v1_head_x) ** 2)) + "px"
603
  e1_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_head_y, v1_righteye1_x - v1_head_x) + "rad)";
604
+
605
  e1_leftear.style.top = (v1_leftear_y + v1_lefteye1_y) / 2 + "px";
606
  e1_leftear.style.left = (v1_leftear_x + v1_lefteye1_x) / 2 + "px";
607
  e1_leftear.style.width = Math.sqrt(((v1_lefteye1_y - v1_leftear_y) ** 2 + (v1_lefteye1_x - v1_leftear_x) ** 2)) + "px"
 
611
  e1_rightear.style.left = (v1_rightear_x + v1_righteye1_x) / 2 + "px";
612
  e1_rightear.style.width = Math.sqrt(((v1_righteye1_y - v1_rightear_y) ** 2 + (v1_righteye1_x - v1_rightear_x) ** 2)) + "px"
613
  e1_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_righteye1_y - v1_rightear_y, v1_righteye1_x - v1_rightear_x) + "rad)";
614
+
615
  e1_neck.style.top = (v1_head_y + v1_chest_y) / 2 + "px";
616
  e1_neck.style.left = (v1_head_x + v1_chest_x) / 2 + "px";
617
  e1_neck.style.width = Math.sqrt(((v1_chest_y - v1_head_y) ** 2 + (v1_chest_x - v1_head_x) ** 2)) + "px"
618
  e1_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v1_chest_y - v1_head_y, v1_chest_x - v1_head_x) + "rad)";
619
+
620
  e1_leftshoulder.style.top = (v1_leftshoulder_y + v1_chest_y) / 2 + "px";
621
  e1_leftshoulder.style.left = (v1_leftshoulder_x + v1_chest_x) / 2 + "px";
622
  e1_leftshoulder.style.width = Math.sqrt(((v1_chest_y - v1_leftshoulder_y) ** 2 + (v1_chest_x - v1_leftshoulder_x) ** 2)) + "px"
 
730
  e2_righteye.style.left = (v2_head_x + v2_righteye2_x) / 2 + "px";
731
  e2_righteye.style.width = Math.sqrt(((v2_righteye2_y - v2_head_y) ** 2 + (v2_righteye2_x - v2_head_x) ** 2)) + "px"
732
  e2_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_head_y, v2_righteye2_x - v2_head_x) + "rad)";
733
+
734
  e2_leftear.style.top = (v2_leftear_y + v2_lefteye2_y) / 2 + "px";
735
  e2_leftear.style.left = (v2_leftear_x + v2_lefteye2_x) / 2 + "px";
736
  e2_leftear.style.width = Math.sqrt(((v2_lefteye2_y - v2_leftear_y) ** 2 + (v2_lefteye2_x - v2_leftear_x) ** 2)) + "px"
 
740
  e2_rightear.style.left = (v2_rightear_x + v2_righteye2_x) / 2 + "px";
741
  e2_rightear.style.width = Math.sqrt(((v2_righteye2_y - v2_rightear_y) ** 2 + (v2_righteye2_x - v2_rightear_x) ** 2)) + "px"
742
  e2_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_righteye2_y - v2_rightear_y, v2_righteye2_x - v2_rightear_x) + "rad)";
743
+
744
  e2_neck.style.top = (v2_head_y + v2_chest_y) / 2 + "px";
745
  e2_neck.style.left = (v2_head_x + v2_chest_x) / 2 + "px";
746
  e2_neck.style.width = Math.sqrt(((v2_chest_y - v2_head_y) ** 2 + (v2_chest_x - v2_head_x) ** 2)) + "px"
747
  e2_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v2_chest_y - v2_head_y, v2_chest_x - v2_head_x) + "rad)";
748
+
749
  e2_leftshoulder.style.top = (v2_leftshoulder_y + v2_chest_y) / 2 + "px";
750
  e2_leftshoulder.style.left = (v2_leftshoulder_x + v2_chest_x) / 2 + "px";
751
  e2_leftshoulder.style.width = Math.sqrt(((v2_chest_y - v2_leftshoulder_y) ** 2 + (v2_chest_x - v2_leftshoulder_x) ** 2)) + "px"
 
858
  e3_righteye.style.left = (v3_head_x + v3_righteye3_x) / 2 + "px";
859
  e3_righteye.style.width = Math.sqrt(((v3_righteye3_y - v3_head_y) ** 2 + (v3_righteye3_x - v3_head_x) ** 2)) + "px"
860
  e3_righteye.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_head_y, v3_righteye3_x - v3_head_x) + "rad)";
861
+
862
  e3_leftear.style.top = (v3_leftear_y + v3_lefteye3_y) / 2 + "px";
863
  e3_leftear.style.left = (v3_leftear_x + v3_lefteye3_x) / 2 + "px";
864
  e3_leftear.style.width = Math.sqrt(((v3_lefteye3_y - v3_leftear_y) ** 2 + (v3_lefteye3_x - v3_leftear_x) ** 2)) + "px"
 
868
  e3_rightear.style.left = (v3_rightear_x + v3_righteye3_x) / 2 + "px";
869
  e3_rightear.style.width = Math.sqrt(((v3_righteye3_y - v3_rightear_y) ** 2 + (v3_righteye3_x - v3_rightear_x) ** 2)) + "px"
870
  e3_rightear.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_righteye3_y - v3_rightear_y, v3_righteye3_x - v3_rightear_x) + "rad)";
871
+
872
  e3_neck.style.top = (v3_head_y + v3_chest_y) / 2 + "px";
873
  e3_neck.style.left = (v3_head_x + v3_chest_x) / 2 + "px";
874
  e3_neck.style.width = Math.sqrt(((v3_chest_y - v3_head_y) ** 2 + (v3_chest_x - v3_head_x) ** 2)) + "px"
875
  e3_neck.style.transform = "translate(-50%, -50%) rotate(" + Math.atan2(v3_chest_y - v3_head_y, v3_chest_x - v3_head_x) + "rad)";
876
+
877
  e3_leftshoulder.style.top = (v3_leftshoulder_y + v3_chest_y) / 2 + "px";
878
  e3_leftshoulder.style.left = (v3_leftshoulder_x + v3_chest_x) / 2 + "px";
879
  e3_leftshoulder.style.width = Math.sqrt(((v3_chest_y - v3_leftshoulder_y) ** 2 + (v3_chest_x - v3_leftshoulder_x) ** 2)) + "px"
 
1217
 
1218
  function ImagetoFile(canvas)
1219
  {
1220
+
1221
  var link = document.getElementById("download");
1222
  link.href = canvas.toDataURL("image/png");
1223
  link.download = "capture.png";
 
1397
  <input id="check2_rightfeet" type="checkbox" style="left: 0.5em; top:0.4em;" checked onchange="checkstateChanged()">
1398
  <label for="check2_rightfeet" style="width:9.5em; height:1em; left: 2.5em;">오른쪽 발</label>
1399
  </div>
1400
+
1401
  <div style="width:12em; height:1.5em; position: relative; padding:0.25em; background-color: #888; background-clip: content-box; flex-shrink: 0;" onclick="ShowCheckboxes3()">
1402
  <div style="width:3em; height:1.5em; left:1em">사람 3</div>
1403
  <div id="button_show3" class="buttonhide" onclick="ShowChar3(event)"></div>
 
1496
  <div id="e1_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1497
  <div id="e1_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1498
  <div id="e1_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1499
+
1500
  <div id="e1_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1501
  <div id="e1_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1502
  <div id="e1_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
 
1516
  <div id="e2_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1517
  <div id="e2_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1518
  <div id="e2_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1519
+
1520
  <div id="e2_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1521
  <div id="e2_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1522
  <div id="e2_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
 
1536
  <div id="e3_rightupperarm" class="edge" style="background-color: rgba(170, 255, 0, 0.5);"></div>
1537
  <div id="e3_leftlowerarm" class="edge" style="background-color: rgba(255, 255, 0, 0.5);"></div>
1538
  <div id="e3_rightlowerarm" class="edge" style="background-color: rgba(85, 255, 0, 0.5);"></div>
1539
+
1540
  <div id="e3_leftchest" class="edge" style="background-color: rgba(0, 255, 0, 0.5);"></div>
1541
  <div id="e3_rightchest" class="edge" style="background-color: rgba(0, 255, 255, 0.5);"></div>
1542
  <div id="e3_leftupperleg" class="edge" style="background-color: rgba(0, 255, 85, 0.5);"></div>
 
1566
  <div id="v1_leftfeet" class="vertex" style="top:90px; left:42px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
1567
  <div id="v1_rightfeet" class="vertex" style="top:90px; left:58px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex1MouseDown(event)"></div>
1568
 
1569
+
1570
  <div id="v2_head" class="vertex" style="top:16px; left:20px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1571
  <div id="v2_lefteye" class="vertex" style="top:14px; left:16px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1572
  <div id="v2_leftear" class="vertex" style="top:16px; left:12px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
 
1588
  <div id="v2_leftfeet" class="vertex" style="top:90px; left:12px; background-color: rgb(0, 170, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1589
  <div id="v2_rightfeet" class="vertex" style="top:90px; left:28px; background-color: rgb(85, 0, 255, 0.5);" onmousedown="Vertex2MouseDown(event)"></div>
1590
 
1591
+
1592
  <div id="v3_head" class="vertex" style="top:16px; left:80px; background-color: rgb(255, 0, 0, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
1593
  <div id="v3_lefteye" class="vertex" style="top:14px; left:76px; background-color: rgb(170, 0, 255, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
1594
  <div id="v3_leftear" class="vertex" style="top:16px; left:72px; background-color: rgb(255, 0, 170, 0.5);" onmousedown="Vertex3MouseDown(event)"></div>
 
1628
  <div id="splitx" style="left:25%; width:4px; height:100%; background-color: silver; cursor:col-resize"
1629
  onmousedown="hResizeStart()"></div>
1630
  </body>
1631
+ </html>