-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
92 lines (92 loc) · 4.55 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<script src="lib/p5.js"></script> <!-- https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js -->
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<div class="view">
<h3>Openpose Figure</h3>
<p>Click and drag the joints to pose the figure</p>
<div>
<label for="iwidth">Width</label>
<input type="text" id="iwidth" name="iwidth" value="512" autocomplete=off style="max-width: 40px;" oninput="resizeCanv()">
</div>
<div>
<label for="iheight">Height</label>
<input type="text" id="iheight" name="iheight" value="512" autocomplete=off style="max-width: 40px;" oninput="resizeCanv()">
</div>
<div style="display: flex; gap: 5px;">
</div>
<div class="overlay-controls">
<h4>Overlay Image</h4>
<input type="button" value="Toggle visibility" onclick="toggleOverlay()">
<input type="file" accept="image/*" autocomplete=off onchange="loadOverlay(event)">
</div>
<div class="canv">
<main></main>
<div class="canv-controls">
<p>Pose Presets</p>
<select id="pose-presets" onchange="poseSelected()" autocomplete=off>
</select>
<input type="button" value="Reset Pose" onclick="resetPose()">
<div style="display: flex; gap: 5px;">
<input type="button" value="Flip H" style="flex-grow: 1;" onclick="flipJoints('h')">
<input type="button" value="Flip V" style="flex-grow: 1;" onclick="flipJoints('v')">
</div>
<label for="offsetX" style="font-size: 0.9em">Offset X</label>
<input id="offsetX" name="offsetX" type="range" autocomplete=off oninput="offsetChanged()">
<label for="offsetY" style="font-size: 0.9em">Offset Y</label>
<input id="offsetY" name="offsetY" type="range" autocomplete=off oninput="offsetChanged()">
<label for="offsetZ" style="font-size: 0.9em">Offset Z</label>
<input id="offsetZ" name="offsetZ" type="range" autocomplete=off oninput="offsetChanged()">
<input type="button" value="Reset Offset" onclick="resetOffset()">
<p>Bone Style</p>
<form style="padding-bottom: 5px;">
<input id="radio-ellipse" type="radio" name="radio-bone" checked="checked" autocomplete=off onclick="setBoneStyle('ellipse')">
<label for="radio-ellipse">Ellipse</label>
<input type="radio" name="radio-bone" autocomplete=off onclick="setBoneStyle('line')">
<label for="radio-line">Line</label>
</form>
<label for="bone-width">Bone Width</label>
<input id="bone-width" name="bone-width" type="range" min="0.1" max="20" step="0.1" autocomplete=off oninput="boneWidthChanged()">
<label for="joint-diameter">Joint Diameter</label>
<input id="joint-diameter" name="joint-diameter" type="range" min="0.1" max="20" step="0.1" autocomplete=off oninput="jointDiamaterChanged()">
<input type="button" value="Reset Size" onclick="resetBoneJointSize()">
<p>Mirror Joints</p>
<form>
<input id="mirror-joints-h" type="checkbox" name="mirror-joints-h" autocomplete=off onclick="mirrorJointsChanged('h')">
<label for="mirror-joints-h">Horizontally</label>
</form>
<form>
<input id="mirror-joints-v" type="checkbox" name="mirror-joints-v" autocomplete=off onclick="mirrorJointsChanged('v')">
<label for="mirror-joints-v">Vertically</label>
</form>
</div>
</div>
<p>Hint: <span id="hover-info"></span></p>
<h4>Import / Export JSON</h4>
<div>
<input type="button" value="Export" onclick="exportPose()">
<input type="button" value="Import" onclick="importPose()">
</div>
<textarea id="pose-json" rows="2" cols="70" autocomplete=off></textarea>
</div>
<footer>
<p>View <a href="https://github.com/onusai/openpose-stickfigure">GitHub repo</a></p>
<div class="credits">
<p>Thanks to:</p>
<ul>
<li>@Eppinette-Chi for the <a href="https://media.discordapp.net/attachments/1072013871730131004/1075904083086548992/make_your_own_stick_figure.png">reference image</a></li>
<li>@Arstiv for pose preset "T-Pose A"</li>
</ul>
</div>
</footer>
<script src="joint.js"></script>
<script src="bone.js"></script>
<script src="poses.js"></script>
<script src="main.js"></script>
<script src="utils.js"></script>
</body>
</html>