whatpulse client api thing

<script>
// config

// ip-address or hostname of the machine running whatpulse
var IP = 'localhost';

// the api-port set in whatpulse settings
var PORT = 3490;

// to how many decimals should the avg be rounded?
var avgDecimalCount = 2;

// how often does this thing refresh?
var updateMs = 500;

// am I developping stuff?
var DEBUG = true;

// DO NOT TOCH ANYTHING BELOW THIS LINE UNLESS INSTRUCTED!!!!!!!!!!!!!!!!!!!!!!!
</script>
<style>
* {
    margin: 0;
    padding: 0;
}
.clear {
    clear: both;
}
body {
    color: white;
    font-size: 16px;
}
#stats {
    position: relative;
}
#stats .stat {
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
}
#stats .stat:last-child {
    right: 0;
}
#log {
    color: grey;
}
.label {
}
.value {
    color: #04cebd;
    font-size: larger;
    font-weight: bold;
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}
</style>

<div id="stats">
    <div class="stat"><span class="label">Uptime:</span> <span id="uptime" class="value">-</span></div>
    <div class="stat"><span class="label">Keytaps:</span> <span id="keyCount" class="value">-</span></div>
    <div class="stat"><span class="label">Average Session KPS:</span> <span id="avgSessionKps" class="value">-</span></div>
</div>

<ul id="log"></ul>

<script src="http://code.jquery.com/jquery-2.2.1.min.js" integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=" crossorigin="anonymous"></script>
<script>
var intervalId = undefined;
var $stats = $('#stats');
var $log = $('#log');
var $keyCount = $('#keyCount');
var $uptime = $('#uptime');
var $avgSessionKps = $('#avgSessionKps');
var decimalNumber = Math.pow(10, avgDecimalCount);

function distributeElements() {
    $kids = [];
    var kidsCombinedWidth = 0;
    $stats.children().each(function(i) {
        var $kid = $(this);
        $kids[i] = $kid;
        kidsCombinedWidth += $kid.width();
    });
    console.log(kidsCombinedWidth, $kids.length);
    if($kids.length <= 1) {
        return;
    }
    var inbetweenWidth = (window.innerWidth-kidsCombinedWidth)/($kids.length-1);
    var leftSoFar = 0;
    for(var i=0, len=$kids.length-1; i<len; ++i) {
        $kids[i].css('left', leftSoFar + 'px');
        leftSoFar += $kids[i].width() + inbetweenWidth;
    }
}

function start() {
    intervalId = setInterval(updateKeys, updateMs);
}

function stop() {
    clearInterval(intervalId);
}

function updateKeys() {
    $.ajax({
        dataType: "json",
        url: 'http://'+IP+':'+PORT+'/v1/unpulsed',
        success: function(result) {
            $keyCount.text(result.keys);
            $uptime.text(toTimeString(result.uptime));
            var avg = result.keys/result.uptime;
            $avgSessionKps.text(Math.round(avg*decimalNumber)/decimalNumber);
            distributeElements();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            log(textStatus);
        }
    });
}

function toTimeString(sec_num) {
    var hours   = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    var time    = hours+':'+minutes+':'+seconds;
    return time;
}

function log(message) {
    console.log(message);
    if(DEBUG) {
        $log.append($('<li>').text(message));
    }
}
distributeElements();
start();
</script>