|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>Posex - Estimated Image Generator for Pose2Image</title> |
|
<link rel="icon" type="image/png" href="image/favicon.png"> |
|
<link rel="stylesheet" href="css/main.css"> |
|
<script async src="js/es-module-shims.js"></script> |
|
<script type="importmap"> |
|
{ |
|
"imports": { |
|
"three": "./js/three.module.js", |
|
"three-trackballcontrols": "./js/TrackballControls.js", |
|
"three-dragcontrols": "./js/DragControls.js", |
|
"three-meshline": "./js/THREE.MeshLine.Module.min.js", |
|
"posex": "./js/posex.js" |
|
} |
|
} |
|
</script> |
|
<script type="esms-options"> |
|
{ |
|
"noLoadEventRetriggers": true |
|
} |
|
</script> |
|
<script defer type="module" src="js/app.js"></script> |
|
</head> |
|
|
|
<body> |
|
<div id="cont"> |
|
<button id="all_reset" class="box">🔄 All Reset</button> |
|
<div style="display: flex; flex-direction: row; gap: 0 0.5em;"> |
|
<button id="reset_camera" class="box" style="flex: 1 1 0">🎥 Reset Camera</button> |
|
<button id="reset_pose" class="box" style="flex: 1 1 0">🧍 Reset Pose</button> |
|
</div> |
|
<div style="display: flex; flex-direction: row; "> |
|
|
|
<canvas width="512" height="512" id="main_canvas"></canvas> |
|
|
|
<div style="margin-left: 1em; display: flex; flex-direction: column; gap: 0.25em; font-size: smaller;"> |
|
<div>- Camera</div> |
|
<label><input type="checkbox" id="fixed_roll">Fixed Roll</label> |
|
<div>- Body</div> |
|
<button id="add_body" style="width: max-content; min-width: 100%; text-align: left;">➕ Add</button> |
|
<button id="remove_body" style="width: max-content; min-width: 100%; text-align: left;">➖ Remove</button> |
|
<div>- Canvas Size</div> |
|
<input type="number" id="canvas_width" value="512" min="64" /> |
|
<input type="number" id="canvas_height" value="512" min="64" /> |
|
<div>- Background</div> |
|
<div style="display: flex; flex-direction: row; gap: 0 0.25em;"> |
|
<label style="flex: 0 0 0;"><button onclick="document.querySelector('#bg_file').click();">🖼 Set</button><input type="file" id="bg_file" style="display: none;"/></label> |
|
<button id="reset_bg" style="flex: 0 0 0;">❌ Del</button> |
|
</div> |
|
<div>- Joints and Limbs</div> |
|
|
|
<label><input type="range" id="limb_width" min="1" max="16" value="4" />Limb Width</label> |
|
<label><input type="checkbox" id="elliptic_limbs" checked />Elliptic Limbs</label> |
|
<div>- Others</div> |
|
<label><input type="checkbox" id="low_fps" />Low fps</label> |
|
</div> |
|
</div> |
|
<div id="body_indicator2"></div> |
|
<div id="body_indicator1"></div> |
|
<div style="display: flex; flex-direction: row; gap: 0 0.25em;"> |
|
<a id="save_button" class="box" style="flex: 1 1 0;" href="#">💾 Save Image</a> |
|
<a id="copy_button" class="box" style="flex: 1 1 0;" href="#">📋 Copy to clipboard</a> |
|
</div> |
|
<button id="save_pose" class="box">💾🧍 Save Pose</button> |
|
<div id="saved_poses"></div> |
|
</div> |
|
<p id="notation"></p> |
|
<div id="notifications"></div> |
|
</body> |
|
|
|
</html> |
