App: peak detection, basic graph works

components/DeviceHttpDataSource.js

@@ -0,0 +1,73 @@
+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
+}
+*/
+
+class DeviceHttpDataSource extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.data = [];
+        this.dataUrl = new URL("/api/session/data", this.props.deviceUrl);
+
+        // msgpack setup
+        this.msgpack = msgpack5();
+        this.msgpack.registerDecoder(205, function (byteArr) {
+            const buffer = byteArr.buffer.slice(byteArr.byteOffset, byteArr.byteLength + byteArr.byteOffset);
+            return new Int16Array(buffer);
+        });
+
+        this.fetchDataHttp = this.fetchDataHttp.bind(this);
+    }
+
+    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);
+        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);
+    }
+
+    componentDidMount() {
+        this.timer = setInterval(this.fetchDataHttp, this.props.pollInterval);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.timer);
+        this.timer = null;
+    }
+
+    render() {
+        return "";
+    }
+}
+
+
+DeviceHttpDataSource.propTypes = {
+    deviceUrl: PropTypes.string.isRequired,
+    onNewData: PropTypes.func.isRequired,
+    pollInterval: PropTypes.number // poll interval in ms
+};
+
+DeviceHttpDataSource.defaultProps = {
+    pollInterval: 20000
+};
+
+export default DeviceHttpDataSource;

components/Graph.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import {View, StyleSheet, Text} from 'react-native';
 
-import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg';
+import Svg, {Polyline, Polygon, Rect, G} from 'react-native-svg-web';
 
 
 const Graph = props => {
     const graphHeight = 100;
 
-    const data = [];
-    for(let i=0; i < 300; ++i) {
-        data.push( Math.random() * 100);
-    }
-
-    const coordStr = data.map((element, i) => `${i*2}, ${element}`);
+    const data = props.data.slice(-600);
+    
+    const coordStr = data.map((element, i) => `${i}, ${element / 2}`);
 
 
     return (
@@ -25,7 +22,7 @@ const Graph = props => {
                         strokeWidth="3"
                         strokeOpacity="0.5"
                         strokeLinejoin="round"
-                        fill="none"
+                        fill="none" 
                     />
                 </G>
             </Svg>