-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
340 lines (321 loc) · 24.2 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
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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!DOCTYPE html>
<html lang="en">
<head>
<!--
REFERENCES:
TYRE SIZES
http://www.ctc.org.uk/cyclists-library/components/wheels-tyres/tyre-sizes
SIMILAR TOOL
http://www.bikecalc.com/gear_ratios
http://www.whycycle.co.uk/bike-gear-calculator
JQUERY MOBILE
http://www.w3schools.com/jquerymobile/
http://demos.jquerymobile.com/1.4.5/forms/
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gear ratio calculator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<noscript>
<p class="noScript">You appear not to have Javascript enabled so this tool will not work for you!</p>
</noscript>
<div class="uk-container">
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<h1 class="uk-text-center"><span uk-icon="icon: cog;ratio:2;"></span> Bike Gearing Calculator</h1>
<!-- <ul class="uk-navbar-nav">
<li class="uk-active">
<a href="./">Home</a>
</li>
<li>
<a href="">Info</a>
</li>
</ul> -->
</div>
</nav>
<ul uk-accordion>
<li>
<a class="uk-accordion-title" href="#">Info/About</a>
<div class="uk-accordion-content">
<p><b>Usage:</b> on the calculator page you can enter cassette & chainring sizes, crank length, tyre & wheel diameter etc. Based upon the info you enter you will be able to see the results described below.</p>
<p>There are several presets saved with common gear configurations which can be useful for a quick starting point.</p>
<ul>
<li><b>Ratio:</b> Gear Ratio describes the rotations of the output gear in relation to rotations from the input gear. A ratio of 3:1 would mean that the wheel would rotate 3 times for each rotation of the chainring.</li>
<li><b>MD:</b> Metres of Development (<a href="https://en.wikipedia.org/wiki/Gear_inches#Relationship_to_metres_of_development" target="_blank" rel="noreferrer" title="Click here for Wikipedias explanation">wiki</a>) describes the
distance the bike will travel for each full pedal revolution.<br />The formula is <i>(wheel diameter + tyre diameter) × π × gear ratio</i></li>
<li><b>GI:</b> Gear Inches (<a href="https://en.wikipedia.org/wiki/Gear_inches" target="_blank" rel="noreferrer" title="Click here for Wikipedias explanation">wiki</a>) also known as Effective Diameter, describes gear ratios in terms
of the diameter of an equivalent directly driven wheel if the pedals were fixed to that wheel (like a Penny Farthing).<br />The formula to calculate it is <i>(wheel + tyre diameter in inches) × (chainring toothcount ÷ sprocket toothcount)</i></li>
</li>
<li><b>GR:</b> Gain Ratio is a <a href="https://en.wikipedia.org/wiki/Sheldon_Brown_(bicycle_mechanic)" target="_blank" rel="noreferrer">Sheldon Brown</a> innovation. Traditional measurements (GI, MD etc.) don't allow for the dis/advantage of
pedal arm (crank) length and also make easy comparison of different gearing tricky (46/16 is the same as 53/19 - if the crank lengths are the same) so Sheldon Brown proposed a gear measurement system called <a href="http://sheldonbrown.com/gain.html"
target="_blank" rel="noreferrer" title="Click here for Sheldons explanation!">"gain ratio"</a>. It describes the ratio of distance travelled by the bike relative to the radial distance moved of the pedals.<br />His formula is
<i>((wheel + tyre radius) ÷ crank length) × gear ratio</i>. The benefits of this include:
<ol>
<li>Given 2 identically geared/wheeled bikes you can see a numerical representation of the mechanical dis/advantage if they have different crank lengths.</li>
<li>It's <a href="https://en.wikipedia.org/wiki/Dimensionless_quantity" target="_blank" rel="noreferrer">dimensionless</a>, so whether you supply the measurements in inches, mm or microns the resulting value is the same.</li>
<li>It's like a universal language for comparing gearing, all reduced to a single number!</li>
</ol>
</li>
<li><b>Speed/cadence:</b> Optionally add a target cadence to see the speed each gear will achieve at that cadence.<br />The formula is <i>km/h = ((wheel diameter(mm) + tyre diameter(mm)) × π) × ratio × cadence × 60 ÷ 100,000</i></li>
<li><b>Derailleur capacity:</b> This will tell you what capacity derailleur you should be looking for based upon your crank & cassette.<br />The formula to calculate it is <i>(largest sprocket - smallest sprocket) + (largest chainring - smallest chainring)</i></li>
</ul>
</div>
</li>
</ul>
<form class="uk-form-stacked">
<div class="uk-grid-small uk-child-width-expand@s" uk-grid>
<div>
<select name="presets" class="uk-select">
<option>Load a preset</option>
</select>
<div class="uk-margin">
<label class="uk-form-label" for="chainring1" title="Chainring & sprocket data is required! Add 1-3 rings and 1-11 sprockets">Chainrings:</label>
<input class="uk-input uk-form-width-small chainrings" placeholder="Chainring 1" type="number" name="chainring1" id="chainring1" />
<input class="uk-input uk-form-width-small chainrings" placeholder="Chainring 2" type="number" name="chainring2" id="chainring2" />
<input class="uk-input uk-form-width-small chainrings" placeholder="Chainring 3" type="number" name="chainring3" id="chainring3" />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="sprocket1" title="Chainring & sprocket data is required! Add 1-3 rings and 1-11 sprockets">Sprockets:</label>
<input placeholder="Sprocket 1" class="uk-input uk-form-width-small sprockets sprocket1" name="sprocket1" type="number" id="sprocket1" />
<input placeholder="Sprocket 2" class="uk-input uk-form-width-small sprockets sprocket2" name="sprocket2" type="number" id="sprocket2" />
<input placeholder="Sprocket 3" class="uk-input uk-form-width-small sprockets sprocket3" name="sprocket3" type="number" id="sprocket3" />
<input placeholder="Sprocket 4" class="uk-input uk-form-width-small sprockets sprocket4" name="sprocket4" type="number" id="sprocket4" />
<input placeholder="Sprocket 5" class="uk-input uk-form-width-small sprockets sprocket5" name="sprocket5" type="number" id="sprocket5" />
<input placeholder="Sprocket 6" class="uk-input uk-form-width-small sprockets sprocket6" name="sprocket6" type="number" id="sprocket6" />
<input placeholder="Sprocket 7" class="uk-input uk-form-width-small sprockets sprocket7" name="sprocket7" type="number" id="sprocket7" />
<input placeholder="Sprocket 8" class="uk-input uk-form-width-small sprockets sprocket8" name="sprocket8" type="number" id="sprocket8" />
<input placeholder="Sprocket 9" class="uk-input uk-form-width-small sprockets sprocket9" name="sprocket9" type="number" id="sprocket9" />
<input placeholder="Sprocket 10" class="uk-input uk-form-width-small sprockets sprocket10" name="sprocket10" type="number" id="sprocket10" />
<input placeholder="Sprocket 11" class="uk-input uk-form-width-small sprockets sprocket11" name="sprocket11" type="number" id="sprocket11" />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="wheelDiameter" title="If you add your wheel & tyre diameter your results will include more data such as Metres Development (MD) & Gear Inches (GI)">Wheel Diameter (mm):</label>
<select name="wheelDiameter" id="wheelDiameter" class="uk-select uk-form-width-medium">
<option value="0">Select wheel size</option>
<option value="630">27inch (630mm)</option>
<option value="622">700c/29er (622mm)</option>
<option value="584">650b/27.5 (584mm)</option>
<option value="571">650c (571mm)</option>
<option value="559">26inch (559mm-mtb)</option>
<option value="547">24inch (547mm-S5)</option>
<option value="540">24inch (540mm-E6)</option>
<option value="520">24inch (520mm-Terry)</option>
<option value="451">20inch (451mm-Recumbent)</option>
<option value="419">20inch (419mm-Schwinn)</option>
<option value="406">20inch (406mm-Recumbent)</option>
</select>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="tyreDiameter" title="If you add your wheel & tyre diameter your results will include more data such as Metres Development (MD) & Gear Inches (GI)">Tyre Diameter (mm):</label>
<select name="tyreDiameter" id="tyreDiameter" class="uk-select uk-form-width-medium">
<option value="0">Select tyre diameter</option>
<option value="36">18c</option>
<option value="46">23c</option>
<option value="50">25c</option>
<option value="56">28c</option>
<option value="64">32c</option>
<option value="70">35c</option>
<option value="94">47c</option>
</select>
</div>
</div>
<div>
<div class="uk-margin">
<label class="uk-form-label" for="crankLength" title="This value can drastically alter the way 2 identically geared bikes feel to pedal. See the info page for a more detailed explanation...">Crank length (mm):</label>
<input name="crankLength" id="crankLength" class="uk-input uk-form-width-medium" placeholder="Crank length (mm)" type="number" />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="targetCadence" title="If you enter a cadence value here your results will include the speed at this cadence for each of your gear combinations.">Target cadence (rpm):</label>
<input name="targetCadence" id="targetCadence" class="uk-input uk-form-width-medium" placeholder="Target cadence (rpm)" type="number" />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="orientationToggler" title="You can display the results in a landscape or portait result table">Result table orientation:</label>
<input type="radio" class="uk-radio" name="orientationToggler" id="landscape" value="landscape" checked="checked">
<label for="landscape">Landscape</label>
<input type="radio" class="uk-radio" name="orientationToggler" id="portrait" value="portrait">
<label for="portrait">Portrait</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="unitToggler" title="You can select metric or imperial units for the results. This includes recalculating gear INCHES or METRES development into your chosen units, which might seem odd but actually makes sense!">Units:</label>
<input type="radio" class="uk-radio" name="unitToggler" id="metric" value="metric" checked="checked">
<label for="metric">Metric</label>
<input type="radio" class="uk-radio" name="unitToggler" id="imperial" value="imperial">
<label for="imperial">Imperial</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="resultsOrder" title="Control the ordering of the result table, sorting by gear ratio">Results order:</label>
<input type="radio" class="uk-radio" name="resultsOrder" id="ascending" value="ascending" checked="checked">
<label for="ascending">Ascending</label>
<input type="radio" class="uk-radio" name="resultsOrder" id="descending" value="descending">
<label for="descending">Descending</label>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="colourToggler" title="The results table is colour coded by default showing how relatively hard (red) or easy (green) each of the gears is to pedal in. On some displays the colouring makes the text tricky to read so you can toggle the colouring here.">Colours:</label>
<input type="radio" class="uk-radio" name="colourToggler" id="colourOn" value="1" checked="checked">
<label for="colourOn">Coloured</label>
<input type="radio" class="uk-radio" name="colourToggler" id="colourOff" value="0">
<label for="colourOff">Plain</label>
</div>
<div class="uk-margin">
<button type="button" id="clearAll" class="uk-button uk-button-primary">Clear data</button>
</div>
</div>
</div>
<div class="uk-margin">
<table class="resultTable landscape">
<thead>
<tr>
<th></th>
<th class="sprocketHeading sprocket1">Sprocket 1</th>
<th class="sprocketHeading sprocket2">Sprocket 2</th>
<th class="sprocketHeading sprocket3">Sprocket 3</th>
<th class="sprocketHeading sprocket4">Sprocket 4</th>
<th class="sprocketHeading sprocket5">Sprocket 5</th>
<th class="sprocketHeading sprocket6">Sprocket 6</th>
<th class="sprocketHeading sprocket7">Sprocket 7</th>
<th class="sprocketHeading sprocket8">Sprocket 8</th>
<th class="sprocketHeading sprocket9">Sprocket 9</th>
<th class="sprocketHeading sprocket10">Sprocket 10</th>
<th class="sprocketHeading sprocket11">Sprocket 11</th>
</tr>
</thead>
<tbody>
<tr>
<th class="chainringHeading chainring1">Chainring 1</th>
<td class="result chainring1sprocket1">chainring1sprocket1</td>
<td class="result chainring1sprocket2">chainring1sprocket2</td>
<td class="result chainring1sprocket3">chainring1sprocket3</td>
<td class="result chainring1sprocket4">chainring1sprocket4</td>
<td class="result chainring1sprocket5">chainring1sprocket5</td>
<td class="result chainring1sprocket6">chainring1sprocket6</td>
<td class="result chainring1sprocket7">chainring1sprocket7</td>
<td class="result chainring1sprocket8">chainring1sprocket8</td>
<td class="result chainring1sprocket9">chainring1sprocket9</td>
<td class="result chainring1sprocket10">chainring1sprocket10</td>
<td class="result chainring1sprocket11">chainring1sprocket11</td>
</tr>
<tr>
<th class="chainringHeading chainring2">Chainring 2</th>
<td class="result chainring2sprocket1">chainring2sprocket1</td>
<td class="result chainring2sprocket2">chainring2sprocket2</td>
<td class="result chainring2sprocket3">chainring2sprocket3</td>
<td class="result chainring2sprocket4">chainring2sprocket4</td>
<td class="result chainring2sprocket5">chainring2sprocket5</td>
<td class="result chainring2sprocket6">chainring2sprocket6</td>
<td class="result chainring2sprocket7">chainring2sprocket7</td>
<td class="result chainring2sprocket8">chainring2sprocket8</td>
<td class="result chainring2sprocket9">chainring2sprocket9</td>
<td class="result chainring2sprocket10">chainring2sprocket10</td>
<td class="result chainring2sprocket11">chainring2sprocket11</td>
</tr>
<tr>
<th class="chainringHeading chainring3">Chainring 3</th>
<td class="result chainring3sprocket1">chainring3sprocket1</td>
<td class="result chainring3sprocket2">chainring3sprocket2</td>
<td class="result chainring3sprocket3">chainring3sprocket3</td>
<td class="result chainring3sprocket4">chainring3sprocket4</td>
<td class="result chainring3sprocket5">chainring3sprocket5</td>
<td class="result chainring3sprocket6">chainring3sprocket6</td>
<td class="result chainring3sprocket7">chainring3sprocket7</td>
<td class="result chainring3sprocket8">chainring3sprocket8</td>
<td class="result chainring3sprocket9">chainring3sprocket9</td>
<td class="result chainring3sprocket10">chainring3sprocket10</td>
<td class="result chainring3sprocket11">chainring3sprocket11</td>
</tr>
</tbody>
</table>
<table class="resultTable portrait">
<thead>
<tr>
<th></th>
<th class="chainringHeading chainring1">Chainring 1</th>
<th class="chainringHeading chainring2">Chainring 2</th>
<th class="chainringHeading chainring3">Chainring 3</th>
</tr>
</thead>
<tbody>
<tr>
<th class="sprocketHeading sprocket1">Sprocket 1</th>
<td class="result chainring1sprocket1">chainring1sprocket1</td>
<td class="result chainring2sprocket1">chainring2sprocket1</td>
<td class="result chainring3sprocket1">chainring3sprocket1</td>
</tr>
<tr>
<th class="sprocketHeading sprocket2">Sprocket 2</th>
<td class="result chainring1sprocket2">chainring1sprocket2</td>
<td class="result chainring2sprocket2">chainring2sprocket2</td>
<td class="result chainring3sprocket2">chainring3sprocket2</td>
</tr>
<tr>
<th class="sprocketHeading sprocket3">Sprocket 3</th>
<td class="result chainring1sprocket3">chainring1sprocket3</td>
<td class="result chainring2sprocket3">chainring2sprocket3</td>
<td class="result chainring3sprocket3">chainring3sprocket3</td>
</tr>
<tr>
<th class="sprocketHeading sprocket4">Sprocket 4</th>
<td class="result chainring1sprocket4">chainring1sprocket4</td>
<td class="result chainring2sprocket4">chainring2sprocket4</td>
<td class="result chainring3sprocket4">chainring3sprocket4</td>
</tr>
<tr>
<th class="sprocketHeading sprocket5">Sprocket 5</th>
<td class="result chainring1sprocket5">chainring1sprocket5</td>
<td class="result chainring2sprocket5">chainring2sprocket5</td>
<td class="result chainring3sprocket5">chainring3sprocket5</td>
</tr>
<tr>
<th class="sprocketHeading sprocket6">Sprocket 6</th>
<td class="result chainring1sprocket6">chainring1sprocket6</td>
<td class="result chainring2sprocket6">chainring2sprocket6</td>
<td class="result chainring3sprocket6">chainring3sprocket6</td>
</tr>
<tr>
<th class="sprocketHeading sprocket7">Sprocket 7</th>
<td class="result chainring1sprocket7">chainring1sprocket7</td>
<td class="result chainring2sprocket7">chainring2sprocket7</td>
<td class="result chainring3sprocket7">chainring3sprocket7</td>
</tr>
<tr>
<th class="sprocketHeading sprocket8">Sprocket 8</th>
<td class="result chainring1sprocket8">chainring1sprocket8</td>
<td class="result chainring2sprocket8">chainring2sprocket8</td>
<td class="result chainring3sprocket8">chainring3sprocket8</td>
</tr>
<tr>
<th class="sprocketHeading sprocket9">Sprocket 9</th>
<td class="result chainring1sprocket9">chainring1sprocket9</td>
<td class="result chainring2sprocket9">chainring2sprocket9</td>
<td class="result chainring3sprocket9">chainring3sprocket9</td>
</tr>
<tr>
<th class="sprocketHeading sprocket10">Sprocket 10</th>
<td class="result chainring1sprocket10">chainring1sprocket10</td>
<td class="result chainring2sprocket10">chainring2sprocket10</td>
<td class="result chainring3sprocket10">chainring3sprocket10</td>
</tr>
<tr>
<th class="sprocketHeading sprocket11">Sprocket 11</th>
<td class="result chainring1sprocket11">chainring1sprocket11</td>
<td class="result chainring2sprocket11">chainring2sprocket11</td>
<td class="result chainring3sprocket11">chainring3sprocket11</td>
</tr>
</tbody>
</table>
</div>
<div id="resultListContainer">
<p id="derailleurCapacity"></p>
<p>The list below shows the gear ratios in ascending order. Any gear combinations whose ratios are close (within <span id="percentageNote"></span>% of each other) are noted.</p>
<ul id="resultList" class="uk-list"></ul>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<script src="gears.js" type="text/javascript"></script>
</body>
</html>