-
Notifications
You must be signed in to change notification settings - Fork 0
/
gears.html
88 lines (88 loc) · 5.1 KB
/
gears.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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<link rel="icon" type="image/x-icon" href="img/unicycle.ico" />
<link href="http://fonts.googleapis.com/css?family=Quando" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/gears.css" rel="stylesheet" type="text/css" media="all" />
<title>gears.js – Bence Béky</title>
</head>
<body>
<div id="everything">
<div id="menubar"><ul>
<li><a class="menuitem" href="index.html">about</a></li>
<li><a class="menuitem" href="resume.html">résumé</a></li>
<li><a class="menuitem" href="download.html">download</a></li>
<li><a class="activemenuitem">gears.js</a></li>
</ul></div>
<div id="menuline"></div>
<div id="gears">
<h1>Gears</h1>
<p>Have you ever wondered what is the order of the gear ratios on your bike? When you want to downshift from 2-6, but not quite down to 2-5, if 3-4 would do the trick? Is your bike or your friend's bike faster in the highest gear, accounting for tire size too? One way is to calculate the <em>development</em>, that is, the distance you travel during one full revolution of the crankset, for all gears. This simple development plotter will do the job for you. Select your crankset, casette and tire from the list, or enter the number of teeth on your chainplates and sprokets and your tire circumference manually to generate a plot.</p>
<div class="input">
<p>Crankset</p>
<select id="chainring-list">
<option value="22, 32, 42">Mountain bike small</option>
<option value="26, 36, 46">Mountain bike medium</option>
<option value="28, 38, 48" selected>Mountain bike large</option>
<option value="39, 53">Road bike</option>
</select>
<input type="text" id="chainrings" value="28, 38, 48" />
</div>
<div class="input">
<p>Casette</p>
<select id="sprocket-list">
<option value="11, 13, 15, 18, 21, 24, 28">7 speed 11-28</option>
<option value="12, 14, 16, 18, 21, 24, 28">7 speed 12-28</option>
<option value="13, 15, 17, 20, 23, 26, 30">7 speed 13-30</option>
<option value="14, 16, 18, 21, 24, 28, 32">7 speed 14-32</option>
<option value="11, 13, 15, 17, 19, 21, 24, 28">8 speed 11-28</option>
<option value="11, 13, 15, 18, 21, 24, 28, 32" selected>8 speed 11-32</option>
<option value="12, 13, 14, 15, 17, 19, 21, 23">8 speed 12-23</option>
<option value="11, 12, 14, 16, 18, 21, 24, 28, 32">9 speed 11-32</option>
<option value="12, 14, 16, 18, 21, 24, 28, 32, 36">9 speed 12-36</option>
</select>
<input type="text" id="sprockets" value="11, 13, 15, 18, 21, 24, 28, 32" />
</div>
<div class="input">
<p>Tire circumference</p>
<select id="circumference-list">
<option value="1957">32-559 (26x1.25)</option>
<option value="2032">44-559 (26x1.75)</option>
<option value="2155" selected>32-622 (700x32c)</option>
<option value="2193">38-622 (700x38c)</option>
</select>
<input type="text" id="circumference" value="210 cm" />
<div class="unit" id="cm">cm</div>
<div class="unit" id="mm">mm</div>
<div class="unit" id="in">in</div>
</div>
<div id="gears-plot"></div>
<h2>References</h2>
<p>Definition of <a href="http://sheldonbrown.com/gloss_da-o.html#development">development</a>, also known as rollout.</p>
<p><a href="http://sheldonbrown.com/harris/k7.html">Common cassette sprockets.</a></p>
<p><a href="http://sheldonbrown.com/cyclecomp_c.html">Circumference of common tires.</a><p>
</div>
<div id="footerline"></div>
<div id="footerbar">
<h1>Bence Béky</h1>
<ul>
<li><a id="w3cvalidator" href="http://validator.w3.org" title="W3C validator">W3C validator</a></li>
<li><a class="transition" id="stackoverflow" href="http://stackoverflow.com/users/2375006/bence" title="stackoverflow">stackoverflow</a></li>
<li><a class="transition" id="github" href="https://github.com/bencebeky" title="github">github</a></li>
<li><a class="transition" id="linkedin" href="https://www.linkedin.com/in/bencebeky" title="linkedin">linkedin</a></li>
<li><a class="transition" id="email" href="mailto:zsebkecske--kukac--gmail--pont--com" title="e-mail">e-mail</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/switch.js"></script>
<script type="text/javascript" src="js/w3clink.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/gears.js"></script>
</body>
</html>