Merge pull request #220 from freasy/feature/controll_cross
Control pad for movement
This commit is contained in:
Stefan Dej
GitHub
commit
4ee0f4bd46
@ -1,6 +1,7 @@
|
||||
<style>
|
||||
@import './assets/styles/fonts.css';
|
||||
@import './assets/styles/toastr.css';
|
||||
@import './assets/styles/page.scss';
|
||||
@import './assets/styles/utils.scss';
|
||||
|
||||
.button-min-width-auto {
|
||||
|
||||
35
src/assets/styles/page.scss
Normal file
35
src/assets/styles/page.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.fill-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mb-fix-2 {
|
||||
margin-bottom: -8px!important;
|
||||
}
|
||||
.mr-fix-2 {
|
||||
margin-right: -8px!important;
|
||||
}
|
||||
.mr-fix-1 {
|
||||
margin-right: -4px!important;
|
||||
}
|
||||
|
||||
.gutter-2 {
|
||||
margin: -2px!important;
|
||||
}
|
||||
.gutter-2 > .col, .gutter-2 > [class*=col-] {
|
||||
padding: 1px!important;
|
||||
}
|
||||
|
||||
.w-100 {
|
||||
width: 100%!important;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%!important;
|
||||
}
|
||||
|
||||
.p-abs {
|
||||
position: absolute!important;
|
||||
}
|
||||
|
||||
.p-rel {
|
||||
position: relative!important;
|
||||
}
|
||||
@ -1,58 +1,406 @@
|
||||
<style>
|
||||
.btnHomeAxis {
|
||||
width: 36px;
|
||||
min-width: 36px !important;
|
||||
}
|
||||
<style lang="scss">
|
||||
.btnHomeAxis {
|
||||
width: 36px;
|
||||
min-width: 36px !important;
|
||||
}
|
||||
|
||||
.btnMinWidthAuto {
|
||||
min-width: auto !important;
|
||||
.btnMinWidthAuto {
|
||||
min-width: auto !important;
|
||||
}
|
||||
|
||||
.steps {
|
||||
width: 100%;
|
||||
> div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
> button {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<v-card>
|
||||
<v-container class="pt-0">
|
||||
<v-row no-gutters class="" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
|
||||
<v-col class="col-12 mt-3 pb-0 text-center">
|
||||
<v-btn small @click="doHome" :loading="loadings.includes('homeAll')" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'"><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">Home </span>all</v-btn>
|
||||
<v-btn small @click="doQGL" :loading="loadings.includes('qgl')" color="primary" class="ml-2" v-if="'quad_gantry_level' in config">QGL</v-btn>
|
||||
<v-btn small @click="doZtilt" :loading="loadings.includes('zTilt')" color="primary" class="ml-2" v-if="'z_tilt' in config">Z Tilt</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('X-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'x-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeX" :color="homedAxes.includes('x') ? 'primary' : 'warning'" :loading="loadings.includes('homeX')" class="font-weight-bold btnHomeAxis">X</v-btn>
|
||||
<v-btn @click="doSendMove('X+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'x+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('Y-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'y-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeY" :color="homedAxes.includes('y') ? 'primary' : 'warning'" :loading="loadings.includes('homeY')" class="font-weight-bold btnHomeAxis">Y</v-btn>
|
||||
<v-btn @click="doSendMove('Y+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'y+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-3" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('Z-'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsorted" v-bind:key="'z-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeZ" :color="homedAxes.includes('z') ? 'primary' : 'warning'" :loading="loadings.includes('homeZ')" class="font-weight-bold btnHomeAxis">Z</v-btn>
|
||||
<v-btn @click="doSendMove('Z+'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsortedReverse" v-bind:key="'z+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters v-if="this['printer/getMacros'].length > 0">
|
||||
<v-col class="text-center">
|
||||
<v-btn v-for="(macro, index) in this['printer/getMacros']" v-bind:key="index+99" small color="primary" class="mx-1 mt-3" :loading="loadings.includes('macro_'+macro.name)" @click="doSendMacro(macro.name)">{{ macro.name.replace(/_/g, " ") }}</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<div>
|
||||
<v-card class="mb-4" v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
|
||||
<v-toolbar flat dense>
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-gamepad</v-icon>Controls</span>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-menu :offset-y="true" :close-on-content-click="false" title="Setup Controls" left>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn small class="px-2 minwidth-0" color="grey darken-3" v-bind="attrs" v-on="on"><v-icon small>mdi-cog</v-icon></v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item class="minHeight36">
|
||||
<v-checkbox v-model="useCross" class="mt-0" hide-details label="Alternate controls"></v-checkbox>
|
||||
</v-list-item>
|
||||
<v-list-item class="minHeight36">
|
||||
<v-checkbox v-model="reverseZ" class="mt-0" hide-details label="Invert Z"></v-checkbox>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-toolbar>
|
||||
<v-container>
|
||||
<template v-if="useCross">
|
||||
<v-row>
|
||||
<v-col :cols="homeCols">
|
||||
<v-row dense class="mb-1">
|
||||
<v-col cols="3"></v-col>
|
||||
<v-col cols="3">
|
||||
<v-btn class="btnMinWidthAuto fill-width"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Y+'+stepsReversed[selectedCrossStep], feedrateXY)"
|
||||
>
|
||||
<v-icon>mdi-chevron-up</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3"></v-col>
|
||||
<v-col cols="3">
|
||||
<v-btn class="btnMinWidthAuto fill-width"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Z'+(reverseZ ? '-' : '+')+stepsReversed[selectedCrossStep], feedrateZ)"
|
||||
>
|
||||
<v-icon>mdi-chevron-up</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row dense>
|
||||
<v-col cols="3" class="p-rel">
|
||||
<v-btn class="btnMinWidthAuto fill-width p-abs" style="top: -50%; width: calc(100% - 8px);"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('X-'+stepsReversed[selectedCrossStep], feedrateXY)"
|
||||
>
|
||||
<v-icon>mdi-chevron-left</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-btn class="btnMinWidthAuto fill-width"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Y-'+stepsReversed[selectedCrossStep], feedrateXY)"
|
||||
>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" class="p-rel">
|
||||
<v-btn class="btnMinWidthAuto fill-width p-abs" style="top: -50%; width: calc(100% - 8px);"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('X+'+stepsReversed[selectedCrossStep], feedrateXY)"
|
||||
>
|
||||
<v-icon>mdi-chevron-right</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-btn class="btnMinWidthAuto fill-width"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Z'+(reverseZ ? '+' : '-')+stepsReversed[selectedCrossStep], feedrateZ)"
|
||||
>
|
||||
<v-icon>mdi-chevron-down</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col :cols="homeCols" class="d-flex align-center">
|
||||
<div class="flex-grow-1" style="border-radius: 4px; overflow: hidden;">
|
||||
<v-row dense class="" style="margin-bottom: -2px!important;">
|
||||
<v-col :cols="'quad_gantry_level' in config || 'z_tilt' in config ? 6 : 12">
|
||||
<v-btn class="w-100"
|
||||
tile
|
||||
@click="doHome"
|
||||
height="30"
|
||||
:loading="loadings.includes('homeAll')"
|
||||
:color="homedAxes.includes('xyz') ? 'primary' : 'warning'"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<span class="ml-1">ALL</span>
|
||||
</div>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col v-if="'quad_gantry_level' in config || 'z_tilt' in config" cols="6" class="d-flex">
|
||||
<v-btn v-if="'quad_gantry_level' in config"
|
||||
class="btnMinWidthAuto flex-grow-1 px-0"
|
||||
tile
|
||||
dense
|
||||
color="primary"
|
||||
height="30"
|
||||
:loading="loadings.includes('qgl')"
|
||||
@click="doQGL"
|
||||
>QGL</v-btn>
|
||||
<v-btn v-if="'z_tilt' in config"
|
||||
class="btnMinWidthAuto flex-grow-1 px-0"
|
||||
tile
|
||||
dense
|
||||
color="primary"
|
||||
height="30"
|
||||
:loading="loadings.includes('zTilt')"
|
||||
@click="doZtilt"
|
||||
>Z-Tilt</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row dense class="">
|
||||
<v-col cols="4" class="flex-grow-1">
|
||||
<v-btn class="btnMinWidthAuto w-100"
|
||||
tile
|
||||
height="30"
|
||||
:loading="loadings.includes('homeX')"
|
||||
:color="homedAxes.includes('x') ? 'primary' : 'warning'"
|
||||
@click="doHomeX"
|
||||
>
|
||||
X
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="4" class="flex-grow-1">
|
||||
<v-btn class="btnMinWidthAuto w-100"
|
||||
tile
|
||||
height="30"
|
||||
:loading="loadings.includes('homeY')"
|
||||
:color="homedAxes.includes('y') ? 'primary' : 'warning'"
|
||||
@click="doHomeY"
|
||||
>
|
||||
Y
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="4" class="flex-grow-1">
|
||||
<v-btn class="btnMinWidthAuto w-100"
|
||||
tile
|
||||
height="30"
|
||||
:loading="loadings.includes('homeZ')"
|
||||
:color="homedAxes.includes('z') ? 'primary' : 'warning'"
|
||||
@click="doHomeZ"
|
||||
>
|
||||
Z
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col class="col-12 mt-3">
|
||||
<v-btn-toggle v-if="stepsReversed.length > 0" dense no-gutters style="flex-wrap: nowrap; width: 100%;" v-model="selectedCrossStep">
|
||||
<v-btn dense class="btnMinWidthAuto flex-grow-1 px-0" v-for="steps of stepsReversed" :key="'x-'+steps">
|
||||
<span class="body-2">{{ steps }}</span>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<div class="font-weight-bold warning rounded pa-2" v-else>
|
||||
Please configure steps<br>
|
||||
<router-link style="color: white;" to="/settings/interface">Settings > Interface > Control</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<!-- <template v-if="useCross">
|
||||
<v-row no-gutters>
|
||||
<v-col cols="9" class="mt-3 pb-0 text-center">
|
||||
<v-btn small @click="doQGL" :loading="loadings.includes('qgl')" color="primary" class="ml-2" v-if="'quad_gantry_level' in config">QGL</v-btn>
|
||||
<v-btn small @click="doZtilt" :loading="loadings.includes('zTilt')" color="primary" class="ml-2" v-if="'z_tilt' in config">Z Tilt</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 text-right">
|
||||
<v-btn @click="doHome"
|
||||
:loading="loadings.includes('homeAll')" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'"
|
||||
small
|
||||
width="75"
|
||||
>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<span class="ml-2">ALL</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Y-'+stepsReversed[selectedCrossStep], feedrateXY)">
|
||||
<v-icon>mdi-arrow-up-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0">
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Z'+(reverseZ ? '-' : '+')+stepsReversed[selectedCrossStep], feedrateZ)">
|
||||
<v-icon>mdi-arrow-up-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 d-flex justify-end align-center">
|
||||
<v-btn width="75"
|
||||
:loading="loadings.includes('homeX')"
|
||||
:color="homedAxes.includes('x') ? 'primary' : 'warning'"
|
||||
@click="doHomeX"
|
||||
small
|
||||
>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<v-spacer></v-spacer>
|
||||
<span class="ml-2">X</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('X-'+stepsReversed[selectedCrossStep], feedrateXY)">
|
||||
<v-icon>mdi-arrow-left-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
<div class="d-flex justify-center align-center fill-height">
|
||||
X/Y
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('X+'+stepsReversed[selectedCrossStep], feedrateXY)">
|
||||
<v-icon>mdi-arrow-right-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 text-center">
|
||||
<div class="fill-height d-flex justify-center align-center">
|
||||
Z
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 d-flex justify-end align-center">
|
||||
<v-btn width="75"
|
||||
:loading="loadings.includes('homeY')"
|
||||
:color="homedAxes.includes('y') ? 'primary' : 'warning'"
|
||||
@click="doHomeY"
|
||||
small
|
||||
>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<v-spacer></v-spacer>
|
||||
<span class="ml-2">Y</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Y+'+stepsReversed[selectedCrossStep], feedrateXY)">
|
||||
<v-icon>mdi-arrow-down-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="2" class="mt-3 pb-0 text-center">
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 text-center">
|
||||
<v-btn small
|
||||
class="btnMinWidthAuto"
|
||||
:width="crossWidth"
|
||||
:height="crossHeight"
|
||||
:disabled="selectedCrossStep === null || selectedCrossStep === undefined"
|
||||
@click="doSendMove('Z'+(reverseZ ? '+' : '-')+stepsReversed[selectedCrossStep], feedrateZ)">
|
||||
<v-icon>mdi-arrow-down-thick</v-icon>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-col cols="3" class="mt-3 pb-0 d-flex justify-end align-center">
|
||||
<v-btn width="75"
|
||||
:loading="loadings.includes('homeZ')"
|
||||
:color="homedAxes.includes('z') ? 'primary' : 'warning'"
|
||||
@click="doHomeZ"
|
||||
small
|
||||
>
|
||||
<v-icon>mdi-home</v-icon>
|
||||
<v-spacer></v-spacer>
|
||||
<span class="ml-2">Z</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col class="col-12 mt-3">
|
||||
<v-btn-toggle v-if="stepsReversed.length > 0" dense no-gutters style="flex-wrap: nowrap; width: 100%;" v-model="selectedCrossStep">
|
||||
<v-btn dense class="btnMinWidthAuto flex-grow-1 px-0" v-for="steps of stepsReversed" :key="'x-'+steps">
|
||||
<span class="body-2">{{ steps }}</span>
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<div class="font-weight-bold warning rounded pa-2" v-else>
|
||||
Please configure steps<br>
|
||||
<router-link style="color: white;" to="/settings/interface">Settings > Interface > Control</router-link>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>-->
|
||||
<template v-else>
|
||||
<v-row no-gutters>
|
||||
<v-col class="col-12 mt-3 pb-0 text-center">
|
||||
<v-btn small @click="doHome" :loading="loadings.includes('homeAll')" :color="homedAxes.includes('xyz') ? 'primary' : 'warning'"><v-icon class="mr-1">mdi-home</v-icon><span class="d-none d-sm-inline">Home </span>all</v-btn>
|
||||
<v-btn small @click="doQGL" :loading="loadings.includes('qgl')" color="primary" class="ml-2" v-if="'quad_gantry_level' in config">QGL</v-btn>
|
||||
<v-btn small @click="doZtilt" :loading="loadings.includes('zTilt')" color="primary" class="ml-2" v-if="'z_tilt' in config">Z Tilt</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-2">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('X-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'x-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeX" :color="homedAxes.includes('x') ? 'primary' : 'warning'" :loading="loadings.includes('homeX')" class="font-weight-bold btnHomeAxis">X</v-btn>
|
||||
<v-btn @click="doSendMove('X+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'x+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-3">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('Y-'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsorted" v-bind:key="'y-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeY" :color="homedAxes.includes('y') ? 'primary' : 'warning'" :loading="loadings.includes('homeY')" class="font-weight-bold btnHomeAxis">Y</v-btn>
|
||||
<v-btn @click="doSendMove('Y+'+steps, feedrateXY)" class="btnMinWidthAuto col" v-for="steps of stepsXYsortedReverse" v-bind:key="'y+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters class="mt-3">
|
||||
<v-col class="text-center">
|
||||
<v-btn-toggle dense no-gutters class="row no-gutters mx-auto" style="flex-wrap: nowrap;" >
|
||||
<v-btn @click="doSendMove('Z-'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsorted" v-bind:key="'z-'+steps"><span class="body-2">-{{ steps }}</span></v-btn>
|
||||
<v-btn @click="doHomeZ" :color="homedAxes.includes('z') ? 'primary' : 'warning'" :loading="loadings.includes('homeZ')" class="font-weight-bold btnHomeAxis">Z</v-btn>
|
||||
<v-btn @click="doSendMove('Z+'+steps, feedrateZ)" class="btnMinWidthAuto col" v-for="steps of stepsZsortedReverse" v-bind:key="'z+'+steps"><span class="body-2">+{{ steps }}</span></v-btn>
|
||||
</v-btn-toggle>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
</v-card>
|
||||
<v-card>
|
||||
<v-toolbar flat dense>
|
||||
<v-toolbar-title>
|
||||
<span class="subheading"><v-icon left>mdi-code-tags</v-icon>Macros</span>
|
||||
</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
<v-container>
|
||||
<v-row no-gutters v-if="this['printer/getMacros'].length > 0">
|
||||
<v-col class="text-center mr-fix-2 mb-fix-2">
|
||||
<v-btn v-for="(macro, index) in this['printer/getMacros']"
|
||||
:key="index+99"
|
||||
small
|
||||
color="primary"
|
||||
class="mr-2 mb-2"
|
||||
:loading="loadings.includes('macro_'+macro.name)"
|
||||
@click="doSendMacro(macro.name)">{{ macro.name.replace(/_/g, " ") }}</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -63,9 +411,11 @@
|
||||
components: {
|
||||
|
||||
},
|
||||
data: function() {
|
||||
data() {
|
||||
return {
|
||||
|
||||
crossWidth: 40,
|
||||
crossHeight: 40,
|
||||
homeCols: 6
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -79,10 +429,37 @@
|
||||
stepsXY: state => state.gui.dashboard.control.stepsXY,
|
||||
feedrateZ: state => state.gui.dashboard.control.feedrateZ,
|
||||
stepsZ: state => state.gui.dashboard.control.stepsZ,
|
||||
stepsAll: state => state.gui.dashboard.control.stepsAll,
|
||||
useCross: state => state.gui.dashboard.control.useCross,
|
||||
reverseZ: state => state.gui.dashboard.control.reverseZ,
|
||||
}),
|
||||
...mapGetters([
|
||||
'printer/getMacros',
|
||||
]),
|
||||
reverseZ: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.reverseZ;
|
||||
},
|
||||
set(reverseZ) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { reverseZ } } })
|
||||
}
|
||||
},
|
||||
useCross: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.useCross;
|
||||
},
|
||||
set(useCross) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { useCross } } })
|
||||
}
|
||||
},
|
||||
selectedCrossStep: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.selectedCrossStep;
|
||||
},
|
||||
set(selectedCrossStep) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { selectedCrossStep } } })
|
||||
}
|
||||
},
|
||||
stepsXYsorted: {
|
||||
get() {
|
||||
return [...this.$store.state.gui.dashboard.control.stepsXY].sort(function(a, b) { return b-a })
|
||||
@ -102,9 +479,37 @@
|
||||
get() {
|
||||
return [...this.$store.state.gui.dashboard.control.stepsZ].sort(function(a, b) { return a-b })
|
||||
}
|
||||
},
|
||||
steps: {
|
||||
get() {
|
||||
return Array.from(new Set([
|
||||
...(this.stepsAll ?? [])
|
||||
])).entries().sort((a, b) => b-a)
|
||||
}
|
||||
},
|
||||
stepsReversed: {
|
||||
get() {
|
||||
return Array.from(new Set([
|
||||
...(this.stepsAll ?? []),
|
||||
])).sort((a, b) => a-b)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.onResize);
|
||||
},
|
||||
mounted() {
|
||||
if (window.screen.width < 330) {
|
||||
this.homeCols = 12;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
},
|
||||
methods: {
|
||||
onResize() {
|
||||
this.homeCols = window.screen.width < 360 ? 12 : 6;
|
||||
},
|
||||
doHome() {
|
||||
this.$store.commit('server/addEvent', { message: "G28", type: 'command' });
|
||||
this.$store.commit('socket/addLoading', { name: 'homeAll' });
|
||||
@ -153,4 +558,4 @@
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -43,42 +43,75 @@
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
label="Move distances XY in mm"
|
||||
v-model="stepsXY"
|
||||
hide-selected
|
||||
hide-details="auto"
|
||||
multiple
|
||||
small-chips
|
||||
:deletable-chips="true"
|
||||
append-icon=""
|
||||
type="number"
|
||||
:rules="[
|
||||
v => v.length > 0 || 'Minimum 1 value',
|
||||
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
|
||||
]"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
label="Move distances Z in mm"
|
||||
v-model="stepsZ"
|
||||
hide-selected
|
||||
hide-details="auto"
|
||||
multiple
|
||||
small-chips
|
||||
:deletable-chips="true"
|
||||
append-icon=""
|
||||
type="number"
|
||||
:rules="[
|
||||
v => v.length > 0 || 'Minimum 1 value',
|
||||
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
|
||||
]"
|
||||
></v-combobox>
|
||||
<v-switch v-model="useCross" label="Enable movement cross"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<template v-if="useCross">
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
label="Move distances in mm"
|
||||
v-model="stepsAll"
|
||||
hide-selected
|
||||
hide-details="auto"
|
||||
multiple
|
||||
small-chips
|
||||
:deletable-chips="true"
|
||||
append-icon=""
|
||||
type="number"
|
||||
:rules="[
|
||||
v => v.length > 0 || 'Minimum 1 value',
|
||||
v => v.length < 9 || 'For narrow screens it is recommended to enter max. 3 values.',
|
||||
]"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-switch v-model="reverseZ" label="Reverse Z movement"></v-switch>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<template v-else>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
label="Move distances XY in mm"
|
||||
v-model="stepsXY"
|
||||
hide-selected
|
||||
hide-details="auto"
|
||||
multiple
|
||||
small-chips
|
||||
:deletable-chips="true"
|
||||
append-icon=""
|
||||
type="number"
|
||||
:rules="[
|
||||
v => v.length > 0 || 'Minimum 1 value',
|
||||
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
|
||||
]"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-combobox
|
||||
label="Move distances Z in mm"
|
||||
v-model="stepsZ"
|
||||
hide-selected
|
||||
hide-details="auto"
|
||||
multiple
|
||||
small-chips
|
||||
:deletable-chips="true"
|
||||
append-icon=""
|
||||
type="number"
|
||||
:rules="[
|
||||
v => v.length > 0 || 'Minimum 1 value',
|
||||
v => v.length < 4 || 'For narrow screens it is recommended to enter max. 3 values.',
|
||||
]"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -145,6 +178,22 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
reverseZ: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.reverseZ;
|
||||
},
|
||||
set(reverseZ) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { reverseZ } } })
|
||||
}
|
||||
},
|
||||
useCross: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.useCross;
|
||||
},
|
||||
set(useCross) {
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { useCross } } })
|
||||
}
|
||||
},
|
||||
feedrateXY: {
|
||||
get() {
|
||||
return this.$store.state.gui.dashboard.control.feedrateXY
|
||||
@ -153,6 +202,17 @@
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { feedrateXY: feedrate } } })
|
||||
}
|
||||
},
|
||||
stepsAll: {
|
||||
get() {
|
||||
const steps = this.$store.state.gui.dashboard.control.stepsAll
|
||||
return (steps ?? []).sort(function (a,b) { return b-a })
|
||||
},
|
||||
set(steps) {
|
||||
const absSteps = []
|
||||
for(const value of steps) absSteps.push(Math.abs(value))
|
||||
return this.$store.dispatch('gui/setSettings', { dashboard: { control: { stepsAll: absSteps } } })
|
||||
}
|
||||
},
|
||||
stepsXY: {
|
||||
get() {
|
||||
const steps = this.$store.state.gui.dashboard.control.stepsXY
|
||||
@ -218,4 +278,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -18,6 +18,10 @@ export function getDefaultState() {
|
||||
stepsXY: [ 100, 10, 1 ],
|
||||
feedrateZ: 25,
|
||||
stepsZ: [ 25, 1, 0.1 ],
|
||||
stepsAll: [0.1, 1, 10, 25, 50, 100],
|
||||
selectedCrossStep: null,
|
||||
reverseZ: false,
|
||||
useCross: false
|
||||
},
|
||||
extruder: {
|
||||
feedamount: 25,
|
||||
@ -75,4 +79,4 @@ export default {
|
||||
getters,
|
||||
actions,
|
||||
mutations
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user