xiph
/
daala
mirror de https://git.xiph.org/daala.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
      h1 { text-align: center; }
      .graph { margin: 0 auto; width: 900px; height: 500px; }
      #select { text-align: center; }
      .choices { text-align: center; }
    </style>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.flot.js"></script>
    <script>
function plot(data, measurements, plotElem) {
  var bits = { "total": [] };

  for (var i = 0; i < data.length; i++) {
    $.each(data[i][measurements], function(key, val) {
      bits[key] = bits[key] || new Array();
      bits[key].push([data[i].frame, val]);
    });
    bits["total"].push([data[i].frame, data[i].total]);
  }

  var color = 0;
  var datasets = new Object();
  $.each(bits, function(key, val) {
    datasets[key] = { label: key, data: val, color: color };
    color++;
  });

  var choices = $("<div>");
  choices.appendTo(plotElem);
  choices.addClass("choices");
  $.each(datasets, function(key, val) {
    choices.append("<input type=checkbox name=" + key +
                   " checked id=choice_" + key + ">" +
                   "<label for=choice_" + key + ">" +
                   val.label +
                   "</label>");
  });

  var graph = $("<div>");
  graph.appendTo(plotElem);
  graph.addClass("graph");
  function plot_choices() {
    var data = [];
    choices.find("input:checked").each(function() {
      var key = $(this).attr("name");
      if (key && datasets[key]) {
        data.push(datasets[key]);
      }
    });
    var options = {
      yaxis: { min: 0 },
      xaxis: { tickDecimals: 0 }
    };
    $.plot(graph, data, options);
  }

  choices.find("input").on("click", plot_choices);
  plot_choices();
}

$(function() {
  $("#filebox").on("change", function() {
    console.log(this.files);

    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
      var data = JSON.parse(e.target.result);
      plot(data, "technique", $("#techniques"));
      plot(data, "plane", $("#planes"));
    };
    console.log(reader);
    reader.readAsText(file);
  });
});
    </script>
  </head>
  <body>
    <div id="header">
      <h1>Bitrate Metrics</h1>
    </div>
    <div id="select">
      <input type="file" id="filebox">
    </div>
    <div id="content">
      <div id="techniques"></div>
      <hr>
      <div id="planes"></div>
    </div>
  </body>
</html>