CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add render quality and force line mode settings

Browse Source
This commit is contained in:
Juan Rosario 2021-08-01 15:54:09 -05:00
parent f53d895f4e
commit 069e689306
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/gcodeviewer/Viewer.vue
View File

@ -4,6 +4,8 @@
<v-col cols="2"> <v-col cols="2">
<v-btn @click="chooseFile" block>{{ $t("GCodeViewer.LoadLocal") }}</v-btn> <v-btn @click="chooseFile" block>{{ $t("GCodeViewer.LoadLocal") }}</v-btn>
<v-btn @click="resetCamera" block class="mt-1">{{ $t("GCodeViewer.ResetCamera")}}</v-btn> <v-btn @click="resetCamera" block class="mt-1">{{ $t("GCodeViewer.ResetCamera")}}</v-btn>
<v-select class="mt-1" :items="renderQualities" :label="$t('GCodeViewer.RenderQuality')" attach item-text="label" v-model="renderQuality"></v-select>
<v-checkbox v-model="forceLineRendering" :label="$t('GCodeViewer.ForceLineRendering')"></v-checkbox>
</v-col> </v-col>
<v-col cols="10"> <v-col cols="10">
<canvas class="viewer" ref="viewerCanvas"></canvas> <canvas class="viewer" ref="viewerCanvas"></canvas>
@ -14,7 +16,7 @@
</template> </template>
<script> <script>
import {Component, Mixins, Prop, Ref} from 'vue-property-decorator'; import {Component, Mixins, Prop, Ref, Watch} from 'vue-property-decorator';
import BaseMixin from '../mixins/base'; import BaseMixin from '../mixins/base';
import GCodeViewer from '@sindarius/gcodeviewer'; import GCodeViewer from '@sindarius/gcodeviewer';
let viewer; let viewer;
@ -23,6 +25,16 @@ let viewer;
export default class Viewer extends Mixins(BaseMixin) { export default class Viewer extends Mixins(BaseMixin) {
isBusy = false; isBusy = false;
loading = false; loading = false;
forceLineRendering = false;
renderQualities = [
{label: this.$t('GCodeViewer.Low'), value: 2},
{label: this.$t('GCodeViewer.Medium'), value: 3},
{label: this.$t('GCodeViewer.High'), value: 4},
{label: this.$t('GCodeViewer.Ultra'), value: 5},
{label: this.$t('GCodeViewer.Max'), value: 6},
];
renderQuality = this.renderQualities[2];
@Prop({type: String, default: '', required: false}) filename; @Prop({type: String, default: '', required: false}) filename;
@ -35,6 +47,7 @@ export default class Viewer extends Mixins(BaseMixin) {
viewer.init(); viewer.init();
viewer.setBackgroundColor('#121212'); viewer.setBackgroundColor('#121212');
viewer.setCursorVisiblity(false); viewer.setCursorVisiblity(false);
viewer.gcodeProcessor.updateForceWireMode(this.forceLineRendering);
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.$nextTick(() => { this.$nextTick(() => {
@ -80,6 +93,10 @@ export default class Viewer extends Mixins(BaseMixin) {
}); });
} }
async reloadViewer() {
await viewer.reload();
}
resize() { resize() {
//viewer.resize(); //viewer.resize();
} }
@ -87,6 +104,20 @@ export default class Viewer extends Mixins(BaseMixin) {
resetCamera() { resetCamera() {
viewer.resetCamera(); viewer.resetCamera();
} }
@Watch('renderQuality')
renderQualityChanged(newVal) {
if (viewer.renderQuality !== newVal) {
viewer.updateRenderQuality(newVal);
this.reloadViewer();
}
}
@Watch('forceLineRendering')
forceLineRenderingChanged(newVal){
viewer.gcodeProcessor.updateForceWireMode(newVal);
this.reloadViewer();
}
} }
</script> </script>
@ -94,6 +125,6 @@ export default class Viewer extends Mixins(BaseMixin) {
.viewer { .viewer {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid #3F3F3F border: 1px solid #3f3f3f;
} }
</style> </style>

9
src/locales/en.json
View File

@ -568,6 +568,13 @@
"GCodeViewer":{ "GCodeViewer":{
"Title" : "G-Code Viewer", "Title" : "G-Code Viewer",
"LoadLocal": "Load Local File", "LoadLocal": "Load Local File",
"ResetCamera": "Reset Camera" "ResetCamera": "Reset Camera",
"RenderQuality" : "Render Quality",
"Low" : "Low",
"Medium" : "Medium",
"High" : "High",
"Ultra" : "Ultra",
"Max" : "Max",
"ForceLineRendering":"Force Line Rendering"
} }
} }