heartbeatserver/views/plot.html

178 lines
3.9 KiB
HTML
Raw Normal View History

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-11-04 07:24:55 +01:00
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/d-din" type="text/css"/>
2018-10-23 22:07:28 +02:00
<style media="screen">
body{
2018-11-04 07:24:55 +01:00
font-family: 'DDINRegular', Helvetica, sans-serif;
2018-10-23 22:07:28 +02:00
}
#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-11-04 07:24:55 +01:00
h1{
color: darkblue;
}
2018-10-30 23:13:45 +01:00
#downloads {
2018-11-04 07:24:55 +01:00
border: solid #000 1px;
2018-10-30 23:13:45 +01:00
padding: 10px;
position: absolute;
2018-11-04 07:24:55 +01:00
top: 160px;
2018-10-30 23:13:45 +01:00
right: 10px;
2018-11-04 07:24:55 +01:00
background: darkblue;
2018-10-30 23:13:45 +01:00
font-weight: bold;
width: 200px;
2018-11-04 07:24:55 +01:00
color: white;
}
#downloads a{
color: yellow;
2018-10-30 23:13:45 +01:00
}
#title {
2018-11-04 07:24:55 +01:00
background: darkblue;
2018-10-30 23:13:45 +01:00
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;
2018-11-04 07:24:55 +01:00
border: solid 1px #000;
text-shadow: 1px 1px #000, -1px -1px #000,1px -1px #000, -1px 1px #000;
margin-top:0;
2018-10-30 23:13:45 +01:00
}
#value {
padding-left: 6px;
font-size: 60px;
display: block;
float: right;
width: 50%;
2018-11-04 07:24:55 +01:00
text-align: right;
2018-10-30 23:13:45 +01:00
}
#downloads span {
font-weight: normal;
margin-left: 20px;
}
2018-11-04 07:24:55 +01:00
#projecttitle{
position: absolute;
top: 0px;
left: 10px;
}
#me{
font-style: italic;
position: absolute;
bottom: 10px;
right:10px;
font-size: 70%;
}
.gtitle{
transform: translateY(47px);
}
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">
2018-11-04 10:22:10 +01:00
var url = window.location.toString().replace('http','ws');
var wsUri = url.substring(0, url.lastIndexOf("/")) + "/ws";
2018-10-23 22:07:28 +02:00
console.log(wsUri)
</script>
2018-11-04 07:24:55 +01:00
<h1 id="projecttitle">Data Double Black Market</h1>
<div id="me">A project by <a href="https://rubenvandeven.com">Ruben van de Ven</a></div>
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-11-04 07:24:55 +01:00
<div class='description>'>Available sets:</div>
2018-10-30 23:17:08 +01:00
<span><a href='/1h.csv'>hour</a></span>
<span><a href='/24h.csv'>day</a></span>
<span><a href='/week.csv'>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'),
2018-11-04 07:24:55 +01:00
line: {color: '#02028b'}//17BECF
2018-10-23 22:07:28 +02:00
}
var data = [trace1];
var layout = {
2018-11-04 07:24:55 +01:00
title: 'Heartbeat on sale: Ruben van de Ven',
2018-10-23 22:07:28 +02:00
};
2018-10-30 23:13:45 +01:00
var currentBpm = null;
2018-10-23 22:07:28 +02:00
Plotly.newPlot('graph', data, layout);
2018-11-04 10:26:03 +01:00
var url = window.location.toString().replace('http','ws');
var wsUri = url.substring(0, url.lastIndexOf("/")) + "/ws";
2018-10-23 22:07:28 +02:00
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-30 23:17:08 +01:00
tick();
2018-10-30 23:13:45 +01:00
2018-10-23 22:07:28 +02:00
});
</script>