<!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="joint_radius" min="1" max="16" value="4" />Joint Radius</label> -->
<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>