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

Merged code, moved some code from constructor to componentDidMount to avoid bugs on really slow devices

Browse Source
This commit is contained in:
Fan-Wu Yang
2018-10-15 02:22:05 +13:00
parent b404566a4f 16f961935a
commit 25ad511530
7 changed files with 457 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.js
+143 -128
View File
@@ -17,7 +17,7 @@ import { RNCamera } from 'react-native-camera';
import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num';
import {updateAreas} from './update-map'
import {updateAreas, sendArea} from './update-map'
import MapView from 'react-native-maps';
import WalkButton from "./components/new-button";
import JoinButton from "./components/join-button";
@@ -33,69 +33,84 @@ 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);
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),
// let watchID = navigator.geolocation.watchPosition((position) => {
// this.setState({
// walkMarkers: [
// ...this.state.walkMarkers, {
// coordinate: position.coords,
// key: id++
// }
// ]
// });
// }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
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
};
}
// 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),
componentDidMount() {
let watchID = navigator.geolocation.watchPosition((position) => {
console.log(this.state.activeWalk)
if(this.state.activeWalk){
this.setState({
walkMarkers: [
...this.state.walkMarkers, {
coordinate: position.coords,
key: id++
}
]
});
}
// if(!this.state.activeWalk){
// this.setState({
// walkMarkers: []
// })
// }
}, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 10});
// 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})
// }
setInterval(() => {
this.updateCaptures();
}, 5000);
}
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(){
console.log("starting walk")
this.setState({walkMarkers: [], activeWalk: true})
}
// stopWalk(){
// this.setState({activeWalk: false})
// }
stopWalk(){
console.log("stopping walk")
sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
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 };
@@ -108,82 +123,82 @@ export default class App extends Component<Props> {
render() {
return (
<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))}
// >
// <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,
}}
// <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}
strokeColor={"rgb(148,0,211)"}
/>
{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>
);
}
}
api/config/db.js
+2
View File
@@ -10,6 +10,8 @@ exports.connect = function(done){
host: 'localhost',
user: 'admin_seng440',
password: 'seng440',
// user: 'root',
// password: '',
port: 3306,
database: "admin_territory-walker",
//multipleStatements: true
api/package-lock.json
Generated
+284 -284
View File
File diff suppressed because it is too large Load Diff
api/v1/areaFunctions.js
+1 -1
View File
@@ -95,7 +95,7 @@ module.exports = {
});
let area = mathFunc.calculateArea(points);
module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged);
// module.exports.polygonDestruction(res, gameID, userID, polygonPoints, area, polygonsMerged);
module.exports.submitFinalCollation(res, gameID, userID, polygonPoints, area, polygonsMerged);
});
},
components/new-button.js
+2 -2
View File
@@ -37,7 +37,7 @@ export default class WalkButton extends Component {
buttonText: "Start Capture",
buttonColour: 'rgba(0,255,0,0.5)'
})
this.start();
this.stop();
}else{
console.log("state false to true")
this.setState({
@@ -45,7 +45,7 @@ export default class WalkButton extends Component {
buttonText: "Stop Capture",
buttonColour: 'rgba(255,0,0,0.5)'
})
this.stop()
this.start()
}}}
// style={sharedStyles.new}
>
config.json
+1 -1
View File
@@ -1,4 +1,4 @@
{
"host" : "http://umbrasheep.com",
"host" : "umbrasheep.com",
"port" : "13370"
}
update-map.js
+24 -4
View File
@@ -1,6 +1,26 @@
const config = require("./config.json");
import CapturedArea from "./components/captured-area";
export const sendArea = (gameID, username, polygon) => {
// console.log(polygon)
points = []
polygon.map((point) => {
points.push({lat: point.coordinate.latitude, lng: point.coordinate.longitude})
})
let formBody = [];
formBody.push("gameID=" + gameID);
formBody.push("userID=" + username);
formBody.push("points=" + JSON.stringify(points));
formBody = formBody.join("&");
console.log(formBody)
fetch("http://"+config.host + ":" + config.port + "/v1/polygon", {
method: "post",
headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},
body: formBody
})
.then(res => {return res.json()}).then(data => console.log(data));
}
export const updateAreas = (gameID, update) => {
getPolygons(gameID).then((responseJson) => {
let polygons = []
@@ -24,10 +44,10 @@ export const updateAreas = (gameID, update) => {
function getPolygons(gameID) {
console.log("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID)
return fetch("http://"+config.host + ":" + config.port + "/v1/polygons?gameID=" + gameID, {method: 'GET',
headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'},})
.then((response) => response.json())
.catch((error) => {
console.error(error);
headers: {'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'}})
.then(response => response.json())
.catch(error => {
console.error(error);
});
}