Redeem code
This commit is contained in:
Ruben van de Ven
parent
260ab48a72
commit
b9f2e0050b
4 changed files with 206 additions and 11 deletions
|
|
@ -22,12 +22,13 @@ class ExportHandler(tornado.web.RequestHandler):
|
|||
range = yamiIchiCodes[range]
|
||||
# range = 1d, 3d, 1w
|
||||
ranges = {
|
||||
"1d": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
|
||||
"24h": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
|
||||
"3d": ("2018-11-04 10:00:00","2018-11-07 12:00:00"),
|
||||
"1w": ("2018-11-04 10:00:00","2018-11-11 12:00:00")
|
||||
}
|
||||
q = "SELECT * FROM beats WHERE recordedAt > ? AND recordedAt < ? ORDER BY recordedAt ASC"
|
||||
|
||||
print(range, ranges)
|
||||
# TODO: userid + start time
|
||||
if range not in ranges:
|
||||
# Not found
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import os
|
||||
import tornado.web
|
||||
import tornado.template
|
||||
|
||||
from .ranges import yamiIchiCodes
|
||||
|
||||
viewdir = os.path.dirname(os.path.realpath(__file__)) + '/../views'
|
||||
loader = tornado.template.Loader(viewdir)
|
||||
|
|
@ -15,11 +15,27 @@ class FrontendHandler(tornado.web.RequestHandler):
|
|||
"""
|
||||
self.conn = conn
|
||||
|
||||
def get(self):
|
||||
# c = self.conn.cursor()
|
||||
# c.execute("SELECT * FROM beats ORDER BY createdAt DESC LIMIT 20")
|
||||
# beats = [row for row in c]
|
||||
# print(beats)
|
||||
# html = loader.load("sockets.html").generate(beats=beats)
|
||||
html = loader.load("plot.html").generate()
|
||||
self.write(html)
|
||||
def get(self, page):
|
||||
print("getting", page)
|
||||
|
||||
if page in yamiIchiCodes:
|
||||
range = yamiIchiCodes[page]
|
||||
ranges = {
|
||||
"24h": ("2018-11-04 10:00:00","2018-11-05 12:00:00"),
|
||||
"3d": ("2018-11-04 10:00:00","2018-11-07 12:00:00"),
|
||||
"1w": ("2018-11-04 10:00:00","2018-11-11 12:00:00")
|
||||
}
|
||||
startDate = ranges[range][0]
|
||||
endDate = ranges[range][1]
|
||||
html = loader.load("redeem.html").generate(code=page, startDate=startDate, endDate=endDate)
|
||||
self.write(html)
|
||||
elif page == "yamiichi":
|
||||
# c = self.conn.cursor()
|
||||
# c.execute("SELECT * FROM beats ORDER BY createdAt DESC LIMIT 20")
|
||||
# beats = [row for row in c]
|
||||
# print(beats)
|
||||
# html = loader.load("sockets.html").generate(beats=beats)
|
||||
html = loader.load("plot.html").generate()
|
||||
self.write(html)
|
||||
else:
|
||||
raise tornado.web.HTTPError(404)
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@ def start(args):
|
|||
# use "/" as the root, and the
|
||||
# WebSocketHandler as our handler
|
||||
application = tornado.web.Application([
|
||||
(r"/", FrontendHandler, {"conn": conn}),
|
||||
(r"/ws", WebSocketHandler, {"conn": conn, "token": token}),
|
||||
(r"/(.*).csv", ExportHandler, {"conn": conn}),
|
||||
(r"/assets/(.*)", tornado.web.StaticFileHandler, {"path": "assets/"}),
|
||||
(r"/(.*)", FrontendHandler, {"conn": conn}),
|
||||
],debug=True)
|
||||
|
||||
application.listen(8888)
|
||||
|
|
|
|||
178
views/redeem.html
Normal file
178
views/redeem.html
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<title>Quantified Other: Heart Edition</title>
|
||||
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/d-din" type="text/css"/>
|
||||
<style media="screen">
|
||||
body{
|
||||
font-family: 'DDINRegular', Helvetica, sans-serif;
|
||||
}
|
||||
#graph{
|
||||
height: calc(100vh);
|
||||
width:100vw;
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index: -1;
|
||||
}
|
||||
h1{
|
||||
color: darkblue;
|
||||
}
|
||||
#downloads {
|
||||
border: solid #000 1px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
right: 10px;
|
||||
background: darkblue;
|
||||
font-weight: bold;
|
||||
width: 200px;
|
||||
color: white;
|
||||
}
|
||||
#downloads a{
|
||||
color: yellow;
|
||||
}
|
||||
#title {
|
||||
background: darkblue;
|
||||
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 #000;
|
||||
text-shadow: 1px 1px #000, -1px -1px #000,1px -1px #000, -1px 1px #000;
|
||||
margin-top:0;
|
||||
}
|
||||
#value {
|
||||
padding-left: 6px;
|
||||
font-size: 60px;
|
||||
display: block;
|
||||
float: right;
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
#downloads span {
|
||||
font-weight: normal;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
#projecttitle{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
#me{
|
||||
font-style: italic;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right:10px;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.gtitle{
|
||||
transform: translateY(47px);
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
<h1 id="projecttitle">Data Double Black Market - Redeem code {{ code }}</h1>
|
||||
<div id="me">A project by <a href="https://rubenvandeven.com">Ruben van de Ven</a></div>
|
||||
<h2 id="title">live bpm: <span id='value'>...</span></h2>
|
||||
<div id='downloads'>
|
||||
<div class='description>'>Get as <a href="/{{ code }}.csv">csv</a></div>
|
||||
</div>
|
||||
<div id="graph">
|
||||
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var valueEl = document.getElementById('value');
|
||||
var audio = new Audio('/assets/heartbeat.mp3');
|
||||
Plotly.d3.csv("/{{ code }}.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: '#02028b'}//17BECF
|
||||
}
|
||||
|
||||
var data = [trace1];
|
||||
|
||||
var layout = {
|
||||
title: 'Redeem heartbeat: Ruben van de Ven',
|
||||
xaxis: {
|
||||
|
||||
type: 'date',
|
||||
range: [ new Date("{{ startDate }}").getTime(), new Date("{{ endDate }}").getTime() ],
|
||||
autorange: false
|
||||
}
|
||||
};
|
||||
|
||||
var currentBpm = null;
|
||||
|
||||
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'];
|
||||
currentBpm = data['bpm'];
|
||||
|
||||
Plotly.extendTraces('graph', update, [0])
|
||||
};
|
||||
websocket.onerror = function(evt) {
|
||||
|
||||
};
|
||||
}
|
||||
connectSocket();
|
||||
|
||||
let tick = function() {
|
||||
var duration = 10000;
|
||||
if(currentBpm != null) {
|
||||
audio.play();
|
||||
duration = 60000 / currentBpm;
|
||||
}
|
||||
setTimeout(tick, duration);
|
||||
}
|
||||
tick();
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Loading…
Reference in a new issue