forked from NickAcPT/nmsr-rs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathowo.html
124 lines (103 loc) · 3.51 KB
/
owo.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<title>Image Viewer</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
img {
max-width: 100%;
max-height: 80vh;
}
.slider-container {
width: 80%;
margin-top: 20px;
}
input[type="range"] {
width: 100%;
}
</style>
</head>
<body>
<img id="image" alt="Image">
<div class="slider-container">
<label for="yawSlider">Yaw: <span id="yawValue">0</span></label>
<input type="range" id="yawSlider" min="-180" max="180" value="0">
</div>
<div class="slider-container">
<label for="pitchSlider">Pitch: <span id="pitchValue">0</span></label>
<input type="range" id="pitchSlider" min="-90" max="90" value="0">
</div>
<script>
const yawSlider = document.getElementById('yawSlider');
const pitchSlider = document.getElementById('pitchSlider');
const yawValue = document.getElementById('yawValue');
const pitchValue = document.getElementById('pitchValue');
const imageView = document.getElementById('image');
yawSlider.addEventListener('input', updateYaw);
pitchSlider.addEventListener('input', updatePitch);
function updateYaw() {
const yaw = yawSlider.value;
yawValue.textContent = yaw;
updateImage();
}
function updatePitch() {
const pitch = pitchSlider.value;
pitchValue.textContent = pitch;
updateImage();
}
async function updateImage() {
imageView.src = await downloadImage(yawSlider.value, pitchSlider.value);
}
async function downloadImage(yaw, pitch) {
const imageUrl = `http://localhost:8621/fullbodyiso/ad4569f3-7576-4376-a7c7-8e8cfcd9b832?yaw=${yaw}`;
try {
const response = await fetch(imageUrl);
if (!response.ok) {
throw new Error('Image request failed');
}
const imageBlob = await response.blob();
return URL.createObjectURL(imageBlob);
} catch (error) {
console.error('Error loading image:', error);
}
}
spin_interval = undefined;
// Spin player smoothly
let yawIndex = 0;
let rotations = [];
function doSpin(time) {
if (spin_interval) {
clearInterval(spin_interval);
spin_interval = undefined;
}
spin_interval = setInterval(() => {
imageView.src = (rotations[yawIndex]);
yawIndex = (yawIndex + 1) % rotations.length;
}, time);
}
updateImage();
setTimeout(async () => {
return;
let batch = 0;
// Download all yaw rotations (pitch = 0; yaw = -180 to 180)
for (let yaw = -180; yaw <= 180; yaw += 1) {
setTimeout(async () => {
rotations[yaw + 180] = await downloadImage(yaw, 0);
});
batch++;
if (batch >= 50) {
await new Promise((resolve) => setTimeout(resolve, 1000));
batch = 0;
}
}
}, 1);
</script>
</body>
</html>