remoting/webapp/base/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  * @param {remoting.WindowShape=} opt_windowShape
  20  *
  21  * @implements {remoting.WindowShape.ClientUI}
  22  * @implements {base.Disposable}
  23  */
  24 remoting.ConnectionStats = function(statsElement, plugin, opt_windowShape) {
  25   /** @private */
  26   this.statsElement_ = statsElement;
  27
  28   /** @private {remoting.ClientSession.PerfStats} */
  29   this.mostRecent_ = null
  30
  31   /** @private */
  32   this.plugin_ = plugin;
  33
  34   var that = this;
  35
  36   /** @private */
  37   this.timer_ = new base.RepeatingTimer(function(){
  38     that.update(plugin.getPerfStats());
  39   }, 1000, true);
  40
  41   /** @private */
  42   this.windowShape_ = opt_windowShape;
  43   if (this.windowShape_) {
  44     this.windowShape_.registerClientUI(this);
  45   }
  46 };
  47
  48 remoting.ConnectionStats.prototype.dispose = function() {
  49   base.dispose(this.timer_);
  50   this.timer_ = null;
  51   this.plugin_ = null;
  52   if (this.windowShape_) {
  53     this.windowShape_.unregisterClientUI(this);
  54   }
  55 };
  56
  57 /**
  58  * @return {remoting.ClientSession.PerfStats} The most recently-set PerfStats,
  59  *     or null if update() has not yet been called.
  60  */
  61 remoting.ConnectionStats.prototype.mostRecent = function() {
  62   return this.mostRecent_;
  63 };
  64
  65 /**
  66  * Show or hide the connection stats div.
  67  */
  68 remoting.ConnectionStats.prototype.toggle = function() {
  69   this.statsElement_.hidden = !this.statsElement_.hidden;
  70 };
  71
  72 /**
  73  * @return {boolean}
  74  */
  75 remoting.ConnectionStats.prototype.isVisible = function() {
  76   return !this.statsElement_.hidden;
  77 };
  78
  79 /**
  80  * Show or hide the connection stats div.
  81  * @param {boolean} show
  82  */
  83 remoting.ConnectionStats.prototype.show = function(show) {
  84   this.statsElement_.hidden = !show;
  85 };
  86
  87 /**
  88  * If the stats panel is visible, add its bounding rectangle to the specified
  89  * region.
  90  * @param {Array<{left: number, top: number, width: number, height: number}>}
  91  *     rects List of rectangles.
  92  */
  93
  94 remoting.ConnectionStats.prototype.addToRegion = function(rects) {
  95   if (!this.statsElement_.hidden) {
  96     rects.push(this.statsElement_.getBoundingClientRect());
  97   }
  98 };
  99
 100 /**
 101  * Update the statistics panel.
 102  * @param {remoting.ClientSession.PerfStats} stats The connection statistics.
 103  */
 104 remoting.ConnectionStats.prototype.update = function(stats) {
 105   this.mostRecent_ = stats;
 106   var units = '';
 107   var videoBandwidth = stats.videoBandwidth;
 108   if (videoBandwidth != undefined) {
 109     if (videoBandwidth < 1024) {
 110       units = 'Bps';
 111     } else if (videoBandwidth < 1048576) {
 112       units = 'KiBps';
 113       videoBandwidth = videoBandwidth / 1024;
 114     } else if (videoBandwidth < 1073741824) {
 115       units = 'MiBps';
 116       videoBandwidth = videoBandwidth / 1048576;
 117     } else {
 118       units = 'GiBps';
 119       videoBandwidth = videoBandwidth / 1073741824;
 120     }
 121   }
 122
 123   /**
 124    * @param {number} value
 125    * @param {string} units
 126    * @return {string} Formatted number.
 127    */
 128   function formatStatNumber(value, units) {
 129     if (value != undefined) {
 130       return value.toFixed(2) + ' ' + units;
 131     } else {
 132       return "n/a";
 133     }
 134   }
 135
 136   var statistics = document.getElementById('statistics');
 137   this.statsElement_.innerText = (
 138       'Bandwidth: ' + formatStatNumber(videoBandwidth, units) +
 139       ', Frame Rate: ' + formatStatNumber(stats.videoFrameRate, 'fps') +
 140       ', Capture: ' + formatStatNumber(stats.captureLatency, 'ms') +
 141       ', Encode: ' + formatStatNumber(stats.encodeLatency, 'ms') +
 142       ', Decode: ' + formatStatNumber(stats.decodeLatency, 'ms') +
 143       ', Render: ' + formatStatNumber(stats.renderLatency, 'ms') +
 144       ', Latency: ' + formatStatNumber(stats.roundtripLatency, 'ms'));
 145 };