123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Vue.js markdown editor example</title>
- <link rel="stylesheet" href="css/style.css">
- <script src="js/util.js"></script>
- <script src="js/moment.js"></script>
- <script src="js/vue.js"></script>
- <style>
- table {
- display: inline-table;
- width:50%;
- }
- td {
- max-width: 100px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <textarea v-model="input" cols="80" rows="20"></textarea>
- <button v-on:click="sendCommand">sendCommand</button>
- <button v-on:click="sendFreeDrive">sendFreeDrive</button>
- <button v-on:click="saveWP">saveWP</button>
- <table border="1">
- <tr v-for="x in waypoints">
- <td>{{x}}</td>
- <td>{{x}}</td>
- <td>{{x}}</td>
- </tr>
- </table>
- Running: {{ $data.running }}
- <table border="1">
- <tr v-for="x in cmdq">
- <td>{{x.id}}</td>
- <td>{{x.cmd}}</td>
- <td>{{x.cpeeCallback}}</td>
- <td>
- </td>
- </tr>
- </table>
- <table border="1">
- <tr v-for="x in cData">
- <td>{{x.type}}</td>
- <td>{{x.ts}}</td>
- <td>
- <pre>{{JSON.stringify(x.entry, null, 2)}}</pre>
- </td>
- </tr>
- </table>
- <ul id="loglist">
- <li v-for="(item, index) in log.slice().reverse()">
- {{ ts2txt(item.ts) }} - {{ item.entry.message }} -
- <pre>{{ JSON.stringify(item.entry) }}</pre>
- </li>
- </ul>
- </div>
- <script type="application/javascript">
- new Vue({
- el: '#app',
- data: {
- input: '// rde.writeCmd("set_digital_out(2,True)");\n' +
- '// rde.writeCmd("movej([-1.95,-1.58,-1.16,-1.15,-1.55,1.25], a=1.0, v=0.1)");\n' +
- '//rde.writeCmd("freedrive_mode()");\n' +
- 'def asdf():\n' +
- ' set_digital_out(3, True) \n' +
- ' set_digital_out(4, True) \n' +
- 'end',
- log: [],
- lastID: -1,
- doBits: [],
- cData: {},
- cmdq: [],
- curPos: {},
- waypoints: []
- },
- created: function () {
- setInterval(this.update, 210);
- setInterval(this.updateQ, 220);
- setInterval(this.updateCurrent, 230);
- },
- watch: {
- doBits: (newValue, oldValue) => {
- let diff1 = newValue.filter(x => !oldValue.includes(x));
- let diff2 = oldValue.filter(x => !newValue.includes(x));
- for (const x of diff1) {
- fetch('/digital/' + x, {method: "POST", body: 'True'})
- .then(function (response) {
- return response;
- });
- }
- for (const x of diff2) {
- fetch('/digital/' + x, {method: "POST", body: 'False'})
- .then(function (response) {
- return response;
- });
- }
- }
- },
- methods: {
- sendCommand: function (event) {
- var params = new URLSearchParams();
- params.append('script', this.input);
- fetch('/cmd', {method: "POST", body: params})
- .then(function (response) {
- return response;
- });
- },
- sendFreeDrive: function (event) {
- var params = new URLSearchParams();
- fetch('/freedrive', {method: "POST"})
- .then(function (response) {
- return response;
- });
- },
- saveWP: function (event) {
- this.$data.waypoints.push_back(event)
- },
- ts2txt: function (ts) {
- return moment(ts).format('YYYY-MM-DD hh:mm ss.SSS ')
- },
- handlePackage: function (package) {
- Vue.set(this.$data.cData, package.type, package)
- switch (package.type) {
- case 'Message':
- break;
- case 'MasterBoardData':
- let bits = package.entry.digitalOutputBits;
- for (let i = 0; i < 8; i++) {
- if (bits & (1 << i)) {
- this.$data.doBits.push('' + (i + 1));
- }
- }
- break;
- case 'ModeData':
- break;
- case 'ToolData':
- break;
- case 'ToolCommInfo':
- break;
- case 'JointDataList':
- break;
- case 'CartesianInfo':
- this.$data.curPos = package.entry;
- break;
- case 'ForceModeData':
- break;
- case 'AdditionalInfo':
- break;
- case 'KinematicsInfo':
- break;
- case 'ConfigurationData':
- break;
- case 'ProgramStateMessage':
- break;
- case 'ModbusInfoMessage':
- break;
- case 'RobotMessageError':
- break;
- default:
- console.log('unknown package:' + package.type);
- }
- },
- updateCurrent: function (event) {
- fetch('/running', {method: "GET"})
- .then(handleErrors)
- .then((response) => {
- return response.json();
- })
- .then((myJson) => {
- this.$data.running = myJson;
- })
- .catch(error => {
- console.log(error)
- })},
- updateQ: function (event) {
- fetch('/cmdq', {method: "GET"})
- .then(handleErrors)
- .then((response) => {
- return response.json();
- })
- .then((myJson) => {
- this.$data.cmdq = myJson;
- })
- .catch(error => {
- console.log(error)
- })},
- update: function (event) {
- fetch('/log/' + this.lastID, {method: "GET"})
- .then(handleErrors)
- .then((response) => {
- return response.json();
- })
- .then((myJson) => {
- for (const entry of myJson.entries) {
- this.handlePackage(entry);
- }
- this.$data.log = this.$data.log.concat(myJson.entries);
- this.$data.lastID = myJson.lastID;
- let len = this.$data.log.length;
- this.$data.log.splice(0, len - 200);
- })
- .catch(error => {
- this.$data.lastID = 0;
- this.$data.log = [];
- console.log(error)
- });
- }
- }
- })
- </script>
- </body>
- </html>
|