2018-10-23 22:07:28 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<meta charset="utf-8" />
|
2018-10-30 23:13:45 +01:00
|
|
|
<title>Quantified Other: Heart Edition</title>
|
2018-10-23 22:07:28 +02:00
|
|
|
<style media="screen">
|
|
|
|
|
body{
|
|
|
|
|
font-family: Helvetica, sans-serif;
|
|
|
|
|
}
|
|
|
|
|
#graph{
|
2018-10-30 23:13:45 +01:00
|
|
|
height: calc(100vh);
|
|
|
|
|
width:100vw;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
z-index: -1;
|
2018-10-23 22:07:28 +02:00
|
|
|
}
|
2018-10-30 23:13:45 +01:00
|
|
|
|
|
|
|
|
#downloads {
|
|
|
|
|
border: solid #ccc 1px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 180px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
background: aliceblue;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
width: 200px;
|
|
|
|
|
}
|
|
|
|
|
#title {
|
|
|
|
|
background: aliceblue;
|
|
|
|
|
width: 200px;
|
|
|
|
|
height: 130px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
color: white;
|
|
|
|
|
font-size: 20pt;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 10px;
|
|
|
|
|
right: 10px;
|
|
|
|
|
border: solid 1px #ccc;
|
|
|
|
|
text-shadow: 1px 1px #ccc, -1px -1px #ccc,1px -1px #ccc, -1px 1px #ccc;
|
|
|
|
|
}
|
|
|
|
|
#value {
|
|
|
|
|
padding-left: 6px;
|
|
|
|
|
font-size: 60px;
|
|
|
|
|
display: block;
|
|
|
|
|
float: right;
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
#downloads span {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-23 22:07:28 +02:00
|
|
|
</style>
|
|
|
|
|
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
|
|
|
|
|
<script language="javascript" type="text/javascript">
|
|
|
|
|
|
|
|
|
|
var wsUri = window.location.toString().replace('http','ws') + "ws";
|
|
|
|
|
console.log(wsUri)
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
2018-10-30 23:13:45 +01:00
|
|
|
<h2 id="title">live bpm: <span id='value'>...</span></h2>
|
2018-10-23 22:07:28 +02:00
|
|
|
<div id='downloads'>
|
2018-10-30 23:13:45 +01:00
|
|
|
Data
|
|
|
|
|
<span><a href='/1h.csv'>Last hour</a></span>
|
|
|
|
|
<span><a href='/24h.csv'>Last day</a></span>
|
|
|
|
|
<span><a href='/week.csv'>Last week</a></span>
|
2018-10-23 22:07:28 +02:00
|
|
|
</div>
|
|
|
|
|
<div id="graph">
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
var valueEl = document.getElementById('value');
|
2018-10-30 23:13:45 +01:00
|
|
|
var audio = new Audio('/assets/heartbeat.mp3');
|
2018-10-23 22:07:28 +02:00
|
|
|
Plotly.d3.csv("/1h.csv", function(err, rows){
|
|
|
|
|
console.log(rows);
|
|
|
|
|
function unpack(rows, key) {
|
|
|
|
|
return rows.map(function(row) { return row[key]; });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var trace1 = {
|
|
|
|
|
type: "scatter",
|
|
|
|
|
mode: "lines",
|
|
|
|
|
name: 'BPM',
|
|
|
|
|
x: unpack(rows, 'timestamp'),
|
|
|
|
|
y: unpack(rows, 'bpm'),
|
|
|
|
|
line: {color: '#17BECF'}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var data = [trace1];
|
|
|
|
|
|
|
|
|
|
var layout = {
|
|
|
|
|
title: 'Last hour',
|
|
|
|
|
};
|
|
|
|
|
|
2018-10-30 23:13:45 +01:00
|
|
|
var currentBpm = null;
|
|
|
|
|
|
2018-10-23 22:07:28 +02:00
|
|
|
Plotly.newPlot('graph', data, layout);
|
|
|
|
|
|
|
|
|
|
var wsUri = window.location.toString().replace('http','ws') + "ws";
|
|
|
|
|
|
|
|
|
|
var connectSocket = function() {
|
|
|
|
|
websocket = new WebSocket(wsUri);
|
|
|
|
|
websocket.onopen = function(evt) {
|
|
|
|
|
console.log("opened");
|
|
|
|
|
};
|
|
|
|
|
websocket.onclose = function(evt) {
|
|
|
|
|
console.log("closed", evt);
|
|
|
|
|
valueEl.innerHTML = '...';
|
|
|
|
|
setTimeout(connectSocket, 1000 * 10);
|
|
|
|
|
};
|
|
|
|
|
websocket.onmessage = function(evt) {
|
|
|
|
|
data = JSON.parse(evt.data);
|
|
|
|
|
var update = {
|
|
|
|
|
x: [[data['timestamp']]],
|
|
|
|
|
y: [[data['bpm']]]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
console.log("update", update)
|
|
|
|
|
valueEl.innerHTML = data['bpm'];
|
2018-10-30 23:13:45 +01:00
|
|
|
currentBpm = data['bpm'];
|
2018-10-23 22:07:28 +02:00
|
|
|
|
|
|
|
|
Plotly.extendTraces('graph', update, [0])
|
|
|
|
|
};
|
|
|
|
|
websocket.onerror = function(evt) {
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
connectSocket();
|
2018-10-30 23:13:45 +01:00
|
|
|
|
|
|
|
|
let tick = function() {
|
|
|
|
|
var duration = 10000;
|
|
|
|
|
if(currentBpm != null) {
|
|
|
|
|
audio.play();
|
|
|
|
|
duration = 60000 / currentBpm;
|
|
|
|
|
}
|
|
|
|
|
setTimeout(tick, duration);
|
|
|
|
|
}
|
|
|
|
|
|
2018-10-23 22:07:28 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
