diff --git a/imagesrc/tips4.svg b/imagesrc/tips4.svg new file mode 100644 index 0000000..3e3f9b6 --- /dev/null +++ b/imagesrc/tips4.svg @@ -0,0 +1,4530 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/example.js b/src/components/example.js index 7c35aab..fa12c72 100644 --- a/src/components/example.js +++ b/src/components/example.js @@ -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 ( - - this.setState({ - viewInfo: event.nativeEvent, - })} style={{padding: 20}}> -
- Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field: - -
-
- 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: - -
-
- 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: - -
-
- The closest we can find is 6.8 kΩ, which we measure to be 6740 Ω. We now enter this value too: - -
-
- Now it recommends 432 kΩ, and we are 0.2% away from the target (pretty good for two resistors): - -
-
- 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: - -
-
- The calculator is now telling us we are right on our target with 0.00% error: - -
-
-
+ this.setState({ + viewInfo: event.nativeEvent, + })}> + + +
+ Suppose our design calls for an 863 Ω resistance. First, we enter 863 Ω into the top field: + +
+
+ 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: + +
+
+ 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: + +
+
+ The closest we can find is 6.8 kΩ, which we measure to be 6740 Ω. We now enter this value too: + +
+
+ Now it recommends 432 kΩ, and we are 0.2% away from the target (pretty good for two resistors): + +
+
+ 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: + +
+
+ The calculator is now telling us we are right on our target with 0.00% error: + +
+
+
+
); } } diff --git a/src/components/myimage.js b/src/components/myimage.js index 5d2f577..483c256 100644 --- a/src/components/myimage.js +++ b/src/components/myimage.js @@ -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 { } } } - - - diff --git a/src/components/tips.js b/src/components/tips.js index c301dab..cd77c14 100644 --- a/src/components/tips.js +++ b/src/components/tips.js @@ -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 ( - - -
- Don't hold both resistor leads while measuring - 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. -
-
- Don't press the resistor leads against an ESD mat - 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. -
-
- Use only one hand to hold the resistor - 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. -
-
- Increase precision by adding significant figures - 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. -
-
-
+ this.setState({ + viewInfo: event.nativeEvent, + })}> + + +
+ Don't hold both resistor leads while measuring + 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. +
+
+ Don't press the resistor leads against an ESD mat + 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. +
+
+ Use only one hand to hold the resistor + 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. +
+
+ Increase precision by adding significant figures + 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. + +
+
+
+
); } } diff --git a/src/images/tips4.png b/src/images/tips4.png new file mode 100644 index 0000000..1f4b161 Binary files /dev/null and b/src/images/tips4.png differ