remoting/webapp/crd/js/connection_stats.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * Module to support debug overlay window with connection stats.
   8  */
   9
  10 'use strict';
  11
  12 /** @suppress {duplicate} */
  13 var remoting = remoting || {};
  14
  15 /**
  16  * @constructor
  17  * @param {Element} statsElement The HTML div to which to update stats.
  18  * @param {remoting.ClientPlugin} plugin
  19  *
  20  * @implements {remoting.WindowShape.ClientUI}
  21  * @implements {base.Disposable}
  22  */
  23 remoting.ConnectionStats = function(statsElement, plugin) {
  24   /** @private */
  25   this.statsElement_ = statsElement;
  26
  27   /** @private {remoting.ClientSession.PerfStats} */
  28   this.mostRecent_ = null
  29
  30   /** @private */
  31   this.plugin_ = plugin;
  32
  33   var that = this;
  34
  35   /** @private */
  36   this.timer_ = new base.RepeatingTimer(function(){
  37     that.update(plugin.getPerfStats());
  38   }, 1000, true);
  39
  40   remoting.windowShape.addCallback(this);
  41 };
  42
  43 remoting.ConnectionStats.prototype.dispose = function() {
  44   base.dispose(this.timer_);
  45   this.timer_ = null;
  46   this.plugin_ = null;
  47 };
  48
  49 /**
  50  * @return {remoting.ClientSession.PerfStats} The most recently-set PerfStats,
  51  *     or null if update() has not yet been called.
  52  */
  53 remoting.ConnectionStats.prototype.mostRecent = function() {
  54   return this.mostRecent_;
  55 };
  56
  57 /**
  58  * Show or hide the connection stats div.
  59  */
  60 remoting.ConnectionStats.prototype.toggle = function() {
  61   this.statsElement_.hidden = !this.statsElement_.hidden;
  62 };
  63
  64 /**
  65  * @return {boolean}
  66  */
  67 remoting.ConnectionStats.prototype.isVisible = function() {
  68   return !this.statsElement_.hidden;
  69 };
  70
  71 /**
  72  * Show or hide the connection stats div.
  73  * @param {boolean} show
  74  */
  75 remoting.ConnectionStats.prototype.show = function(show) {
  76   this.statsElement_.hidden = !show;
  77 };
  78
  79 /**
  80  * If the stats panel is visible, add its bounding rectangle to the specified
  81  * region.
  82  * @param {Array<{left: number, top: number, width: number, height: number}>}
  83  *     rects List of rectangles.
  84  */
  85
  86 remoting.ConnectionStats.prototype.addToRegion = function(rects) {
  87   if (!this.statsElement_.hidden) {
  88     rects.push(this.statsElement_.getBoundingClientRect());
  89   }
  90 };
  91
  92 /**
  93  * Update the statistics panel.
  94  * @param {remoting.ClientSession.PerfStats} stats The connection statistics.
  95  */
  96 remoting.ConnectionStats.prototype.update = function(stats) {
  97   this.mostRecent_ = stats;
  98   var units = '';
  99   var videoBandwidth = stats.videoBandwidth;
 100   if (videoBandwidth != undefined) {
 101     if (videoBandwidth < 1024) {
 102       units = 'Bps';
 103     } else if (videoBandwidth < 1048576) {
 104       units = 'KiBps';
 105       videoBandwidth = videoBandwidth / 1024;
 106     } else if (videoBandwidth < 1073741824) {
 107       units = 'MiBps';
 108       videoBandwidth = videoBandwidth / 1048576;
 109     } else {
 110       units = 'GiBps';
 111       videoBandwidth = videoBandwidth / 1073741824;
 112     }
 113   }
 114
 115   /**
 116    * @param {number} value
 117    * @param {string} units
 118    * @return {string} Formatted number.
 119    */
 120   function formatStatNumber(value, units) {
 121     if (value != undefined) {
 122       return value.toFixed(2) + ' ' + units;
 123     } else {
 124       return "n/a";
 125     }
 126   }
 127
 128   var statistics = document.getElementById('statistics');
 129   this.statsElement_.innerText = (
 130       'Bandwidth: ' + formatStatNumber(videoBandwidth, units) +
 131       ', Frame Rate: ' + formatStatNumber(stats.videoFrameRate, 'fps') +
 132       ', Capture: ' + formatStatNumber(stats.captureLatency, 'ms') +
 133       ', Encode: ' + formatStatNumber(stats.encodeLatency, 'ms') +
 134       ', Decode: ' + formatStatNumber(stats.decodeLatency, 'ms') +
 135       ', Render: ' + formatStatNumber(stats.renderLatency, 'ms') +
 136       ', Latency: ' + formatStatNumber(stats.roundtripLatency, 'ms'));
 137 };