Skip to content
This repository was archived by the owner on Jan 16, 2022. It is now read-only.

Commit 2ac9614

Browse files
SindariusSindarius
committed
Update spindle panel
1 parent bd8fceb commit 2ac9614

File tree

2 files changed

+114
-53
lines changed

2 files changed

+114
-53
lines changed

‎src/components/panels/SpindleSpeedPanel.vue‎

Lines changed: 103 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,55 @@
11
<template>
2-
<v-card>
3-
<v-card-title><v-icon>mdi-45hammer-screwdriver</v-icon> Spindles</v-card-title>
4-
<v-card-text>
5-
<v-simple-table>
6-
<thead>
7-
<th>Spindle Name</th>
8-
<th>Active</th>
9-
<th>Current RPM</th>
10-
<th>Set RPM</th>
11-
</thead>
12-
<tbody>
13-
<tr v-for="(spindle, index) in spindles" :key="index" :class="{'spindle-active' : spindle.current > 0 }">
14-
<td>{{getName(spindle)}}</td>
15-
<td>
16-
<v-btn v-if="spindle.current <= 0" :value="1" block @click="spindleOn(spindle, index)">On</v-btn>
17-
<v-btn v-else :value="0" block @click="spindleOff(index)">Off</v-btn>
2+
<v-card>
3+
<v-card-title>
4+
<v-icon>mdi-45hammer-screwdriver</v-icon>Spindles
5+
</v-card-title>
6+
<v-card-text>
7+
<v-simple-table>
8+
<thead>
9+
<th>{{$t('panel.spindle.spindle')}}</th>
10+
<th>{{$t('panel.spindle.active')}}</th>
11+
<th v-show="hasReverseableSpindle">{{$t('panel.spindle.direction')}}</th>
12+
<th>{{$t('panel.spindle.currentRPM')}}</th>
13+
<th>{{$t('panel.spindle.setRPM')}}</th>
14+
</thead>
15+
<tbody>
16+
<tr :class="{'spindle-active' : spindle.current > 0 && spindle.active > 0 }" :key="index" v-for="(spindle, index) in spindles" v-show="spindleIsConfigured(index)">
17+
<td>{{getName(index)}}</td>
18+
<td>
19+
<v-btn @click="spindleOff(index)" block v-if="spindleActive(index)">On</v-btn>
20+
<v-btn @click="spindleOn(index)" block v-else>Off</v-btn>
21+
</td>
22+
<td v-show="hasReverseableSpindle">
23+
<v-btn-toggle mandatory v-model="spindleDir[index]" v-show="hasReverseableSpindle && spindle.canReverse">
24+
<v-btn>{{$t('panel.spindle.forward')}}</v-btn>
25+
<v-btn>{{$t('panel.spindle.reverse')}}</v-btn>
26+
</v-btn-toggle>
1827
</td>
19-
<td>{{spindle.current}}</td>
28+
<td>{{spindle.current}}</td>
2029
<td>
21-
<v-combobox :items="rpmInRange(spindle)" :value="spindle.active" @input="setActiveRPM($event, index)">
22-
</v-combobox>
23-
</td>
24-
</tr>
25-
</tbody>
26-
</v-simple-table>
27-
</v-card-text>
28-
</v-card>
30+
<v-combobox :items="rpmInRange(spindle)" :value="spindle.active" @input="setActiveRPM($event, index)"></v-combobox>
31+
</td>
32+
</tr>
33+
</tbody>
34+
</v-simple-table>
35+
</v-card-text>
36+
</v-card>
2937
</template>
3038

31-
<style scoped>
39+
<style scoped lang="scss">
40+
tbody {
41+
tr:hover {
42+
background-color: transparent !important;
43+
}
44+
}
45+
3246
td {
3347
text-align: center;
3448
vertical-align: middle;
3549
}
3650
37-
.spindle-active {
38-
background-color : #00BB00;
51+
.spindle-active {
52+
background-color: #00bb00;
3953
}
4054
4155
.spindle-on {
@@ -50,59 +64,95 @@ td {
5064
visibility: hidden;
5165
}
5266
53-
5467
@keyframes spindle-on-pulse {
5568
0% {
56-
background-color: #00AA00;
69+
background-color: #00aa00;
5770
}
5871
50% {
59-
background-color: #00FF00;
72+
background-color: #00ff00;
6073
}
6174
100% {
62-
background-color: #00AA00;
75+
background-color: #00aa00;
6376
}
6477
}
6578
</style>
6679

6780
<script>
68-
import { mapActions, mapState } from 'vuex';
69-
//import store from '../../store'
81+
import {mapActions, mapState} from 'vuex';
82+
import {SpindleState} from '../../store/machine/modelEnums.js';
83+
import Vue from 'vue';
84+
7085
export default {
86+
data: function () {
87+
return {
88+
spindleDir: [0, 0, 0, 0],
89+
};
90+
},
91+
mounted() {
92+
this.updateSpindleDirection();
93+
},
7194
computed: {
7295
...mapState('machine/model', {
73-
spindles: state => state.spindles.filter(spindle => spindle.tool >= 0),
74-
currentTool: state => state.state.currentTool,
96+
spindles: (state) => state.spindles,
7597
}),
76-
...mapState('machine',{
77-
spindleRPMs: state => state.settings.spindleRPM
98+
...mapState('machine', {
99+
spindleRPMs: (state) => state.settings.spindleRPM,
78100
}),
101+
hasReverseableSpindle() {
102+
return this.spindles.some((spindle) => spindle.canReverse);
103+
},
79104
},
80105
methods: {
81106
...mapActions('machine', ['sendCode']),
82-
getName(spindle) {
83-
return `Spindle ${spindle.tool}`;
107+
getName(index) {
108+
return `Spindle ${index}`;
109+
},
110+
spindleIsConfigured(index) {
111+
return this.spindles[index].state !== SpindleState.unconfigured;
84112
},
85-
spindleState(spindle) {
86-
return spindle.active;
113+
spindleActive(index) {
114+
return this.spindles[index].state == SpindleState.forward || this.spindles[index].state == SpindleState.reverse;
87115
},
88-
async setActiveRPM(value, index){
89-
let code = `M3 P${index} S${value}`;
116+
async setActiveRPM(value, index) {
117+
let code = `${this.spindleDir[index] ? 'M4' : 'M3'} P${index} S${value}`;
90118
await this.sendCode(code);
91119
},
92-
async spindleOn(spindle, index) {
93-
let code = `M3 P${index} S${spindle.active}`;
120+
async spindleOn(index) {
121+
let code = `${this.spindleDir[index] ? 'M4' : 'M3'} P${index} S${this.spindles[index].active}`;
94122
await this.sendCode(code);
95123
},
96-
async spindleOff( index) {
124+
async spindleOff(index) {
97125
this.sendCode(`M5 P${index}`);
98126
},
99-
rpmInRange(spindle){
100-
let rpms = this.spindleRPMs.filter(rpm => rpm >= spindle.min && rpm <= spindle.max).reverse();
101-
if(!rpms.includes(0)){
102-
rpms.unshift(0);
103-
}
127+
rpmInRange(spindle) {
128+
let rpms = this.spindleRPMs.filter((rpm) => rpm >= spindle.min && rpm <= spindle.max).reverse();
129+
if (!rpms.includes(0)) {
130+
rpms.unshift(0);
131+
}
104132
return rpms;
105-
}
133+
},
134+
updateSpindleDirection() {
135+
for (let spindleIdx = 0; spindleIdx < 4; spindleIdx++) {
136+
if (this.spindles[spindleIdx].state) {
137+
switch (this.spindles[spindleIdx].state) {
138+
case SpindleState.forward:
139+
Vue.set(this.spindleDir, spindleIdx, 0);
140+
break;
141+
case SpindleState.reverse:
142+
Vue.set(this.spindleDir, spindleIdx, 1);
143+
break;
144+
}
145+
}
146+
}
147+
},
148+
},
149+
watch: {
150+
spindles: {
151+
deep: true,
152+
handler() {
153+
this.updateSpindleDirection();
154+
},
155+
},
106156
},
107157
};
108158
</script>

‎src/i18n/en.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -726,6 +726,17 @@ export default {
726726
speedFactor: {
727727
caption: 'Speed Factor'
728728
},
729+
spindle: {
730+
spindle : 'Spindle',
731+
active : 'Active',
732+
direction : 'Direction',
733+
currentRPM : 'Current RPM',
734+
setRPM : 'Set RPM',
735+
on : 'On',
736+
off : 'Off',
737+
forward : 'forward',
738+
reverse : 'reverse'
739+
},
729740
status: {
730741
caption: 'Status',
731742
mode: 'Mode: {0}',

0 commit comments

Comments
 (0)