You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

518 lines
15 KiB

4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>permAppv2</title>
  6. <style type="text/css">
  7. body, select {
  8. font: 10pt sans;
  9. }
  10. #mynetwork {
  11. position:relative;
  12. width: 800px;
  13. height: 600px;
  14. border: 1px solid lightgray;
  15. }
  16. table.legend_table {
  17. font-size: 11px;
  18. border-width:1px;
  19. border-color:#d3d3d3;
  20. border-style:solid;
  21. }
  22. table.legend_table,td {
  23. border-width:1px;
  24. border-color:#d3d3d3;
  25. border-style:solid;
  26. padding: 2px;
  27. }
  28. div.table_content {
  29. width:80px;
  30. text-align:center;
  31. }
  32. div.table_description {
  33. width:100px;
  34. }
  35. #operation {
  36. font-size:28px;
  37. }
  38. #node-popUp {
  39. display:none;
  40. position:absolute;
  41. top:350px;
  42. left:170px;
  43. z-index:299;
  44. width:250px;
  45. height:120px;
  46. background-color: lightblue;
  47. border-style:solid;
  48. border-width:3px;
  49. border-color: #5394ed;
  50. padding:10px;
  51. text-align: center;
  52. }
  53. #title-box {
  54. top:350px;
  55. left:170px;
  56. z-index:299;
  57. width:400px;
  58. height:300px;
  59. background-color: lightblue;
  60. border-style:solid;
  61. border-width:3px;
  62. border-color: green;
  63. padding:10px;
  64. text-align: center;
  65. }
  66. p.test {
  67. background-color: lightblue;
  68. height: 400px;
  69. width: 300px;
  70. border: 0px solid green;
  71. word-wrap: break-word;
  72. word-break: keep-all;
  73. white-space:normal;
  74. }
  75. #edge-popUp {
  76. display:none;
  77. position:absolute;
  78. top:350px;
  79. left:170px;
  80. z-index:299;
  81. width:250px;
  82. height:90px;
  83. background-color: lightblue;
  84. border-style:solid;
  85. border-width:3px;
  86. border-color: lightblue;
  87. padding:10px;
  88. text-align: center;
  89. }
  90. </style>
  91. <script type="text/javascript" src="/home/alpcentaur/ProjektA/PermApp/visjs_lesMiserables_files/visjs.min.js"></script>
  92. <script type="text/javascript">
  93. var nodes, edges, network;
  94. function destroy() {
  95. if (network !== null) {
  96. network.destroy();
  97. network = null;
  98. }
  99. }
  100. function draw() {
  101. destroy();
  102. nodes = new vis.DataSet();
  103. edges = new vis.DataSet();
  104. edges.on("*", function () {
  105. document.getElementById("edges").innerHTML = JSON.stringify(
  106. edges.get(),
  107. null,
  108. 4
  109. );
  110. });
  111. nodes.on("*", function () {
  112. document.getElementById("nodes").innerHTML = JSON.stringify(
  113. nodes.get(),
  114. null,
  115. 4
  116. );
  117. // create a network
  118. var DIR = "/home/alpcentaur/ProjektA/PermApp/images/";
  119. nodes.add([
  120. {id: 0, shape: 'circularImage', image: DIR + 'canna.jpg', "label": "Cannabis", "group": 1, title: 'I am a plant' },
  121. {id: 1, shape: 'circularImage', image: DIR + 'rose.jpg', "label": "Rose", "group": 1},
  122. {id: 2, "label": "Tomato", "group": 1},
  123. {id: 3, "label": "Mint", "group": 1},
  124. {id: 4, "label": "Basil", "group": 1},
  125. {id: 5, "label": "Acorn", "group": 1},
  126. {id: 6, "label": "Pine", "group": 1},
  127. {id: 7, "label": "Orange", "group": 1},
  128. {id: 8, "label": "Lemon", "group": 1},
  129. {id: 9, shape: 'circularImage', image: DIR + 'sunflower.jpg', "label": "Sunflower", "group": 1},
  130. {id: 10, "label": "Marigold", "group": 1},
  131. {id: 11, "label": "Alfalfa", "group": 1},
  132. {id: 12, "label": "Red Clover", "group": 1},
  133. {id: 13, "label": "Chervil", "group": 1},
  134. {id: 14, "label": "White Clover", "group": 1},
  135. {id: 15, "label": "Lavender", "group": 1},
  136. {id: 16, "label": "Coriander", "group": 1},
  137. {id: 17, shape: 'circularImage', image: DIR + 'chamomile.jpg', "label": "Chamomile", "group": 1},
  138. {id: 18, "label": "Yarrow", "group": 1},
  139. {id: 19, "label": "Dill", "group": 1},
  140. {id: 20, "label": "Lemon Balm", "group": 1},
  141. {id: 21, "label": "Borage", "group": 1},
  142. {id: 22, "label": "Ant", "group": 2},
  143. {id: 23, "label": "Bee", "group": 2},
  144. {id: 24, "label": "Snail", "group": 2},
  145. {id: 25, "label": "Heat", "group": 3},
  146. {id: 26, "label": "Water", "group": 3},
  147. {id: 27, "label": "Luminance", "group": 3},
  148. {id: 28, "label": "Bird", "group": 2}
  149. ]);
  150. var Edgebox1 = '<p class="test">'
  151. var Edgebox2 = '</p>'
  152. // create some edges
  153. edges.add([
  154. {"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},
  155. {"from": 2, "to": 0},
  156. {"from": 3, "to": 0},
  157. {"from": 3, "to": 2},
  158. {"from": 4, "to": 0},
  159. {"from": 5, "to": 0},
  160. {"from": 6, "to": 0},
  161. {"from": 7, "to": 0},
  162. {"from": 8, "to": 0},
  163. {"from": 9, "to": 0},
  164. {"from": 11, "to": 10},
  165. {"from": 11, "to": 3},
  166. {"from": 11, "to": 2},
  167. {"from": 11, "to": 0},
  168. {"from": 12, "to": 11},
  169. {"from": 13, "to": 11},
  170. {"from": 14, "to": 11},
  171. {"from": 15, "to": 11},
  172. {"from": 17, "to": 16},
  173. {"from": 18, "to": 16},
  174. {"from": 18, "to": 17},
  175. {"from": 19, "to": 16},
  176. {"from": 19, "to": 17},
  177. {"from": 19, "to": 18},
  178. {"from": 20, "to": 16},
  179. {"from": 20, "to": 17},
  180. {"from": 20, "to": 18},
  181. {"from": 20, "to": 19},
  182. {"from": 21, "to": 16},
  183. {"from": 21, "to": 17},
  184. {"from": 21, "to": 18},
  185. {"from": 21, "to": 19},
  186. {"from": 21, "to": 20},
  187. {"from": 22, "to": 16},
  188. {"from": 22, "to": 17},
  189. {"from": 22, "to": 18},
  190. {"from": 22, "to": 19},
  191. {"from": 22, "to": 20},
  192. {"from": 22, "to": 21},
  193. {"from": 23, "to": 16},
  194. {"from": 23, "to": 17},
  195. {"from": 23, "to": 18},
  196. {"from": 23, "to": 19},
  197. {"from": 23, "to": 20},
  198. {"from": 23, "to": 21},
  199. {"from": 23, "to": 22},
  200. {"from": 23, "to": 12},
  201. {"from": 23, "to": 11},
  202. {"from": 24, "to": 23},
  203. {"from": 24, "to": 11},
  204. {"from": 25, "to": 24},
  205. {"from": 25, "to": 23},
  206. {"from": 25, "to": 11},
  207. {"from": 26, "to": 24},
  208. {"from": 26, "to": 11},
  209. {"from": 26, "to": 16},
  210. {"from": 26, "to": 25},
  211. {"from": 27, "to": 11},
  212. {"from": 27, "to": 23},
  213. {"from": 27, "to": 25},
  214. {"from": 27, "to": 24},
  215. {"from": 27, "to": 26},
  216. {"from": 28, "to": 11},
  217. {"from": 28, "to": 27}
  218. ]);
  219. // create a network
  220. var container = document.getElementById('mynetwork');
  221. var data = {
  222. nodes: nodes,
  223. edges: edges
  224. };
  225. var options = {
  226. manipulation: {
  227. addNode: function (data, callback) {
  228. // filling in the popup DOM elements
  229. document.getElementById('node-operation').innerHTML = "Add Node";
  230. editNode(data, clearNodePopUp, callback);
  231. },
  232. editNode: function (data, callback) {
  233. // filling in the popup DOM elements
  234. document.getElementById('node-operation').innerHTML = "Edit Node";
  235. editNode(data, cancelNodeEdit, callback);
  236. },
  237. addEdge: function (data, callback) {
  238. if (data.from == data.to) {
  239. var r = confirm("Do you want to connect the node to itself?");
  240. if (r != true) {
  241. callback(null);
  242. return;
  243. }
  244. }
  245. document.getElementById('edge-operation').innerHTML = "Add Edge";
  246. editEdgeWithoutDrag(data, callback);
  247. },
  248. editEdge: {
  249. editWithoutDrag: function(data, callback) {
  250. document.getElementById('edge-operation').innerHTML = "Edit Edge";
  251. editEdgeWithoutDrag(data,callback);
  252. }
  253. }
  254. }
  255. };
  256. network = new vis.Network(container, data, options);
  257. }
  258. var Nodebox1 = '<p class="test"><img src="'
  259. var Nodebox2 = '" style="width:300px;height:200px;float:up;">'
  260. var Nodebox3 = '</p>'
  261. function editNode(data, cancelAction, callback) {
  262. document.getElementById('node-descript').value = data.title;
  263. document.getElementById('node-label').value = data.label;
  264. document.getElementById('node-saveButton').onclick = saveNodeData.bind(this, data, callback);
  265. document.getElementById('node-cancelButton').onclick = cancelAction.bind(this, callback);
  266. document.getElementById('node-popUp').style.display = 'block';
  267. }
  268. // Callback passed as parameter is ignored
  269. function clearNodePopUp() {
  270. document.getElementById('node-saveButton').onclick = null;
  271. document.getElementById('node-cancelButton').onclick = null;
  272. document.getElementById('node-popUp').style.display = 'none';
  273. }
  274. function cancelNodeEdit(callback) {
  275. clearNodePopUp();
  276. callback(null);
  277. }
  278. function saveNodeData(data, callback) {
  279. data.label = document.getElementById('node-label').value;
  280. data.title = Nodebox1 + data.image + Nodebox2 + document.getElementById('node-descript').value + Nodebox3;
  281. clearNodePopUp();
  282. callback(data);
  283. }
  284. function editEdgeWithoutDrag(data, callback) {
  285. // filling in the popup DOM elements
  286. document.getElementById('edge-color').value = data.color;
  287. document.getElementById('edge-descript').value = data.title;
  288. document.getElementById('edge-saveButton').onclick = saveEdgeData.bind(this, data, callback);
  289. document.getElementById('edge-cancelButton').onclick = cancelEdgeEdit.bind(this,callback);
  290. document.getElementById('edge-popUp').style.display = 'block';
  291. }
  292. function clearEdgePopUp() {
  293. document.getElementById('edge-saveButton').onclick = null;
  294. document.getElementById('edge-cancelButton').onclick = null;
  295. document.getElementById('edge-popUp').style.display = 'none';
  296. }
  297. function cancelEdgeEdit(callback) {
  298. clearEdgePopUp();
  299. callback(null);
  300. }
  301. var Edgebox1 = '<p class="test">'
  302. var Edgebox2 = '</p>'
  303. function saveEdgeData(data, callback) {
  304. if (typeof data.to === 'object')
  305. data.to = data.to.id
  306. if (typeof data.from === 'object')
  307. data.from = data.from.id
  308. data.arrows = 'to';
  309. data.color = document.getElementById('edge-color').value;
  310. data.title = Edgebox1 + document.getElementById('edge-descript').value + Edgebox2;
  311. clearEdgePopUp();
  312. callback(data);
  313. }
  314. function init() {
  315. draw();
  316. }
  317. function exportnetwork() {
  318. // import fs module in which writeFile function is defined.
  319. const fsLibrary = require('fs')
  320. // Data which will need to add in a file.
  321. // Write data in 'newfile.txt' .
  322. fsLibrary.writeFile('network_edges.txt', edges, (error) => {
  323. // In case of a error throw err exception.
  324. if (error) throw err;
  325. })
  326. fsLibrary.writeFile('network_nodes.txt', nodes, (error) => {
  327. // In case of a error throw err exception.
  328. if (error) throw err;
  329. })
  330. }
  331. function importnetwork() {
  332. // import fs module in which readFile function is specified.
  333. const fsLibrary = require('fs')
  334. fsLibrary.readFile('network_nodes.txt', (error, nodes) => {
  335. if (error) throw err;
  336. console.log(nodes.toString());
  337. })
  338. fsLibrary.readFile('network_edges.txt', (error, edges) => {
  339. if (error) throw err;
  340. console.log(nodes.toString());
  341. })
  342. }
  343. function focusOnNode() {
  344. var labeltofocus = ""
  345. labeltofocus = document.getElementById('labelinput').value;
  346. var nodeid
  347. var i;
  348. for (i = 0; i < nodes.length; i++) {
  349. if (nodes[i].label == labeltofocus) {
  350. nodeid = nodes[i].id;
  351. };
  352. }
  353. network.fit({
  354. nodes:[nodeid],
  355. animation: { // -------------------> can be a boolean too!
  356. duration: 1000,
  357. easingFunction: "easeInOutQuad"
  358. }
  359. }
  360. );
  361. }
  362. </script>
  363. </head>
  364. <body onload="init();">
  365. <h2 style="height:20px; font-size:90px">
  366. <span style='color: green'>perm</span><span style='color: red'>A</span><span style='color: green'>pp</span>
  367. </h2>
  368. <p style="width: 700px; font-size:16px; text-align: justify;">
  369. .explore relations between entities of the ecosystem
  370. </p>
  371. <div id="node-popUp">
  372. <span id="node-operation">node</span> <br>
  373. <table style="margin:auto;">
  374. <tr>
  375. <td>label</td><td><input id="node-label" value="new value" /></td>
  376. </tr>
  377. <tr>
  378. <td>description</td><td><input id="node-descript" value="new value" /></td>
  379. </tr>
  380. </table>
  381. <input type="button" value="save" id="node-saveButton" />
  382. <input type="button" value="cancel" id="node-cancelButton" />
  383. </div>
  384. <div id="edge-popUp">
  385. <span id="edge-operation">edge</span> <br>
  386. <table style="margin:auto;">
  387. <tr>
  388. <td>red/green</td><td><input id="edge-color" value="new value" /></td>
  389. </tr></table>
  390. <tr>
  391. <td>description</td><td><input id="edge-descript" value="new value" /></td>
  392. </tr></table>
  393. <input type="button" value="save" id="edge-saveButton" />
  394. <input type="button" value="cancel" id="edge-cancelButton" />
  395. </div>
  396. <div class="bottom">
  397. <span id="statusUpdate"></span>
  398. <br />
  399. <input type="button" onclick="exportnetwork();" value="export network to txt file:" style="width:800px;height:50px;color:black;background-color:lightblue;" id="btnFocus"><br/>
  400. <br />
  401. <input type="button" onclick="focusOnNode();" value="Focus on node:" style="width:800px;height:50px;color:black;background-color:lightblue;" id="btnFocus"><br/>
  402. <tr>
  403. <td> </td><td><input type="text" value="" id="labelinput" style="width:785px;"> </td>
  404. </tr>
  405. </div>
  406. <br />
  407. <div id="mynetwork"></div>
  408. <h1>View</h1>
  409. <table class="view">
  410. <colgroup>
  411. <col width="25%" />
  412. <col width="25%" />
  413. <col width="50%" />
  414. </colgroup>
  415. <tr>
  416. <td>
  417. <h2>Nodes</h2>
  418. <pre id="nodes"></pre>
  419. </td>
  420. <td>
  421. <h2>Edges</h2>
  422. <pre id="edges"></pre>
  423. </td>
  424. </body>
  425. </html>