Clean up for Gitea migration.
This commit is contained in:
commit
0a2e6614c4
|
|
@ -0,0 +1,36 @@
|
||||||
|
# Resistor Color Code Calculator
|
||||||
|
|
||||||
|
A simple web app for computing the the resistance of a resistor.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### Using PHP's built-in web server (PHP must be installed on your machine):
|
||||||
|
|
||||||
|
``` bash
|
||||||
|
php -t . -S localhost:4000
|
||||||
|
# or
|
||||||
|
make server-start
|
||||||
|
```
|
||||||
|
|
||||||
|
## Reference
|
||||||
|
|
||||||
|
### Color Values
|
||||||
|
|
||||||
|
From https://en.wikipedia.org/wiki/Electronic_color_code.
|
||||||
|
|
||||||
|
Color | Value | Multiplier | Tolerance | HEX Color | PPM
|
||||||
|
---|---|---|---|---|---|
|
||||||
|
None | - | - | ±20% | - | -
|
||||||
|
Pink | - | 0.001 | - | #e91e63 | -
|
||||||
|
Silver | - | 0.01 | ±10% | #b0bec5 | -
|
||||||
|
Gold | - | 0.1 | ±5% | #ffea00 | -
|
||||||
|
Black | 0 | 0 | - | #212121 | 250
|
||||||
|
Brown | 1 | 10 | ±1% | #795548 | 100
|
||||||
|
Red | 2 | 100 | ±2% | #f44336 | 50
|
||||||
|
Orange | 3 | 1 000 | - | #ff9800 | 15
|
||||||
|
Yellow | 4 | 10 000 | ±5% | #fdd835 | 25
|
||||||
|
Green | 5 | 100 000 | ±0.5% | #4caf50 | 20
|
||||||
|
Blue | 6 | 1 000 000 | ±0.25% | #2196f3 | 10
|
||||||
|
Violet | 7 | 10 000 000 | ±0.1% | #9c27b0 | 5
|
||||||
|
Gray | 8 | 100 000 000 | ±0.05% | #9e9e9e | 1
|
||||||
|
White | 9 | 1 000 000 000 | - | #fafafa | -
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<link rel="stylesheet" href="res/css/tachyons.min.css" />
|
||||||
|
<link rel="stylesheet" href="res/css/app.css" />
|
||||||
|
<title>Resistor Color Code Calculator</title>
|
||||||
|
<script src="res/js/vue.min.js"></script>
|
||||||
|
</head>
|
||||||
|
<body class="sans-serif bg-near-white">
|
||||||
|
<div id="app" class="ph4 pv2 mw7 w-100 center">
|
||||||
|
<div class="cf ph2-ns">
|
||||||
|
<div class="fl w-100 w-100-ns pa2 tc">
|
||||||
|
<p class="f2 black-80 mb0">{{ resistorValueText }}</p>
|
||||||
|
<p class="mb4 black-60 mb0">Resistor Value</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns bb b--black-10">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>No. of Bands:</span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="bandCountSelection" class="w-30" v-model="bandCount" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="band in availableBands" v-bind:value="band.id" v-bind:selected="bandCount == band.id">{{ band.text }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>1<sup>st</sup> Band</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band1).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band1" class="w-30" v-model="selectedColors.band1" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in getValueColors(bandCount == 0)" v-bind:value="color.color" v-bind:selected="selectedColors.band1 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>2<sup>nd</sup> Band</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band2).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band2" class="w-30" v-model="selectedColors.band2" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in getValueColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band2 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns" v-if="bandCount != 0 && bandCount != 1">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>3<sup>rd</sup> Band</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band3).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band2" class="w-30" v-model="selectedColors.band3" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in getValueColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band3 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>Multiplier</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band4).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band4" class="w-30" v-model="selectedColors.band4" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in bandColors" v-bind:value="color.color" v-bind:selected="selectedColors.band4 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns" v-if="bandCount != 0">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>Tolerance</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band5).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band5" class="w-30" v-model="selectedColors.band5" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in getToleranceColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band5 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cf ph2-ns" v-if="bandCount == 3">
|
||||||
|
<div class="fl w-50 pa2 tr">
|
||||||
|
<span>Tempco (PPM)</span>
|
||||||
|
<span class="dib ml2 br1 band color" v-bind:style="{ backgroundColor: getColorByName(selectedColors.band6).hex }"></span>
|
||||||
|
</div>
|
||||||
|
<div class="fl w-50 pa2">
|
||||||
|
<select id="band2" class="w-30" v-model="selectedColors.band6" style="min-width: 100px;" v-on:change="computeResistorValue">
|
||||||
|
<option v-for="color in getPPMColors()" v-bind:value="color.color" v-bind:selected="selectedColors.band6 == color.color">{{ color.color }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="res/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
select {
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.band.color {
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,206 @@
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
|
||||||
|
data: {
|
||||||
|
resistorResistanceValue: 1,
|
||||||
|
resistorToleranceValue: 0,
|
||||||
|
resistorValueText: '',
|
||||||
|
bandCount: 1,
|
||||||
|
availableBands: [
|
||||||
|
{ id: 0, text: '3' },
|
||||||
|
{ id: 1, text: '4' },
|
||||||
|
{ id: 2, text: '5' },
|
||||||
|
{ id: 3, text: '6' },
|
||||||
|
],
|
||||||
|
selectedColors: {
|
||||||
|
band1: null,
|
||||||
|
band2: null,
|
||||||
|
band3: null,
|
||||||
|
band4: null, // multiplier
|
||||||
|
band5: null, // tolerance
|
||||||
|
band6: null // tempco/ppm
|
||||||
|
},
|
||||||
|
bandColors: [
|
||||||
|
{ value: 0, tolerance: null, multiplier: 1, color: 'Black' , hex: '#212121', ppm: 250 },
|
||||||
|
{ value: 1, tolerance: 1, multiplier: 10, color: 'Brown' , hex: '#795548', ppm: 100 },
|
||||||
|
{ value: 2, tolerance: 2, multiplier: 100, color: 'Red' , hex: '#f44336', ppm: 50 },
|
||||||
|
{ value: 3, tolerance: null, multiplier: 1000, color: 'Orange' , hex: '#ff9800', ppm: 15 },
|
||||||
|
{ value: 4, tolerance: 5, multiplier: 10000, color: 'Yellow' , hex: '#ffea00', ppm: 25 },
|
||||||
|
{ value: 5, tolerance: 0.5, multiplier: 100000, color: 'Green' , hex: '#4caf50', ppm: 20 },
|
||||||
|
{ value: 6, tolerance: 0.25, multiplier: 1000000, color: 'Blue' , hex: '#2196f3', ppm: 10 },
|
||||||
|
{ value: 7, tolerance: 0.1, multiplier: 10000000, color: 'Violet' , hex: '#9c27b0', ppm: 5 },
|
||||||
|
{ value: 8, tolerance: 0.05, multiplier: 100000000, color: 'Gray' , hex: '#9e9e9e', ppm: 1 },
|
||||||
|
{ value: 9, tolerance: null, multiplier: 1000000000, color: 'White' , hex: '#fafafa', ppm: null },
|
||||||
|
{ value: null, tolerance: 5, multiplier: 0.1, color: 'Gold' , hex: '#fdd835', ppm: null },
|
||||||
|
{ value: null, tolerance: 10, multiplier: 0.01, color: 'Silver' , hex: '#b0bec5', ppm: null },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* Setup initial field values.
|
||||||
|
*/
|
||||||
|
init: function() {
|
||||||
|
this.selectedColors.band1 = this.getValueColors(true)[0].color;
|
||||||
|
this.selectedColors.band2 = this.getValueColors()[0].color;
|
||||||
|
this.selectedColors.band3 = this.getValueColors()[0].color;
|
||||||
|
this.selectedColors.band4 = this.getValueColors()[0].color;
|
||||||
|
this.selectedColors.band5 = this.getToleranceColors()[0].color;
|
||||||
|
this.selectedColors.band6 = this.getPPMColors()[0].color;
|
||||||
|
|
||||||
|
this.computeResistorValue();
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the band color object by color name.
|
||||||
|
* @param {string} name - The name of the color to find.
|
||||||
|
*/
|
||||||
|
getColorByName: function (name) {
|
||||||
|
var color = null;
|
||||||
|
this.bandColors.forEach(x => {
|
||||||
|
if (x.color == name)
|
||||||
|
color = x;
|
||||||
|
});
|
||||||
|
return color;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets color from band color collection depending on certain criteria.
|
||||||
|
* @param {function} comparator - the criteria/condition for selecting color band.
|
||||||
|
*/
|
||||||
|
getColors: function(comparator) {
|
||||||
|
var valueColors = [];
|
||||||
|
this.bandColors.forEach(x => {
|
||||||
|
if (comparator(x))
|
||||||
|
valueColors.push(x);
|
||||||
|
});
|
||||||
|
return valueColors;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get band color for value selection.
|
||||||
|
* @param {bool} excludeBlack - Determines if black is excluded from list (for 1st band, 4 bands setting).
|
||||||
|
*/
|
||||||
|
getValueColors: function (excludeBlack = false) {
|
||||||
|
return this.getColors(x => x.value != null && !(excludeBlack && x.value == 0));
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get band color for tolerance selection.
|
||||||
|
*/
|
||||||
|
getToleranceColors: function () {
|
||||||
|
return this.getColors(x => x.tolerance != null);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets band colors with PPM.
|
||||||
|
*/
|
||||||
|
getPPMColors: function () {
|
||||||
|
return this.getColors(x => x.ppm != null);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute for the resistor value based on selected color bands.
|
||||||
|
*/
|
||||||
|
computeResistorValue: function () {
|
||||||
|
this.resetFirstBandOnFourBands(); // Make sure black (1st band) isn't selected on 4-band mode.
|
||||||
|
|
||||||
|
var value1 = this.getColorByName(this.selectedColors.band1).value;
|
||||||
|
var value2 = this.getColorByName(this.selectedColors.band2).value;
|
||||||
|
var value3 = this.getColorByName(this.selectedColors.band3).value;
|
||||||
|
var multiplier = this.getColorByName(this.selectedColors.band4).multiplier;
|
||||||
|
var tolerance = this.getColorByName(this.selectedColors.band5).tolerance;
|
||||||
|
var tempco = this.getColorByName(this.selectedColors.band6).ppm;
|
||||||
|
|
||||||
|
// Compute resistance value.
|
||||||
|
switch(this.bandCount) {
|
||||||
|
case 0: // 3-band
|
||||||
|
tolerance = 20; // Fixed 20% tolerance on 3-band mode.
|
||||||
|
case 1: // 4-band
|
||||||
|
this.resistorResistanceValue = ((value1 * 10) + (value2 * 1)) * multiplier;
|
||||||
|
break;
|
||||||
|
case 2: // 5-band
|
||||||
|
case 3: // 6-band
|
||||||
|
this.resistorResistanceValue = ((value1 * 100) + (value2 * 10) + (value3 * 1)) * multiplier;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate output string.
|
||||||
|
var output = [this.formatValue(this.resistorResistanceValue), this.formatTolerance(tolerance)];
|
||||||
|
|
||||||
|
// Output PPM on band count 2 (6-band)
|
||||||
|
if (this.bandCount == 3) {
|
||||||
|
output.push(this.formatPPM(tempco));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resistorValueText = output.join(' ');
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If current band count is 4, reset to brown if selected color for band 1 is black.
|
||||||
|
*/
|
||||||
|
resetFirstBandOnFourBands: function () {
|
||||||
|
if (this.bandCount != 0 && this.bandCount != 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (this.selectedColors.band1 == "Black") {
|
||||||
|
this.selectedColors.band1 = "Brown";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats the PPM value (tempco).
|
||||||
|
* @param {int} ppmValue - The PPM value to format.
|
||||||
|
*/
|
||||||
|
formatPPM: function (ppmValue) {
|
||||||
|
return ppmValue + 'ppm/K';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats the tolerance value.
|
||||||
|
* @param {int} toleranceValue - The tolerance value to format.
|
||||||
|
*/
|
||||||
|
formatTolerance: function (toleranceValue) {
|
||||||
|
return "±" + toleranceValue + "%";
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Formats value into a human-readable form (1000 = 1k, 23,000,000 = 23M, etc.)
|
||||||
|
* @param {int} value - The reistance value to format.
|
||||||
|
*/
|
||||||
|
formatValue: function (value) {
|
||||||
|
var suffix = "";
|
||||||
|
var nvalue = value;
|
||||||
|
|
||||||
|
if (value >= 1000000000) {
|
||||||
|
nvalue = value / 1000000000;
|
||||||
|
suffix = "G";
|
||||||
|
} else if (value >= 1000000) {
|
||||||
|
nvalue = value / 1000000;
|
||||||
|
suffix = "M";
|
||||||
|
} else if (value >= 1000) {
|
||||||
|
nvalue = value / 1000;
|
||||||
|
suffix = "k";
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.toFixed(nvalue, 2) + suffix + " Ω";
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Trim number to specified fixed decimal digits.
|
||||||
|
* @param {int} num - The number to trim.
|
||||||
|
* @param {int} fixed - The number of fixed decimal places.
|
||||||
|
*/
|
||||||
|
toFixed: function (num, fixed) {
|
||||||
|
var re = new RegExp('^-?\\d+(?:\.\\d{0,' + (fixed || -1) + '})?');
|
||||||
|
return num.toString().match(re)[0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Before Vue mount lifecycle event hook.
|
||||||
|
*/
|
||||||
|
beforeMount: function() {
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
});
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue