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
main
Fan-Wu Yang 7 years ago
parent b404566a4f 16f961935a
commit 25ad511530
7 changed files with 457 additions and 420 deletions
Show Stats Download Patch File Download Diff File

271
App.js
Unescape 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(){
console.log("stopping walk")
sendArea(this.state.gameNumber, this.state.username, this.state.walkMarkers)
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 };
@ -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>
);
}
}

2
api/config/db.js
Unescape 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

568
api/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
api/v1/areaFunctions.js
Unescape 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);
});
},

4
components/new-button.js
Unescape 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}
>

2
config.json
Unescape View File

@ -1,4 +1,4 @@
{
"host" : "http://umbrasheep.com",
"host" : "umbrasheep.com",
"port" : "13370"
}

28
update-map.js
Unescape 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);
});
}

Write Preview
Loading…
Cancel
Save