<!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="/home/alpcentaur/ProjektA/PermApp/visjs_lesMiserables_files/visjs.min.js"></script> <script type="text/javascript"> var nodes = null; var edges = null; var network = null; function destroy() { if (network !== null) { network.destroy(); network = null; } } function draw() { destroy(); nodes = []; edges = []; // create a network var DIR = "/home/alpcentaur/ProjektA/PermApp/images/"; nodes = [ {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 var edges = [ {"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 init() { draw(); } 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="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> </body> </html>