forked from snigdhapodugu/stepsync
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
236 lines (212 loc) · 13.6 KB
/
index.html
File metadata and controls
236 lines (212 loc) · 13.6 KB
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StepSync -- How Do You Walk?</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- D3.js for visualization -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- OpenCV.js -->
<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
<!-- MediaPipe -->
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header>
<h1>StepSync -- How Do You Walk?</h1>
</header>
<!-- Step content moved to top -->
<div class="welcome-box">
<div id="step1" class="step">
<div class="story-intro">
<h2>Welcome to Your Walking Journey</h2>
<div class="intro-content">
<p class="intro-text">
As many as 80% of Americans have experienced issues in their lives related to bad posture. On the flip side, upright walking posture is associated with increased positive emotion, alertness, and confidence, as well as lower blood pressure. What if you could see exactly how your movement compares to optimal walking patterns?
</p>
<p class="intro-highlight">
Just like finding the right training partner, we will match you with a reference model that fits your unique body type and health profile.
</p>
<!-- <p class="intro-next">
Continue reading to see how your body moves in real-time!
</p> -->
</div>
</div>
<div class="welcome-box">
<h2>How to Use Our Interactive Tool</h2>
<div class="intro-content">
<p class="intro-text">
Our interactive guide will help you understand and improve your walking mechanics. On the next page, you will see a reference model demonstrating proper walking form.
Make sure to watch how different body parts work together to create smooth, efficient movement.
</p>
<!-- <p class="intro-highlight">
</p> -->
<div class="intro-features">
<h3>What You'll Learn:</h3>
<ul>
<li>Proper foot placement and movement patterns</li>
<li>Knee and hip alignment during walking</li>
<li>Core stability and posture</li>
<li>Upper body coordination</li>
<li>Overall balance and rhythm</li>
</ul>
</div>
<!-- <p class="intro-next">
Click Next to begin your
step-by-step analysis, where you'll be able to compare your
movement with the reference model using your camera.
</p> -->
</div>
</div>
<div id="participant-selection" class="participant-box">
<h2>Find Your Matching Participant</h2>
<p class="description">To start, please select your gender and enter your measurements to find the most similar participant.</p>
<p class="measurement-help">Enter your measurements in US units (inches and pounds)</p>
<div class="form-container">
<select id="gender-select">
<option value="">Select Gender</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
<input type="number" id="weight-input" placeholder="Enter your weight (lbs)" step="1">
<input type="number" id="height-input" placeholder="Enter your height (inches)" step="1">
<button id="find-match-btn">Match Me!</button>
</div>
</div>
</div>
<div class="step" id="step2" style="display: none;">
<h2>Foot Movement</h2>
<p>How your foot strikes the ground sets the stage for the rest of your body to follow. Let's see how your foot's movement shapes your walking pattern.</p>
<ul>
<li><strong>Heel Strike:</strong> The heel makes initial contact with the ground</li>
<li><strong>Midstance:</strong> Weight transfers through the foot</li>
<li><strong>Toe-Off:</strong> Push-off from the toes propels the body forward</li>
</ul>
<p>Click "Play" to understand your partner's heel strike and toe-off phases.</p>
<p>Click "Try It" to see yourself!</p>
</div>
<div class="step" id="step3" style="display: none;">
<h2>Knee Movement</h2>
<p>These essential shock absorbers help manage the forces of your feet hitting the ground, providing stability and support. Notice how your knee movements interact with the foundation laid by your feet.</p>
<ul>
<li><strong>Flexion:</strong> Bending of the knee during early stance for shock absorption</li>
<li><strong>Extension:</strong> Straightening of the knee in late stance for stability</li>
<li><strong>Swing Phase:</strong> Controlled flexion to clear the foot from the ground</li>
</ul>
</div>
<div class="step" id="step4" style="display: none;">
<h2>Hip Movement</h2>
<p>Your hips are the core of your gait, influencing both lower and upper body movement.</p>
<ul>
<li><strong>Flexion/Extension:</strong> Forward and backward movement</li>
<li><strong>Rotation:</strong> Internal and external rotation during the gait cycle</li>
<li><strong>Stability:</strong> Pelvis control for maintaining level walking</li>
</ul>
</div>
<div class="step" id="step5" style="display: none;">
<h2>Core Stability</h2>
<p>Your core plays a vital role in maintaining posture and balance throughout your walk. Let's look at how your trunk and spine work together, supporting smooth, controlled movement from the ground up.</p>
<ul>
<li><strong>Trunk Control:</strong> Minimal lateral sway during walking</li>
<li><strong>Spinal Alignment:</strong> Maintaining good posture during movement</li>
<li><strong>Weight Shifting:</strong> Controlled transfer of weight from side to side</li>
</ul>
</div>
<div class="step" id="step6" style="display: none;">
<h2>Upper Body Movement</h2>
<p>Your arms also play an essential role in maintaining balance and efficiency. Watch how the natural swing of your arms complements the movements in your lower body.</p>
<ul>
<li><strong>Counter-rotation:</strong> Arms move opposite to the legs</li>
<li><strong>Shoulder Movement:</strong> Natural swing for balance</li>
<li><strong>Energy Conservation:</strong> Efficient arm movement reduces energy expenditure</li>
</ul>
</div>
<div class="step" id="step7" style="display: none;">
<h2>Balance and Coordination</h2>
<p>Finally, we bring it all together. The timing, rhythm, and coordination of all your body parts create a seamless walking pattern.</p>
<ul>
<li><strong>Timing:</strong> Synchronized movement of all body parts</li>
<li><strong>Rhythm:</strong> Consistent, even pace</li>
<li><strong>Adaptation:</strong> Ability to adjust to different surfaces and environments</li>
</ul>
<p>Practice with the camera feature to see how your movement compares to the reference model.</p>
</div>
<!-- new page --------------------------------------------------------------->
<div id="step8" class="step" style="display: none;">
<div class="story-intro">
<h2>Walk the Walk, Talk the Talk</h2>
<div class="intro-content">
<p class="intro-text">
By analyzing different aspects of your movement, you can start identifying areas for improvement in your walking
posture. Even small changes—like adjusting your foot placement or enhancing core stability—can lead to healthier
habits that support long-term mobility and well-being. Every step you take matters.
</p>
<!-- <p class="intro-highlight">
Just like finding the right training partner, we'll match you with a reference model that fits your unique body type and health profile.
</p>
<p class="intro-next">
Continue reading to see how your body moves in real-time!
</p> -->
</div>
</div>
<div class="welcome-box">
<h2>Conclusion</h2>
<div class="intro-content">
<p class="intro-text">
Analyzing your walking patterns isn't just about the numbers. It's about understanding how your body moves and giving you the tools to improve.
We used coordinate points from 14 healthy subjects to create a 3-D model that mirrors real human walking.<br><br>This animated visualization allows
you to see your movements alongside the ideal walking pattern, highlighting your actions as you move. We split the visualizations to focus on
specific areas of the body one at a time: foot movement, knee alignment, hip rotation, and more, so you can zoom into each aspect of your gait.
<br><br>This breakdown helps you understand how each part of your body contributes to your overall walking pattern, making it easier to identify and
correct any areas that need improvement. With personalized insights, you can compare your movements to the healthy model and make adjustments
to improve your posture and walking efficiency, all in a way that's simple and intuitive.
</p>
<p class="intro-highlight">
Thank you for walking with us!
</p>
<!-- <p class="intro-next">
Click Next to begin your
step-by-step analysis, where you'll be able to compare your
movement with the reference model using your camera.
</p> -->
</div>
</div>
</div>
</div>
<!-- Visualization and camera container -->
<div class="main-content">
<div class="visualization-container">
<div id="reference-vis" class="skeleton-vis">
<h3>Reference Movement</h3>
<p>Make sure you're reading the information above!</p>
</div>
</div>
<div class="camera-container" style="display: none;">
<h3 class="camera-title">Your Movement</h3>
<video id="camera-feed" autoplay playsinline></video>
<canvas id="pose-canvas"></canvas>
</div>
</div>
<div class="controls">
<!-- <p id = "instructions" disabled>Make sure you're reading the information above to understand how this particular body part affects your gait, posture and health!</p> -->
<button id="back-btn" disabled>Back</button>
<button id="try-it-btn">Try It!</button>
<button id="next-btn">Next</button>
</div>
</div>
<script>
function onOpenCvReady() {
console.log('OpenCV.js is ready');
window.isOpenCvReady = true;
window.dispatchEvent(new Event('opencv-ready'));
}
</script>
<script src="script.js"></script>
</body>
</html>