< 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 >
< script src = "./js/Chart.Financial.js" type = "text/javascript" > < / script >
< title > rtbw readout< / title >
< / head >
< body onload = 'begin();' >
< div id = 'status' style = "position: fixed; right: 10; top: 5" class = 'status' > Connecting...< / div >
< h1 > Real-Time Board Watcher readout< / h1 >
< div style = 'position: relative' >
< div class = 'indentbar' style = 'background-color: red !important;' > < / div >
< h4 style = 'position:relative;' onclick = '$("#pageinfo").fadeToggle();' class = 'subheader' > 4chan board statistic aggregator.< / h4 >
<!-- TODO: Make it work like this - > $("#pageinfo").slideToggle(1000,function(){$("#_info").fadeToggle();}); but look nicer></ -->
< / div >
< div >
< div class = 'expshare2' hidden id = 'pageinfo' >
< div class = 'indentbar' > < / div >
< div style = 'padding-left: 17px' >
< p class = 'info' id = '_info' > <!-- TODO: Make this hidden for fade - in></ -->
This software monitors a 4chan board for various properties, mostly relating to post speed and type, and aggregates them into graphs and charts.< br / >
The main use is of `Sessions'. When you load the page you start a session, the client then adds all data it receives from the server into a section for the current session until you close the page or lose connection (the top-right text tells the status of the connection). There are also sections containing a server-maintained set of information from the total uptime of the server; and a section of averages over larger timespans (Aggregate section). There is also a `Live' section which shows each `cycle' of the aggregator and has information on a per-cycle basis.< br / >
A cycle is the interval at which the server receives information from the backend archiver and sends it to the client, a cycle contains the information required to construct a chart or display a piece of information in a statistical way.< br / >
In the `Aggregate stats' section, a server-maintained average of all cycles in a select timeframe is displayed. The client adds its own data to this when the session starts but a backlog on the server is maintained for an amount of time. <!-- TODO: Make the section links that jump to # values in url></ -->
< / p >
< / div >
< / div >
< / div >
< hr > < / hr >
< p >
Spidering board: < em id = 'board' > < / em > < br / >
Server up since: < em id = 'uptime' > < / em > < br / >
Cycle interval: < em id = 'interval' > < / em > < br / >
Archiver interval: < em id = 'binterval' > < / em > < br / >
Server buffer purge interval: < em id = 'pinterval' > < / em > < br / >
Server aggregate buffer max size: < em id = 'spinterval' > < / em > < br / >
< / p >
< hr > < / hr >
< h2 > Total uptime stats< / h2 >
< ul >
< li > Total server cycles: < em id = 'at_upcycle' > < / em > < / li >
< li > Last no.: < em id = 'at_last' > < / em > < / li >
< li > Posts: < em id = 'at_posts' > < / em > < / li > <!-- TODO: fill this out></ -->
< li > Flag share: < em id = 'at_flagshare' > < / em > < a class = 'expand' id = 'at_flagshare_exp' > +< / a > < / li >
< li > Avg. posts per cycle: < em id = 'at_avg' > 0< / em > < / li >
< / ul >
< div style = 'padding-left: 10px' >
<!-- TODO: Change these to expshare2></ -->
< div class = 'expshare' hidden id = 'at_flagshare_container' style = "overflow-y: auto; height: 200px;" >
< ul >
< / ul >
< / div >
< / div >
< h3 > Posts by flag< / h3 >
< div style = "height: 340px; " >
< div class = 'contain' style = "height: 300px; width:80%; float:left;" >
< canvas id = 'tPostsByFlag' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:right;" >
< canvas id = 'tPostsByFlagPie' > < / canvas >
< / div >
< / div >
< h3 > Other shares< / h3 >
< div style = "height: 340px;" >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tNmaes' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tImages' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tThreads' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tIds' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tSubjects' > < / canvas >
< / div >
< / div >
Identity breakdown: < a class = 'expand' id = 'at_ident_bd_expand' > +< / a >
< div >
< div class = 'expshare2' hidden id = 'at_idbd_share' >
< div class = 'indentbar' > < / div >
< div style = 'padding-left: 17px' >
< div class = 'contain' style = "height: 300px; width:20%;" >
< canvas id = 'tNmaesDetailed' > < / canvas >
< / div >
Show Anon < input type = 'checkbox' checked id = 'at_idbd_showanon' / >
< / div >
< / div >
< / div >
< hr > < / hr >
< h2 > Session stats< / h2 >
< ul >
< li > Session started: < em id = 's_started' > < / em > < / li >
< li > Total session cycles: < em id = 's_upcycle' > < / em > < / li >
< li > Posts: < em id = 's_posts' > < / em > < / li > <!-- TODO: fill this out></ -->
< li > Flag share: < em id = 's_flagshare' > < / em > < a class = 'expand' id = 's_flagshare_exp' > +< / a > < / li >
< 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 class = 'expshare' hidden id = 's_flagshare_container' style = "overflow-y: auto; height: 200px;" >
< ul >
< / ul >
< / div >
< / div >
< h3 > Posts by flag< / h3 >
< div style = "height: 340px; " >
< div class = 'contain' style = "height: 300px; width:80%; float:left;" >
< canvas id = 'tsPostsByFlag' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:right;" >
< canvas id = 'tsPostsByFlagPie' > < / canvas >
< / div >
< / div >
< h3 > Other shares< / h3 >
< div style = "height: 340px;" >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tsNmaes' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tsImages' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tsThreads' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tsIds' > < / canvas >
< / div >
< div class = 'contain' style = "height: 300px; width:20%; float:left;" >
< canvas id = 'tsSubjects' > < / canvas >
< / div >
< / div >
Identity breakdown: < a class = 'expand' id = 's_ident_bd_expand' > +< / a >
< div >
< div class = 'expshare2' hidden id = 's_idbd_share' >
< div class = 'indentbar' > < / div >
< div style = 'padding-left: 17px' >
< div class = 'contain' style = "height: 300px; width:20%;" >
< canvas id = 'tsNmaesDetailed' > < / canvas >
< / div >
Show Anon < input type = 'checkbox' checked id = 's_idbd_showanon' / >
< / div >
< / div >
< / div >
< h3 > Average comparisons< / h3 >
< 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;' >
< canvas id = 'cycleSpeed' > < / canvas >
< / div >
<!-- style='position: absolute; left: 0; top: 0;pointer - events:none;'></ -->
< div class = 'contain' style = "height: 300px; width:100%;" >
< canvas id = 'cycleBar' > < / canvas >
< / div >
< 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 >
< hr > < / hr >
< div class = 'footer' >
< p > Backend source: < a target = _blank href = 'https://github.com/notflan/rtbwpy' > rtbwpy< / a > < br / >
Frontend source: < a title = " As it stands the code is, frankly, embarrassingly bad and is in need of a lot of refactoring." > I will release this when it is of an acceptable quality.< / a > < / p >
< em > This page is served statically.< / em >
< / div >
< script src = "js/cyclefunc.js" > < / script >
< script src = "js/client.js" > < / script >
< script src = "js/renderer.js" > < / script >
< / body >
< / html >
