index.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Vue.js markdown editor example</title>
  6. <link rel="stylesheet" href="css/style.css">
  7. <script src="js/util.js"></script>
  8. <script src="js/moment.js"></script>
  9. <script src="js/vue.js"></script>
  10. <style>
  11. table {
  12. display: inline-table;
  13. width:50%;
  14. }
  15. td {
  16. max-width: 100px;
  17. overflow: hidden;
  18. text-overflow: ellipsis;
  19. white-space: nowrap;
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <div id="app">
  25. <textarea v-model="input" cols="80" rows="20"></textarea>
  26. <button v-on:click="sendCommand">sendCommand</button>
  27. <button v-on:click="sendFreeDrive">sendFreeDrive</button>
  28. <button v-on:click="saveWP">saveWP</button>
  29. <table border="1">
  30. <tr v-for="x in waypoints">
  31. <td>{{x}}</td>
  32. <td>{{x}}</td>
  33. <td>{{x}}</td>
  34. </tr>
  35. </table>
  36. Running: {{ $data.running }}
  37. <table border="1">
  38. <tr v-for="x in cmdq">
  39. <td>{{x.id}}</td>
  40. <td>{{x.cmd}}</td>
  41. <td>{{x.cpeeCallback}}</td>
  42. <td>
  43. </td>
  44. </tr>
  45. </table>
  46. <table border="1">
  47. <tr v-for="x in cData">
  48. <td>{{x.type}}</td>
  49. <td>{{x.ts}}</td>
  50. <td>
  51. <pre>{{JSON.stringify(x.entry, null, 2)}}</pre>
  52. </td>
  53. </tr>
  54. </table>
  55. <ul id="loglist">
  56. <li v-for="(item, index) in log.slice().reverse()">
  57. {{ ts2txt(item.ts) }} - {{ item.entry.message }} -
  58. <pre>{{ JSON.stringify(item.entry) }}</pre>
  59. </li>
  60. </ul>
  61. </div>
  62. <script type="application/javascript">
  63. new Vue({
  64. el: '#app',
  65. data: {
  66. input: '// rde.writeCmd("set_digital_out(2,True)");\n' +
  67. '// rde.writeCmd("movej([-1.95,-1.58,-1.16,-1.15,-1.55,1.25], a=1.0, v=0.1)");\n' +
  68. '//rde.writeCmd("freedrive_mode()");\n' +
  69. 'def asdf():\n' +
  70. ' set_digital_out(3, True) \n' +
  71. ' set_digital_out(4, True) \n' +
  72. 'end',
  73. log: [],
  74. lastID: -1,
  75. doBits: [],
  76. cData: {},
  77. cmdq: [],
  78. curPos: {},
  79. waypoints: []
  80. },
  81. created: function () {
  82. setInterval(this.update, 210);
  83. setInterval(this.updateQ, 220);
  84. setInterval(this.updateCurrent, 230);
  85. },
  86. watch: {
  87. doBits: (newValue, oldValue) => {
  88. let diff1 = newValue.filter(x => !oldValue.includes(x));
  89. let diff2 = oldValue.filter(x => !newValue.includes(x));
  90. for (const x of diff1) {
  91. fetch('/digital/' + x, {method: "POST", body: 'True'})
  92. .then(function (response) {
  93. return response;
  94. });
  95. }
  96. for (const x of diff2) {
  97. fetch('/digital/' + x, {method: "POST", body: 'False'})
  98. .then(function (response) {
  99. return response;
  100. });
  101. }
  102. }
  103. },
  104. methods: {
  105. sendCommand: function (event) {
  106. var params = new URLSearchParams();
  107. params.append('script', this.input);
  108. fetch('/cmd', {method: "POST", body: params})
  109. .then(function (response) {
  110. return response;
  111. });
  112. },
  113. sendFreeDrive: function (event) {
  114. var params = new URLSearchParams();
  115. fetch('/freedrive', {method: "POST"})
  116. .then(function (response) {
  117. return response;
  118. });
  119. },
  120. saveWP: function (event) {
  121. this.$data.waypoints.push_back(event)
  122. },
  123. ts2txt: function (ts) {
  124. return moment(ts).format('YYYY-MM-DD hh:mm ss.SSS ')
  125. },
  126. handlePackage: function (package) {
  127. Vue.set(this.$data.cData, package.type, package)
  128. switch (package.type) {
  129. case 'Message':
  130. break;
  131. case 'MasterBoardData':
  132. let bits = package.entry.digitalOutputBits;
  133. for (let i = 0; i < 8; i++) {
  134. if (bits & (1 << i)) {
  135. this.$data.doBits.push('' + (i + 1));
  136. }
  137. }
  138. break;
  139. case 'ModeData':
  140. break;
  141. case 'ToolData':
  142. break;
  143. case 'ToolCommInfo':
  144. break;
  145. case 'JointDataList':
  146. break;
  147. case 'CartesianInfo':
  148. this.$data.curPos = package.entry;
  149. break;
  150. case 'ForceModeData':
  151. break;
  152. case 'AdditionalInfo':
  153. break;
  154. case 'KinematicsInfo':
  155. break;
  156. case 'ConfigurationData':
  157. break;
  158. case 'ProgramStateMessage':
  159. break;
  160. case 'ModbusInfoMessage':
  161. break;
  162. case 'RobotMessageError':
  163. break;
  164. default:
  165. console.log('unknown package:' + package.type);
  166. }
  167. },
  168. updateCurrent: function (event) {
  169. fetch('/running', {method: "GET"})
  170. .then(handleErrors)
  171. .then((response) => {
  172. return response.json();
  173. })
  174. .then((myJson) => {
  175. this.$data.running = myJson;
  176. })
  177. .catch(error => {
  178. console.log(error)
  179. })},
  180. updateQ: function (event) {
  181. fetch('/cmdq', {method: "GET"})
  182. .then(handleErrors)
  183. .then((response) => {
  184. return response.json();
  185. })
  186. .then((myJson) => {
  187. this.$data.cmdq = myJson;
  188. })
  189. .catch(error => {
  190. console.log(error)
  191. })},
  192. update: function (event) {
  193. fetch('/log/' + this.lastID, {method: "GET"})
  194. .then(handleErrors)
  195. .then((response) => {
  196. return response.json();
  197. })
  198. .then((myJson) => {
  199. for (const entry of myJson.entries) {
  200. this.handlePackage(entry);
  201. }
  202. this.$data.log = this.$data.log.concat(myJson.entries);
  203. this.$data.lastID = myJson.lastID;
  204. let len = this.$data.log.length;
  205. this.$data.log.splice(0, len - 200);
  206. })
  207. .catch(error => {
  208. this.$data.lastID = 0;
  209. this.$data.log = [];
  210. console.log(error)
  211. });
  212. }
  213. }
  214. })
  215. </script>
  216. </body>
  217. </html>