alpcentaur
/
permapp

<!doctype html><html><head>  <meta charset="utf-8"/>  <title>permAppv2</title>
  <style type="text/css">    body, select {      font: 10pt sans;    }    #mynetwork {      position:relative;      width: 800px;      height: 600px;      border: 1px solid lightgray;    }    table.legend_table {      font-size: 11px;      border-width:1px;      border-color:#d3d3d3;      border-style:solid;    }    table.legend_table,td {      border-width:1px;      border-color:#d3d3d3;      border-style:solid;      padding: 2px;    }    div.table_content {      width:80px;      text-align:center;    }    div.table_description {      width:100px;    }
    #operation {      font-size:28px;    }    #node-popUp {      display:none;      position:absolute;      top:350px;      left:170px;      z-index:299;      width:250px;      height:120px;      background-color: lightblue;      border-style:solid;      border-width:3px;      border-color: #5394ed;      padding:10px;      text-align: center;    }        #title-box {            top:350px;      left:170px;      z-index:299;      width:400px;      height:300px;      background-color: lightblue;      border-style:solid;      border-width:3px;      border-color: green;      padding:10px;      text-align: center;    }            p.test {        background-color: lightblue;        height: 400px;        width: 300px;         border: 0px solid green;        word-wrap: break-word;        word-break: keep-all;        white-space:normal;            }
        #edge-popUp {      display:none;      position:absolute;      top:350px;      left:170px;      z-index:299;      width:250px;      height:90px;      background-color: lightblue;      border-style:solid;      border-width:3px;      border-color: lightblue;      padding:10px;      text-align: center;    }  </style>
    <script type="text/javascript" src="public/visjs.min.js"></script>    <script type="text/javascript" src="public/axios.min.js"></script>
  <script type="text/javascript">    var nodes;    var edges;    var network = null;    
    
    function destroy() {      if (network !== null) {        network.destroy();        network = null;      }    }
    function draw() {      destroy();      
      // create a network    var DIR = "public/images/";                nodes = new vis.DataSet();        nodes.on("*", function () {          document.getElementById("nodes").innerHTML = JSON.stringify(            nodes.get(),            null,            4          );        });                nodes.add([            {id: 0, shape: 'circularImage', image: DIR + 'canna.jpg', "label": "Cannabis", "group": 1, title: 'I am a plant' },            {id: 1, shape: 'circularImage', image: DIR + 'rose.jpg', "label": "Rose", "group": 1},            {id: 2, "label": "Tomato", "group": 1},            {id: 3, "label": "Mint", "group": 1},            {id: 4, "label": "Basil", "group": 1},            {id: 5, "label": "Acorn", "group": 1},            {id: 6, "label": "Pine", "group": 1},            {id: 7, "label": "Orange", "group": 1},            {id: 8, "label": "Lemon", "group": 1},            {id: 9, shape: 'circularImage', image: DIR + 'sunflower.jpg', "label": "Sunflower", "group": 1},            {id: 10, "label": "Marigold", "group": 1},            {id: 11, "label": "Alfalfa", "group": 1},            {id: 12, "label": "Red Clover", "group": 1},            {id: 13, "label": "Chervil", "group": 1},            {id: 14, "label": "White Clover", "group": 1},            {id: 15, "label": "Lavender", "group": 1},            {id: 16, "label": "Coriander", "group": 1},            {id: 17, shape: 'circularImage', image: DIR + 'chamomile.jpg', "label": "Chamomile", "group": 1},            {id: 18, "label": "Yarrow", "group": 1},            {id: 19, "label": "Dill", "group": 1},            {id: 20, "label": "Lemon Balm", "group": 1},            {id: 21, "label": "Borage", "group": 1},            {id: 22, "label": "Ant", "group": 2},            {id: 23, "label": "Bee", "group": 2},            {id: 24, "label": "Snail", "group": 2},            {id: 25, "label": "Heat", "group": 3},            {id: 26, "label": "Water", "group": 3},            {id: 27, "label": "Luminance", "group": 3},            {id: 28, "label": "Bird", "group": 2}        ]);                        var Edgebox1 = '<p class="test">'        var Edgebox2 = '</p>'                // create some edges        edges = new vis.DataSet();        edges.on("*", function () {          document.getElementById("edges").innerHTML = JSON.stringify(            edges.get(),            null,            4          );        });        edges.add( [            {"from": 1, "to": 0, arrows:'to', color:'green', title: Edgebox1 + 'the rose is very fragile. For that reason, she gets a lot of deseases some time before Cannabis gets it. That means, the rose can give you time to act.' + Edgebox2},            {"from": 2, "to": 0},            {"from": 3, "to": 0},            {"from": 3, "to": 2},            {"from": 4, "to": 0},            {"from": 5, "to": 0},            {"from": 6, "to": 0},            {"from": 7, "to": 0},            {"from": 8, "to": 0},            {"from": 9, "to": 0},            {"from": 11, "to": 10},            {"from": 11, "to": 3},            {"from": 11, "to": 2},            {"from": 11, "to": 0},            {"from": 12, "to": 11},            {"from": 13, "to": 11},            {"from": 14, "to": 11},            {"from": 15, "to": 11},            {"from": 17, "to": 16},            {"from": 18, "to": 16},            {"from": 18, "to": 17},            {"from": 19, "to": 16},            {"from": 19, "to": 17},            {"from": 19, "to": 18},            {"from": 20, "to": 16},            {"from": 20, "to": 17},            {"from": 20, "to": 18},            {"from": 20, "to": 19},            {"from": 21, "to": 16},            {"from": 21, "to": 17},            {"from": 21, "to": 18},            {"from": 21, "to": 19},            {"from": 21, "to": 20},            {"from": 22, "to": 16},            {"from": 22, "to": 17},            {"from": 22, "to": 18},            {"from": 22, "to": 19},            {"from": 22, "to": 20},            {"from": 22, "to": 21},            {"from": 23, "to": 16},            {"from": 23, "to": 17},            {"from": 23, "to": 18},            {"from": 23, "to": 19},            {"from": 23, "to": 20},            {"from": 23, "to": 21},            {"from": 23, "to": 22},            {"from": 23, "to": 12},            {"from": 23, "to": 11},            {"from": 24, "to": 23},            {"from": 24, "to": 11},            {"from": 25, "to": 24},            {"from": 25, "to": 23},            {"from": 25, "to": 11},            {"from": 26, "to": 24},            {"from": 26, "to": 11},            {"from": 26, "to": 16},            {"from": 26, "to": 25},            {"from": 27, "to": 11},            {"from": 27, "to": 23},            {"from": 27, "to": 25},            {"from": 27, "to": 24},            {"from": 27, "to": 26},            {"from": 28, "to": 11},            {"from": 28, "to": 27}        ]);
        // create a network        var container = document.getElementById('mynetwork');        var data = {            nodes: nodes,            edges: edges        };      var options = {                manipulation: {          addNode: function (data, callback) {            // filling in the popup DOM elements            document.getElementById('node-operation').innerHTML = "Add Node";            editNode(data, clearNodePopUp, callback);          },          editNode: function (data, callback) {            // filling in the popup DOM elements            document.getElementById('node-operation').innerHTML = "Edit Node";            editNode(data, cancelNodeEdit, callback);          },          addEdge: function (data, callback) {                        if (data.from == data.to) {              var r = confirm("Do you want to connect the node to itself?");              if (r != true) {                callback(null);                return;              }            }            document.getElementById('edge-operation').innerHTML = "Add Edge";            editEdgeWithoutDrag(data, callback);          },          editEdge: {            editWithoutDrag: function(data, callback) {              document.getElementById('edge-operation').innerHTML = "Edit Edge";              editEdgeWithoutDrag(data,callback);            }          }        }      };      network = new vis.Network(container, data, options);    }        var Nodebox1 = '<p class="test"><img src="'    var Nodebox2 = '" style="width:300px;height:200px;float:up;">'    var Nodebox3 = '</p>'        function editNode(data, cancelAction, callback) {      document.getElementById('node-descript').value = data.title;      document.getElementById('node-label').value = data.label;      document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);      document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);      document.getElementById('node-popUp').style.display = 'block';    }
    // Callback passed as parameter is ignored    function clearNodePopUp() {      document.getElementById('node-saveButton').onclick = null;      document.getElementById('node-cancelButton').onclick = null;      document.getElementById('node-popUp').style.display = 'none';    }
    function cancelNodeEdit(callback) {      clearNodePopUp();      callback(null);    }        function saveNodeData(data, callback) {      data.label = document.getElementById('node-label').value;      data.title = Nodebox1 + data.image + Nodebox2 + document.getElementById('node-descript').value + Nodebox3;      clearNodePopUp();      callback(data);    }
    function editEdgeWithoutDrag(data, callback) {      // filling in the popup DOM elements      document.getElementById('edge-color').value = data.color;            document.getElementById('edge-descript').value = data.title;            document.getElementById('edge-saveButton').onclick = saveEdgeData.bind(this, data, callback);      document.getElementById('edge-cancelButton').onclick = cancelEdgeEdit.bind(this,callback);      document.getElementById('edge-popUp').style.display = 'block';    }
    function clearEdgePopUp() {      document.getElementById('edge-saveButton').onclick = null;      document.getElementById('edge-cancelButton').onclick = null;      document.getElementById('edge-popUp').style.display = 'none';    }
    function cancelEdgeEdit(callback) {      clearEdgePopUp();      callback(null);    }        var Edgebox1 = '<p class="test">'    var Edgebox2 = '</p>'        function saveEdgeData(data, callback) {      if (typeof data.to === 'object')        data.to = data.to.id      if (typeof data.from === 'object')        data.from = data.from.id      data.arrows = 'to';      data.color = document.getElementById('edge-color').value;      data.title = Edgebox1 + document.getElementById('edge-descript').value + Edgebox2;      clearEdgePopUp();      callback(data);    }    function exportnetwork() {                try {          nodes.add({            id: document.getElementById("node-id").value,            label: document.getElementById("node-label").value,            from: document.getElementById("node-from").value          });        } catch (err) {          alert(err);        }                        }    function init() {            draw();    }        function exportnetwork() {            // import fs module in which writeFile function is defined. //       myJSON = JSON.stringify(egdes);//                       }    function importnetwork() {                          }        function focusOnNode() {                        var labeltofocus = ""                        labeltofocus = document.getElementById('labelinput').value;                        var nodeid                        var i;            for (i = 0; i < nodes.length; i++) {                if (nodes[i].label == labeltofocus) {                    nodeid = nodes[i].id;                 };                }                                    network.fit({                nodes:[nodeid],                animation: { // -------------------> can be a boolean too!                    duration: 1000,                    easingFunction: "easeInOutQuad"                    }                }            );            }      </script>  </head>
<body onload="init();"><h2 style="height:20px; font-size:90px">    <span style='color: green'>perm</span><span style='color: red'>A</span><span style='color: green'>pp</span></h2><p style="width: 700px; font-size:16px; text-align: justify;">  .explore relations between entities of the ecosystem</p>


<div id="node-popUp">  <span id="node-operation">node</span> <br>  <table style="margin:auto;">        <tr>      <td>label</td><td><input id="node-label" value="new value" /></td>    </tr>    <tr>      <td>description</td><td><input id="node-descript" value="new value" /></td>    </tr>  </table>  <input type="button" value="save" id="node-saveButton" />  <input type="button" value="cancel" id="node-cancelButton" /></div>


<div id="edge-popUp">  <span id="edge-operation">edge</span> <br>  <table style="margin:auto;">    <tr>      <td>red/green</td><td><input id="edge-color" value="new value" /></td>    </tr></table>    <tr>      <td>description</td><td><input id="edge-descript" value="new value" /></td>    </tr></table>  <input type="button" value="save" id="edge-saveButton"  />  <input type="button" value="cancel" id="edge-cancelButton" /></div>
<div class="bottom">    <span id="statusUpdate"></span>    <br />                <input type="button" onclick="exportnetwork();" value="export network to txt file:" style="width:800px;height:50px;color:black;background-color:lightblue;" id="btnFocus"><br/>    <br />                <input type="button" onclick="focusOnNode();" value="Focus on node:" style="width:800px;height:50px;color:black;background-color:lightblue;" id="btnFocus"><br/>    <tr>      <td> </td><td><input type="text" value="" id="labelinput" style="width:785px;"> </td>    </tr>    </div>

<br /><div id="mynetwork"></div>

<h1>View</h1>    <table class="view">          <tr>        <td>          <h2>Nodes</h2>          <pre id="nodes"></pre>        </td>
        <td>          <h2>Edges</h2>          <pre id="edges"></pre>        </td></body></html>