|
@@ -0,0 +1,225 @@
|
|
|
+<!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>
|