From 6cbde7f0367db21065b3d0bc6b46ce0f88193366 Mon Sep 17 00:00:00 2001 From: Chris Sheridan Date: Sun, 25 Mar 2018 23:24:38 +0100 Subject: [PATCH] 1.3 misc tweaks --- index.php | 364 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 272 insertions(+), 92 deletions(-) diff --git a/index.php b/index.php index 96deb57..733728a 100644 --- a/index.php +++ b/index.php @@ -29,13 +29,24 @@ table.resultTable label {} table.resultTable input {width:4em;} .unitSwitcher .ui-slider-switch { width: 9em } - div.resultBox {text-shadow:none;font-size:0.8em;} - .cadenceInput {width:200px!important;} */ + div.resultBox {text-shadow:none;font-size:0.8em;} */ body {font-family:arial,helvetica,sans-serif;font-size:1em;} input.sprockets, input.chainrings {width:90px;} table.resultTable {border-collapse:collapse;} - table.resultTable th, table.resultTable td {border:1px solid #777;} + table.resultTable th, table.resultTable td {font-size:.8em;border:1px solid #777;} + .cadenceInput, .crankLengthInput {width:200px!important;} + .chainringInput, .sprocketInput {width:120px!important;} + + /* @media only screen and (min-width: 980px){ + .ui-page, ui-footer { + width: 980px !important; + margin: 0 auto !important; + position: relative !important; + border-right: 5px #666 outset !important; + border-left: 5px #666 outset !important; + } + } */ ' : ''); ?> @@ -50,8 +61,9 @@ sprockets: [], wheelDiameter: 0, tyreDiameter: 0, + crankLength: 0, targetCadence: 0, - units: metric, + units: 'metric', varDump: function(dumpData, title) { // console.log(this); console.log(title, (dumpData ? JSON.parse(JSON.stringify(this)) : '')); @@ -60,12 +72,8 @@ var self = this; this.resetTable(); $("#clearAll").click(function(){self.clearAll()}); - $("#setMyDefaults").click(function(){ - self.setMyDefaults() - self.recalculate() - }); $("input").change(function(){ - if (this.name.indexOf('targetCadence') === 0) self.targetCadence = Number(this.value); + // if (this.name.indexOf('targetCadence') === 0) self.targetCadence = Number(this.value); // else if (this.name.indexOf('chainring') === 0) self.recalculate(); // else if (this.name.indexOf('sprocket') === 0) self.recalculate(); // else if (this.name.indexOf('unitToggler') === 0) self.recalculate(); @@ -73,29 +81,104 @@ self.recalculate() }); $("select").change(function(){ - if (this.name.indexOf('tyreDiameter') === 0) self.tyreDiameter = Number(this.value); - else if (this.name.indexOf('chainringCount') === 0) self.chainringCount = Number(this.value); - else if (this.name.indexOf('sprocketCount') === 0) self.sprocketCount = Number(this.value); - else if (this.name.indexOf('wheelDiameter') === 0) self.wheelDiameter = Number(this.value); + if (this.name.indexOf('preset') === 0) return self.usePreset(this.value); + // if (this.name.indexOf('tyreDiameter') === 0) self.tyreDiameter = Number(this.value); + // else if (this.name.indexOf('chainringCount') === 0) self.chainringCount = Number(this.value); + // else if (this.name.indexOf('sprocketCount') === 0) self.sprocketCount = Number(this.value); + // else if (this.name.indexOf('wheelDiameter') === 0) self.wheelDiameter = Number(this.value); if (self.debug) self.varDump(false, 'Select changed'); self.recalculate() }); - // this.setMyDefaults(); }, - setMyDefaults: function() { - // SET UP MY DEFAULT VALUES - $('[name=wheelDiameter]').val(622); - $('[name=tyreDiameter]').val(50); - $('[name=targetCadence]').val(90); - $('[name=sprocketCount]').val(9); - $('[name=chainringCount]').val(3); - var sprockets = [11,12,14,15,17,19,21,24,27] - var chainrings = [50,39,30]; - this.chainringCount = 3; - this.sprocketCount = 9; - for (c = 1; c < 4; c++) $('[name=chainring'+c+']').val(chainrings[c-1]); - for (s = 1; s < 10; s++) $('[name=sprocket'+s+']').val(sprockets[s-1]); - if (this.debug) this.varDump(true, 'setMyDefaults complete'); + usePreset: function(selectedPreset) { + if (!selectedPreset) selectedPreset = 'chris'; + var self = this; + this.clearAll(); + var presets = { + chris: { + chainrings: [50,39,30], + sprockets: [11,12,14,15,17,19,21,24,27], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + standard09: { + chainrings: [53,39], + sprockets: [12,13,14,15,17,19,21,23,25], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + standard10: { + chainrings: [53,39], + sprockets: [12,13,14,15,16,17,19,21,23,25], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + standard11: { + chainrings: [53,39], + sprockets: [11,12,13,14,15,17,19,21,23,25,28], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + compact09: { + chainrings: [50,34], + sprockets: [12,13,14,15,17,19,21,23,25], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + compact10: { + chainrings: [50,34], + sprockets: [12,13,14,15,16,17,19,21,23,25], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + compact11: { + chainrings: [50,34], + sprockets: [11,12,13,14,15,17,19,21,23,25,28], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + }, + triple09: { + chainrings: [50,39,30], + sprockets: [12,13,14,15,17,19,21,23,25], + wheelDiameter: 622, + tyreDiameter: 50, + crankLength: 170, + targetCadence: 90, + units: 'imperial' + } + }; + // $.each(presets[selectedPreset], function(index, value){ + // self[index] = value; + // console.log(index,value); + // $('[name='+index+']').val(value); + // }); + $('[name=wheelDiameter]').val(presets[selectedPreset]['wheelDiameter']).selectmenu("refresh", true); + $('[name=tyreDiameter]').val(presets[selectedPreset]['tyreDiameter']).selectmenu("refresh", true); + $('[name=targetCadence]').val(presets[selectedPreset]['targetCadence']); + $('[name=crankLength]').val(presets[selectedPreset]['crankLength']); + for (c = 1; c <= presets[selectedPreset]['chainrings'].length; c++) $('[name=chainring'+c+']').val(presets[selectedPreset]['chainrings'][c-1]); + for (s = 1; s <= presets[selectedPreset]['sprockets'].length; s++) $('[name=sprocket'+s+']').val(presets[selectedPreset]['sprockets'][s-1]); this.recalculate(); }, recalculate: function() { @@ -105,6 +188,7 @@ this.wheelDiameter = Number($('[name=wheelDiameter]').val()); this.tyreDiameter = Number($('[name=tyreDiameter]').val()); this.targetCadence = Number($('[name=targetCadence]').val()); + this.crankLength = Number($('[name=crankLength]').val()); if (this.chainrings.length && this.sprockets.length) { for (crank=0; crank < this.chainrings.length; crank++) { $('th.chainring'+(crank +1)).text(this.chainrings[crank]).show(); @@ -117,11 +201,17 @@ var output = 'Ratio='+ratio + ':1'; if (this.wheelDiameter) { output += '
MD='+this.getUnitValue((((this.wheelDiameter + this.tyreDiameter) * 3.141 * ratio)/1000), 'm'); - output += '
ED='+this.getUnitValue(((this.wheelDiameter + this.tyreDiameter) * ratio), 'mm'); - output += '
GI='+(((this.wheelDiameter + this.tyreDiameter) / 25.4) * ratio).toFixed(0) + 'in'; + // output += '
ED='+this.getUnitValue(((this.wheelDiameter + this.tyreDiameter) * ratio), 'mm'); + // output += '
GI='+(((this.wheelDiameter + this.tyreDiameter) / 25.4) * ratio).toFixed(0) + 'in'; + output += '
GI='+this.getUnitValue(((this.wheelDiameter + this.tyreDiameter) * ratio)/10, 'cm'); + if (this.crankLength) { + // ((wheel + tyre radius) / crank length) * gear ratio + var gr = ((((this.wheelDiameter + this.tyreDiameter) / 2) / this.crankLength) * ratio).toFixed(2); + output += '
GR='+gr; + } if (this.targetCadence) { var speed = (((this.wheelDiameter + this.tyreDiameter) * 3.141) * ratio * this.targetCadence * 60) / 1000000; - output += '
'+this.getUnitValue(speed,'km/h')+'@'+this.targetCadence+'rpm'; + output += '
'+this.targetCadence+'rpm='+this.getUnitValue(speed,'km/h'); } } if ($('#showColours').is(':checked')) $('.chainring'+(crank+1) +'sprocket'+(sprocket+1)).css('background-color','hsl('+this.getHue(ratio)+', 100%, 50%)'); @@ -132,8 +222,8 @@ } if (this.sprockets.length >=2) { derailleurCapacityVal = Math.max.apply(Math, this.chainrings) - Math.min.apply(Math, this.chainrings) + Math.max.apply(Math, this.sprockets) - Math.min.apply(Math, this.sprockets); - derailleurCapacityText = derailleurCapacityVal + ' ('+Math.max.apply(Math, this.chainrings)+'-'+Math.min.apply(Math, this.chainrings)+'+'+Math.max.apply(Math, this.sprockets)+'-'+Math.min.apply(Math, this.sprockets)+')'; - $('#derailleurCapacity').text('Derailleur capacity required: '+derailleurCapacityText).show(); + derailleurCapacityText = '('+Math.max.apply(Math, this.chainrings)+'-'+Math.min.apply(Math, this.chainrings)+')+('+Math.max.apply(Math, this.sprockets)+'-'+Math.min.apply(Math, this.sprockets)+') = '+derailleurCapacityVal; + $('#derailleurCapacity').text('Derailleur capacity: '+derailleurCapacityText).show(); } $('.resultTable').show(); } @@ -148,6 +238,7 @@ if (unit == 'km/h') return (value * 0.621371192).toFixed(2) + 'mph'; if (unit == 'm') return (value * 3.2808399).toFixed(2) + 'ft'; if (unit == 'mm') return (value /25.4).toFixed(2) + 'in'; + if (unit == 'cm') return (value /2.54).toFixed(2) + 'in'; }, getHue: function(ratio) { return ((5 - ratio) * 20).toFixed(0); @@ -167,7 +258,7 @@ var self = this; this.sprockets = []; $('.sprockets').each(function(el){ - var sprocket = Number($(this).val()) + var sprocket = Number($(this).val()); if (sprocket) self.sprockets.push(sprocket); }); this.sprocketCount = this.sprockets.length; @@ -178,11 +269,13 @@ $('.result').html('').css('background-color', 'transparent'); $('input.chainrings').val(''); $('input.sprockets').val(''); - $('[name=wheelDiameter]').val(0); + $('[name=wheelDiameter]').val(0).selectmenu("refresh", true); $('[name=chainringCount]').val(0); $('[name=sprocketCount]').val(0); - $('[name=tyreDiameter]').val(0); + $('[name=tyreDiameter]').val(0).selectmenu("refresh", true); + $('[name=crankLength]').val(''); $('[name=targetCadence]').val(''); + // $('[name=presets]').val(0).selectmenu("refresh", true); if (this.debug) this.varDump(true, 'clearAll complete'); this.recalculate(); }, @@ -205,68 +298,115 @@
- Info - Settings - - -
-

- - - -

-

- - '; ?> -

-

- - -

-

- - -

-

- - /> -

-

+ Info + + + + +

+ + + + +
+
+ + '; ?> +
+
+ + +
+
+ + +
+
+ + /> +
+
+ + /> +
+ + +
+ +
+ + + + +
+
+ + + +
+ + +

- - - - Chainring '.$chainring.''; - ?> - + +
Summary
+ + + + Chainring '.$chainring.''; + ?> + + + '; @@ -277,6 +417,31 @@ echo ''; } ?> + +
+ + + + + Sprocket '.$sprocket.''; + } + ?> + + + + '; + echo ''; + for ($sprocket=1;$sprocket<=$maxSprockets;$sprocket++) { + echo ''; + } + echo ''; + } + ?> +
Chainring '.$chainring.'chainring'.$chainring.'sprocket'.$sprocket.'
@@ -285,15 +450,30 @@
- Settings Results

Gear Ratio Calculator

+ +
    + +
  • Ratio: Metres of Development (wiki) describes the distance travelled for each pedal revolution
    • +
  • MD: Metres of Development (wiki) describes the distance travelled for each pedal revolution
    • +
  • GI: Gear Inches (wiki) also known as Effective Diameter, describes gear ratios in terms of the diameter of an equivalent directly driven wheel. The formula to calculate it is (wheel + tyre diameter in inches) × (chainring toothcount ÷ sprocket toothcount)
    • +
  • GR: Gain Ratio is a Sheldon Brown 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 "gain ratio". It describes the ratio of distance travelled by the bike relative to the radial distance moved of the pedals. His formula is ((wheel + tyre radius) ÷ crank length) × gear ratio. The benefits of this include: +
      +
    1. Given 2 identically geared/wheeled bikes you can see a numerical representation of the mechanical dis/advantage if they have different crank lengths.
      2. +
    2. It's dimensionless, so whether you supply the measurements in inches, mm or microns the resulting value is the same.
      3. +
    3. It's like a universal language for comparing gearing, all reduced to a single number!
      4. +
    • +
  • Speed/cadence: Optionally add a target cadence to see the speed each gear will achieve at that cadence
    • +
  • Derailleur capacity: This will tell you what capacity derailleur you should be looking for based upon your crank & cassette. The formula to calculate it is (largest sprocket - smallest sprocket) + (largest chainring - smallest chainring)
    • +