mkunz
/
urweb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
							<!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>

    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: []
        },
        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;
                    });
            },
            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':
                        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>