Added old site
This commit is contained in:
Martin Bauer
parent
0b0c3f8e36
commit
655d8b0dc8
135
App_old.js
135
App_old.js
|
|
@ -1,135 +0,0 @@
|
||||||
import React, {useState} from 'react';
|
|
||||||
import {StyleSheet, Text, View, Button, TextInput, Dimensions, StatusBar} from 'react-native';
|
|
||||||
import { LineChart} from 'react-native-chart-kit';
|
|
||||||
import { LinearGradient } from 'expo-linear-gradient';
|
|
||||||
import PropValueCard from './components/PropValueCard'
|
|
||||||
|
|
||||||
|
|
||||||
export default function App() {
|
|
||||||
const [outputText, setOutputText] = useState('This is the first text');
|
|
||||||
|
|
||||||
const [flag, setFlag] = useState(false);
|
|
||||||
|
|
||||||
const initialState = [];
|
|
||||||
for(let i=0; i < 100; ++i) {
|
|
||||||
initialState.push( Math.random() * 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
const [graphData, setGraphData] = useState(initialState);
|
|
||||||
|
|
||||||
const makeNewGraphData = () => {
|
|
||||||
setGraphData( oldGraphData => {
|
|
||||||
console.log("Before", oldGraphData)
|
|
||||||
oldGraphData.pop();
|
|
||||||
oldGraphData.unshift(Math.random() * 100);
|
|
||||||
console.log("After", oldGraphData);
|
|
||||||
return oldGraphData.slice();
|
|
||||||
})
|
|
||||||
};
|
|
||||||
const makeNewGraphData2 = () => {
|
|
||||||
graphData.pop();
|
|
||||||
graphData.unshift(Math.random() * 100);
|
|
||||||
setGraphData(graphData);
|
|
||||||
};
|
|
||||||
|
|
||||||
let tutorial = (
|
|
||||||
<View style={{padding: 50}}>
|
|
||||||
<View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
|
|
||||||
<TextInput
|
|
||||||
style={{width: '70%', borderColor: 'black', borderWidth: 1, padding: 5}}
|
|
||||||
placeholder="Course goal"
|
|
||||||
/>
|
|
||||||
<Button title="ADD"/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text style={{fontSize: 50}}>Text1
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
let mine = (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<View style={styles.view1}><Text>View1</Text></View>
|
|
||||||
<View style={styles.view2}><Text>View2</Text></View>
|
|
||||||
<View style={styles.view3}><Text>View3 </Text><TextInput/></View>
|
|
||||||
|
|
||||||
<View>
|
|
||||||
<Text>{flag ? "Text1" : "Text2"}</Text>
|
|
||||||
<Button title="Subba app is dat" onPress={() => setFlag(!flag)}/>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
let graph = (
|
|
||||||
<View>
|
|
||||||
<StatusBar hidden={true} />
|
|
||||||
|
|
||||||
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
|
|
||||||
<PropValueCard label="Züge" value="1234"/>
|
|
||||||
<PropValueCard label="Bahnen" value="30"/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={{justifyContent: 'center', alignItems: 'center', flexDirection:'row'}}>
|
|
||||||
<LineChart
|
|
||||||
data={{
|
|
||||||
datasets: [{
|
|
||||||
data: graphData
|
|
||||||
}]
|
|
||||||
}}
|
|
||||||
width={Dimensions.get('window').width - 30} // from react-native
|
|
||||||
height={180}
|
|
||||||
chartConfig={{
|
|
||||||
backgroundColor: '#e26a00',
|
|
||||||
backgroundGradientFrom: '#fb8c00',
|
|
||||||
backgroundGradientTo: '#ffa726',
|
|
||||||
decimalPlaces: 0, // optional, defaults to 2dp
|
|
||||||
color: (opacity = 1) => `rgba(255, 255, 255, 0.8)`,
|
|
||||||
style: {
|
|
||||||
borderRadius: 16
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
style={{
|
|
||||||
borderRadius: 16,
|
|
||||||
}}
|
|
||||||
bezier
|
|
||||||
withDots={false}
|
|
||||||
withInnerLines={false}
|
|
||||||
withOuterLines={false}
|
|
||||||
withVerticalLabel={false}
|
|
||||||
withHorizontalLabels={true}
|
|
||||||
fromZero={true}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
<View>
|
|
||||||
<Button title="UUUND nochmal" onPress={makeNewGraphData}/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
|
|
||||||
|
|
||||||
return graph;
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 50,
|
|
||||||
backgroundColor: '#7573ee',
|
|
||||||
//alignItems: 'center',
|
|
||||||
//justifyContent: 'center',
|
|
||||||
justifyContent: 'space-between'
|
|
||||||
},
|
|
||||||
view1: {
|
|
||||||
backgroundColor: 'green',
|
|
||||||
height: 300
|
|
||||||
},
|
|
||||||
view2: {
|
|
||||||
backgroundColor: 'blue',
|
|
||||||
height: 100,
|
|
||||||
},
|
|
||||||
view3: {
|
|
||||||
backgroundColor: 'white',
|
|
||||||
height: 25
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>SwimTrainer</title>
|
||||||
|
|
||||||
|
<!-- plot.ly -->
|
||||||
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
||||||
|
|
||||||
|
<!-- chart.js -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
|
||||||
|
|
||||||
|
<!-- Materialize -->
|
||||||
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||||
|
<!-- MsgPack -->
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack5/4.2.0/msgpack5.js"></script>
|
||||||
|
|
||||||
|
<link rel="manifest" href="swimtrainer.webmanifest">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="blue " role="navigation">
|
||||||
|
<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">SwimTrainer</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s4 center-align">
|
||||||
|
<h5>Bahnen</h5>
|
||||||
|
<h1><span id="lanes"></span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="col s4 center-align">
|
||||||
|
<h5>Züge</h5>
|
||||||
|
<h1><span id="peaks"></span></h1>
|
||||||
|
</div>
|
||||||
|
<div class="col s4 center-align">
|
||||||
|
<a class="waves-effect waves-light btn-large" onclick="reload()">Neu laden</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s12">
|
||||||
|
<canvas id="plotCanvas"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s3">
|
||||||
|
</div>
|
||||||
|
<div class="col s6">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s6"><label>Seconds</label></div>
|
||||||
|
<div class="col s6"> <input type="number" id="seconds" min="30" max="3600" value="120"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s6"><label>Threshold</label></div>
|
||||||
|
<div class="col s6"> <input type="number" id="threshold" min="100" max="60000" value="2000"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col s6"><label>y max</label></div>
|
||||||
|
<div class="col s6"> <input type="number" id="ymax" min="1000" max="60000" value="4000"> </div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="btn red white-text waves-effect waves-light" id="clickMe" type="button" onclick="save();">
|
||||||
|
<i class="material-icons left">save</i>
|
||||||
|
Speichern
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const url = 'http://smartswim/api/session/data';
|
||||||
|
|
||||||
|
// ------------------ MsgPack --------------------------------------------------------------
|
||||||
|
var msgpack = msgpack5();
|
||||||
|
msgpack.registerDecoder(0xd1, function (byteArr) {
|
||||||
|
function typedArrayToBuffer(array) {
|
||||||
|
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Int16Array(typedArrayToBuffer(byteArr));
|
||||||
|
});
|
||||||
|
|
||||||
|
function countPeaks(array, threshold=500)
|
||||||
|
{
|
||||||
|
var result = 0;
|
||||||
|
var lastMin = 0;
|
||||||
|
for(var i = 1; i < array.length - 2; i++)
|
||||||
|
{
|
||||||
|
var current = array[i].y;
|
||||||
|
var last = array[i-1].y;
|
||||||
|
var next = array[i+1].y;
|
||||||
|
|
||||||
|
if(current > next && current > last && (current - lastMin) > threshold) {
|
||||||
|
result += 1;
|
||||||
|
lastMin = array[i].y;
|
||||||
|
}
|
||||||
|
lastMin = Math.min(lastMin, array[i].y);
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------------------ Plot data -------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
var ctx = document.getElementById('plotCanvas').getContext('2d');
|
||||||
|
var chart = new Chart(ctx, {
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: [],
|
||||||
|
backgroundColor: '#2196f388',
|
||||||
|
color: 'blue'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {color: ['red']}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var appendToPlotArray = function (typedTimeArr, typedValueArr, currentTime) {
|
||||||
|
var plotArray = chart.data.datasets[0].data;
|
||||||
|
// remove last element, pop on empty is ok
|
||||||
|
plotArray.pop();
|
||||||
|
|
||||||
|
for (var i = 0; i < typedValueArr.length; ++i) {
|
||||||
|
plotArray.push({x: typedTimeArr[i], y: typedValueArr[i]});
|
||||||
|
}
|
||||||
|
plotArray.push({x: currentTime, y: plotArray[plotArray.length - 1].y});
|
||||||
|
|
||||||
|
var secondsToShow = parseInt( document.getElementById("seconds").value );
|
||||||
|
var yMax = parseInt( document.getElementById("ymax").value );
|
||||||
|
|
||||||
|
chart.options = {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
elements: {
|
||||||
|
point: {
|
||||||
|
radius: 2
|
||||||
|
},
|
||||||
|
line: {
|
||||||
|
tension: 0 // disables bezier curves
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
ticks: {
|
||||||
|
min: plotArray[plotArray.length - 1].x - secondsToShow * 10,
|
||||||
|
max: plotArray[plotArray.length - 1].x
|
||||||
|
},
|
||||||
|
type: 'linear',
|
||||||
|
display: false
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
min: 0,
|
||||||
|
max: yMax
|
||||||
|
},
|
||||||
|
type: 'linear'
|
||||||
|
}],
|
||||||
|
}
|
||||||
|
};
|
||||||
|
chart.data.datasets[0].data = plotArray;
|
||||||
|
chart.update();
|
||||||
|
};
|
||||||
|
|
||||||
|
var reload = function() {
|
||||||
|
chart.data.datasets[0].data = [];
|
||||||
|
};
|
||||||
|
/*
|
||||||
|
var appendToPlot = function (typedTimeArr, typedValueArr, currentTime)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
// remove last element, pop on empty is ok
|
||||||
|
plotData.x.pop();
|
||||||
|
plotData.y.pop();
|
||||||
|
|
||||||
|
var timeArr = Array.prototype.slice.call(typedTimeArr);
|
||||||
|
var valueArr = Array.prototype.slice.call(typedValueArr);
|
||||||
|
plotData.x = plotData.x.concat(timeArr);
|
||||||
|
plotData.y = plotData.y.concat(valueArr);
|
||||||
|
|
||||||
|
// add last element
|
||||||
|
plotData.x.push(currentTime);
|
||||||
|
plotData.y.push(plotData.y[plotData.y.length - 1]);
|
||||||
|
|
||||||
|
var plotObj = document.getElementById('plot');
|
||||||
|
Plotly.purge(plotObj);
|
||||||
|
Plotly.plot(plotObj, [plotData]);
|
||||||
|
};*/
|
||||||
|
|
||||||
|
var updateRunning = false;
|
||||||
|
var update = function ()
|
||||||
|
{
|
||||||
|
if( updateRunning === true ) {
|
||||||
|
//console.log("Skipping update, because update is running");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var oReq = new XMLHttpRequest();
|
||||||
|
var startIndex = chart.data.datasets[0].data.length;
|
||||||
|
if (startIndex > 0) {
|
||||||
|
startIndex -= 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
oReq.open("GET", url + "?startIndex=" + startIndex, true);
|
||||||
|
oReq.responseType = "arraybuffer";
|
||||||
|
//console.log("-> Query, startIndex=", startIndex);
|
||||||
|
oReq.onload = function (oEvent) {
|
||||||
|
var arrayBuffer = oReq.response; // Note: not oReq.responseText
|
||||||
|
if (arrayBuffer) {
|
||||||
|
var decoded = msgpack.decode(arrayBuffer);
|
||||||
|
//console.log("-> Finished query", startIndex, "#old:", chart.data.datasets[0].data.length,
|
||||||
|
// "#new:", decoded['values'].length);
|
||||||
|
appendToPlotArray(decoded['timestamps'], decoded['values'], decoded['currentTime']);
|
||||||
|
//console.log("-> After unpack", chart.data.datasets[0].data.length);
|
||||||
|
var peakThreshold = parseInt( document.getElementById("threshold").value );
|
||||||
|
var peaks = countPeaks(chart.data.datasets[0].data, peakThreshold);
|
||||||
|
document.getElementById("peaks").textContent = peaks;
|
||||||
|
document.getElementById("lanes").textContent = (peaks / 30).toFixed(1);
|
||||||
|
|
||||||
|
}
|
||||||
|
updateRunning = false;
|
||||||
|
};
|
||||||
|
oReq.send(null);
|
||||||
|
updateRunning = true;
|
||||||
|
};
|
||||||
|
update();
|
||||||
|
|
||||||
|
setInterval(update, 1000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,59 @@
|
||||||
|
import SimpleHTTPServer
|
||||||
|
class CORSHTTPRequestHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
|
||||||
|
def send_head(self):
|
||||||
|
"""Common code for GET and HEAD commands.
|
||||||
|
This sends the response code and MIME headers.
|
||||||
|
Return value is either a file object (which has to be copied
|
||||||
|
to the outputfile by the caller unless the command was HEAD,
|
||||||
|
and must be closed by the caller under all circumstances), or
|
||||||
|
None, in which case the caller has nothing further to do.
|
||||||
|
"""
|
||||||
|
path = self.translate_path(self.path)
|
||||||
|
f = None
|
||||||
|
if os.path.isdir(path):
|
||||||
|
if not self.path.endswith('/'):
|
||||||
|
# redirect browser - doing basically what apache does
|
||||||
|
self.send_response(301)
|
||||||
|
self.send_header("Location", self.path + "/")
|
||||||
|
self.end_headers()
|
||||||
|
return None
|
||||||
|
for index in "index.html", "index.htm":
|
||||||
|
index = os.path.join(path, index)
|
||||||
|
if os.path.exists(index):
|
||||||
|
path = index
|
||||||
|
break
|
||||||
|
else:
|
||||||
|
return self.list_directory(path)
|
||||||
|
ctype = self.guess_type(path)
|
||||||
|
try:
|
||||||
|
# Always read in binary mode. Opening files in text mode may cause
|
||||||
|
# newline translations, making the actual size of the content
|
||||||
|
# transmitted *less* than the content-length!
|
||||||
|
f = open(path, 'rb')
|
||||||
|
except IOError:
|
||||||
|
self.send_error(404, "File not found")
|
||||||
|
return None
|
||||||
|
self.send_response(200)
|
||||||
|
self.send_header("Content-type", ctype)
|
||||||
|
fs = os.fstat(f.fileno())
|
||||||
|
self.send_header("Content-Length", str(fs[6]))
|
||||||
|
self.send_header("Last-Modified", self.date_time_string(fs.st_mtime))
|
||||||
|
self.send_header("Access-Control-Allow-Origin", "*")
|
||||||
|
self.end_headers()
|
||||||
|
return f
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
import os
|
||||||
|
import SocketServer
|
||||||
|
|
||||||
|
PORT = 31339
|
||||||
|
|
||||||
|
Handler = CORSHTTPRequestHandler
|
||||||
|
#Handler = SimpleHTTPServer.SimpleHTTPRequestHandler
|
||||||
|
|
||||||
|
httpd = SocketServer.TCPServer(("", PORT), Handler)
|
||||||
|
|
||||||
|
print "serving at port", PORT
|
||||||
|
httpd.serve_forever()
|
||||||
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
|
||||||
|
#!/usr/bin/env python3
|
||||||
|
# encoding: utf-8
|
||||||
|
"""Use instead of `python3 -m http.server` when you need CORS"""
|
||||||
|
|
||||||
|
from http.server import HTTPServer, SimpleHTTPRequestHandler
|
||||||
|
|
||||||
|
|
||||||
|
class CORSRequestHandler(SimpleHTTPRequestHandler):
|
||||||
|
def end_headers(self):
|
||||||
|
self.send_header('Access-Control-Allow-Origin', '*')
|
||||||
|
self.send_header('Access-Control-Allow-Methods', 'GET')
|
||||||
|
self.send_header('Cache-Control', 'no-store, no-cache, must-revalidate')
|
||||||
|
return super(CORSRequestHandler, self).end_headers()
|
||||||
|
|
||||||
|
|
||||||
|
httpd = HTTPServer(('0.0.0.0', 8003), CORSRequestHandler)
|
||||||
|
print("serving on http://localhost:8003/")
|
||||||
|
httpd.serve_forever()
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"background_color": "blue",
|
||||||
|
"description": "Measures force on pool trainer",
|
||||||
|
"display": "fullscreen",
|
||||||
|
"name": "SwimTrainer",
|
||||||
|
"short_name": "SwimTrainer",
|
||||||
|
"start_url": "/"
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue