flanchan
/
rtbwn
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add css

Browse Source
master
Ringo Wantanabe 6 years ago
parent d18fde4aa4
commit 19c440d978
No known key found for this signature in database
GPG Key ID: C1C1CD34CF2907B2
4 changed files with 222 additions and 31 deletions
Show Stats Download Patch File Download Diff File

4
config.js
Unescape View File

@ -10,8 +10,8 @@ var config = {
RTBWCTL_FILENAME: "./backend/rtbwctl.py", RTBWCTL_FILENAME: "./backend/rtbwctl.py",
BACKEND_SOCKET: "./backend/rtbw.sock", BACKEND_SOCKET: "./backend/rtbw.sock",
BUFFER_PURGE_TIME: 600000, //10 minutes BUFFER_PURGE_TIME: 1800000, //30 minutes
SUPERBUFFER_PURGE_TIME: 86400000 //24 hours SUPERBUFFER_PURGE_TIME: 43200000 //12 hours
}; };
module.exports = config; module.exports = config;

53
www/css/main.css
Unescape View File

@ -0,0 +1,53 @@
body {
font-family: Arial, Helvetica, sans-serif;
font-size:10pt;
background-color: #1d1f21;
color: #c5c8c6;
}
h1, h2, h3 {
font-family: Helvetica;
color: #f5f8f6;
}
em {
color: #e5e8e6;
}
.error {
color: #ff2826;
}
.status {
font-style: italic;
font-family: Tahoma;
font-size:12pt;
}
.expand {
border-radius: 5px;
border: 1px solid #e5e8e6;
padding: 1px;
padding-left: 2px;
padding-right: 2px;
font-family: monospace;
color: #f1f2f1;
font-size:11pt;
}
.expshare {
border:solid;
border-radius: 10px;
color: #e5e8e6;
}
.tab {
border: 1px solid;
border-radius: 3px;
}
.ctlcont {
padding-top: 4px;
}

18
www/index.html
Unescape View File

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="css/main.css" id="theme">
<script src="/js/jquery.js"></script> <script src="/js/jquery.js"></script>
<script src="./js/moment.js"></script> <script src="./js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
@ -9,7 +10,7 @@
</head> </head>
<body onload='begin();'> <body onload='begin();'>
<div id='status' style="position: fixed; right: 10; top: 5; font-style: italic">Connecting...</div> <div id='status' style="position: fixed; right: 10; top: 5" class='status'>Connecting...</div>
<h1>Real-time board watcher readout</h1> <h1>Real-time board watcher readout</h1>
<p> <p>
@ -30,7 +31,7 @@
<li>Avg. posts per cycle: <em id='at_avg'>0</em></li> <li>Avg. posts per cycle: <em id='at_avg'>0</em></li>
</ul> </ul>
<div style='padding-left: 10px'> <div style='padding-left: 10px'>
<div hidden id='at_flagshare_container' style="border:solid; overflow-y: auto; height: 200px;"> <div class='expshare' hidden id='at_flagshare_container' style="overflow-y: auto; height: 200px;">
<ul> <ul>
</ul> </ul>
</div> </div>
@ -72,7 +73,7 @@
<li>Avg. posts per cycle: <em id='s_avg'>0</em></li><!--TODO: Move this into another `This session' section></--> <li>Avg. posts per cycle: <em id='s_avg'>0</em></li><!--TODO: Move this into another `This session' section></-->
</ul> </ul>
<div style='padding-left: 10px'> <div style='padding-left: 10px'>
<div hidden id='s_flagshare_container' style="border:solid; overflow-y: auto; height: 200px;"> <div class='expshare' hidden id='s_flagshare_container' style="overflow-y: auto; height: 200px;">
<ul> <ul>
</ul> </ul>
</div> </div>
@ -109,11 +110,17 @@
<div class='contain' style="height: 300px; width:100%;"> <div class='contain' style="height: 300px; width:100%;">
<canvas id='tsCycleSpeed'></canvas> <canvas id='tsCycleSpeed'></canvas>
</div> </div>
<div class='ctlcont'><input id='cs_purge' type='button' value='Purge' /> Rollover at: <input type='textbox' id='cs_rlat' /> <em id='e_cs_rlat' class='error'></em></div>
<hr></hr> <hr></hr>
<h2>Aggregate stats</h2> <h2>Aggregate stats</h2>
<div class='contain' style="height: 300px; width:100%;">
<canvas id='tAgLine'></canvas>
</div>
<div class='contain' style="height: 300px; width:100%;"> <div class='contain' style="height: 300px; width:100%;">
<canvas id='tAgCandle'></canvas> <canvas id='tAgCandle'></canvas>
</div> </div>
<div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div>
<hr></hr> <hr></hr>
<h2>Live stats</h2> <h2>Live stats</h2>
<div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'> <div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'>
@ -123,7 +130,8 @@
<div class='contain' style="height: 300px; width:100%;"> <div class='contain' style="height: 300px; width:100%;">
<canvas id='cycleBar'></canvas> <canvas id='cycleBar'></canvas>
</div> </div>
<div style="overflow-y: auto; height: 200px; border: solid;"> <div>
<div class='tab' style="overflow-y: auto; height: 200px; ">
<table id='cytb' style='width: 100%;'> <table id='cytb' style='width: 100%;'>
<thead> <thead>
<tr id='cytb_headers'> <tr id='cytb_headers'>
@ -142,6 +150,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div class='ctlcont'><input id='cytb_purge' type='button' value='Purge' /> Rollover at: <input type='textbox' id='cytb_rlat' /> <em id='e_rlat' class='error'></em></div>
</div>
<script src="js/cyclefunc.js"></script> <script src="js/cyclefunc.js"></script>

144
www/js/renderer.js
Unescape View File

@ -1,3 +1,7 @@
///TODO: Refactor this crap
///TODO: Add % of session and % of all time average lines to aggregate line graph
var totalCan = $("#cycleBar"); var totalCan = $("#cycleBar");
var speedCan = $('#cycleSpeed'); var speedCan = $('#cycleSpeed');
@ -20,15 +24,19 @@ var tsCycleSpeedCan = $('#tsCycleSpeed');
//var tsCycleAverageCan = $('#tsCycleAverage'); //var tsCycleAverageCan = $('#tsCycleAverage');
var tAgCandleCan = $('#tAgCandle'); var tAgCandleCan = $('#tAgCandle');
var tAgLineCan =$('#tAgLine');
const maxEntries= client.preloadCycles; const maxEntries= client.preloadCycles;
var cycleTableRollover = null;
var sessionAverageRollover = null;
function setStatus(str) function setStatus(str)
{ {
$('#status').text(str); $('#status').text(str);
} }
function lerpRGB(a,b,t) function _lerpRGB(a,b,t)
{ {
return { return {
r: a.r + (b.r - a.r) * t, r: a.r + (b.r - a.r) * t,
@ -37,6 +45,13 @@ function lerpRGB(a,b,t)
}; };
} }
function lerpRGB(a,b,c,s,l)
{
var t = s/l;
if(t<0.5) return _lerpRGB(a,b,t*2);
else return _lerpRGB(b,c,(t-0.5)*2);
}
function add_new_candle(charts, data,update=true,close=null) function add_new_candle(charts, data,update=true,close=null)
{ {
//charts.agcandle.data.labels.push(fixtime2(new Date(data.timestamp))); //charts.agcandle.data.labels.push(fixtime2(new Date(data.timestamp)));
@ -57,6 +72,18 @@ function createNewCandle(charts, close)
charts.agcandle.update(); charts.agcandle.update();
} }
function createNewLinePoint(charts, data)
{
if(charts.agline.data.datasets[0].data[charts.agline.data.datasets[0].data.length-1]) {
charts.agline.data.datasets[0].data[charts.agline.data.datasets[0].data.length-1] = data.number;
charts.agline.data.datasets[1].data[charts.agline.data.datasets[0].data.length-1] = data.number/data._cycles;
}
charts.agline.data.labels.push(fixtime(new Date()));
charts.agline.data.datasets[0].data.push(0);
charts.agline.data.datasets[1].data.push(0);
charts.agline.update();
}
function total_add_data(chart, label, data, update=true){ function total_add_data(chart, label, data, update=true){
//chart.addData(value, label); //chart.addData(value, label);
@ -103,9 +130,6 @@ function fixtime2(now){
function grapher(data, charts, update=true) { function grapher(data, charts, update=true) {
//cycle graph //cycle graph
total_add_data(charts.total, fixtime(new Date(data.timestamp)), data,update); total_add_data(charts.total, fixtime(new Date(data.timestamp)), data,update);
} }
function updateSection(gr, pfx, allTime, allTimeAverage,data=null) function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
@ -131,8 +155,9 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
gr.aflagpie.data.datasets[0].data.length = gr.aflagpie.data.datasets[0].data.length =
gr.aflagpie.data.datasets[0].backgroundColor.length = 0; gr.aflagpie.data.datasets[0].backgroundColor.length = 0;
var cole = {r: 0, g: 0,b: 255}; var cols = {r: 0, g: 0,b: 255};
var cols = {r: 255, g: 128, b: 128}; var colm = {r: 0, g: 255, b: 0};
var cole = {r: 255, g: 0, b: 0};
var colstr = function(x) { var colstr = function(x) {
return "rgba("+x.r+","+x.g+","+x.b+", 1.0)"; return "rgba("+x.r+","+x.g+","+x.b+", 1.0)";
@ -146,7 +171,7 @@ function updateSection(gr, pfx, allTime, allTimeAverage,data=null)
gr.aflagpie.data.labels.push(share[i]["key"]); gr.aflagpie.data.labels.push(share[i]["key"]);
gr.aflagpie.data.datasets[0].data.push(share[i]["total"]); gr.aflagpie.data.datasets[0].data.push(share[i]["total"]);
gr.aflagpie.data.datasets[0].backgroundColor.push(colstr(lerpRGB(cols,cole,(i/share.length)))); gr.aflagpie.data.datasets[0].backgroundColor.push(colstr(lerpRGB(cols,colm,cole,i,share.length)));
} }
@ -227,6 +252,10 @@ function graphCycle(data, charts,update=true)
"<td>"+data.trips+"</td>"+ "<td>"+data.trips+"</td>"+
"<td>"+data.nametrips+"</td>"+ "<td>"+data.nametrips+"</td>"+
"</tr>"); "</tr>");
while( cycleTableRollover !== null && cycleTableRollover>0 && ($('#cytb > tbody').children().length)>cycleTableRollover)
{
$('#cytb > tbody > tr:last').remove();
}
grapher(data, charts,update); grapher(data, charts,update);
updateSection(charts, "s_", client.sessionAllTime, client.sessionAllTimeAverage); updateSection(charts, "s_", client.sessionAllTime, client.sessionAllTimeAverage);
@ -246,6 +275,12 @@ function graphCycle(data, charts,update=true)
charts.speed.data.datasets[2].data.push( client.allTimeAverage.number); charts.speed.data.datasets[2].data.push( client.allTimeAverage.number);
if(update) { if(update) {
charts.speed.update(); charts.speed.update();
while(sessionAverageRollover!==null && sessionAverageRollover>0 && charts.aspeed.data.labels.length>sessionAverageRollover) {
charts.aspeed.data.labels.shift();
charts.aspeed.data.datasets[0].data.shift();
charts.aspeed.data.datasets[1].data.shift();
charts.aspeed.data.datasets[2].data.shift();
}
charts.aspeed.data.labels.push(fixtime(new Date(data.timestamp))); charts.aspeed.data.labels.push(fixtime(new Date(data.timestamp)));
charts.aspeed.data.datasets[0].data.push( ((data.number/client.sessionAllTimeAverage.number)*100.00).toFixed(2)); charts.aspeed.data.datasets[0].data.push( ((data.number/client.sessionAllTimeAverage.number)*100.00).toFixed(2));
@ -266,6 +301,17 @@ function graphCycle(data, charts,update=true)
if(update) if(update)
charts.agcandle.update(); charts.agcandle.update();
} }
//Line
//Total posts
if(charts.agline.data.datasets[0].data[charts.agline.data.datasets[0].data.length-1]) {
charts.agline.data.datasets[0].data[charts.agline.data.datasets[0].data.length-1] += data.number;
if(client.superBuffer.length>0)
charts.agline.data.datasets[1].data[charts.agline.data.datasets[0].data.length-1] = charts.agline.data.datasets[0].data[charts.agline.data.datasets[0].data.length-1] /client.superBuffer[client.superBuffer.length-1]._cycles;
if(update)
charts.agline.update();
}
} }
function begin() { function begin() {
@ -666,6 +712,30 @@ function begin() {
} }
}); });
var chartAGLine = new Chart(tAgLine, {
type: "line",
data: {
labels: [],
datasets: [{
label:"Total posts",
borderColor: "rgba(255,0,0,0.6)",
fill: false,
tension: 0,
data:[]
}, {
label: "Average per cycle",
borderColor: "rgba(0,255,0,0.6)",
fill: false,
tension: 0,
data:[]
}]
},
options: {
maintainAspectRatio: false
}
});
client.onWSclose = function() { client.onWSclose = function() {
setStatus("Dropped"); setStatus("Dropped");
}; };
@ -674,6 +744,7 @@ function begin() {
x.total = chartTotal; x.total = chartTotal;
x.speed = chartSpeed; x.speed = chartSpeed;
x.agcandle = chartAGCandle; x.agcandle = chartAGCandle;
x.agline = chartAGLine;
return x; return x;
}; };
@ -713,6 +784,7 @@ function begin() {
//TODO: new supercycle //TODO: new supercycle
//add_new_candle(g_chartsSuper(), data); //add_new_candle(g_chartsSuper(), data);
createNewCandle(g_chartsSuper(), data._candle.number.c); createNewCandle(g_chartsSuper(), data._candle.number.c);
createNewLinePoint(g_chartsSuper(), data);
}; };
client.start(function(data) { client.start(function(data) {
@ -733,6 +805,11 @@ function begin() {
//load superbuffer //load superbuffer
for(var i in client.superBuffer) { for(var i in client.superBuffer) {
add_new_candle(g_chartsSuper(), client.superBuffer[i], false, (i>0?client.superBuffer[i-1]._candle.number.c:null)); add_new_candle(g_chartsSuper(), client.superBuffer[i], false, (i>0?client.superBuffer[i-1]._candle.number.c:null));
chartAGLine.data.labels.push(fixtime(new Date(client.superBuffer[i].timestamp)));
chartAGLine.data.datasets[0].data.push(client.superBuffer[i].number);
chartAGLine.data.datasets[1].data.push(client.superBuffer[i].number/client.superBuffer[i]._cycles);
} }
/*if(client.superBuffer.length<1) /*if(client.superBuffer.length<1)
@ -748,7 +825,7 @@ function begin() {
chartTotal.update(); chartTotal.update();
chartSpeed.update(); chartSpeed.update();
chartAGCandle.update(); chartAGCandle.update();
chartAGLine.update();
$('#at_flagshare_exp').on("click", function() { $('#at_flagshare_exp').on("click", function() {
@ -777,6 +854,57 @@ function begin() {
} }
}); });
$('#cytb_purge').on("click", function() {
$('#cytb_body').empty();
$('<tr hidden></tr>').appendTo($('#cytb_body'));
});
$('#cytb_rlat').on('input', function() {
var val = $('#cytb_rlat').val();
if(!isNaN(val))
{
$('#e_rlat').text("");
cycleTableRollover = Number(val);
}
else {
$('#e_rlat').text("Invalid number");
cycleTableRollover=null;
}
});
$('#cs_purge').on("click", function() {
chartSCycleSpeed.data.datasets[0].data.length=
chartSCycleSpeed.data.datasets[1].data.length=
chartSCycleSpeed.data.datasets[2].data.length=
chartSCycleSpeed.data.labels.length=0;
chartSCycleSpeed.update();
});
$('#cs_rlat').on('input', function() {
var val = $('#cs_rlat').val();
if(!isNaN(val))
{
$('#e_cs_rlat').text("");
sessionAverageRollover = Number(val);
}
else {
$('#e_cs_rlat').text("Invalid number");
sessionAverageRollover=null;
}
});
$('#ag_shift').on('click', function() {
chartAGCandle.data.datasets[0].data.shift();
chartAGCandle.update();
chartAGLine.data.labels.shift();
chartAGLine.data.datasets[0].data.shift();
chartAGLine.update();
});
updateAllTime(g_charts()); updateAllTime(g_charts());
setStatus("Synced"); setStatus("Synced");

Write Preview
Loading…
Cancel
Save