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 ( {/* */} ); } } 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,*/ } });