summaryrefslogtreecommitdiff
path: root/src/viz/index.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/viz/index.js')
-rw-r--r--src/viz/index.js93
1 files changed, 93 insertions, 0 deletions
diff --git a/src/viz/index.js b/src/viz/index.js
new file mode 100644
index 0000000..e282026
--- /dev/null
+++ b/src/viz/index.js
@@ -0,0 +1,93 @@
+var qintv_ms = 5000;
+var uripart = "/updates?";
+var lastfrom = "";
+var stuff_to_display = {"clients":"none","*":showvalue,"client-count":showvalue, "bytes-sent":showgauge, "fuckups-per-second":showasgraph};
+
+
+$(document).ready(function()
+{
+ updateS5Stats();
+ setInterval("updateS5Stats()", qintv_ms);
+});
+
+function getstreamdiv(sid) {
+ var elem = $("#"+sid);
+ if (elem.length<1) {
+ $("#content").append('<div class="container" id="'+sid+'jump"><main><h2 class="dispstreamheader">Stream: '+sid+'</h2><ul id="'+sid+'" class="controls"></ul></main></div>');
+ $("#menu").append('<a href="#'+sid+'jump">'+sid+'</a>&nbsp;');
+ elem = $("#"+sid);
+ }
+ return elem;
+}
+
+function showvalue(sid, name, value, jsdate) {
+ var divid = sid+"_"+name;
+ var elem = $("#"+divid);
+ if (elem.length<1) {
+ getstreamdiv(sid).append('<li class="dispvalue size1"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+ elem = $("#"+divid);
+ }
+ elem.html("<strong>"+value+"</strong><br/><span style='font-size:smaller;'>@"+jsdate.toLocaleDateString()+" "+jsdate.toLocaleTimeString()+"</span>");
+}
+
+var gauges = {};
+function showgauge(sid, name, value) {
+ var divid = sid+"_"+name;
+ var elem = document.getElementById(divid);
+ if (!elem) {
+ getstreamdiv(sid).append('<li class="dispvalue quadsize"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+ elem = document.getElementById(divid);
+ gauges[divid] = new google.visualization.Gauge(elem);
+ }
+ var data = google.visualization.arrayToDataTable([["Label", "Value"],[name,value]]);
+ gauges[divid].draw(data, {});
+}
+
+var graphs = {}
+var graphdata = {}
+function showasgraph(sid, name, value, jsdate) {
+ var divid = sid+"_"+name;
+ var elem = document.getElementById(divid);
+ if (!elem) {
+ getstreamdiv(sid).append('<li class="dispvalue graphsize"><div class="dispvalueheader">'+ name +'</div><div class="dispvaluevalue" id='+divid+'></div></li>');
+ elem = document.getElementById(divid);
+ graphdata[divid]=[];
+ graphs[divid] = new Dygraph(elem,graphdata[divid],{legend:'none',title:sid+"-"+name,labels:["Date/Time",name]});
+ }
+ graphdata[divid].push([jsdate,value]);
+ graphs[divid].updateOptions({'file':graphdata[divid]});
+}
+
+function graphS5Status(data) {
+ $.each(data, function(index, stream) {
+ var sid = stream["streamer-id"].format + '-' + stream["streamer-id"].quality;
+ lastfrom = "from="+stream["start-time"];
+ var jsdate = new Date(stream["start-time"]);
+ qintv_ms = stream["duration-ms"]; //doesnt really change anything yet
+ var data = stream.data;
+ console.log(data);
+ for (var key in data) {
+ if (typeof(stuff_to_display[key]) == 'function') {
+ stuff_to_display[key](sid, key, data[key], jsdate);
+ } else if (! stuff_to_display[key]) {
+ stuff_to_display['*'](sid, key, data[key], jsdate);
+ }
+ }
+ });
+}
+
+function updateS5Stats() {
+ var uri = uripart + lastfrom;
+ //$.getJSON(uri, "", function(data){alert(data);});
+ $.ajax({
+ dataType: "json",
+ url: uri,
+ data: undefined,
+ success: graphS5Status, //function(data){alert(data);},
+ error: function( jqxhr, textStatus, error ) {
+ var err = textStatus + ", " + error;
+ console.log( "Request Failed: " + err );}
+ });
+}
+
+