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

Commit f55775d

Browse files
committed
Work on a spindle speed panel for dashboard
1 parent 93d8073 commit f55775d

File tree

4 files changed

+135
-26
lines changed

4 files changed

+135
-26
lines changed

src/components/panels/CNCContainerPanel.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<style>
32
.category-header {
43
flex: 0 0 100px;
@@ -7,7 +6,7 @@
76

87
<template>
98
<div>
10-
<v-row align="stretch">
9+
<v-row dense align="stretch">
1110
<v-col cols="3" order="1" sm="4" lg="2" order-lg="1">
1211
<v-card class="justify-center fill-height">
1312
<v-card-title>
Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
<template>
2-
<div>
3-
<v-row>
4-
<v-col cols="12" class="pt-0 pb-0">
5-
<cnc-movement-panel class="mb-2"></cnc-movement-panel>
6-
</v-col>
7-
<v-col cols="12">
8-
<v-card>
9-
<v-card-text>
10-
<job-progress></job-progress>
11-
</v-card-text>
12-
</v-card>
13-
</v-col>
14-
<v-col cols="4" class="flex-grow-1">
15-
<job-control-panel></job-control-panel>
16-
</v-col>
17-
<v-col cols="4" class="flex-grow-1">
18-
<z-babystep-panel class="fill-height"></z-babystep-panel>
19-
</v-col>
20-
<v-col cols="4" class="flex-grow-1">
21-
<speed-factor-panel class="fill-height"></speed-factor-panel>
22-
</v-col>
23-
</v-row>
24-
</div>
2+
<div>
3+
<v-row dense>
4+
<v-col cols="12" class="pt-0 pb-0">
5+
<cnc-movement-panel class="mb-2"></cnc-movement-panel>
6+
</v-col>
7+
<v-col cols="12">
8+
<spindle-speed-panel></spindle-speed-panel>
9+
</v-col>
10+
<v-col cols="12">
11+
<v-card>
12+
<v-card-text>
13+
<job-progress></job-progress>
14+
</v-card-text>
15+
</v-card>
16+
</v-col>
17+
<v-col cols="4" class="flex-grow-1">
18+
<job-control-panel></job-control-panel>
19+
</v-col>
20+
<v-col cols="4" class="flex-grow-1">
21+
<z-babystep-panel class="fill-height"></z-babystep-panel>
22+
</v-col>
23+
<v-col cols="4" class="flex-grow-1">
24+
<speed-factor-panel class="fill-height"></speed-factor-panel>
25+
</v-col>
26+
</v-row>
27+
</div>
2528
</template>
2629

30+
2731
<script>
2832
export default {};
2933
</script>
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<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">
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>
18+
</td>
19+
<td>{{spindle.current}}</td>
20+
<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>
29+
</template>
30+
31+
<style scoped>
32+
td {
33+
text-align: center;
34+
vertical-align: middle;
35+
}
36+
37+
.spindle-on {
38+
animation: spindle-on-pulse 5s infinite;
39+
}
40+
41+
.show {
42+
visibility: visible;
43+
}
44+
45+
.hide {
46+
visibility: hidden;
47+
}
48+
49+
50+
@keyframes spindle-on-pulse {
51+
0% {
52+
background-color: #00AA00;
53+
}
54+
50% {
55+
background-color: #00FF00;
56+
}
57+
100% {
58+
background-color: #00AA00;
59+
}
60+
}
61+
</style>
62+
63+
<script>
64+
import { mapActions, mapState } from 'vuex';
65+
//import store from '../../store'
66+
export default {
67+
computed: {
68+
...mapState('machine/model', {
69+
spindles: state => state.spindles.filter(spindle => spindle.tool >= 0),
70+
currentTool: state => state.state.currentTool,
71+
}),
72+
...mapState('machine',{
73+
spindleRPMs: state => state.settings.spindleRPM
74+
}),
75+
},
76+
methods: {
77+
...mapActions('machine', ['sendCode']),
78+
getName(spindle) {
79+
return `Spindle ${spindle.tool}`;
80+
},
81+
spindleState(spindle) {
82+
return spindle.active;
83+
},
84+
async setActiveRPM(value, index){
85+
let code = `M3 P${index} S${value}`;
86+
await this.sendCode(code);
87+
},
88+
async spindleOn(spindle, index) {
89+
let code = `M3 P${index} S${spindle.active}`;
90+
await this.sendCode(code);
91+
},
92+
async spindleOff( index) {
93+
this.sendCode(`M5 P${index}`);
94+
},
95+
rpmInRange(spindle){
96+
let rpms = this.spindleRPMs.filter(rpm => rpm >= spindle.min && rpm <= spindle.max).reverse();
97+
if(!rpms.includes(0)){
98+
rpms.unshift(0);
99+
}
100+
return rpms;
101+
}
102+
},
103+
};
104+
</script>
105+

src/components/panels/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import CNCAxesPosition from './CNCAxesPosition.vue'
3232
import CNCContainerPanel from './CNCContainerPanel.vue'
3333
import CNCMovementPanel from './CNCMovementPanel.vue'
3434
import CNCDashboardPanel from './CNCDashboardPanel.vue'
35+
import SpindleSpeedPanel from './SpindleSpeedPanel'
3536

3637
Vue.component('atx-panel', ATXPanel)
3738
Vue.component('extrude-panel', ExtrudePanel)
@@ -63,4 +64,4 @@ Vue.component('fff-dashboard-panel', FFFDashboardPanel)
6364
Vue.component('cnc-container-panel', CNCContainerPanel)
6465
Vue.component('cnc-movement-panel', CNCMovementPanel)
6566
Vue.component('cnc-dashboard-panel', CNCDashboardPanel)
66-
67+
Vue.component('spindle-speed-panel', SpindleSpeedPanel)

0 commit comments

Comments
 (0)