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
master
Tanner Collin 7 years ago
parent ab9af756a4
commit 04bd63b273
5 changed files with 4613 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4530
      imagesrc/tips4.svg
  2. 72
      src/components/example.js
  3. 14
      src/components/myimage.js
  4. 59
      src/components/tips.js
  5. BIN
      src/images/tips4.png

4530
imagesrc/tips4.svg
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
Unescape View File

@ -1,5 +1,5 @@
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 MyImage from './myimage.js';
@ -55,40 +55,42 @@ export default class Example extends Component {
const {viewInfo} = this.state;
return (
<ScrollView>
<View onLayout={(event) => this.setState({
viewInfo: event.nativeEvent,
})} style={{padding: 20}}>
<Section>
<MyText>Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field:</MyText>
<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>
<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>
<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>
<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>
<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>
<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>
<MyImage view={viewInfo} data={images.img7} />
</Section>
</View>
</ScrollView>
<View onLayout={(event) => this.setState({
viewInfo: event.nativeEvent,
})}>
<ScrollView>
<View style={{padding: 20}}>
<Section>
<MyText>Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field:</MyText>
<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>
<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>
<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>
<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>
<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>
<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>
<MyImage view={viewInfo} data={images.img7} />
</Section>
</View>
</ScrollView>
</View>
);
}
}

14
src/components/myimage.js
Unescape View File

@ -1,5 +1,5 @@
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 {
constructor(props) {
@ -10,17 +10,20 @@ export default class MyImage extends Component {
const {view, data} = this.props;
if (view.layout) {
const maxHeight = view.layout.height * 0.8;
const maxHeight = view.layout.height * 0.4;
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;
let setWidth = maxWidth;
let setHeight = maxWidth / aspectRatio;
if (setHeight > maxHeight) {
setHeight = maxHeight;
setWidth = setHeight * aspectRatio;
setWidth = widthResp;
setHeight = setWidth / aspectRatio;
}
return (
@ -44,6 +47,3 @@ export default class MyImage extends Component {
}
}
}

59
src/components/tips.js
Unescape View File

@ -2,35 +2,54 @@ import React, {Component} from 'react';
import {ScrollView, View} from 'react-native';
import MyText from './mytext.js';
import MyImage from './myimage.js';
import Section from './section.js';
const images = {
img4: {
source: require('../images/tips4.png'),
width: 1857,
height: 1016,
},
};
export default class Tips extends Component {
constructor(props) {
super(props);
this.state = {
viewInfo: {},
};
}
render() {
const {viewInfo} = this.state;
return (
<ScrollView>
<View style={{padding: 20}}>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't hold both resistor leads while measuring</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>
</Section>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't press the resistor leads against an ESD mat</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>
<MyText style={{fontWeight: 'bold'}}>Use only one hand to hold the resistor</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>
<MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</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>
</View>
</ScrollView>
<View onLayout={(event) => this.setState({
viewInfo: event.nativeEvent,
})}>
<ScrollView>
<View style={{padding: 20}}>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't hold both resistor leads while measuring</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>
</Section>
<Section>
<MyText style={{fontWeight: 'bold'}}>Don't press the resistor leads against an ESD mat</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>
<MyText style={{fontWeight: 'bold'}}>Use only one hand to hold the resistor</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>
<MyText style={{fontWeight: 'bold'}}>Increase precision by adding significant figures</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>
<MyImage view={viewInfo} data={images.img4} />
</Section>
</View>
</ScrollView>
</View>
);
}
}

BIN
src/images/tips4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 241 KiB

Write Preview
Loading…
Cancel
Save