206 lines
7.7 KiB
JavaScript
206 lines
7.7 KiB
JavaScript
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();
|
|
}
|
|
}); |