Codenstuff.com: Resistor Color Calculator

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Resistor Color Calculator
mikethedj4
Sat Nov 09, 2013 6:34 pm

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.

comathi
Coding God

Posts: 1242

Joined: Fri Mar 26, 2010 1:59 pm

Re: Resistor Color Chart
comathi
Sat Nov 09, 2013 7:20 pm

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;

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
Sat Nov 09, 2013 9:10 pm

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.

Usman55
VIP - Site Partner

Posts: 2821

Joined: Thu Dec 24, 2009 7:52 pm

Re: Resistor Color Chart
Usman55
Sun Nov 10, 2013 11:47 am

I was gonna ask what it is. Don't know why I didn't post it.

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
Sun Nov 10, 2013 10:24 pm

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

Posts: 833

Joined: Wed Jan 05, 2011 3:59 pm

Re: Resistor Color Chart
Filip
Sun Nov 10, 2013 11:12 pm

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

mikethedj4
VIP - Site Partner

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am

Re: Resistor Color Chart
mikethedj4
Mon Nov 11, 2013 3:44 am

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!

Resistor Color Calculator

mikethedj4

Information

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am
View Full Profile

comathi

Information

Posts: 1242

Joined: Fri Mar 26, 2010 1:59 pm
View Full Profile

mikethedj4

Information

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am
View Full Profile

Usman55

Information

Posts: 2821

Joined: Thu Dec 24, 2009 7:52 pm
View Full Profile

mikethedj4

Information

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am
View Full Profile

Filip

Information

Posts: 833

Joined: Wed Jan 05, 2011 3:59 pm
View Full Profile

mikethedj4

Information

Posts: 2592

Joined: Thu Mar 25, 2010 4:36 am
View Full Profile

Breadcrumbs

Post Options:

Post Options:

Post Options:

Post Options:

Post Options:

Post Options:

Post Options:

Copyright Information