Skip to content
This repository was archived by the owner on Nov 25, 2020. It is now read-only.

Commit e82b073

Browse files
Wakeful-CloudWakeful-Cloud
committed
Bugfix + added controls to demo
1 parent 4e8c328 commit e82b073

File tree

8 files changed

+275
-19
lines changed

8 files changed

+275
-19
lines changed

‎package-lock.json

Lines changed: 44 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@
5252
"eslint-plugin-vue": "^6.2.2",
5353
"nyc": "^15.0.1",
5454
"raw-loader": "^4.0.1",
55-
"vue-template-compiler": "^2.6.11"
55+
"vue-cli-plugin-vuetify": "^2.0.5",
56+
"vue-template-compiler": "^2.6.11",
57+
"vuetify": "^2.2.28"
5658
}
5759
}

‎src/assets/gcode-parser.js

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
* @author wakeful-cloud
77
*/
88

9-
import {
9+
import
10+
{
1011
LineBasicMaterial,
1112
BufferGeometry,
1213
Float32BufferAttribute,
@@ -81,15 +82,24 @@ export default class GCodeParser
8182
f: args.f != null ? absolute(relative, state.f, args.f) : state.f
8283
};
8384

84-
//Extruding
85-
if (delta(relative, state.e, line.e) > 0)
86-
{
87-
extrusionVertices.push(line.x, line.y, line.z);
88-
}
89-
//Path
90-
else
85+
//Only push valid coordinates/states
86+
if (!isNaN(line.x) &&
87+
!isNaN(line.y) &&
88+
!isNaN(line.z) &&
89+
!isNaN(line.e) &&
90+
!isNaN(line.f)
91+
)
9192
{
92-
pathVertices.push(line.x, line.y, line.z);
93+
//Extruding
94+
if (delta(relative, state.e, line.e) > 0)
95+
{
96+
extrusionVertices.push(line.x, line.y, line.z);
97+
}
98+
//Path
99+
else
100+
{
101+
pathVertices.push(line.x, line.y, line.z);
102+
}
93103
}
94104

95105
//Update position

‎src/demo/App.vue

Lines changed: 116 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,124 @@
11
<template>
2-
<gcode-viewer class="emulate-root" :gcode="gcode" />
2+
<v-app>
3+
<v-navigation-drawer permanent width="400">
4+
<v-list dense nav>
5+
<v-list-item>
6+
<v-list-item-content>
7+
<v-list-item-title class="title">Bed</v-list-item-title>
8+
<v-list-item-action-text>
9+
<slider label="X" v-model="viewer.bed.X" />
10+
<slider label="Y" v-model="viewer.bed.Y" />
11+
</v-list-item-action-text>
12+
</v-list-item-content>
13+
</v-list-item>
14+
15+
<v-list-item>
16+
<v-list-item-content>
17+
<v-list-item-title class="title">Position</v-list-item-title>
18+
<v-list-item-action-text>
19+
<slider label="X" :min="-20" :max="20" v-model="viewer.position.X" />
20+
<slider label="Y" :min="-20" :max="20" v-model="viewer.position.Y" />
21+
<slider label="Z" :min="-20" :max="20" v-model="viewer.position.Z" />
22+
</v-list-item-action-text>
23+
</v-list-item-content>
24+
</v-list-item>
25+
26+
<v-list-item>
27+
<v-list-item-content>
28+
<v-list-item-title class="title">Rotation</v-list-item-title>
29+
<v-list-item-action-text>
30+
<slider label="X" :min="-180" :max="180" v-model="viewer.rotation.X" />
31+
<slider label="Y" :min="-180" :max="180" v-model="viewer.rotation.Y" />
32+
<slider label="Z" :min="-180" :max="180" v-model="viewer.rotation.Z" />
33+
</v-list-item-action-text>
34+
</v-list-item-content>
35+
</v-list-item>
36+
37+
<v-list-item>
38+
<v-list-item-content>
39+
<v-list-item-title class="title">Scale</v-list-item-title>
40+
<v-list-item-action-text>
41+
<slider label="X" :min="0" :max="10" v-model="viewer.scale.X" />
42+
<slider label="Y" :min="0" :max="10" v-model="viewer.scale.Y" />
43+
<slider label="Z" :min="0" :max="10" v-model="viewer.scale.Z" />
44+
</v-list-item-action-text>
45+
</v-list-item-content>
46+
</v-list-item>
47+
48+
<v-list-item>
49+
<v-list-item-content>
50+
<v-list-item-title class="title">Theme</v-list-item-title>
51+
<v-list-item-action-text>
52+
<color-picker label="Extrusion Color" v-model="viewer.theme.extrusionColor" />
53+
<color-picker label="Path Color" v-model="viewer.theme.pathColor" />
54+
<color-picker label="Bed Color" v-model="viewer.theme.bedColor" />
55+
<color-picker label="Background Color" v-model="viewer.theme.backgroundColor" />
56+
</v-list-item-action-text>
57+
</v-list-item-content>
58+
</v-list-item>
59+
</v-list>
60+
</v-navigation-drawer>
61+
<gcode-viewer
62+
class="emulate-root"
63+
:bed="viewer.bed"
64+
:gcode="viewer.gcode"
65+
:position="viewer.position"
66+
:rotation="viewer.rotation"
67+
:scale="viewer.scale"
68+
:theme="viewer.theme"
69+
/>
70+
</v-app>
371
</template>
472

573
<script>
674
//Imports
775
import gcode from './Benchy.gcode';
76+
import colorPicker from './color-picker';
77+
import slider from './slider.vue';
878
979
export default {
1080
data: () => ({
11-
gcode
12-
})
81+
viewer: {
82+
bed: {
83+
X: 10,
84+
Y: 10
85+
},
86+
gcode,
87+
position: {
88+
X: 5,
89+
Y: 0,
90+
Z: -5
91+
},
92+
rotation: {
93+
X: -90,
94+
Y: 0,
95+
Z: 180
96+
},
97+
scale: {
98+
X: 0.1,
99+
Y: 0.1,
100+
Z: 0.1
101+
},
102+
theme: {
103+
extrusionColor: '#4287f5',
104+
pathColor: '#0a2f6b',
105+
bedColor: '#586375',
106+
backgroundColor: '#dfe4ed'
107+
}
108+
}
109+
}),
110+
components: {
111+
'color-picker': colorPicker,
112+
slider
113+
}
13114
};
14115
</script>
15116

16117
<style>
118+
:root {
119+
overflow-y: auto;
120+
}
121+
17122
.emulate-root {
18123
background: var(--foreground);
19124
display: flex;
@@ -23,4 +128,12 @@ export default {
23128
top: 0;
24129
width: 100%;
25130
}
131+
132+
.v-list {
133+
max-height: 80vh;
134+
}
135+
136+
.v-navigation-drawer {
137+
z-index: 5;
138+
}
26139
</style>

‎src/demo/color-picker.vue

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<template>
2+
<v-card flat>
3+
<v-card-subtitle>{{label}}</v-card-subtitle>
4+
<v-card-text>
5+
<v-color-picker flat @input="event => $emit('input', event)" :value="value" />
6+
</v-card-text>
7+
</v-card>
8+
</template>
9+
10+
<script>
11+
export default {
12+
props: {
13+
label: {
14+
type: String
15+
},
16+
value: {
17+
required: true,
18+
type: String
19+
}
20+
}
21+
};
22+
</script>
23+
24+
<style>
25+
</style>

‎src/demo/main.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
//Imports
22
import App from './App.vue';
3-
import viewer from '../main.js';
3+
import Viewer from '../main.js';
44
import Vue from 'vue';
5+
import Vuetify from 'vuetify';
6+
import 'vuetify/dist/vuetify.css';
57

6-
Vue.use(viewer);
8+
//Vue plugins
9+
Vue.use(Viewer);
10+
Vue.use(Vuetify);
711

812
//Vue instance
913
new Vue({
1014
el: '#app',
11-
render: h => h(App)
15+
render: h => h(App),
16+
vuetify: new Vuetify()
1217
});

‎src/demo/slider.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<v-slider :label="label" @input="input" :min="min" :max="max" :step="step" :value="value">
3+
<template v-slot:append>
4+
<v-text-field dense :label="label" @input="input" :value="value" />
5+
</template>
6+
</v-slider>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: 'slider',
12+
props: {
13+
min: {
14+
default: 0,
15+
type: Number
16+
},
17+
max: {
18+
default: 20,
19+
type: Number
20+
},
21+
label: {
22+
required: true,
23+
type: String
24+
},
25+
step: {
26+
default: 0.1,
27+
type: Number
28+
},
29+
value: {
30+
required: true,
31+
type: Number
32+
}
33+
},
34+
methods: {
35+
input: function(value)
36+
{
37+
value = parseFloat(value);
38+
39+
//Clip number
40+
if (value > this.max)
41+
{
42+
value = this.max;
43+
}
44+
else if (value < this.min)
45+
{
46+
value = this.min;
47+
}
48+
49+
//Emit event
50+
this.$emit('input', value);
51+
}
52+
}
53+
};
54+
</script>
55+
56+
<style>
57+
</style>

‎tests/unit/gcode-parser.spec.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
//Imports
66
import {expect} from 'chai';
77
import GCodeParser from '@/assets/gcode-parser.js';
8-
import * as three from 'three';
8+
import {Color} from 'three';
99

1010
//Mock GCODE
1111
const gcode = 'G0 X0 Y0 Z0\nG0 X5 Y0 Z0\nG0 X5 Y5 Z0\nG0 X5 Y5 Z5\nG0 E1 X5 Y5 Z0\nG0 E2 X5 Y0 Z0\nG0 E3 X0 Y0 Z0';
@@ -40,8 +40,8 @@ describe('GCODE parser', () =>
4040
const parser = new GCodeParser(extrusionColor, pathColor);
4141
const lines = await parser.parse(gcode);
4242

43-
expect(lines.extrusion.material.color).to.eql(new three.Color(extrusionColor));
44-
expect(lines.path.material.color).to.eql(new three.Color(pathColor));
43+
expect(lines.extrusion.material.color).to.eql(new Color(extrusionColor));
44+
expect(lines.path.material.color).to.eql(new Color(pathColor));
4545
});
4646

4747
it('ignores invalid gcode commands and comments', async () =>

0 commit comments

Comments
 (0)