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",
BACKEND_SOCKET: "./backend/rtbw.sock",
BUFFER_PURGE_TIME: 600000, //10 minutes
SUPERBUFFER_PURGE_TIME: 86400000 //24 hours
BUFFER_PURGE_TIME: 1800000, //30 minutes
SUPERBUFFER_PURGE_TIME: 43200000 //12 hours
};
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;
}

52
www/index.html
Unescape View File

@ -1,6 +1,7 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css" id="theme">
<script src="/js/jquery.js"></script>
<script src="./js/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
@ -9,7 +10,7 @@
</head>
<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>
<p>
@ -30,7 +31,7 @@
<li>Avg. posts per cycle: <em id='at_avg'>0</em></li>
</ul>
<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>
</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></-->
</ul>
<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>
</div>
@ -109,11 +110,17 @@
<div class='contain' style="height: 300px; width:100%;">
<canvas id='tsCycleSpeed'></canvas>
</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>
<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%;">
<canvas id='tAgCandle'></canvas>
</div>
<div class='ctlcont'><input id='ag_shift' value=">>" type='button' /></div>
<hr></hr>
<h2>Live stats</h2>
<div class='contain' id='cycleSpeedC' style='overflox-x: scroll; position: relative; width: 100%; height: 300px;'>
@ -123,24 +130,27 @@
<div class='contain' style="height: 300px; width:100%;">
<canvas id='cycleBar'></canvas>
</div>
<div style="overflow-y: auto; height: 200px; border: solid;">
<table id='cytb' style='width: 100%;'>
<thead>
<tr id='cytb_headers'>
<th>Timestamp</th>
<th>Last no.</th>
<th>Posts</th>
<th>% of avg.</th>
<th>Flag share</th>
<th>Names</th>
<th>Trips</th>
<th>Names+trips</th>
</tr>
</thead>
<tbody id='cytb_body'>
<tr hidden></tr>
</tbody>
</table>
<div>
<div class='tab' style="overflow-y: auto; height: 200px; ">
<table id='cytb' style='width: 100%;'>
<thead>
<tr id='cytb_headers'>
<th>Timestamp</th>
<th>Last no.</th>
<th>Posts</th>
<th>% of avg.</th>
<th>Flag share</th>
<th>Names</th>
<th>Trips</th>
<th>Names+trips</th>
</tr>
</thead>
<tbody id='cytb_body'>
<tr hidden></tr>
</tbody>
</table>
</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>

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 speedCan = $('#cycleSpeed');
@ -20,15 +24,19 @@ var tsCycleSpeedCan = $('#tsCycleSpeed');
//var tsCycleAverageCan = $('#tsCycleAverage');
var tAgCandleCan = $('#tAgCandle');
var tAgLineCan =$('#tAgLine');
const maxEntries= client.preloadCycles;
var cycleTableRollover = null;
var sessionAverageRollover = null;
function setStatus(str)
{
$('#status').text(str);
}
function lerpRGB(a,b,t)
function _lerpRGB(a,b,t)
{
return {
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)
{
//charts.agcandle.data.labels.push(fixtime2(new Date(data.timestamp)));
@ -57,6 +72,18 @@ function createNewCandle(charts, close)
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){
//chart.addData(value, label);
@ -103,9 +130,6 @@ function fixtime2(now){
function grapher(data, charts, update=true) {
//cycle graph
total_add_data(charts.total, fixtime(new Date(data.timestamp)), data,update);
}
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].backgroundColor.length = 0;
var cole = {r: 0, g: 0,b: 255};
var cols = {r: 255, g: 128, b: 128};
var cols = {r: 0, g: 0,b: 255};
var colm = {r: 0, g: 255, b: 0};
var cole = {r: 255, g: 0, b: 0};
var colstr = function(x) {
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.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.nametrips+"</td>"+
"</tr>");
while( cycleTableRollover !== null && cycleTableRollover>0 && ($('#cytb > tbody').children().length)>cycleTableRollover)
{
$('#cytb > tbody > tr:last').remove();
}
grapher(data, charts,update);
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);
if(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.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)
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() {
@ -665,6 +711,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() {
setStatus("Dropped");
@ -674,6 +744,7 @@ function begin() {
x.total = chartTotal;
x.speed = chartSpeed;
x.agcandle = chartAGCandle;
x.agline = chartAGLine;
return x;
};
@ -713,6 +784,7 @@ function begin() {
//TODO: new supercycle
//add_new_candle(g_chartsSuper(), data);
createNewCandle(g_chartsSuper(), data._candle.number.c);
createNewLinePoint(g_chartsSuper(), data);
};
client.start(function(data) {
@ -733,6 +805,11 @@ function begin() {
//load 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));
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)
@ -748,7 +825,7 @@ function begin() {
chartTotal.update();
chartSpeed.update();
chartAGCandle.update();
chartAGLine.update();
$('#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());
setStatus("Synced");

Write Preview
Loading…
Cancel
Save