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.

218 lines
6.2 KiB

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script src="./js/hammer.js"></script>
  7. <script src="./js/es6-shim.min.js"></script>
  8. <script src="./js/eve.js"></script>
  9. <script src="./js/inputAgent.js"></script>
  10. <script src="./js/jquery.min.js"></script>
  11. <script src="./js/bootstrap.min.js"></script>
  12. <script language="JavaScript">
  13. var inputProxy;
  14. </script>
  15. <script src="./js/init.js"></script>
  16. <script language="JavaScript">
  17. // to run this, also have webHttp.js running in node.
  18. eve.system.init({
  19. transports: [
  20. {
  21. type: 'ws',
  22. url: 'ws://agents/:id'
  23. },
  24. {
  25. type: 'http'
  26. }
  27. ]
  28. });
  29. var proxyAddress = 'ws://afternoon-beyond-2302.herokuapp.com/agents/proxy';
  30. var proxyAddressHTTP = 'https://afternoon-beyond-2302.herokuapp.com/agents/proxy';
  31. // proxyAddress = 'ws://127.0.0.1:5000/agents/proxy';
  32. // proxyAddressHTTP = 'http://127.0.0.1:5000/agents/proxy';
  33. inputProxy = new inputAgent('inputAgent', proxyAddress);
  34. inputProxy.wakeProxy(proxyAddressHTTP);
  35. inputProxy.connectToProxy();
  36. inputProxy.getEventTypes().then(function (reply) {
  37. initButtons(reply);
  38. }).catch(function (err) {
  39. console.error(err);
  40. });
  41. inputProxy.getTimelineEvents().then(function (reply) {
  42. console.log(reply);
  43. }).catch(function (err) {
  44. console.error(err);
  45. });
  46. </script>
  47. <link rel="stylesheet" href="./css/bootstrap.min.css">
  48. <style>
  49. div.newEvent {
  50. position: relative;
  51. margin: 10px;
  52. padding: 10px;
  53. width: 300px;
  54. border: 1px solid #dddddd;
  55. border-radius: 5px;
  56. height: 200px;
  57. background-color: #ffffff;
  58. }
  59. div.timelineEvent {
  60. position: relative;
  61. margin: 10px;
  62. padding: 10px;
  63. width: 300px;
  64. border: 1px solid #dddddd;
  65. border-radius: 5px;
  66. height: 140px;
  67. background-color: #ffffff;
  68. }
  69. div.resetEvents {
  70. margin: -210px 10px 10px 320px;
  71. padding: 10px;
  72. width: 160px;
  73. border: 1px solid #dddddd;
  74. border-radius: 5px;
  75. height: 200px;
  76. }
  77. p.alabel {
  78. display: inline-block;
  79. width: 90px;
  80. }
  81. div.content {
  82. margin: 10px;
  83. }
  84. button {
  85. margin: 5px;
  86. }
  87. #buttonBunch {
  88. }
  89. h3 {
  90. margin-left: 10px;
  91. }
  92. div.overlay {
  93. position: absolute;
  94. top: 0px;
  95. left: 0px;
  96. display: none;
  97. width: 100%;
  98. height: 100%;
  99. background-color: rgba(0, 0, 0, 0.5);
  100. z-index: 12;
  101. }
  102. html, body {
  103. width: 100%;
  104. height: 100%;
  105. }
  106. h1 {
  107. color: #ffffff;
  108. }
  109. div.colors {
  110. display: inline-block;
  111. width: 30px;
  112. height: 20px;
  113. border: 0px solid #dddddd;
  114. border-radius: 3px;
  115. }
  116. div.colors.red {background-color: #ff0000;}
  117. div.colors.white {border-width:1px; background-color: #ffffff;}
  118. div.colors.magenta {background-color: #ff21cb;}
  119. div.colors.orange {background-color: #ffa42a;}
  120. div.colors.green {background-color: #00ce34;}
  121. button.red {background-color: #ff0000;}
  122. button.white {color:#aaaaaa;border-width:1px; background-color: #ffffff;}
  123. button.magenta {background-color: #ff21cb;}
  124. button.orange {background-color: #ffa42a;}
  125. button.green {background-color: #00ce34;}
  126. div.colors.selected {
  127. box-shadow: 0px 0px 5px #0bd1ff;
  128. }
  129. </style>
  130. </head>
  131. <body>
  132. <div class="overlay" id="overlayNC">
  133. <h1>Connection has been lost. Please refresh the page.</h1>
  134. </div>
  135. <div class="overlay" id="overlay">
  136. <div class="timelineEvent" id="newTimelineEvent">
  137. <h4>When does the event start?</h4>
  138. Start event: <select id="delaySelect">
  139. <option value="0">Now</option>
  140. <option value="5">5 minutes</option>
  141. <option value="15">15 minutes</option>
  142. <option value="30">30 minutes</option>
  143. <option value="45">45 minutes</option>
  144. <option value="60">1 hour</option>
  145. <option value="120">2 hours</option>
  146. <option value="180">3 hours</option>
  147. </select>
  148. <br/>
  149. <br/>
  150. <button type="button" class="btn btn-danger pull-left" onclick="hideOverlay()">
  151. cancel
  152. </button>
  153. <button type="button" class="btn btn-primary pull-right" onclick="newTimelineEvent()">
  154. create Event
  155. </button>
  156. </div>
  157. </div>
  158. <div class="newEvent">
  159. <h4>create new event type:</h4>
  160. <p class="alabel">Name:</p><input id="newEvent"><br/>
  161. <p class="alabel">Color:</p>
  162. <div class="colors red" onclick="selectColor('red','colorRed');" id="colorRed"></div>
  163. <div class="colors white selected" onclick="selectColor('white','colorWhite');" id="colorWhite"></div>
  164. <div class="colors green" onclick="selectColor('green','colorGreen');" id="colorGreen"></div>
  165. <div class="colors orange" onclick="selectColor('orange','colorOrange');" id="colorOrange"></div>
  166. <div class="colors magenta" onclick="selectColor('magenta','colorMagenta');" id="colorMagenta"></div>
  167. <br/>
  168. <!--<p class="alabel">range:</p><input type="checkbox" id="range"><br />-->
  169. <button type="button" class="btn btn-primary pull-right" onclick="newEvent()">
  170. create
  171. </button>
  172. </div>
  173. <div class="resetEvents">
  174. <button type="button" class="btn btn-danger" onclick="resetEvents()">
  175. Reset all events
  176. </button>
  177. <br/>
  178. <br/>
  179. <button type="button" class="btn btn-danger" onclick="resetTimelineData()">
  180. Remove data
  181. </button>
  182. </div>
  183. <h3>cick one of the buttons to create a new event on the timeline</h3>
  184. <div class='content' id="buttonBunch">
  185. </div>
  186. </body>
  187. </html>