1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
<template>
<h2>Motor Control</h2>
<table id='tmain'>
<tbody>
<tr>
<td>
<button :id='ccw' class='bmot'>{{ dirIcons.ccw }}</button>
</td>
<td>
<table id='tmot'>
<tbody>
<tr v-for='ds in [["nw", "n", "ne"], ["w", "", "e"], ["sw", "s", "se"]]' :key='ds.id'>
<td v-for='d in ds' :key='d.id'>
<button v-if='d' :id='d' class='bmot'>{{ dirIcons[d] }}</button>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<button :id='cw' class='bmot'>{{ dirIcons.cw }}</button>
</td>
<td>
<table id='tspeed'>
<tbody>
<tr v-for='s in ["Top", "Fast", "Slow", "Slow2", "Slow4"]' :key='s.id'>
<td><button id='s{{ s.toLowerCase() }}'>{{ s }}</button></td>
</tr>
</tbody>
</table>
</td>
<td>
<table id='ttime'>
<tbody>
<tr v-for='t in ["4s", "2s", "1s", "hs", "qs"]' :key='t.id'>
<td><button id='t{{ t }}'>{{ t }}</button></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table id='thist'>
<tbody>
<tr>
<td><input id='ihist' placeholder='command' disabled /></td>
<td v-for='h in ["hup", "hdown"]' :key='h.id'>
<button id='{{ h }}'>{{ h }}</button>
</td>
</tr>
</tbody>
</table>
<table id='tarm'>
<tbody>
<tr>
<td v-for='a in ["arm", "dispatch"]' :key='a.id'>
<button id='{{ a }}'>{{ a }}</button>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
dirIcons: {
n: '↑',
ne: '↗',
e: '→',
se: '↘',
s: '↓',
sw: '↙',
w: '←',
nw: '↖',
ccw: '↺',
cw: '↻'
}
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
#tmot td {
height: 33%;
width: 33%;
}
#tmain td, #thist td {
background-color: #2aa198;
}
.bmot {
font-size: 16px;
font-weight: bold;
}
</style>
|
