app changes

This commit is contained in:
Martin Bauer 2020-06-02 17:19:09 +02:00
parent d0b81bb7fb
commit 2584d2249f
13 changed files with 606 additions and 46 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 419 KiB

View File

@ -1,48 +1,58 @@
import React from 'react';
import PropTypes from 'prop-types';
import msgpack5 from 'msgpack5';
/*
config = {
peakDetector: 'simple',
peakDetectorConfig: {'threshold': 3000},
deviceUrl: 'http://smartswim',
peaksPerLap: 30,
forceAverage
}
*/
import * as msgpack from 'msgpack-lite';
class DeviceHttpDataSource extends React.Component {
constructor(props) {
super(props);
this.data = [];
this.dataUrl = new URL("/api/session/data", this.props.deviceUrl);
this.dataUrl = this.props.deviceUrl + "/api/session/data";
// msgpack setup
this.msgpack = msgpack5();
this.msgpack.registerDecoder(205, function (byteArr) {
this.msgpackCodec = msgpack.createCodec();
this.msgpackCodec.addExtUnpacker(205, function (byteArr) {
const buffer = byteArr.buffer.slice(byteArr.byteOffset, byteArr.byteLength + byteArr.byteOffset);
return new Int16Array(buffer);
const result = new Int16Array(buffer);
return result;
});
this.fetchDataHttp = this.fetchDataHttp.bind(this);
}
getUrl(url) {
return new Promise((accept, reject) => {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function (event) {
var resp = req.response;
if (resp) {
accept(resp);
}
};
req.send(null);
});
//todo reject on error
}
async fetchDataHttp() {
this.dataUrl.searchParams.set("startIdx", this.data.length);
const response = await fetch(this.dataUrl);
const arrayBuffer = await response.arrayBuffer();
const decoded = this.msgpack.decode(arrayBuffer);
try {
const url = this.dataUrl + "?startIdx=" + this.data.length;
const arrayBuffer = await this.getUrl(url);
const decoded = msgpack.decode(new Uint8Array(arrayBuffer), { codec: this.msgpackCodec });
const typedValueArr = decoded['values'];
console.log("new data inside fetch", typedValueArr);
const newDataStart = this.data.length;
for (let i = 0; i < typedValueArr.length; ++i) {
this.data.push(typedValueArr[i]);
}
this.props.onNewData(this.data, newDataStart);
} catch (err) {
//console.log(err);
}
}
componentDidMount() {
@ -55,7 +65,7 @@ class DeviceHttpDataSource extends React.Component {
}
render() {
return "";
return null;
}
}

View File

@ -1,7 +1,8 @@
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
//import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
const Graph = props => {
@ -11,7 +12,6 @@ const Graph = props => {
const coordStr = data.map((element, i) => `${i}, ${element / 2}`);
return (
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<Svg height={graphHeight} width="80%" viewbox="0 0 100 100">

56
components/HomeView.js Normal file
View File

@ -0,0 +1,56 @@
import React from 'react';
import { Content, Card, CardItem, Body, Text, Button } from 'native-base';
import { Image, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import { startSession} from '../state/ActionCreators';
function HomeView(props) {
const buttonText = props.running ? "View Swim Session" : "Start swimming";
const onButtonPress = () => {
if(!props.running) {
props.dispatch(startSession());
}
props.navigation.navigate('Training')
};
return (
<Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1, marginTop: 70 }}>
<ScrollView styles={{ marginHorizontal: 20, paddingTop: 100 }} alwaysBounceHorizontal={true} alwaysBounceVertical={true}>
<Card style={{ backgroundColor: "transparent" }}>
<CardItem cardBody>
<Image source={require('../assets/pool-water.jpg')} style={{ height: 100, width: null, flex: 1 }} />
</CardItem>
<CardItem style={{backgroundColor: 'rgba(255, 255, 255, 0.6)'}}>
<Body>
<Button block onPress={onButtonPress}>
<Text>{buttonText}</Text>
</Button>
</Body>
</CardItem>
</Card>
<Card style={{ backgroundColor: "transparent" }}>
<CardItem cardBody>
<Image source={require('../assets/blue-water-background.jpg')} style={{ height: 100, width: null, flex: 1 }} />
</CardItem>
<CardItem style={{backgroundColor: 'rgba(255, 255, 255, 0.6)'}}>
<Body>
<Button block >
<Text>Settings</Text>
</Button>
</Body>
</CardItem>
</Card>
</ScrollView>
</Content>
);
}
const mapStateToProps = (state) => {
return { running: state.session.running };
};
export default connect(mapStateToProps)(HomeView);

View File

@ -6,13 +6,14 @@ const IconCard = props => {
return (
<View style={styles.card}>
<View style={{ paddingLeft: 20 }}>
<Text style={{ color: 'white', fontSize: props.fontSize, textAlign: "center" }}> {props.value}</Text>
</View>
<View style={{ alignItems: 'center', justifyContent: 'center', paddingLeft: 20 }}>
<Icon style={{ color: 'white', fontSize: 40 }} name={props.iconName} type={props.iconType} />
<Text style={{ color: 'white', marginTop: 5 }}> {props.label}</Text>
</View>
<View style={{ paddingRight: 20 }}>
<Text style={{ color: 'white', fontSize: props.fontSize }}> {props.value}</Text>
</View>
</View>
);
};
@ -29,7 +30,8 @@ const styles = StyleSheet.create({
});
IconCard.defaultProps = {
fontSize: 85
fontSize: 85,
flex: 1
};
export default IconCard;

View File

@ -0,0 +1,111 @@
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,*/
}
});

View File

@ -0,0 +1,70 @@
import React from 'react';
import { LinearGradient } from 'expo-linear-gradient';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { BlurView } from 'expo-blur';
import { StyleSheet } from 'react-native';
import backgroundColors from './Themes';
// Own views
import LiveTrainingView from './LiveTrainingView';
import HomeView from './HomeView';
import { connect } from 'react-redux';
const Stack = createStackNavigator();
function ThemedStackNavigation(props) {
const screenOptions = {
cardStyle: {
backgroundColor: "transparent",
opacity: 1
},
headerTransparent: "true",
headerTitleStyle: {
color: 'white',
fontWeight: 'bold',
fontSize: "1.5em",
},
headerTintColor: "white",
headerBackground: () => (
<BlurView
tint="dark"
intensity={30}
style={StyleSheet.absoluteFill}
/>
),
}
return (
<LinearGradient
colors={backgroundColors[props.themeName]}
start={[0, 0]}
end={[0.5, 1]}
style={{ flex: 1 }}
>
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeView}
options={{ ...screenOptions, headerTitle: "SwimTracker" }}
/>
<Stack.Screen
name="Training"
component={LiveTrainingView}
options={{ ...screenOptions, headerTitle: "Training" }}
/>
</Stack.Navigator>
</NavigationContainer>
</LinearGradient>
)
};
const mapStateToProps = (state) => {
return { themeName: state.settings.theme };
};
export default connect(mapStateToProps)(ThemedStackNavigation);

9
components/Themes.js Normal file
View File

@ -0,0 +1,9 @@
const backgroundColors = {
'hot': ['#830e5f', '#fd5139'],
'darkBlue': ['#4265a3', '#cfada7'],
'lightBlue': ['#50a4db', '#74bbe2'],
'foggy': ['#bc8db8', '#5d5e90'],
};
export default backgroundColors;

View File

@ -0,0 +1,129 @@
import DeviceHttpDataSource from './DeviceDataSource';
import { List } from 'immutable';
import { reportDeviceData } from '../state/ActionCreators';
import { PeakDetectorSimple} from './PeakDetection';
// todo: put in settings?
const NUM_MEASUREMENTS_PER_SECOND = 10;
const WINDOW_SIZE_SECS = 5;
// This is the main data processing entry point, coupling between device and redux store
// - periodically fetch data
// - feeds them to analysis, (manages analysis classes)
// - adds them to redux store
class DataProcessing {
constructor(reduxStore) {
this.store = reduxStore;
this.store.subscribe(this.onStateChange);
this.state = this.store.getState();
this.dataSource = null;
//console.log("state", this.state);
console.assert(this.state.session.running === false, "Created DataProcessing with running=True");
this.onDataSourceChanged(this.state.settings.deviceURL);
this.rawMeasurements = List();
this.sessionStartTime = 0;
this.peakDetectorSimple = new PeakDetectorSimple(this.state.settings.peakDetectorSimpleThreshold);
this.peaks = List();
}
onStateChange = () => {
const newState = this.store.getState();
//console.log("DataProcessing state change", this.state, newState);
if (newState.settings.deviceURL !== this.state.settings.deviceURL)
this.onDataSourceChanged(newState.settings.deviceURL);
if (newState.session.running && !this.state.session.running) {
this.onRunningChanged(newState.session.running);
};
if(newState.settings.peakDetectorSimpleThreshold !== this.state.settings.peakDetectorSimpleThreshold) {
this.peakDetectorSimple = new PeakDetectorSimple(newState.settings.peakDetectorSimpleThreshold, this.onNewPeak);
this.peaks = List(this.peakDetectorSimple.addVector(this.rawMeasurements));
};
this.state = newState;
}
onDataSourceChanged = (newDeviceURL) => {
if (this.dataSource !== null) {
this.dataSource.stop();
this.dataSource = null;
}
this.dataSource = new DeviceHttpDataSource(this.newDeviceURL + "/api/session/data", this.onNewData);
}
onRunningChanged = (running, deviceURL) => {
if (running) {
//console.log("Starting session");
let req = new XMLHttpRequest();
req.open("GET", deviceURL + "/api/session/start");
this.dataSource.startIndex = 0;
this.dataSource.start();
} else {
//console.log("Stopping session");
req.open("GET", deviceURL + "/api/session/stop");
this.dataSource.stop();
this.dataSource.startIndex = 0;
}
}
onNewData = (data) => {
data.values;
data.sessionStartTime;
data.startIndex;
let success = false;
if (data.sessionStartTime === this.sessionStartTime && data.startIndex === this.rawMeasurements.length) {
// normal case, add received data to measurement array
this.rawMeasurements.concat(List(data.values));
this.analyzeNewMeasurements(data.startIndex);
success = true;
}
else if (data.startIndex === 0) {
// new start
this.sessionStartTime = data.sessionStartTime;
this.rawMeasurements = List(data.values);
success = true;
} else {
// missed some data -> re-query
this.dataSource.startIndex = 0;
this.sessionStartTime = 0;
//console.log("Problem: got non-consequtive data. Received:", data,
// "Own state ", { startTime: this.sessionStartTime, values: this.rawMeasurements });
}
if (success) {
const analysis = this.analyzeNewMeasurements(data.startIndex);
this.store.dispatch(reportDeviceData(this.sessionStartTime, data.startIndex, this.rawMeasurements, analysis));
}
}
analyzeNewMeasurements = (newDataStartIdx) => {
const newPeaks = this.peakDetectorSimple.addVector(this.rawMeasurements.slice(newDataStartIdx));
this.peaks = this.peaks.concat(List(newPeaks));
const totalMomentum = this.rawMeasurements.reduce((sum, x) => sum + x, 0);
const peakMax = this.rawMeasurements.reduce((running, x) => max(x, running), 0);
// windowed quantities
const windowSizeMeasurements = WINDOW_SIZE_SECS * NUM_MEASUREMENTS_PER_SECOND;
const windowedSeq = this.rawMeasurements.slice(-windowSizeMeasurements);
const peakMaxWindow = windowedSeq.reduce((running, x) => max(x, running), 0);
const momentumWindow = windowedSeq.reduce((sum, x) => sum + x, 0);
return {
peaks: this.peaks,
totalTime: this.rawMeasurements.length / NUM_MEASUREMENTS_PER_SECOND,
activeTime: 0,
totalMomentum: totalMomentum,
peakFrequency: 0,
peakMax: peakMax,
// windowed quantities
momentumWindow: momentumWindow,
frequencyWindow: 0,
peakMaxWindow: peakMaxWindow,
}
};
};
export default DataProcessing;

View File

@ -0,0 +1,74 @@
import * as msgpack from 'msgpack-lite';
class DeviceHttpDataSource {
constructor(dataUrl, onNewData, pollInterval=1000, startIndex = 0) {
this.dataUrl = dataUrl;
this.onNewData = onNewData;
this.pollInterval = pollInterval;
this.startIndex = startIndex;
// msgpack setup
this.msgpackCodec = msgpack.createCodec();
this.msgpackCodec.addExtUnpacker(205, function (byteArr) {
const buffer = byteArr.buffer.slice(byteArr.byteOffset, byteArr.byteLength + byteArr.byteOffset);
const result = new Int16Array(buffer);
return result;
});
this.fetchDataHttp = this.fetchDataHttp.bind(this);
}
getUrl(url) {
return new Promise((accept, reject) => {
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.responseType = "arraybuffer";
req.onload = function (event) {
var resp = req.response;
if (resp) {
accept(resp);
}
};
req.addEventListener("error", evt => reject(evt));
req.addEventListener("abort", evt => reject(evt));
req.send(null);
});
}
async fetchDataHttp() {
try {
const url = this.dataUrl + "?startIdx=" + this.startIndex;
const arrayBuffer = await this.getUrl(url);
const decoded = msgpack.decode(new Uint8Array(arrayBuffer), { codec: this.msgpackCodec });
this.startIndex += decoded["values"].length;
//"values", "sessionStartTime", "startIndex"
this.onNewData(decoded);
} catch (err) {
//console.log(err);
}
}
start() {
if (this.timer === null) {
this.timer = setInterval(this.fetchDataHttp, this.pollInterval);
return true;
} else {
return false;
}
}
stop() {
if (this.timer !== null) {
clearInterval(this.timer);
this.timer = null;
return true;
} else {
return false;
}
}
};
export default DeviceHttpDataSource;

View File

@ -9,7 +9,6 @@
*/
class PeakDetectorSimple {
constructor(threshold, handleNewPeaks) {
this.peaks = [];
this._threshold = threshold;
this._queue = [];
this._last_min = 0;
@ -17,20 +16,25 @@ class PeakDetectorSimple {
this._handleNewPeaks = handleNewPeaks;
}
getThreshold() {
return this._threshold;
}
addVector(vec) {
let result = [];
const callbackBackup = this._handleNewPeaks;
const numPeaksBefore = this.peaks.length;
this._handleNewPeaks = null;
for (let i = 0; i < vec.length; ++i) {
this.add(vec[i]);
const res = this.add(vec[i]);
if(res !== null)
result.push(res);
}
this._handleNewPeaks = callbackBackup;
if (numPeaksBefore != this.peaks.length) {
this._handleNewPeaks(this.peaks);
}
return result;
}
add(value) {
let result = null;
this._queue.push(value);
if (this._queue.length > 3) {
this._queue.shift();
@ -41,14 +45,11 @@ class PeakDetectorSimple {
const [last, current, next] = this._queue;
const is_maximum = current > next && current > last;
if (is_maximum && (current - this._last_min) > this._threshold) {
this.peaks.push(this._counter);
this._last_min = current;
if (this._handleNewPeaks) {
this._handleNewPeaks(this.peaks);
}
result = this._counter;
}
this._last_min = Math.min(this._last_min, current);
this._counter += 1;
return result;
}
}

27
state/ActionCreators.js Normal file
View File

@ -0,0 +1,27 @@
export const NEW_DEVICE_DATA = "NEW_DEVICE_DATA";
export const CHANGE_USER_NAME = "SET_USERNAME";
export const CHANGE_THEME = "CHANGE_THEME";
export const START_SESSION = "START_SESSION";
export const reportDeviceData = (sessionId, newDataStart, data, analysis) => ({
type: NEW_DEVICE_DATA,
sessionId: sessionId,
newDataStart: newDataStart,
data: data,
analysis: analysis,
})
export const changeUsername = newUsername => ({
type: CHANGE_USER_NAME,
newUserName: newUsername,
})
export const changeTheme = newThemeName => ({
type: CHANGE_THEME,
newThemeName: newThemeName
})
export const startSession = () => ({
type: START_SESSION
})

71
state/Reducer.js Normal file
View File

@ -0,0 +1,71 @@
import { combineReducers } from 'redux';
import { List } from 'immutable';
import { CHANGE_THEME, CHANGE_USER_NAME, NEW_DEVICE_DATA, START_SESSION } from './ActionCreators';
const INITIAL_SETTINGS = {
theme: "hot",
username: "",
deviceURL: "192.168.178.105",
peaksPerLap: 30,
// advanced
peakDetector: 'SIMPLE', // either 'SIMPLE' or 'ZSCORE'
peakDetectorSimpleThreshold: 500,
peakDetectorZScoreLag: 8, // peak detector z-score values
peakDetectorZScoreThreshold: 2,
peakDetectorZScoreInfluence: 0.1,
};
const INITIAL_CURRENT_SESSION = {
running: false,
rawData: List(),
analysis: {
'peaks': List(),
'totalTime': null,
'activeTime': null,
'totalMomentum': null,
'peakFrequency': null,
'peakMax': null,
// windowed quantities
'momentumWindow': null,
'frequencyWindow': null,
'peakMaxWindow': null,
}
};
const settingsReducer = (state = INITIAL_SETTINGS, action) => {
switch (action.type) {
case CHANGE_THEME:
return { ...state, theme: action.newThemeName };
case CHANGE_USER_NAME:
return { ...state, username: action.newUsername };
default:
return state
}
};
const currentSessionReducer = (state = INITIAL_CURRENT_SESSION, action) => {
switch (action.type) {
case START_SESSION:
return {
running: true,
rawData: List(),
analysis: INITIAL_CURRENT_SESSION.analysis
};
case NEW_DEVICE_DATA:
return {
running: action.data.length > 0,
rawData: action.data,
analysis: { ...state.analysis, ...analysis },
}
default:
return state
}
};
export default combineReducers({
settings: settingsReducer,
session: currentSessionReducer,
});