r/heartbeatserver
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Play audio & new style

Browse source
This commit is contained in:
Ruben van de Ven 2018-10-30 23:13:45 +01:00
parent b3f09013aa
commit c9521c5503
3 changed files with 66 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/heartbeat.mp3 Normal file
View file

Binary file not shown.

1
heartbeat/server.py
View file

@ -41,6 +41,7 @@ def start(args):
(r"/", FrontendHandler, {"conn": conn}), (r"/", FrontendHandler, {"conn": conn}),
(r"/ws", WebSocketHandler, {"conn": conn, "token": token}), (r"/ws", WebSocketHandler, {"conn": conn, "token": token}),
(r"/(.*).csv", ExportHandler, {"conn": conn}), (r"/(.*).csv", ExportHandler, {"conn": conn}),
(r"/assets/(.*)", tornado.web.StaticFileHandler, {"path": "assets/"}),
],debug=True) ],debug=True)
application.listen(8888) application.listen(8888)

73
views/plot.html
View file

@ -1,13 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>WebSocket Test</title> <title>Quantified Other: Heart Edition</title>
<style media="screen"> <style media="screen">
body{ body{
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
} }
#graph{ #graph{
height: calc(100vh - 5em); height: calc(100vh);
width:100vw;
position: absolute;
top:0;
left:0;
z-index: -1;
} }
#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;
}
</style> </style>
<script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script> <script src="https://cdn.plot.ly/plotly-1.5.0.min.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
@ -17,19 +61,19 @@
</script> </script>
<h2 id="title">current bpm: <span id='value'>...</span></h2> <h2 id="title">live bpm: <span id='value'>...</span></h2>
<div id='downloads'> <div id='downloads'>
Claim data Data
<span>Last hour <a href='/1h.csv'>as CSV</a>.</span> <span><a href='/1h.csv'>Last hour</a></span>
<span>Last day <a href='/24h.csv'>as CSV</a>.</span> <span><a href='/24h.csv'>Last day</a></span>
<span>Last week <a href='/week.csv'>as CSV</a>.</span> <span><a href='/week.csv'>Last week</a></span>
</div> </div>
<div id="graph"> <div id="graph">
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var valueEl = document.getElementById('value'); var valueEl = document.getElementById('value');
var audio = new Audio('/assets/heartbeat.mp3');
Plotly.d3.csv("/1h.csv", function(err, rows){ Plotly.d3.csv("/1h.csv", function(err, rows){
console.log(rows); console.log(rows);
function unpack(rows, key) { function unpack(rows, key) {
@ -52,6 +96,8 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
title: 'Last hour', title: 'Last hour',
}; };
var currentBpm = null;
Plotly.newPlot('graph', data, layout); Plotly.newPlot('graph', data, layout);
var wsUri = window.location.toString().replace('http','ws') + "ws"; var wsUri = window.location.toString().replace('http','ws') + "ws";
@ -75,6 +121,7 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
console.log("update", update) console.log("update", update)
valueEl.innerHTML = data['bpm']; valueEl.innerHTML = data['bpm'];
currentBpm = data['bpm'];
Plotly.extendTraces('graph', update, [0]) Plotly.extendTraces('graph', update, [0])
}; };
@ -83,6 +130,16 @@ Plotly.d3.csv("/1h.csv", function(err, rows){
}; };
} }
connectSocket(); connectSocket();
let tick = function() {
var duration = 10000;
if(currentBpm != null) {
audio.play();
duration = 60000 / currentBpm;
}
setTimeout(tick, duration);
}
}); });
</script> </script>