Homautomation.org

or How do I automate my home

Menu
  • An online resistor calculator
  • Fritzing Parts
Menu

An online resistor calculator


Explanation

This resistor calculator is written with React and jsx.
Jsx file is compiled to js file here https://facebook.github.io/react/jsx-compiler.html

Inspiration

This calculator is inspired from http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/

Source Code

As usually you can get the code I did for this component on Github. Feel free to fork it.

JSX file

   		/**
 * @jsx React.DOM
 */
var SVGResistor = React.createClass({
    valueToColour: function(value) {
        return this.props.bandOptions[value].color;
    },
    renderBand4:function() {
    	if (this.props.resType == "4bands") {
    		return <rect id="band4" x={160} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[3])} />
    	} else {
    		return <rect id="band4" x={160} y={0} rx={0} width={7} height={57} fill="#FDF7EB" />
    	}
    },
    renderLines:function() {
        return (
            <svg>
            <rect x={72} y={60} rx={0} width={3} height={5} fill="#d1d1d1" />
            <rect x={0} y={62} rx={0} width={73} height={3} fill="#d1d1d1" />
            <rect x={0} y={62} rx={0} width={3} height={50} fill="#d1d1d1" />

            <rect x={102} y={60} rx={0} width={3} height={15} fill="#d1d1d1" />
            <rect x={77} y={72} rx={0} width={25} height={3} fill="#d1d1d1" />
            <rect x={77} y={72} rx={0} width={3} height={45} fill="#d1d1d1" />

            <rect x={132} y={60} rx={0} width={3} height={20} fill="#d1d1d1" />
            <rect x={132} y={77} rx={0} width={20} height={3} fill="#d1d1d1" />
            <rect x={150} y={77} rx={0} width={3} height={30} fill="#d1d1d1" />

            <rect x={162} y={60} rx={0} width={3} height={15} fill="#d1d1d1" />
            <rect x={162} y={72} rx={0} width={65} height={3} fill="#d1d1d1" />
            <rect x={225} y={72} rx={0} width={3} height={50} fill="#d1d1d1" />

            <rect x={212} y={60} rx={0} width={3} height={5} fill="#d1d1d1" />
            <rect x={212} y={62} rx={0} width={100} height={3} fill="red" />
            <rect x={297} y={62} rx={0} width={3} height={50} fill="red" />
            </svg>
        );
    },
    render: function() {
        return (
            <svg width={300} height={70} version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x={0} y={26} rx={5} width={300} height={7} fill="#d1d1d1" />
            <rect x={50} y={0} rx={15} width={200} height={57} fill="#FDF7EB" />
            <rect id="band1" x={70} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[0])} />
            <rect id="band2" x={100} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[1])} />
            <rect id="band3" x={130} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[2])} />
            { this.renderBand4() }
            <rect id="band5" x={210} y={0} rx={0} width={7} height={57} fill={this.valueToColour(this.props.bands[4])} />
            </svg>
        );
    }
});

var OhmageIndicator = React.createClass({
    printResistance: function() {
        var resistance = parseFloat(this.props.resistance);
        if(resistance >= 1000000) {
            return(resistance / 1000000).toFixed(1) + "MΩ";
        }
        else if(resistance >= 1000){
            return (resistance / 1000).toFixed(1) + "KΩ";
        } else {
            return resistance.toFixed(1) + "Ω";    
        }
    },
    render: function() {
        return (
            <div id="resistorValue">{this.printResistance()}</div>
        );
    }
});

var ToleranceIndicator = React.createClass({
    printTolerance: function() {
        return this.props.tolerance === 0 ? "?" : "±" + this.props.tolerance + "%";
    },
    render: function() {
        return (
            <span id="toleranceValue">{this.printTolerance()}</span> 
        );
    }
});

var BandSelector = React.createClass({
    getInitialState: function() {
        return {selected: 0};
    },
    handleChange: function() {
        var newValue = this.refs.menu.getDOMNode().value;
        this.setState({selected: newValue});
        this.props.changeHandler(this.props.band - 1, newValue);
    },
    render: function(){
        var that = this;
        var optionNodes = this.props.bandOptions.map(function(option){
            if(that.props.omitOptions.indexOf(option.value) === -1)
                return <option value={option.value}>{option.label}</option>;
        });
        return (
            <div className="bandOption">
                <label>{this.props.band == 5 ? <span>Tolerance</span>:<span>Band {this.props.band}</span>}</label>
                <select ref="menu" value={this.state.selected} onChange={this.handleChange}>
                    {optionNodes}
                </select>
            </div>
        );
    }
});

var ResistanceCalculator = React.createClass({
    calculateResistance: function() {
    	if (this.state.resType == "3bands") { // 3 bands
    		//3 bands
    		return ((10 * this.state.bands[0]) + (1  * this.state.bands[1]))
        			* this.bandOptions[this.state.bands[2]].multiplier;
    	} else {
        	return ((100 * this.state.bands[0]) + (10  * this.state.bands[1]) + (1* this.state.bands[2]))
        			* this.bandOptions[this.state.bands[3]].multiplier;
        }
    },
    calculateTolerance: function() {
        return this.bandOptions[this.state.bands[4]].tolerance;
    },

    bandOptions: [
        {value: 0, 	tolerance: 0, 		multiplier:1,				color: "black", 	label: "Black" },
        {value: 1, 	tolerance: 1, 		multiplier:10,				color: "brown", 	label: "Brown"},
        {value: 2, 	tolerance: 2, 		multiplier:100,				color: "red", 		label: "Red"},
        {value: 3, 						multiplier:1000,			color: "orange", 	label: "Orange"},
        {value: 4, 						multiplier:10000,			color: "yellow", 	label: "Yellow"},
        {value: 5, 	tolerance: 0.5, 	multiplier:100000,			color: "green", 	label: "Green"},
        {value: 6, 	tolerance: 0.25, 	multiplier:1000000,			color: "blue", 		label: "Blue"},
        {value: 7, 	tolerance: 0.10, 	multiplier:10000000,		color: "violet", 	label: "Violet"},
        {value: 8, 	tolerance: 0.05, 								color: "grey", 		label: "Grey"},
        {value: 9, 													color: "white", 	label: "White"},
        {value: 10,	tolerance: 5, 		multiplier:0.1,				color: "#FFD700", 	label: "Gold"},
        {value: 11,	tolerance: 10, 		multiplier:0.01,			color: "#C0C0C0", 	label: "Silver"},
    ],

    updateBandState: function(band, value) {
        var state = this.state;
        state.bands[band] = value;
        state.resistance = this.calculateResistance();
        state.tolerance = this.calculateTolerance();
        this.setState(state);
    },
    getInitialState: function() {
        return {bands: [0,0,0,0,0], resistance: 0, tolerance: 0, resType:"3bands"};
    },
    updateType: function(event) {
    	var state = this.state;
        state.resType = event.target.value;
        state.resistance = this.calculateResistance();
        state.tolerance = this.calculateTolerance();
        this.setState(state);
    },
    renderThridBand: function() {
    	if (this.state.resType == "4bands") {
        	return <BandSelector bandOptions={this.bandOptions} omitOptions={[8,9]}   band={4} changeHandler={this.updateBandState} />
        } else {
        	return <div></div>
        }
    },

    render: function() {
        return (
            <div className={"resistorComputer"}>
                <div className={"resType"}>
                  <label>
                    My resistor has 
                    <input type="radio" checked={this.state.resType == "3bands" ? true: null} onChange={this.updateType} name="resType" value="3bands"/>3 bands
                    <input type="radio" checked={this.state.resType == "4bands" ? true: null} onChange={this.updateType} name="resType" value="4bands"/>4 bands
                  </label>
                </div>
                <BandSelector bandOptions={this.bandOptions} omitOptions={[10,11, 12]} band={1} changeHandler={this.updateBandState} />
                <BandSelector bandOptions={this.bandOptions} omitOptions={[10,11, 12]} band={2} changeHandler={this.updateBandState} />
                <BandSelector bandOptions={this.bandOptions} omitOptions={[10,11, 12]} band={3} changeHandler={this.updateBandState} />
                {this.renderThridBand()}
                <BandSelector bandOptions={this.bandOptions} omitOptions={[3,4,9,12]} band={5} changeHandler={this.updateBandState} />
                <div className={"resistor"}>
                    <SVGResistor bandOptions={this.bandOptions} bands={this.state.bands} resType={this.state.resType}/>
                </div>
                <OhmageIndicator resistance={this.state.resistance} />
                <div className="tolerance-area">(<ToleranceIndicator tolerance={this.state.tolerance} />)</div>

            </div>
            );
    }
});

vresistor.jsx

Css file

#container {
	border: 10px solid #dddddd;
	padding: 10px;
	background: #1a6060;
	margin: 0px auto;
    margin-bottom: 30px;
	color: #fff;
	border-radius: 0px;
    font-size: 18px;
}
.resistorComputer {
    margin: auto;
    width: 300px;
}
#resistorValue {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0px;
    font-size: 40px;
    margin-top: 10px;
}
#toleranceValue {
	text-align: center;
	margin-top: 0px !important;
	font-size: 21px;
}
.bandOption, .resType {
	text-align: left;
	margin: 5px;
}
.resType {
    padding-bottom: 10px;
    margin-left: -20px;
    margin-right: -20px;
}
.resType input[type="radio"]{
    -webkit-appearance: radio;
    margin-left: 10px;
    margin-top: -3px;
    margin-right: 4px;
}
.bandOption label {
    width: 150px;
    display:inline-block;
}
.bandOption select {
	width: 120px;
	margin-left: 10px;
    height: 20px;
}
.resistor {
    padding-top: 30px;
}
.tolerance-area {
    text-align: center;
    padding-top: 20px;
}

vstyle.css

HTML file

HTML file
<html>
	<head>
		<script src="https://web.archive.org/web/20160718084205/https://fb.me/react-0.13.1.js"></script>
    	<script src="https://web.archive.org/web/20160718084205/https://code.jquery.com/jquery-1.10.0.min.js"></script>
        <script src="resistor.js"></script>
		<link rel="stylesheet" href="style.css" type="text/css" media="all">
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
            jQuery("document").ready(function() {
                React.render(React.createElement(ResistanceCalculator, null), document.getElementById('container'));
            });
      	</script>
	</body>
</html>

Recent Posts

  • How to use hall sensor TLE 4913 with arduino
  • Four amazing projects based on WS2801 led strip
  • Pilot wire for electrical heaters
  • DS18B20 : How to change resolution (9/10/11/12 bits)?
  • Arduino, How to know the state of an output pin?

Recent Comments

  • Jan Hendrickx on Expand Arduino IO with 1wire DS2408
  • Jan Hendrickx on Expand Arduino IO with 1wire DS2408
  • Jan Hendrickx on Expand Arduino IO with 1wire DS2408
  • Jan Hendrickx on Expand Arduino IO with 1wire DS2408
  • Vincent Demay on Expand Arduino IO with 1wire DS2408

Archives

  • June 2019
  • December 2015
  • November 2015
  • September 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • June 2014
  • April 2014
  • March 2014
  • February 2014
  • October 2013
  • September 2013

Categories

  • Arduino
  • Electronics
  • Non classé

Meta

  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
©2019 Homautomation.org | Built using WordPress and Responsive Blogily theme by Superb