vis.js is a dynamic, browser-based visualization library
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.

86 lines
3.7 KiB

9 years ago
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>ARUM - MIDAS</title>
  5. <link href="./css/global.css" rel="stylesheet" type="text/css" />
  6. <link href="./css/vis.css" rel="stylesheet" type="text/css" />
  7. <script language="javascript">
  8. var EVENT_DELAY = 1000;
  9. var EVENTS_AGENT_ADDRESS = 'ws://localhost:8082/ws/events';
  10. var AMOUNT_OF_INITIAL_EVENTS = 1;
  11. var TIMELINE_START = '2014-09-18 10:00:00';
  12. var TIMELINE_END = '2014-09-19 18:00:00';
  13. var INCREASE_SPEED = true;
  14. var ONLINE_ONLY = true;
  15. </script>
  16. <script type="text/javascript" src="./js/vis.js"></script>
  17. <script type="text/javascript" src="./js/evejs.js"></script>
  18. <script type="text/javascript" src="./arumAgents/job.js"></script>
  19. <script type="text/javascript" src="./arumAgents/durationStats.js"></script>
  20. <script type="text/javascript" src="./arumAgents/durationData.js"></script>
  21. <script type="text/javascript" src="./arumAgents/jobManager.js"></script>
  22. <script type="text/javascript" src="./arumAgents/jobAgent.js"></script>
  23. <script type="text/javascript" src="./js/vis_eve_init.js"></script>
  24. <script type="text/javascript" src="./arumAgents/genericAgent.js"></script>
  25. <script type="text/javascript" src="./arumAgents/agentGenerator.js"></script>
  26. <script type="text/javascript" src="./arumAgents/jobAgentGenerator.js"></script>
  27. <script type="text/javascript" src="./arumAgents/eventGenerator.js"></script>
  28. <script type="text/javascript" src="./js/init.js"></script>
  29. </head>
  30. <body onload="draw()">
  31. <img src="./images/arum_small.png" style="position:relative; top:-6px;"><img src="./images/midas_small.png" style="float:right;"><br>
  32. <div class="typeButton selected" onclick="showTimelineBtn()" id="showTimeline">Show by Timeline</div>
  33. <div class="typeButton" onclick="showGraphBtn()" id="showGraph">Show by Job</div>
  34. <div id="timelineWrapper">
  35. <input type="button" value="Next Event" onclick="getNewEvent()">
  36. eventNo:<div id="eventCounter" style="display:inline;">-1</div>
  37. <input type="button" value="Next 10 Events" onclick="getTenNewEvents()">
  38. <input type="button" value="Get All Events" onclick="getAllEvents()">
  39. <input type="button" value="Get All Events Quickly" onclick="getAllEventsQuickly()"> <br>
  40. <div id="timeline"></div>
  41. </div>
  42. <div id="graphWrapper">
  43. <table class="wrapper">
  44. <tr>
  45. <td>
  46. <div class="toggleButton" onclick="togglePrediction()" id="togglePrediction">Prediction</div>
  47. </td>
  48. <td width="6px">&nbsp;</td>
  49. <td>
  50. <div class="typeButton selected" onclick="turnOn('duration')" id="duration">Ideal</div>
  51. <div class="typeButton" onclick="turnOn('durationWithPause')" id="durationWithPause">Ideal + Pause</div>
  52. <div class="typeButton" onclick="turnOn('durationWithStartup')" id="durationWithStartup">Ideal + Prerequisites</div>
  53. <div class="typeButton" onclick="turnOn('durationWithBoth')" id="durationWithBoth">Total Time</div>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td id="selectTD">
  58. <select name="jobs" id="multiselect" multiple onclick="updateGraph()"></select>
  59. </td>
  60. <td colspan="2">
  61. <div class="graph2dContent">
  62. <div id="graph2d"></div>
  63. </div>
  64. </td>
  65. </tr>
  66. <tr>
  67. <td>
  68. <div class="toggleButton square" onclick="toggleDifference()" id="difference">Switch View</div>
  69. </td>
  70. <td colspan="2">
  71. <div id="Legend" class="externalLegend"></div>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. <p id="selection"></p>
  77. <p id="stabilization"></p>
  78. </body>
  79. </html>