mgcanvas/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="X-UA-Compatible" content="IE=9">
   5 <meta charset="UTF-8">
   6 <title>Mind Graph Canvas</title>
   7 <style type="text/css">
   8         h1, h2, h3 {
   9                 margin:0px;
  10         }
  11         body, textarea {
  12                 font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  13                 font-size: 14px;
  14                 line-height: 1.2;
  15         }
  16 </style>
  17 <script type="text/javascript" src="./header.js" charset="UTF-8"></script>
  18 <script type="text/javascript">
  19
  20 var mgmain;
  21
  22 onload = function() {
  23         var c = document.getElementById("mainCanvas");
  24         mgmain = new MGCanvas(c);
  25
  26         /*
  27         mgmain.setGraph([[
  28                 "A","B","C","D","E","F",
  29                 ],[
  30                 ["D", "F"],
  31                 ["D", "E"],
  32                 ["C", "E"],
  33                 ["B", "E"],
  34                 ["B", "C"],
  35                 ["A", "E"],
  36                 ["A", "B"],
  37         ]]);
  38         */
  39         /*
  40         mgmain.setGraph([[
  41                 "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
  42                 ],[
  43                 ["A", "B"],
  44                 ["A", "C"],
  45                 ["A", "D"],
  46                 ["A", "E"],
  47                 ["A", "F"],
  48                 ["A", "G"],
  49                 ["A", "H"],
  50                 ["A", "I"],
  51                 ["A", "J"],
  52                 ["A", "K"],
  53                 ["A", "L"],
  54                 ["A", "M"],
  55                 ["A", "N"],
  56                 ["A", "O"],
  57                 ["A", "P"],
  58         ]]);
  59         */
  60         /*
  61         mgmain.setGraph([[
  62                 "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P",
  63                 ],[
  64                 ["A", "B"],
  65                 ["B", "C"],
  66                 ["C", "D"],
  67                 ["D", "E"],
  68                 ["E", "F"],
  69                 ["F", "G"],
  70                 ["G", "H"],
  71                 ["A", "I"],
  72                 ["A", "J"],
  73                 ["A", "K"],
  74                 ["A", "L"],
  75                 ["A", "M"],
  76                 ["A", "N"],
  77                 ["A", "O"],
  78                 ["A", "P"],
  79         ]]);
  80         */
  81
  82         //Petersen Graph
  83         mgmain.setGraph([[
  84                 "A","B","C","D","E","F","G","H","I","J",
  85                 ],[
  86                 ["A", "B"],
  87                 ["B", "C"],
  88                 ["C", "D"],
  89                 ["D", "E"],
  90                 ["E", "A"],
  91                 //
  92                 ["A", "F"],
  93                 ["B", "G"],
  94                 ["C", "H"],
  95                 ["D", "I"],
  96                 ["E", "J"],
  97                 //
  98                 ["H", "F"],
  99                 ["I", "G"],
 100                 ["J", "H"],
 101                 ["F", "I"],
 102                 ["G", "J"],
 103         ]]);
 104
 105 }
 106 </script>
 107 </head>
 108 <body>
 109 <h1>Mind Graph Canvas</h1>
 110 <canvas id="mainCanvas" width="1024" height="768" style="border:1px solid #000000;"></canvas>
 111 <br />
 112 <button onclick="mgmain.bringToCenter();">Center</button>
 113 </body>
 114 </html>