tanner/exact-resistor-calculator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add screenshot of increasing precision to tips page

Browse Source
This commit is contained in:
Tanner Collin 2017-02-07 00:46:19 -07:00
parent ab9af756a4
commit 04bd63b273
5 changed files with 4613 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4530
imagesrc/tips4.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

72
src/components/example.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Dimensions, Image, ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native'; import {ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native';
import MyText from './mytext.js'; import MyText from './mytext.js';
import MyImage from './myimage.js'; import MyImage from './myimage.js';
@ -55,40 +55,42 @@ export default class Example extends Component {
const {viewInfo} = this.state; const {viewInfo} = this.state;
return ( return (
<ScrollView> <View onLayout={(event) => this.setState({
<View onLayout={(event) => this.setState({ viewInfo: event.nativeEvent,
viewInfo: event.nativeEvent, })}>
})} style={{padding: 20}}> <ScrollView>
<Section> <View style={{padding: 20}}>
<MyText>Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field:</MyText> <Section>
<MyImage view={viewInfo} data={images.img1} /> <MyText>Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field:</MyText>
</Section> <MyImage view={viewInfo} data={images.img1} />
<Section> </Section>
<MyText>The calulator will recommend 863 Ω, but we don't have anything close to that in our bin of scrap resistors. We find a 1 kΩ resistor and measure it to be 992 Ω. We enter this into the calculator:</MyText> <Section>
<MyImage view={viewInfo} data={images.img2} /> <MyText>The calulator will recommend 863 Ω, but we don't have anything close to that in our bin of scrap resistors. We find a 1 kΩ resistor and measure it to be 992 Ω. We enter this into the calculator:</MyText>
</Section> <MyImage view={viewInfo} data={images.img2} />
<Section> </Section>
<MyText>You will see the calculator now recommends we add a 6.64 kΩ resistor, and is telling us we are 14.9% away from our 863 Ω target:</MyText> <Section>
<MyImage view={viewInfo} data={images.img3} /> <MyText>You will see the calculator now recommends we add a 6.64 kΩ resistor, and is telling us we are 14.9% away from our 863 Ω target:</MyText>
</Section> <MyImage view={viewInfo} data={images.img3} />
<Section> </Section>
<MyText>The closest we can find is 6.8 kΩ, which we measure to be 6740 Ω. We now enter this value too:</MyText> <Section>
<MyImage view={viewInfo} data={images.img4} /> <MyText>The closest we can find is 6.8 kΩ, which we measure to be 6740 Ω. We now enter this value too:</MyText>
</Section> <MyImage view={viewInfo} data={images.img4} />
<Section> </Section>
<MyText>Now it recommends 432 kΩ, and we are 0.2% away from the target (pretty good for two resistors):</MyText> <Section>
<MyImage view={viewInfo} data={images.img5} /> <MyText>Now it recommends 432 kΩ, and we are 0.2% away from the target (pretty good for two resistors):</MyText>
</Section> <MyImage view={viewInfo} data={images.img5} />
<Section> </Section>
<MyText>If we wanted to get even closer, we can keep going. We find a 470 kΩ resistor that reads 489.3 kΩ and enter it:</MyText> <Section>
<MyImage view={viewInfo} data={images.img6} /> <MyText>If we wanted to get even closer, we can keep going. We find a 470 kΩ resistor that reads 489.3 kΩ and enter it:</MyText>
</Section> <MyImage view={viewInfo} data={images.img6} />
<Section> </Section>
<MyText>The calculator is now telling us we are right on our target with 0.00% error:</MyText> <Section>
<MyImage view={viewInfo} data={images.img7} /> <MyText>The calculator is now telling us we are right on our target with 0.00% error:</MyText>
</Section> <MyImage view={viewInfo} data={images.img7} />
</View> </Section>
</ScrollView> </View>
</ScrollView>
</View>
); );
} }
} }

14
src/components/myimage.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Dimensions, Image, Text, View} from 'react-native'; import {Image, Text, View} from 'react-native';
export default class MyImage extends Component { export default class MyImage extends Component {
constructor(props) { constructor(props) {
@ -10,17 +10,20 @@ export default class MyImage extends Component {
const {view, data} = this.props; const {view, data} = this.props;
if (view.layout) { if (view.layout) {
const maxHeight = view.layout.height * 0.8; const maxHeight = view.layout.height * 0.4;
const maxWidth = view.layout.width * 0.9; const maxWidth = view.layout.width * 0.9;
// What the width will be if the responsive limit kicks in
const widthResp = view.layout.width * 0.6;
const aspectRatio = data.width / data.height; const aspectRatio = data.width / data.height;
let setWidth = maxWidth; let setWidth = maxWidth;
let setHeight = maxWidth / aspectRatio; let setHeight = maxWidth / aspectRatio;
if (setHeight > maxHeight) { if (setHeight > maxHeight) {
setHeight = maxHeight; setWidth = widthResp;
setWidth = setHeight * aspectRatio; setHeight = setWidth / aspectRatio;
} }
return ( return (
@ -44,6 +47,3 @@ export default class MyImage extends Component {
} }
} }
} }

59
src/components/tips.js
View File

@ -2,35 +2,54 @@ import React, {Component} from 'react';
import {ScrollView, View} from 'react-native'; import {ScrollView, View} from 'react-native';
import MyText from './mytext.js'; import MyText from './mytext.js';
import MyImage from './myimage.js';
import Section from './section.js'; import Section from './section.js';
const images = {
img4: {
source: require('../images/tips4.png'),
width: 1857,
height: 1016,
},
};
export default class Tips extends Component { export default class Tips extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
viewInfo: {},
};
} }
render() { render() {
const {viewInfo} = this.state;
return ( return (
<ScrollView> <View onLayout={(event) => this.setState({
<View style={{padding: 20}}> viewInfo: event.nativeEvent,
<Section> })}>
<MyText style={{fontWeight: 'bold'}}>Don't hold both resistor leads while measuring</MyText> <ScrollView>
<MyText>The resistance of your body added in parallel is enough to effect the measurement of higher valued resistors. Since the purpose of this app is to help you create a precise resistance value, doing so is counterproductive.</MyText> <View style={{padding: 20}}>
</Section> <Section>
<Section> <MyText style={{fontWeight: 'bold'}}>Don't hold both resistor leads while measuring</MyText>
<MyText style={{fontWeight: 'bold'}}>Don't press the resistor leads against an ESD mat</MyText> <MyText>The resistance of your body added in parallel is enough to effect the measurement of higher valued resistors. Since the purpose of this app is to help you create a precise resistance value, doing so is counterproductive.</MyText>
<MyText>Most ESD mats are slightly conductive to allow static charges to dissipate. This also has the problem of affecting the resistance measurement of higher valued resistors.</MyText> </Section>
</Section> <Section>
<Section> <MyText style={{fontWeight: 'bold'}}>Don't press the resistor leads against an ESD mat</MyText>
<MyText style={{fontWeight: 'bold'}}>Use only one hand to hold the resistor</MyText> <MyText>Most ESD mats are slightly conductive to allow static charges to dissipate. This also has the problem of affecting the resistance measurement of higher valued resistors.</MyText>
<MyText>When measuring the resistors, use only one hand to hold the resistor to a multimeter lead. Grip the other multimeter lead by only the plastic part with your other hand. Then use the tension in the resistor's remaining lead to bring the two together and form a circuit.</MyText> </Section>
</Section> <Section>
<Section> <MyText style={{fontWeight: 'bold'}}>Use only one hand to hold the resistor</MyText>
<MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</MyText> <MyText>When measuring the resistors, use only one hand to hold the resistor to a multimeter lead. Grip the other multimeter lead by only the plastic part with your other hand. Then use the tension in the resistor's remaining lead to bring the two together and form a circuit.</MyText>
<MyText>You can increase the precision of the calculations shown by the app by adding more significant figures to your target resistance. This way you can make your solution as precise as you need.</MyText> </Section>
</Section> <Section>
</View> <MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</MyText>
</ScrollView> <MyText>You can increase the precision of the calculations shown by the app by adding more significant figures to your target resistance. This way you can make your solution as precise as you need.</MyText>
<MyImage view={viewInfo} data={images.img4} />
</Section>
</View>
</ScrollView>
</View>
); );
} }
} }

BIN
src/images/tips4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB