|
|
|
@ -0,0 +1,429 @@ |
|
|
|
<!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> |
alpcentaur
4 years ago
