Resistor Color Calculator

Download apps and extensions for Chrome and share by uploading your own.
7 posts Page 1 of 1
Contributors
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Resistor Color Calculator
mikethedj4
Webpage: http://mydelivery.net23.net/dev/Resisto ... alculator/
Linux App: http://mydelivery.net23.net/dev/Resisto ... app.tar.gz
Chrome Extension: https://chrome.google.com/webstore/deta ... omleppjff/

Screenshot:
chrome-2.png
There's many resistor color calculator's available online. I created this just out of boredom.
You do not have the required permissions to view the files attached to this post.
Last edited by mikethedj4 on Mon Nov 11, 2013 9:46 pm, edited 3 times in total.
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

Re: Resistor Color Chart
comathi
This is quite nice, but it would only be useful to those who actually know how to read a resistor color chart.

Perhaps you could add a little resistance calculator where the user could input the colors of the 4 stripes on their resistor.

Nice app, though cooll;
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
I didn't think of that. I'll make that just don't know when I'll get around to it.

I may actually modify this app to have that purpose with the chart built in. idk just yet.
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Re: Resistor Color Chart
Usman55
I was gonna ask what it is. Don't know why I didn't post it.
Image
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
http://jsbin.com/ejofazU/1/

I had sometime today to make the calculator, and decided to share the code below.
Code: Select all
<!DOCTYPE html>
<html>
<head>
<title>Resistor Color Calculator</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
body {
	margin:0; padding:0;
	width: 600px; height: 500px;
	background:#000;
}
/* Styles Table/Text */
table {
	position:absolute;
	top:80px; left:0;
	width:100%; height:100%;
	font-weight: bold; color: gray; background: black;
}

/* Table Header */
th { text-align: center; color: white; background: #0af; }

/* Table Data */
td { background: white; }

/* Calculation */
h1 { 
	position:absolute;
	top:0px; left:0;
	width:100%; color: white; text-align: center;
}

/* Calculation Area */
input { width:0; height:0; padding:0; margin:0; visibility:hidden; position:absolute; top:-100000; left:-100000; }
h1 { 
	position:absolute;
	top:0px; left:0;
	width:100%; color: white; text-align: center;
}
</style>
<script type="text/javascript">
function generation() {
	// Colors
    $("select#colors").each(function() {
		var color = $(this).val();
		if(!color)
			return;
		$('span#1').text(color);    
    });

	$("select#digits").each(function() {
		var digits = $(this).val();
		if(!digits)
			return;
		$('span#2').text(digits);
	});
	
	$("select#multi").each(function() {
		var multi = $(this).val();
		if(!multi)
			return;
		$('span#3').text(multi);
	});
	
	$("select#toller").each(function() {
		var tollerance = $(this).val();
		if(!tollerance)
			return;
		$('span#4').text(tollerance);
	});
}

$(document).ready(function() {
	generation();
	
	var opt1 = $('#1').text(),
		opt2 = $('#2').text(),
		opt3 = $('#3').text(),
		opt4 = $('#banswer').text(),
		problem = $('input[name=problem]'),
		answer = $('input[name=hideresult]');
		
	problem.val(opt1 + '' + opt2 + '' + opt3);
	answer.val(problem.val());
	answer.val(eval(problem.val()));
	$('#answer').text(answer.val());
});

$(document).change(function(){
	generation();
	
	var opt1 = $('#1').text(),
		opt2 = $('#2').text(),
		opt3 = $('#3').text(),
		opt4 = $('#banswer').text(),
		problem = $('input[name=problem]'),
		answer = $('input[name=hideresult]');
		
	problem.val(opt1 + '' + opt2 + '' + opt3);
	answer.val(eval(problem.val()));
	$('#answer').text(answer.val());
});
</script>
</head>
<body>
	<!-- Calulation Result -->
	<div id="genarea">
		<h1 id="genresult">
			<span id="1"></span><span id="2"></span><span id="3"></span><span id="banswer"> = </span><span id="answer"> answer </span><span id="e-answer">&ohm;</span> <span id="4"></span><span id="math"></span>
		</h1>
		
		<input type="text" name="problem" />
		<input type="text" name="hideresult" />
	</div>
	
	<!-- Resistor Color Chart Here -->
	<table>
		<tr>
			<th>
				<select id="colors">
					<option value=" ">1st Band</option>
					<option style="background:black; color:white;" value="0">Black</option>
					<option style="background:brown; color:white;" value="1">Brown</option>
					<option style="background:red; color:white;" value="2">Red</option>
					<option style="background:orange; color:white;" value="3">Orange</option>
					<option style="background:yellow; color:black;" value="4">Yellow</option>
					<option style="background:green; color:white;" value="5">Green</option>
					<option style="background:blue; color:white;" value="6">Blue</option>
					<option style="background:violet; color:black;" value="7">Violet</option>
					<option style="background:grey; color:white;" value="8">Grey</option>
					<option style="background:white; color:black;" value="9">White</option>
				</select>
			</th>
			<th>
				<select id="digits">
					<option  value=" ">2nd Band</option>
					<option style="background:black; color:white;" value="0">Black</option>
					<option style="background:brown; color:white;" value="1">Brown</option>
					<option style="background:red; color:white;" value="2">Red</option>
					<option style="background:orange; color:white;" value="3">Orange</option>
					<option style="background:yellow; color:black;" value="4">Yellow</option>
					<option style="background:green; color:white;" value="5">Green</option>
					<option style="background:blue; color:white;" value="6">Blue</option>
					<option style="background:violet; color:black;" value="7">Violet</option>
					<option style="background:grey; color:white;" value="8">Grey</option>
					<option style="background:white; color:black;" value="9">White</option>
				</select>
			</th>
			<th>
				<select id="multi">
					<option value=" ">3rd Band</option>
					<option style="background:black; color:white;" value="*1">x1</option>
					<option style="background:brown; color:white;" value="*10">x10</option>
					<option style="background:red; color:white;" value="*100">x100</option>
					<option style="background:orange; color:white;" value="*1000">x1,000</option>
					<option style="background:yellow; color:black;" value="*10000">x10,000</option>
					<option style="background:green; color:white;" value="*100000">x100,000</option>
					<option style="background:blue; color:white;" value="*1000000">x1,000,000</option>
					<option style="background:violet; color:black;" value="*10000000">x10,000,000</option>
					<option style="background:grey; color:white;" value="*100000000">x100,000,000</option>
					<option style="background:white; color:black;" value="*1000000000">x1,000,000,000</option>
					<option style="background:white; color:black;" value="/10">&divide;10</option>
					<option style="background:white; color:black;" value="/100">&divide;100</option>
				</select>
			</th>
			<th>
				<select id="toller">
					<option value=" ">4th Band</option>
					<option style="background:Black; color:white;" value="&#177; 1%">Black</option>
					<option style="background:Brown; color:white;" value="&#177; 2%">Brown</option>
					<option style="background:Gold; color:black;" value="&#177; 5%">Gold</option>
					<option style="background:Silver; color:black;" value="&#177; 10%">Silver</option>
					<option value="&#177; 20%">None</option>
				</select>
			</th>
		</tr>
		<tr>
			<th>Color</th>
			<th>Digits</th>
			<th>Multiplier</th>
			<th>Tollerance</th>
		</tr>
		<tr>
			<th style="background:black;">Black</th>
			<td>0</td>
			<td>x1</td>
			<td>1%</td>
		</tr>
		<tr>
			<th style="background:brown;">Brown</th>
			<td>1</td>
			<td>x10</td>
			<td>2%</td>
		</tr>
		<tr>
			<th style="background:red;">Red</th>
			<td>2</td>
			<td>x100</td>
		</tr>
		<tr>
			<th style="background:orange;">Orange</th>
			<td>3</td>
			<td>x1,000</td>
		</tr>
		<tr>
          <th style="background:yellow; color:black;">Yellow</th>
			<td>4</td>
			<td>x10,000</td>
		</tr>
		<tr>
			<th style="background:green;">Green</th>
			<td>5</td>
			<td>x100,000</td>
		</tr>
		<tr>
			<th style="background:blue;">Blue</th>
			<td>6</td>
			<td>x1,000,000</td>
		</tr>
		<tr>
			<th style="background:violet; color:black;">Violet</th>
			<td>7</td>
			<td>x10,000,000</td>
		</tr>
		<tr>
			<th style="background:grey;">Grey</th>
			<td>8</td>
			<td>x100,000,000</td>
		</tr>
		<tr>
			<th style="background:white; color:black;">White</th>
			<td>9</td>
			<td>x1,000,000,000</td>
		</tr>
		<tr>
			<th style="background:gold; color:black;">Gold</th>
			<td></td>
			<td>&divide;10</td>
			<td>5%</td>
		</tr>
		<tr>
			<th style="background:silver; color:black;">Silver</th>
			<td></td>
			<td>&divide;100</td>
			<td>10%</td>
		</tr>
		<tr>
			<th style="background:white; color:black;">None</th>
			<td></td>
			<td></td>
			<td>20%</td>
		</tr>
	</table>
</body>
</html>
I also tried modifying the chrome extension to fit with the calculator, but I haven't been able to get it to work yet.

So far here's the manifest...
Code: Select all
{
	"name": "Resistor Color Calculator",
	"description": "Just a basic resistor color calculator.",
	"version": "1.1.0",
	"permissions": [
	  "tabs", "http://*/*", "https://*/*"
	],
	"icons": {
	  "128": "src/128x128.png",
	  "256": "src/logo.png",
	  "48": "src/48x48.png"
	},
	"browser_action": {
	  "default_title": "Resistor Calculator",
	  "default_icon": "src/48x48.png",
	  "default_popup": "popup.html"
	},
 	"content_scripts": [
	  {
		"matches": ["http://*/*"],
		"js": ["jquery.js"]
	  }
	],
	"manifest_version": 2
}
and here's the popup...
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body {
	margin:0; padding:0;
	width: 600px; height: 500px;
	background:#000;
}
/* Styles Table/Text */
table {
	position:absolute;
	top:80px; left:0;
	width:100%; height:100%;
	font-weight: bold; color: gray; background: black;
}

/* Table Header */
th { text-align: center; color: white; background: #0af; }

/* Table Data */
td { background: white; }

/* Calculation */
h1 { 
	position:absolute;
	top:0px; left:0;
	width:100%; color: white; text-align: center;
}

/* Calculation Area */
input { width:0; height:0; padding:0; margin:0; visibility:hidden; position:absolute; top:-100000; left:-100000; }
h1 { 
	position:absolute;
	top:0px; left:0;
	width:100%; color: white; text-align: center;
}
</style>
<script type="text/javascript">
function generation() {
	// Colors
    $("select#colors").each(function() {
		var color = $(this).val();
		if(!color)
			return;
		$('span#1').text(color);    
    });

	$("select#digits").each(function() {
		var digits = $(this).val();
		if(!digits)
			return;
		$('span#2').text(digits);
	});
	
	$("select#multi").each(function() {
		var multi = $(this).val();
		if(!multi)
			return;
		$('span#3').text(multi);
	});
	
	$("select#toller").each(function() {
		var tollerance = $(this).val();
		if(!tollerance)
			return;
		$('span#4').text(tollerance);
	});
}

$(document).ready(function() {
	generation();
	
	var opt1 = $('#1').text(),
		opt2 = $('#2').text(),
		opt3 = $('#3').text(),
		opt4 = $('#banswer').text(),
		problem = $('input[name=problem]'),
		answer = $('input[name=hideresult]');
		
	problem.val(opt1 + '' + opt2 + '' + opt3);
	answer.val(problem.val());
	answer.val(eval(problem.val()));
	$('#answer').text(answer.val());
});

$(document).change(function(){
	generation();
	
	var opt1 = $('#1').text(),
		opt2 = $('#2').text(),
		opt3 = $('#3').text(),
		opt4 = $('#banswer').text(),
		problem = $('input[name=problem]'),
		answer = $('input[name=hideresult]');
		
	problem.val(opt1 + '' + opt2 + '' + opt3);
	answer.val(eval(problem.val()));
	$('#answer').text(answer.val());
});
</script>
</head>
<body>
	<!-- Calulation Result -->
	<div id="genarea">
		<h1 id="genresult">
			<span id="1"></span><span id="2"></span><span id="3"></span><span id="banswer"> = </span><span id="answer"> answer </span><span id="e-answer">&ohm;</span> <span id="4"></span><span id="math"></span>
		</h1>
		
		<input type="text" name="problem" />
		<input type="text" name="hideresult" />
	</div>
	
	<!-- Resistor Color Chart Here -->
	<table>
		<tr>
			<th>
				<select id="colors">
					<option value=" ">1st Band</option>
					<option style="background:black; color:white;" value="0">Black</option>
					<option style="background:brown; color:white;" value="1">Brown</option>
					<option style="background:red; color:white;" value="2">Red</option>
					<option style="background:orange; color:white;" value="3">Orange</option>
					<option style="background:yellow; color:black;" value="4">Yellow</option>
					<option style="background:green; color:white;" value="5">Green</option>
					<option style="background:blue; color:white;" value="6">Blue</option>
					<option style="background:violet; color:black;" value="7">Violet</option>
					<option style="background:grey; color:white;" value="8">Grey</option>
					<option style="background:white; color:black;" value="9">White</option>
				</select>
			</th>
			<th>
				<select id="digits">
					<option  value=" ">2nd Band</option>
					<option style="background:black; color:white;" value="0">Black</option>
					<option style="background:brown; color:white;" value="1">Brown</option>
					<option style="background:red; color:white;" value="2">Red</option>
					<option style="background:orange; color:white;" value="3">Orange</option>
					<option style="background:yellow; color:black;" value="4">Yellow</option>
					<option style="background:green; color:white;" value="5">Green</option>
					<option style="background:blue; color:white;" value="6">Blue</option>
					<option style="background:violet; color:black;" value="7">Violet</option>
					<option style="background:grey; color:white;" value="8">Grey</option>
					<option style="background:white; color:black;" value="9">White</option>
				</select>
			</th>
			<th>
				<select id="multi">
					<option value=" ">3rd Band</option>
					<option style="background:black; color:white;" value="*1">x1</option>
					<option style="background:brown; color:white;" value="*10">x10</option>
					<option style="background:red; color:white;" value="*100">x100</option>
					<option style="background:orange; color:white;" value="*1000">x1,000</option>
					<option style="background:yellow; color:black;" value="*10000">x10,000</option>
					<option style="background:green; color:white;" value="*100000">x100,000</option>
					<option style="background:blue; color:white;" value="*1000000">x1,000,000</option>
					<option style="background:violet; color:black;" value="*10000000">x10,000,000</option>
					<option style="background:grey; color:white;" value="*100000000">x100,000,000</option>
					<option style="background:white; color:black;" value="*1000000000">x1,000,000,000</option>
					<option style="background:white; color:black;" value="/10">&divide;10</option>
					<option style="background:white; color:black;" value="/100">&divide;100</option>
				</select>
			</th>
			<th>
				<select id="toller">
					<option value=" ">4th Band</option>
					<option style="background:Black; color:white;" value="&#177; 1%">Black</option>
					<option style="background:Brown; color:white;" value="&#177; 2%">Brown</option>
					<option style="background:Gold; color:black;" value="&#177; 5%">Gold</option>
					<option style="background:Silver; color:black;" value="&#177; 10%">Silver</option>
					<option value="&#177; 20%">None</option>
				</select>
			</th>
		</tr>
		<tr>
			<th>Color</th>
			<th>Digits</th>
			<th>Multiplier</th>
			<th>Tollerance</th>
		</tr>
		<tr>
			<th style="background:black;">Black</th>
			<td>0</td>
			<td>x1</td>
			<td>1%</td>
		</tr>
		<tr>
			<th style="background:brown;">Brown</th>
			<td>1</td>
			<td>x10</td>
			<td>2%</td>
		</tr>
		<tr>
			<th style="background:red;">Red</th>
			<td>2</td>
			<td>x100</td>
		</tr>
		<tr>
			<th style="background:orange;">Orange</th>
			<td>3</td>
			<td>x1,000</td>
		</tr>
		<tr>
          <th style="background:yellow; color:black;">Yellow</th>
			<td>4</td>
			<td>x10,000</td>
		</tr>
		<tr>
			<th style="background:green;">Green</th>
			<td>5</td>
			<td>x100,000</td>
		</tr>
		<tr>
			<th style="background:blue;">Blue</th>
			<td>6</td>
			<td>x1,000,000</td>
		</tr>
		<tr>
			<th style="background:violet; color:black;">Violet</th>
			<td>7</td>
			<td>x10,000,000</td>
		</tr>
		<tr>
			<th style="background:grey;">Grey</th>
			<td>8</td>
			<td>x100,000,000</td>
		</tr>
		<tr>
			<th style="background:white; color:black;">White</th>
			<td>9</td>
			<td>x1,000,000,000</td>
		</tr>
		<tr>
			<th style="background:gold; color:black;">Gold</th>
			<td></td>
			<td>&divide;10</td>
			<td>5%</td>
		</tr>
		<tr>
			<th style="background:silver; color:black;">Silver</th>
			<td></td>
			<td>&divide;100</td>
			<td>10%</td>
		</tr>
		<tr>
			<th style="background:white; color:black;">None</th>
			<td></td>
			<td></td>
			<td>20%</td>
		</tr>
	</table>
</body>
</html>
Filip
Coding Guru
Coding Guru
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm

Re: Resistor Color Chart
Filip
Hmm now you could make vice versa. From value in ohms return the colors of resistor..
CodenStuff wrote:
Nope, it's just your sick and dirty mind. You sick twisted warped little pervo :D
User avatar
mikethedj4
VIP - Site Partner
VIP - Site Partner
Posts: 2592
Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
So I removed the content scripts and added the javascript as a source, which worked perfectly fine except the evaluation part so no math was calculated.

I decided to save me a headache and just host the file on my website and embed the webpage as an iframe in the extension. So it does require an internet connection. This is the best solution I've been able to accomplish for this particular extension.

In addition I updated the extension with what I've mentioned so far. Remember it does require an internet connection now to use.

This app is now available as a Linux app as well.

I was pretty surprised after searching today I couldn't find a resistor color chart or calculator in the chrome web store. Well now users will at least have a 4 band color calculator, and know how to read one using the calculator.

Enjoy!
7 posts Page 1 of 1
Return to “Apps & Extensions”