Codenstuff.com

Posted: **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.

Posted: **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;

Posted: **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.

Posted: **Sun Nov 10, 2013 11:47 am**

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

Posted: **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>

Posted: **Sun Nov 10, 2013 11:12 pm**

Hmm now you could make vice versa. From value in ohms return the colors of resistor..

Posted: **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!

Codenstuff.com

Resistor Color Calculator

Resistor Color Calculator

Re: Resistor Color Chart

Re: Resistor Color Chart

Re: Resistor Color Chart

Re: Resistor Color Chart

Re: Resistor Color Chart

Re: Resistor Color Chart