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 var memdb;
  22
  23 onload = function() {
  24         var that = this;
  25         var DOM_Node0ID = document.getElementById("nidBox0");
  26         var DOM_Node0Ident = document.getElementById("identBox0");
  27         var DOM_Node1ID = document.getElementById("nidBox1");
  28         var DOM_Node1Ident = document.getElementById("identBox1");
  29         var DOM_EdgeID = document.getElementById("eidBox");
  30         var DOM_EdgeTypeID = document.getElementById("etidBox");
  31
  32         memdb = new MemoryDB("./../memdb/memdb.php");
  33         mgmain = new MGCanvas(document.getElementById("mainCanvas"));
  34         document.getElementById("updateButton0").onclick = function(){
  35                 mgmain.setIdentifierForSelectedNode(DOM_Node0Ident.value);
  36         };
  37         document.getElementById("updateButton1").onclick = function(){
  38                 mgmain.setIdentifierForSelectedNode(DOM_Node1Ident.value, true);
  39         };
  40         document.getElementById("connectNodesButton").onclick = function(){
  41                 memdb.updateEdge(DOM_Node0ID.value, DOM_Node1ID.value);
  42         };
  43         mgmain.callback_selectedNodeChanged = function(newNode){
  44                 if(newNode){
  45                         DOM_Node0ID.value = newNode.nodeid;
  46                         DOM_Node0Ident.value = newNode.identifier;
  47                 } else{
  48                         DOM_Node0ID.value = "not selected";
  49                         DOM_Node0Ident.value = "";
  50                 }
  51         };
  52         mgmain.callback_selectedNodeDestinationChanged = function(newNode){
  53                 if(newNode){
  54                         DOM_Node1ID.value = newNode.nodeid;
  55                         DOM_Node1Ident.value = newNode.identifier;
  56                 } else{
  57                         DOM_Node1ID.value = "not selected";
  58                         DOM_Node1Ident.value = "";
  59                 }
  60         };
  61         mgmain.callback_selectedEdgeChanged = function(newEdge){
  62                 if(newEdge){
  63                         DOM_EdgeID.value = newEdge.edgeid;
  64                         DOM_EdgeTypeID.value = newEdge.typeid;
  65                 } else{
  66                         DOM_EdgeID.value = "not selected";
  67                         DOM_EdgeTypeID.value = "";
  68                 }
  69         };
  70         mgmain.setSourceMemoryDB(memdb);
  71 }
  72 </script>
  73 </head>
  74 <body>
  75 <h1>Mind Graph Canvas</h1>
  76 <canvas id="mainCanvas" width="1024" height="768" style="border:1px solid #000000;"></canvas>
  77 <h3>Control</h3>
  78 <button onclick="mgmain.bringToCenter();">Center</button>
  79 <button onclick="mgmain.isPaused = !mgmain.isPaused;">Freeze</button>
  80 <button onclick="mgmain.zoomIn();">+</button>
  81 <button onclick="mgmain.zoomOut();">-</button>
  82 <button onclick="mgmain.moveViewRelative(0, -10);">↑</button>
  83 <button onclick="mgmain.moveViewRelative(0, 10);">↓</button>
  84 <button onclick="mgmain.moveViewRelative(-10, 0);">←</button>
  85 <button onclick="mgmain.moveViewRelative(10, 0);">→</button>
  86 <h3>Node0</h3>
  87 id:<input disabled id="nidBox0" type="text" size="50"></input>
  88 identifier:<input id="identBox0" type="text" size="25"></input>
  89 <button id="updateButton0">updateNode</button>
  90 <h3>Node1</h3>
  91 id:<input disabled id="nidBox1" type="text" size="50"></input>
  92 identifier:<input id="identBox1" type="text" size="25"></input>
  93 <button id="updateButton1">updateNode</button>
  94 <h3>Edge</h3>
  95 id :<input disabled id="eidBox" type="text" size="50"></input>
  96 type :<input disabled id="etidBox" type="text" size="50"></input><button id="connectNodesButton">connectNodes</button>
  97
  98 </body>
  99 </html>