index.html

<html>
<head>
  <title>GraphTea</title>
  <link href="bootstrap.css" rel="stylesheet">
  <style type="text/css">
    body {
      background-color: white;
      margin: 50px 100px;
    }

    .matrix {
      font-family: 'Times New Roman', Times, serif;
      font-size: 200%;
      width: 100%;
      height: 100%;
      background-color: white;
      border-collapse: collapse;
    }

    .mmatrix td, th {
      font-family: 'Times New Roman', Times, serif;
      border: 0px solid black;
      border-collapse: collapse;
      text-align: center;
    }

    .table .first {
      border: none;
      background-color: #C0C0C0;
    }


  </style>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="springy.js"></script>
<script src="springyui.js"></script>
<script src="createMatrix.js"></script>
<script src="html5slider.js"></script>
<script src="generate.js"></script>
<script>


  var gen = new generate();
  var graph = gen.complete(6);
  window.onload = init;

  function init() {
    for (var m in gen) {
      if (typeof gen[m] == "function") {
        var x = document.getElementById("generators");
        var option = document.createElement("option");
        option.text = m;
        option.onclick = "alert('s');";
        try {
          // for IE earlier than version 8
          x.add(option, x.options[null]);
        }
        catch (e) {
          x.add(option, null);
        }
        //graph=gen[m](5);
      }
    }
  }

  var cashArr = new Array();
  var ft = 1

  jQuery(function () {
    var springy = jQuery('#springydemo').springy({
      graph:graph,
      nodeSelected:function (node) {
        if (graph.cholesky == true) {

          for (var i = 0; i < cashArr.length; i++) {
            cashArr[node.id][i] = 0;
            cashArr[i][node.id] = 0;
          }
          var temp = graph.arrRemoveEdges;
          for (var i = 0; i < temp.length; i++) {
            for (var j = 0; j < temp.length; j++) {
              if (i != j)
                cashArr[temp[i].id][temp[j].id] = 1;
            }
          }

          document.getElementById('matrix').innerHTML = createMatrix(cashArr, 0);
        }
      }

    });
    if (ft == 1) {
      cashArr = graph.matrix();
      document.getElementById('matrix').innerHTML = createMatrix(cashArr, 0);
    }
  });

  function cholesky() {
    if (graph.cholesky == false) {
      graph.cholesky = true;
      document.getElementById('cholesky').innerHTML = 'Deactivate Cholesky';
    }
    else {
      graph.cholesky = false;
      document.getElementById('cholesky').innerHTML = 'Activate Cholesky';
    }
  }

  function edit() {
    if (graph.edit == false) {
      graph.edit = true;
      document.getElementById('edit').innerHTML = 'Deactivate Edit Mode';
    }
    else {
      graph.edit = false;
      document.getElementById('edit').innerHTML = 'Activate Edit Mode';
    }
  }

  function updateSlider(value, type) {
    if (type == 'velocity') graph.velocity = value;
    else graph.position = value;
  }

  function updateGraph() {
    graph.removeAll();
    var g2 = gen[$('#generators option:selected').text()](document.getElementById("n").value, document.getElementById("m").value);
    var arr = new Array();
    g2.nodes.forEach(function (n) {
      arr[n.id] = graph.newNode();
    });

    g2.edges.forEach(function (e) {
      graph.newEdge(arr[e.source.id], arr[e.target.id], {color:'blue', directional:false});
    });

    cashArr = graph.matrix();
    document.getElementById('matrix').innerHTML = createMatrix(cashArr, 1);
  }

</script>

<h1 style="margin-bottom: 50px;">
  Combinatorial Scientific Computing
</h1>

<button id='cholesky' class='btn btn-primary btn-large' onclick="cholesky()">Activate Cholesky</button>
<br><br>

<div style="box-shadow: 0 0 10px; border-radius: 10px;">
  <table width="640px" height="480">
    <tr>
      <td width="640px" style="border-right: 2px solid #a2a2a2;">
        <canvas id="springydemo" width="640" height="480"></canvas>
      </td>
      <td width="" id="matrix" style="padding: 100px;"></td>
    </tr>
  </table>
</div>
<div style="margin-top: 100px;">
  <form>
    <fieldset>
      <legend>Generate a Graph</legend>
      <label>n</label><input type="text" id="n"/>
      <label>p</label><input type="text" id="m"/>
      <label>Graph Type</label><select onchange="updateGraph();" id="generators">
    </select>
    </fieldset>

    <br/>
    <fieldset>
      <legend>Adjust Layout</legend>

      <div id="slider">
        <label>Update Velocity</label>
        0.001
        <input id="slide" type="range" min="0.000" max="0.06" step="0.001" value="0.006"
               onchange="updateSlider(this.value, 'velocity')"/>
        0.06
      </div>
      <br>

      <label>Update Position:</label>

      <div id="slider">
        0.001
        <input id="slide" type="range" min="0.000" max="0.06" step="0.001" value="0.006"
               onchange="updateSlider(this.value, 'position')"/>
        0.06
      </div>
    </fieldset>
  </form>
</div>
</body>
</html>