import React from 'react';
import { View, StyleSheet } from 'react-native';
import { AppLoading } from 'expo';
import { Container, Text, Header, Content, Left, Body, Right, Button, Icon, Title, Card, CardItem } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import IconCard from './components/IconCard';
import Graph from './components/Graph';
import DeviceHttpDataSource from './components/DeviceHttpDataSource';
import { PeakDetectorSimple } from './data-analysis/PeakDetection';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isReady: false,
themeNumber: 0,
numPeaks: 0,
numLaps: 0,
measurements: []
};
this.config = {
deviceUrl: "http://smartswim",
peakThreshold: 30,
peaksPerLap: 30,
updateInterval : 3000,
};
this.peakDetector = new PeakDetectorSimple(this.config.peakThreshold, peaks => {
console.log("peaks:", peaks.length);
this.setState({
numPeaks: peaks.length,
numLaps: (peaks.length / this.config.peaksPerLap).toFixed(1)
});
});
}
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
handleStart = () => {
fetch(new URL("/api/session/start", this.config.deviceUrl));
}
handleStop = () => {
fetch(new URL("/api/session/stop", this.config.deviceUrl));
}
handleThemeChange = () => {
this.setState((state, props) => { return { themeNumber: ((state.themeNumber + 1) % themeArray.length) } })
}
handleNewData = (fullData, newDataStart) => {
const newData = fullData.slice(newDataStart);
console.log("New data", newData.length, "Full data", fullData.length, "new data start", newDataStart);
console.log("new data", newData);
this.peakDetector.addVector(newData);
this.setState({measurements: fullData});
}
render() {
if (!this.state.isReady) {
return ;
}
return (
{/*
*/}
);
}
}
const backgroundColors = {
'hot': ['#830e5f', '#fd5139'],
'darkBlue': ['#4265a3', '#cfada7'],
'lightBlue': ['#50a4db', '#74bbe2'],
'foggy': ['#bc8db8', '#5d5e90'],
};
const themeArray = [
'hot', 'darkBlue', 'lightBlue', 'foggy'
];
const styles = StyleSheet.create({
card: {
flexDirection: 'row',
backgroundColor: 'rgba(0, 0, 0, 0.2)',
margin: 5,
padding: 5,
borderRadius: 3,
justifyContent: 'space-between',
/*
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 1,
},
shadowOpacity: 0.18,
shadowRadius: 1.00,
elevation: 1,*/
}
});