ARRIS Enterprises, Inc. Confidential Information
Profiler Service example usage

This page shows an example on how to use the Profiler Service to get information about the the performance / load when running the actual page.

<html>
<head>
  <script type="text/javascript">

    var gSessionId;
    var gSupportedProperties;

    function onLoaded() {
      // This is the application id of the application we want to
      // profile. It can be retrieved using the application service.
      // Id '1' is usually the browser (you can check by running
      // 'toish as info').
      var applicationId = 1;

      // Create a session that will profile application with id
      // 'applicationId'
      gSessionId = toi.profilerService.createProfilingSession(applicationId);

      // Before we can start the actual profiling we need to know what
      // properties (of the application) that can be measured.
      gSupportedProperties = toi.profilerService.getSupportedProperties(applicationId);

      // For this example we choose to monitor all available
      // properties. We also choose to calculate the average every one
      // second by setting timeSpan to '1'.
      var timeSpan = 1; // second
      for (var i = 0; i < gSupportedProperties.length; ++i) {
	toi.profilerService.addMonitoredProperty(gSessionId,
						 gSupportedProperties[i],
						 timeSpan);
      }

      // Start the actual profiling by calling startProfiling() on the
      // session id
      toi.profilerService.startProfiling(gSessionId);

      // Show the result every second
      setInterval(ShowProfilingResult, 1000);
    }

    function ShowProfilingResult()
    {
      console.log(gSupportedProperties);
      Display("Profiling properties:", false);
      var sample, averge;
      for(var i = 0; i < gSupportedProperties.length; ++i) {
	try {
	  sample = toi.profilerService.getSample(gSessionId,
                                                 gSupportedProperties[i]);
          average = toi.profilerService.getAverage(gSessionId,
						   gSupportedProperties[i]);
	  if (gSupportedProperties[i] !== sample.property) {
	    console.log("Mismatch: " + gSupportedProperties[i] + " and " + sample.property);
	  }

          Display(sample.property + " : " + sample.value + " " + average.value, true);
	}
      	catch (e) {
	  console.error("Caught exception: " + e);
	}
      }
    }

    function Display(text, append)
    {
      var output = document.getElementById("output");
      if (append) {
	output.innerHTML += text + "<br/>";
      }
      else {
	output.innerHTML = text + "<br/>";
      }
    }

</script>

<style>
  div.animation
  {
    width:100px;
    height:100px;
    background:red;
    position:relative;
    -webkit-animation:myfirst 5s infinite;
    -webkit-transform: translateZ(0);
  }

  @-webkit-keyframes myfirst
  {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
  }

</style>

<body onload="onLoaded()" bgcolor="white">
  <embed type="application/x-kreatv-toi" width="1" height="1" style="visibility:hidden"/>
  <embed type="application/x-kreatv-teiprofiler" width="1" height="1" style="visibility:hidden"/>
  <div class="animation"> </div>
  <div id="output" style="position:absolute; top:100px; left:50%;"></div>
</body>
</html>