diff --git a/imagesrc/example1.svg b/imagesrc/example1.svg new file mode 100644 index 0000000..5510066 --- /dev/null +++ b/imagesrc/example1.svg @@ -0,0 +1,3737 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example2.svg b/imagesrc/example2.svg new file mode 100644 index 0000000..1c22676 --- /dev/null +++ b/imagesrc/example2.svg @@ -0,0 +1,3894 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example3.svg b/imagesrc/example3.svg new file mode 100644 index 0000000..0787c8c --- /dev/null +++ b/imagesrc/example3.svg @@ -0,0 +1,3894 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example4.svg b/imagesrc/example4.svg new file mode 100644 index 0000000..1d016ed --- /dev/null +++ b/imagesrc/example4.svg @@ -0,0 +1,4040 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example5.svg b/imagesrc/example5.svg new file mode 100644 index 0000000..687e648 --- /dev/null +++ b/imagesrc/example5.svg @@ -0,0 +1,4040 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example6.svg b/imagesrc/example6.svg new file mode 100644 index 0000000..b30cbfe --- /dev/null +++ b/imagesrc/example6.svg @@ -0,0 +1,4215 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/imagesrc/example7.svg b/imagesrc/example7.svg new file mode 100644 index 0000000..a850b54 --- /dev/null +++ b/imagesrc/example7.svg @@ -0,0 +1,4215 @@ + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js index 0f82f20..2ff289e 100644 --- a/src/actions/actionTypes.js +++ b/src/actions/actionTypes.js @@ -5,3 +5,4 @@ export const MENUOPEN = 'MENUOPEN'; export const MENUCLOSE = 'MENUCLOSE'; export const MAIN = 'MAIN'; export const HELP = 'HELP'; +export const EXAMPLE = 'EXAMPLE'; diff --git a/src/actions/menuActions.js b/src/actions/menuActions.js index f50de9d..f78ba3f 100644 --- a/src/actions/menuActions.js +++ b/src/actions/menuActions.js @@ -23,3 +23,9 @@ export function help() { type: types.HELP }; } + +export function example() { + return { + type: types.EXAMPLE + }; +} diff --git a/src/components/example.js b/src/components/example.js new file mode 100644 index 0000000..7c35aab --- /dev/null +++ b/src/components/example.js @@ -0,0 +1,95 @@ +import React, {Component} from 'react'; +import {Dimensions, Image, ScrollView, StyleSheet, View, TouchableOpacity} from 'react-native'; + +import MyText from './mytext.js'; +import MyImage from './myimage.js'; +import Section from './section.js'; + +const images = { + img1: { + source: require('../images/example1.png'), + width: 1857, + height: 574, + }, + img2: { + source: require('../images/example2.png'), + width: 1857, + height: 574, + }, + img3: { + source: require('../images/example3.png'), + width: 1857, + height: 574, + }, + img4: { + source: require('../images/example4.png'), + width: 1857, + height: 574, + }, + img5: { + source: require('../images/example5.png'), + width: 1857, + height: 574, + }, + img6: { + source: require('../images/example6.png'), + width: 1857, + height: 574, + }, + img7: { + source: require('../images/example7.png'), + width: 1857, + height: 574, + }, +}; + +export default class Example extends Component { + constructor(props) { + super(props); + this.state = { + viewInfo: {}, + }; + } + + render() { + 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: + +
+ + + ); + } +} + diff --git a/src/components/menu.js b/src/components/menu.js index 9442d60..200b7a0 100644 --- a/src/components/menu.js +++ b/src/components/menu.js @@ -22,7 +22,7 @@ export default class Menu extends Component { } render() { - const { main, help } = this.props; + const {main, help, example} = this.props; return ( @@ -30,6 +30,7 @@ export default class Menu extends Component { Calculator Help + Example Tips About diff --git a/src/components/myimage.js b/src/components/myimage.js new file mode 100644 index 0000000..5d2f577 --- /dev/null +++ b/src/components/myimage.js @@ -0,0 +1,49 @@ +import React, {Component} from 'react'; +import {Dimensions, Image, Text, View} from 'react-native'; + +export default class MyImage extends Component { + constructor(props) { + super(props); + } + + render() { + const {view, data} = this.props; + + if (view.layout) { + const maxHeight = view.layout.height * 0.8; + const maxWidth = view.layout.width * 0.9; + + const aspectRatio = data.width / data.height; + + let setWidth = maxWidth; + let setHeight = maxWidth / aspectRatio; + + if (setHeight > maxHeight) { + setHeight = maxHeight; + setWidth = setHeight * aspectRatio; + } + + return ( + + + + ); + } else { + return ( + Loading image... + ); + } + } +} + + + diff --git a/src/containers/exampleApp.js b/src/containers/exampleApp.js new file mode 100644 index 0000000..7a19561 --- /dev/null +++ b/src/containers/exampleApp.js @@ -0,0 +1,16 @@ +'use strict'; + +import React, {Component} from 'react'; +import Example from '../components/example'; + +export default class ExampleApp extends Component { + constructor(props) { + super(props); + } + + render() { + return ( + + ); + } +} diff --git a/src/containers/nav.js b/src/containers/nav.js index 26ed3a7..5ae9eeb 100644 --- a/src/containers/nav.js +++ b/src/containers/nav.js @@ -10,6 +10,7 @@ import * as menuActions from '../actions/menuActions'; import MenuApp from '../containers/menuApp'; import CalcApp from '../containers/calcApp'; import HelpApp from '../containers/helpApp'; +import ExampleApp from '../containers/exampleApp'; class Nav extends Component { constructor(props) { @@ -38,7 +39,6 @@ class Nav extends Component { tapToClose={true} openDrawerOffset={(viewport) => viewport.width - 250} captureGestures={true} - panCloseMask={0.3} closedDrawerOffset={-3} styles={drawerStyles} tweenHandler={(ratio) => ({ @@ -61,6 +61,8 @@ class Nav extends Component { return ; case 'help': return ; + case 'example': + return ; default: return ; } diff --git a/src/images/example1.png b/src/images/example1.png new file mode 100644 index 0000000..02cefd1 Binary files /dev/null and b/src/images/example1.png differ diff --git a/src/images/example2.png b/src/images/example2.png new file mode 100644 index 0000000..4e2f20e Binary files /dev/null and b/src/images/example2.png differ diff --git a/src/images/example3.png b/src/images/example3.png new file mode 100644 index 0000000..6e32c29 Binary files /dev/null and b/src/images/example3.png differ diff --git a/src/images/example4.png b/src/images/example4.png new file mode 100644 index 0000000..b61747f Binary files /dev/null and b/src/images/example4.png differ diff --git a/src/images/example5.png b/src/images/example5.png new file mode 100644 index 0000000..dcf0d8b Binary files /dev/null and b/src/images/example5.png differ diff --git a/src/images/example6.png b/src/images/example6.png new file mode 100644 index 0000000..2080973 Binary files /dev/null and b/src/images/example6.png differ diff --git a/src/images/example7.png b/src/images/example7.png new file mode 100644 index 0000000..345142c Binary files /dev/null and b/src/images/example7.png differ diff --git a/src/reducers/menu.js b/src/reducers/menu.js index 47e287a..33d39e6 100644 --- a/src/reducers/menu.js +++ b/src/reducers/menu.js @@ -34,6 +34,13 @@ export default function menu(state = initialState, action = {}) { page: 'help', subtitle: 'Help', }; + case types.EXAMPLE: + return { + ...state, + isOpen: false, + page: 'example', + subtitle: 'Example Usage', + }; default: return state; }