112 lines
3.5 KiB
JavaScript
112 lines
3.5 KiB
JavaScript
import React from 'react';
|
|
import { View, StyleSheet } from 'react-native';
|
|
import { Container, Text, Header, Content, Left, Body, Right, Button, Icon, Title, Card, CardItem, Fab} from 'native-base';
|
|
import { LinearGradient } from 'expo-linear-gradient';
|
|
import IconCard from './IconCard';
|
|
import Graph from './Graph';
|
|
import DeviceHttpDataSource from './DeviceHttpDataSource';
|
|
import { PeakDetectorSimple } from '../data_processing/PeakDetection';
|
|
|
|
|
|
|
|
export default class LiveTrainingView 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)
|
|
});
|
|
});
|
|
};
|
|
|
|
handleStart = () => {
|
|
fetch(this.config.deviceUrl + "/api/session/start").catch(err => console.log(err));
|
|
}
|
|
|
|
handleStop = () => {
|
|
fetch(this.config.deviceUrl + "/api/session/stop").catch(err => console.log(err));
|
|
}
|
|
|
|
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() {
|
|
return (
|
|
<Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1 }}>
|
|
<IconCard label="BAHNEN" value="9" iconName="retweet" iconType="AntDesign" fontSize={110} />
|
|
<IconCard label="ZÜGE" value="800" iconName="dashboard" iconType="AntDesign" />
|
|
<IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
|
|
{/*
|
|
<IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
|
|
<IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />
|
|
|
|
<IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
|
|
*/}
|
|
|
|
</Content>
|
|
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
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,*/
|
|
}
|
|
});
|