tpview/view.html

<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Touchpad Log Viewer</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mousewheel.js"></script>

<script src="js/jquery-ui-1.8.16.custom.min.js"></script>

<script src="finger_view_controller.js"></script>
<script src="graph_controller.js"></script>
<script src="secret_entries.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" charset="utf-8">

var finger_view_controller;
var current_layer = 0;
var json_obj;

function update_range(event, ui) {
  finger_view_controller.setRange(ui.values[0], ui.values[1]);
  var begin_event = finger_view_controller.getEvent(ui.values[0]);
  $("#begin_event").val(begin_event);
  if ((beginTimestamp = finger_view_controller.getTimestamp(ui.values[0])) > 0)
    $('#input_begin_time').val(beginTimestamp);
  var end_event = finger_view_controller.getEvent(ui.values[1]);
  $("#end_event").val(end_event);
  endTimestamp = finger_view_controller.getPreviousHardwareStateTimestamp(
      ui.values[1]);
  if (endTimestamp > 0)
    $('#input_end_time').val(endTimestamp);
  var values = $("#slider").slider("option", "values");
  $('#num_fts').text('Finger Touch Section (' +
                     finger_view_controller.getFTSIndex(values[1]) + ' / ' +
                     '0 ~ ' + (finger_view_controller.getNumFTS() - 1) + '): ');
}

function loadLogObj(obj) {
  finger_view_controller.setEntriesLog(obj, current_layer);
  finger_view_controller.initFTS();
  var MAX_SIZE = 10000;
  var min = Math.max(0, finger_view_controller.entries.length - MAX_SIZE);
  var max = finger_view_controller.entries.length - 1;
  finger_view_controller.setRange(min, max);
  $("#slider").slider({
    min: min,
    max: max,
    values: [min, max],
    range: true,
    slide: update_range,
    change: update_range
  });
  update_range(null, { values: [min, max] });
  finger_view_controller.resetZooms();
}

function handleFileSelect(evt) {
  $('#text_box').removeClass('text_box_hilight');
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files;  // FileList object.

  var file = files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#text_box').val(e.target.result);
    var obj = jQuery.parseJSON(e.target.result);
    json_obj = obj;
    generateRadioButtons(obj);
    current_layer = 0;
    loadLogObj(obj);
  };
  reader.readAsText(file);
}

var count = 0;

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
}

function handleDragEnter(evt) {
  $('#text_box').addClass('text_box_hilight');
  evt.stopPropagation();
  evt.preventDefault();
}

function handleDragOut(evt) {
  $('#text_box').removeClass('text_box_hilight');
  evt.stopPropagation();
  evt.preventDefault();
}

function setup() {
  var dropZone = document.getElementById('text_box');
  dropZone.addEventListener('dragenter', handleDragEnter, false);
  dropZone.addEventListener('dragleave', handleDragOut, false);
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
}

// fix layerX, layerY warnings
(function(){
    // remove layerX and layerY
    var all = $.event.props,
        len = all.length,
        res = [];
    while (len--) {
      var el = all[len];
      if (el != 'layerX' && el != 'layerY') res.push(el);
    }
    $.event.props = res;
}());

function begin_stepBack() {
  var values = $("#slider").slider("option", "values");
  var minValue = $("#slider").slider("option", "min");
  if (values[0] > minValue) {
    var newValue = finger_view_controller.prevHardwareState(values[0]);
    if (newValue < 0)
      return;
    values[0] = newValue;
    $("#slider").slider("option", "values", values);
    $('#input_begin_time').val(finger_view_controller.getTimestamp(newValue));
  }
}

function begin_stepForward() {
  var values = $("#slider").slider("option", "values");
  if (values[0] < values[1]) {
    var newValue = finger_view_controller.nextHardwareState(values[0]);
    if (newValue < 0)
      return;
    values[0] = newValue;
    $("#slider").slider("option", "values", values);
    $('#input_begin_time').val(finger_view_controller.getTimestamp(newValue));
  }
}

function end_stepBack() {
  var values = $("#slider").slider("option", "values");
  if (values[1] > values[0]) {
    var newValue = finger_view_controller.prevHardwareState(values[1]);
    if (newValue < 0)
      return;
    values[1] = newValue;
    $("#slider").slider("option", "values", values);
    $('#input_end_time').val(finger_view_controller.getTimestamp(newValue));
  }
}

function end_stepForward() {
  var values = $("#slider").slider("option", "values");
  var maxValue = $("#slider").slider("option", "max");
  if (values[1] < maxValue) {
    var newValue = finger_view_controller.nextHardwareState(values[1]);
    if (newValue < 0)
      return;
    values[1] = newValue;
    $("#slider").slider("option", "values", values);
    $('#input_end_time').val(finger_view_controller.getTimestamp(newValue));
  }
}

function setBeginTimestamp() {
  timestamp = $('#input_begin_time').val();
  var values = $('#slider').slider('option', 'values');
  var minValue = $('#slider').slider('option', 'min');
  var maxValue = $('#slider').slider('option', 'max');
  var newValue = finger_view_controller.getHardwareStateLETimestamp(timestamp);
  if (newValue >= minValue && newValue <= maxValue) {
    values[0] = (newValue >= values[1] ? values[1] : newValue);
    $('#slider').slider('option', 'values', values);
  }
}

function setEndTimestamp() {
  timestamp = $('#input_end_time').val();
  var values = $('#slider').slider('option', 'values');
  var minValue = $('#slider').slider('option', 'min');
  var maxValue = $('#slider').slider('option', 'max');
  var newValue = finger_view_controller.getHardwareStateGETimestamp(timestamp);
  if (newValue >= minValue && newValue <= maxValue) {
    values[1] = (newValue <= values[0] ? values[0] : newValue);
    $('#slider').slider('option', 'values', values);
  }
}

function gotoPrevFTS() {
  var values = $('#slider').slider('option', 'values');
  var fts = finger_view_controller.getPrevFTS(values);
  $('#slider').slider('option', 'values', fts);
}

function gotoNextFTS() {
  var values = $('#slider').slider('option', 'values');
  var fts = finger_view_controller.getNextFTS(values);
  $('#slider').slider('option', 'values', fts);
}

function gotoFirstFTS() {
  var fts = finger_view_controller.getFirstFTS();
  $('#slider').slider('option', 'values', fts);
}

function gotoLastFTS() {
  var fts = finger_view_controller.getLastFTS();
  $('#slider').slider('option', 'values', fts);
}

function expandAllFTS() {
  var values = finger_view_controller.getAllEntries();
  $('#slider').slider('option', 'values', values);
}


function shrink() {
  var values = $("#slider").slider("option", "values");
  var snippet = finger_view_controller.getSnippet(values[0], values[1]);
  $('#text_box').val(JSON.stringify(snippet, null, 2));
  loadLogObj(snippet);
}

function generateRadioButtons(obj) {
  var radioHTML = '<input type="radio" name="viewLayer" value="0" ' +
                  'checked="checked" onclick="radioChange(event)">' +
                  obj.interpreterName + '</input><br/>';
  var layer = 0;
  while (obj.hasOwnProperty('nextLayer')) {
    obj = obj.nextLayer;
    layer++;
    radioHTML += '<input type="radio" name="viewLayer" value="' + layer +
                 '" onclick="radioChange(event)">' + obj.interpreterName +
                 '</input><br/>';
  }
  document.getElementById('button_div').innerHTML = radioHTML;
}

function generateUnittest() {
  var interpreter_name = $('#unittest_interpreter').val();
  var unittest_name = $('#unittest_testname').val();

  var values = $('#slider').slider('option', 'values');
  var unittest = finger_view_controller.getUnitTest(
      values[0], values[1], interpreter_name, unittest_name);
  $('#unittest_box').val(unittest);
}

function radioChange(e) {
  if (e.target.value != current_layer) {
    current_layer = e.target.value;
    loadLogObj(json_obj);
  }
}

$(document).ready(function() {
  setup();
  $("#playpause").button({
    text: false,
    icons: {
      primary: "ui-icon-play"
    }
  });
  var canvas = document.getElementById('fview');
  var gc = new GraphController($('#gview'));
  gc.setLineSegments([{'start': {'xPos': 0.1, 'yPos': 0.1},
                       'end': {'xPos': 0.9, 'yPos': 0.5}}]);
  var inGc = new GraphController($('#fview'));
  
  finger_view_controller = new FingerViewController(inGc, gc, $('#intext'));
  $("#out-resetzoom").button({
    icons: {
      primary: "ui-icon-arrow-4-diag"
    }
  }).click(function() {
    gc.animResetZoom();
  });

  $("#in-resetzoom").button({
    icons: {
      primary: "ui-icon-arrow-4-diag"
    }
  }).click(function() {
    inGc.animResetZoom();
  });

  $("#begin_stepback").button({
    text: false,
    icons: {
      primary: "ui-icon-triangle-1-w"
    }
  }).click(begin_stepBack);
  $("#begin_stepforward").button({
    text: false,
    icons: {
      primary: "ui-icon-triangle-1-e"
    }
  }).click(begin_stepForward);
  $("#end_stepback").button({
    text: false,
    icons: {
      primary: "ui-icon-triangle-1-w"
    }
  }).click(end_stepBack);
  $("#end_stepforward").button({
    text: false,
    icons: {
      primary: "ui-icon-triangle-1-e"
    }
  }).click(end_stepForward);

  $("#shrink").button({
    text: true,
  }).click(shrink);
  $("#prev_finger_touch").button({
    text: true,
  }).click(gotoPrevFTS);
  $("#next_finger_touch").button({
    text: true,
  }).click(gotoNextFTS);
  $("#first_finger_touch").button({
    text: true,
  }).click(gotoFirstFTS);
  $("#last_finger_touch").button({
    text: true,
  }).click(gotoLastFTS);
  $("#all_finger_touch").button({
    text: true,
  }).click(expandAllFTS);
  $("#unittest").button({
    text: true,
  }).click(generateUnittest);

  $(window).keypress(function (event) {
    switch (event.keyCode) {
    case 44:  // ','  move the slider to previous fts
      gotoPrevFTS();
      break;
    case 46:  // '.'  move the slider to next fts
      gotoNextFTS();
      break;
    case 109:  // 'm' move the slider to the first fts
      gotoFirstFTS();
      break;
    case 47:  // '/'  move the slider to the last fts
      gotoLastFTS();
      break;
    case 97:  // 'a'  expand the slider to all entries
      expandAllFTS();
      break;
    case 107:  // 'k'
      end_stepBack();
      break;
    case 106:  // 'j'
      end_stepForward();
      break;
    case 103:  // 'g'
      begin_stepBack();
      break;
    case 104:  // 'h'
      begin_stepForward();
      break;
    case 115:  // 's'
      shrink();
      break;
    }
  });

  generateRadioButtons(secret_obj);
  loadLogObj(secret_obj);
});

</script>
</head>
<body>
<div class="viewspan">
<div class="heading">Input:</div>
<canvas class="view" id="fview" width="480" height="320"></canvas><br/>
<div id="intext">Time: 123123123.123<br/>Finger Cnt: 2<br/>Touch Cnt: 2</div>
<button class="button" id="in-resetzoom">Reset Zoom</button><br/>
</div>
<div class="midviewspan" id="button_div"></div>
<div class="viewspan">
<div class="heading">Output:</div>
<canvas class="view" id="gview" width="480" height="320"></canvas><br/>
<button class="button" id="out-resetzoom">Reset Zoom</button><br/>
</div>
<div id="playbar">
<button id="playpause">Play</button>
<div id="sliderdiv"><div id="slider"></div></div>
<button id="begin_stepback">Begin Step Back</button>
<button id="begin_stepforward">Begin Step Forward</button>
Set begin time: <input type='text' id='input_begin_time'
                  onkeyup="setBeginTimestamp()" />
<br/><textarea rows="4" id="begin_event" readonly="readonly"></textarea><br/>
<button id="end_stepback">End Step Back</button>
<button id="end_stepforward">End Step Forward</button>
Set end time: <input type='text' id='input_end_time'
                  onkeyup="setEndTimestamp()" />
<br/><textarea rows="4" id="end_event" readonly="readonly"></textarea><br/>
<div id='num_fts'></div>
<button id="first_finger_touch"> &lt;&lt; </button>
<button id="prev_finger_touch"> &lt; </button>
<button id="all_finger_touch"> all </button>
<button id="next_finger_touch"> &gt; </button>
<button id="last_finger_touch"> &gt;&gt; </button><br/><br/>
<button id="shrink">Shrink Range</button>
</div>
<div id="textdiv">
<textarea rows="24" cols="80" id="text_box">Drag and drop a touchpad log file here.</textarea></div>
<div id="unittest_div">
<input id="unittest_interpreter" value="InterpreterName"/>
<input id="unittest_testname" value="TestName"/>
<button id="unittest">Generate Unittest</button>
<textarea rows="24" cols="80" id="unittest_box"></textarea>
</div>

</body>
</html>