-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
175 lines (166 loc) · 8.44 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Slouch Stoppah - Easy way to stop slouching at your desk</title>
<meta name="description" content="Here to help you with correcting your posture, and saving your spine. Get a notification every time you slouch at your desk, and remove that bad habit.">
<meta name="keywords" content="slouching, slouch, bad, posture, correct, help, simple, easy, stop, stopper">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bulma.min.css">
<link rel="stylesheet" type="text/css" href="css/noty.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
</head>
<body>
<div id="infoModal" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
<div class="box is-clearfix">
<h2 class="subtitle"><strong>How this page should be used</strong></h2>
<p class="is-size-7">
After sitting up straight and clicking on <strong>"Start video"</strong> you should
click on <strong>"Capture current position"</strong> to save the current calculated proportion
and vertical position of your head, and use that as a baseline. Upon clicking, the page will
try to measure your movements from the webcam every <strong>1500</strong> milliseconds by default,
and compare it to the captured values. By default, if the distance
difference is greater than or equal to <strong>4%</strong> you will be notified every
<strong>15 seconds</strong>, also by default. You can control these values on the page.
If you want to recapture your position just click on the capture button again.
</p>
<hr>
<p class="is-size-7">
You might need to stop the video feed to allow other
apps to use the camera. You can also hide the video output
to reduce resource usage.
</p>
<hr>
<h2 class="subtitle"><strong>Info & disclaimer</strong></h2>
<p class="is-size-7">
This page uses data from a client side facial detection library and tries to
detect if you're getting closer to the camer which might indicate slouching.
It then sends you a local notification for you to pull back and straighten up.
</p>
<hr>
<p class="is-size-7">
In <strong>no way</strong> does the page send any client data back to any servers.
This is purely a client side implementation. We use google analytics just to track
website traffic. You can use a tool like uBlock Origin to block this.
</p>
<button class="toggleInfoModal button is-pulled-right" aria-label="close">Close</button>
</div>
</div>
<button class="toggleInfoModal modal-close is-large" aria-label="close"></button>
</div>
<div class="container is-fullhd">
<section class="hero is-dark is-header">
<div class="hero-body">
<div class="container">
<h1 class="title">
Slouch stoppah
</h1>
<h2 class="subtitle">
Spine health personal assistant
</h2>
</div>
</div>
</section>
<div class="notification is-marginless">
If you are not sure how to sit correctly, take a look at
<a href="https://www.wikihow.com/Sit-up-Straight-at-a-Computer">this</a> link or just google it.
</div>
<div id="errorContainer" class="notification is-warning is-marginless">
</div>
<div id="distanceDisplay" class="notification is-marginless">
Detected percentage scale is <code id="scale">x</code> percent. <br> Your current vertical position is <code id="distance">x</code> percent.
<p id="capturedDistance"></p>
</div>
<div class="level is-marginless">
<div id="videoContent" class="level-left">
<div>
<canvas id="debugOverlay" width="266" height="200" style="display: none"></canvas>
<video></video>
</div>
</div>
<div id="infoContent" class="level-right">
<div>
<p class="is-6">
Notify me every
</p>
<div class="field has-addons">
<div class="control has-icons-right">
<input class="input" id="notificationFrequency" type="number" value="15">
<span class="icon is-small is-right">
<i class="fas fa-check">s</i>
</span>
</div>
</div><p class="is-6">
When the difference is greater than
</p>
<div class="field has-addons">
<div class="control has-icons-right">
<input class="input" id="breakPercentage" type="number" value="4">
<span class="icon is-small is-right">
<i class="fas fa-check">%</i>
</span>
</div>
</div>
<p class="is-6">
Detection frequency
</p>
<div class="field has-addons">
<div class="control has-icons-right">
<input class="input" id="detectionFrequency" type="number" value="1.5">
<span class="icon is-small is-right">
<i class="fas fa-check">s</i>
</span>
</div>
</div>
<button class="ui button control" id="startCamera">Start camera</button>
<button class="ui button control" id="captureDistance" disabled>Capture current position</button>
<br>
<br>
<label class="checkbox">
<input id="showVideoInput" type="checkbox" checked>
Show video input
</label>
<label class="checkbox">
<input id="playAudioAlerts" type="checkbox" checked>
Play audio alert
</label><a id="playTestSound"> ▶️</a>
<label class="checkbox">
<input id="showDebugOverlay" type="checkbox">
Show debug overlay
</label>
</div>
</div>
</div>
<div class="notification is-marginless">
This page only uses your camera feed for <strong>client side measurements</strong>. <a class="toggleInfoModal">Info</a>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Slouch stoppah</strong> by <a href="https://github.com/lnenad">Nenad Lukic</a>.
<strong>Sponsored</strong> by <a href="https://mockadillo.com">Mockadillo</a>.
The <a href="https://github.com/lnenad/slouch-stoppah">source code</a> is licensed
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
</p>
</div>
</footer>
</div>
</body>
<script src="js/face-api.min.js"></script>
<script src="js/noty.min.js"></script>
<script src="js/howler.min.js"></script>
<script src="js/utils.js"></script>
<script src="js/app.js" async></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-128132871-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-128132871-1');
</script>
</html>