fanwuyang/SENG440
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Camera working

Browse Source
This commit is contained in:
Umbra Sheep
2018-10-02 13:27:53 +13:00
parent 21c230e77b
commit 6530d1b40b
9 changed files with 224 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.js
+151 -103
View File
@@ -9,9 +9,11 @@ import {
ScrollView,
TextInput,
TouchableHighlight,
TouchableOpacity,
View,
Modal
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';
@@ -31,130 +33,176 @@ const instructions = Platform.select({
type Props = {};
let id = 0;
export default class App extends Component<Props> {
constructor(props) {
super(props);
// constructor(props) {
// super(props);
setInterval(() => {
this.updateCaptures();
}, 5000);
// setInterval(() => {
// this.updateCaptures();
// }, 5000);
let watchID = navigator.geolocation.watchPosition((position) => {
this.setState({
walkMarkers: [
...this.state.walkMarkers, {
coordinate: position.coords,
key: id++
}
]
});
}, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
// let watchID = navigator.geolocation.watchPosition((position) => {
// this.setState({
// walkMarkers: [
// ...this.state.walkMarkers, {
// coordinate: position.coords,
// key: id++
// }
// ]
// });
// }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
this.state = {
activeWalk: false,
username: "",
gameNumber: "",
walkMarkers: [],
captures: [
// new CapturedArea("fanded", [
// {latitude: -43.5623, longitude:172.5655},
// {latitude: -43.5623, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5655}
// ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
// this.state = {
// activeWalk: false,
// username: "",
// gameNumber: "",
// walkMarkers: [],
// captures: [
// // new CapturedArea("fanded", [
// // {latitude: -43.5623, longitude:172.5655},
// // {latitude: -43.5623, longitude:172.5650},
// // {latitude: -43.5628, longitude:172.5650},
// // {latitude: -43.5628, longitude:172.5655}
// // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
new CapturedArea("samded", [
{latitude: -43.5663, longitude:172.5615},
{latitude: -43.5663, longitude:172.5610},
{latitude: -43.5668, longitude:172.5610},
{latitude: -43.5668, longitude:172.5615}
], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
],
watchID
};
}
updateCaptures(){
updateAreas(this.state.gameNumber, (polygons) => {
this.setState({
captures: polygons
})
})
}
setGameNumber(user, number){
this.setState({username: user, gameNumber: number})
}
// new CapturedArea("samded", [
// {latitude: -43.5663, longitude:172.5615},
// {latitude: -43.5663, longitude:172.5610},
// {latitude: -43.5668, longitude:172.5610},
// {latitude: -43.5668, longitude:172.5615}
// ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
// ],
// watchID
// };
// }
// updateCaptures(){
// updateAreas(this.state.gameNumber, (polygons) => {
// this.setState({
// captures: polygons
// })
// })
// }
// setGameNumber(user, number){
// this.setState({username: user, gameNumber: number})
// }
startWalk(){
this.setState({walkMarkers: [], activeWalk: true})
}
// startWalk(){
// this.setState({walkMarkers: [], activeWalk: true})
// }
stopWalk(){
this.setState({activeWalk: false})
}
// stopWalk(){
// this.setState({activeWalk: false})
// }
componentWillUnmount() {
navigator.geolocation.stopWatch(this.state.watchID);
}
// componentWillUnmount() {
// navigator.geolocation.stopWatch(this.state.watchID);
// }
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log(data.uri);
}
};
render() {
return (
<View style ={{flex: 1}}>
<MapView
showsUserLocation
style = {styles.map}
initialRegion={{
latitude: -43.5610623,
longitude: 172.5655853,
latitudeDelta: 0.02,
longitudeDelta: 0.02,
}}
// onRegionChange = {(region)=> this.addMarker((region))}
>
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style = {styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
permissionDialogTitle={'Permission to use camera'}
permissionDialogMessage={'We need your permission to use your camera phone'}
onGoogleVisionBarcodesDetected={({ barcodes }) => {
console.log(barcodes)
}}
/>
<View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
<TouchableOpacity
onPress={this.takePicture.bind(this)}
style = {styles.capture}
>
<Text style={{fontSize: 14}}> SNAP </Text>
</TouchableOpacity>
</View>
</View>
// <View style ={{flex: 1}}>
// <MapView
// showsUserLocation
// style = {styles.map}
// initialRegion={{
// latitude: -43.5610623,
// longitude: 172.5655853,
// latitudeDelta: 0.02,
// longitudeDelta: 0.02,
// }}
// // onRegionChange = {(region)=> this.addMarker((region))}
// >
<MapView.Polyline
coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
strokeWidth={5}
/>
{this.state.captures.map((capture, i) => {
return <MapView.Polygon
key={i}
coordinates={capture.coordinates}
strokeWidth={2}
strokeColor={capture.strokeColor}
fillColor={capture.fillColor}
/>
}
)
}
</MapView>
<Text style={styles.gameNumber}>
{"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
// <MapView.Polyline
// coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
// strokeWidth={5}
// />
// {this.state.captures.map((capture, i) => {
// return <MapView.Polygon
// key={i}
// coordinates={capture.coordinates}
// strokeWidth={2}
// strokeColor={capture.strokeColor}
// fillColor={capture.fillColor}
// />
// }
// )
// }
// </MapView>
// <Text style={styles.gameNumber}>
// {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
</Text>
// </Text>
<RoomInput
ref={instance => this.roomInputModal = instance}
join={(user, number) => this.setGameNumber(user, number)}/>
<View style={styles.menu}>
// <RoomInput
// ref={instance => this.roomInputModal = instance}
// join={(user, number) => this.setGameNumber(user, number)}/>
// <View style={styles.menu}>
<View style={styles.walk}>
<WalkButton
start={() => {this.startWalk()}}
stop={() => {this.stopWalk()}}
/>
</View>
// <View style={styles.walk}>
// <WalkButton
// start={() => {this.startWalk()}}
// stop={() => {this.stopWalk()}}
// />
// </View>
<View style={styles.infoWrapper}>
<JoinButton
modal={() => this.roomInputModal.setModalVisible(true)}/>
</View>
</View>
</View>
// <View style={styles.infoWrapper}>
// <JoinButton
// modal={() => this.roomInputModal.setModalVisible(true)}/>
// </View>
// </View>
// </View>
);
}
}
const styles = StyleSheet.create({
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20
},
infoWrapper: {
paddingVertical: 0,
flexDirection: 'row',
android/app/build.gradle
+19 -1
View File
@@ -139,8 +139,20 @@ android {
dependencies {
compile project(':react-native-maps')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:24.0.0"
// compile "com.android.support:appcompat-v7:24.0.0"
// multidex true
implementation 'com.android.support:multidex:1.0.1'; compile ("com.android.support:support-v4:26.0.1") { force = true} //<-- force dependency resolution to 26.0.1 in my case }
// compile ("com.android.support:support-v4:26.0.1") {
// force = true //<-- force dependency resolution to 26.0.1 in my case
// }
compile "com.facebook.react:react-native:+" // From node_modules
compile (project(':react-native-camera')) {
exclude group: "com.google.android.gms"
compile 'com.android.support:exifinterface:27.+'
compile ('com.google.android.gms:play-services-vision:12.0.1') {
force = true
}
}
}
// Run this once to be able to run the application with BUCK
@@ -149,3 +161,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile
into 'libs'
}
// configurations.all {
// resolutionStrategy {
// force 'com.android.support:support-v4:27.1.0'
// }
// }
android/app/src/main/AndroidManifest.xml
+3
View File
@@ -4,6 +4,9 @@
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<application
android:name=".MainApplication"
android/app/src/main/assets/index.android.bundle
+28 -22
View File
File diff suppressed because one or more lines are too long
android/app/src/main/assets/index.android.bundle.meta
+1 -1
View File
@@ -1 +1 @@
�zsuɹe��O�u�~�^
+���r�f ������{�
android/app/src/main/java/com/myapp/MainApplication.java
+4 -1
View File
@@ -9,6 +9,8 @@ import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import org.reactnative.camera.RNCameraPackage;
import java.util.Arrays;
import java.util.List;
@@ -24,7 +26,8 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MapsPackage()
new MapsPackage(),
new RNCameraPackage()
);
}
android/build.gradle
+13
View File
@@ -21,5 +21,18 @@ allprojects {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
}
}
/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
compileSdkVersion = 26
targetSdkVersion = 26
buildToolsVersion = "26.0.2"
googlePlayServicesVersion = "12.0.1"
supportLibVersion = "27.1.0"
}
android/settings.gradle
+3
View File
@@ -3,3 +3,6 @@ include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app'
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
package.json
+2 -1
View File
@@ -10,7 +10,8 @@
"npm": "^6.4.0",
"react": "16.3.1",
"react-native": "0.55.4",
"react-native-maps": "^0.21.0"
"react-native-maps": "^0.21.0",
"react-native-camera": "^1.2.0-7"
},
"devDependencies": {
"babel-jest": "23.4.2",