From a861e74183601701c98b6014066472f86b23e3d5 Mon Sep 17 00:00:00 2001
From: Eike Ahmels <eike.ahmels@tu-dortmund.de>
Date: Wed, 3 Mar 2021 20:36:17 +0100
Subject: [PATCH] new first beta of control pad

---
 src/App.vue                                   |   1 +
 src/assets/styles/page.scss                   |  10 +
 src/components/panels/ControlPanel.vue        | 322 +++++++++++++++---
 .../panels/Settings/ControlPanel.vue          | 130 +++++--
 src/store/gui/index.js                        |   6 +-
 5 files changed, 383 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/styles/page.scss

diff --git a/src/App.vue b/src/App.vue
index 159ec50f..28fbe3d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <style>
     @import './assets/styles/fonts.css';
     @import './assets/styles/toastr.css';
+    @import './assets/styles/page.scss';
 
     .button-min-width-auto {
         min-width: auto !important;
diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss
new file mode 100644
index 00000000..56113e3f
--- /dev/null
+++ b/src/assets/styles/page.scss
@@ -0,0 +1,10 @@
+.fill-width {
+  width: 100%;
+}
+
+.mb-fix-2 {
+  margin-bottom: -8px!important;
+}
+.mr-fix-2 {
+  margin-right: -8px!important;
+}
diff --git a/src/components/panels/ControlPanel.vue b/src/components/panels/ControlPanel.vue
index f8ae2733..eba35076 100644
--- a/src/components/panels/ControlPanel.vue
+++ b/src/components/panels/ControlPanel.vue
@@ -1,58 +1,252 @@
-<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>
+    <div>
+        <v-card class="d-flex mb-4">
+            <v-container class="pt-0" style="max-width: 350px;">
+                <template v-if="['standby', 'paused', 'complete', 'error'].includes(printer_state)">
+                    <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-btn small :width="crossWidth" :height="crossHeight">
+                                    <v-icon>mdi-arrow-top-left-thick</v-icon>
+                                </v-btn>-->
+                            </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-btn small class="mr-4" :width="crossWidth" :height="crossHeight">
+                                    <v-icon>mdi-arrow-top-right-thick</v-icon>
+                                </v-btn>-->
+                            </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">
+    <!--                            <v-btn small :width="crossWidth" :height="crossHeight" :loading="loadings.includes('xy')"  :color="homedAxes.includes('xy') ? 'primary' : 'warning'" @click="doHome">
+                                    <v-icon>mdi-home</v-icon>
+                                </v-btn>-->
+                                <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">
+    <!--                            <v-btn small :width="crossWidth" :height="crossHeight">
+                                    <v-icon>mdi-home</v-icon>
+                                </v-btn>-->
+                                <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-btn small :width="crossWidth" :height="crossHeight">
+                                    <v-icon>mdi-arrow-bottom-left-thick</v-icon>
+                                </v-btn>-->
+                            </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-btn small :width="crossWidth" :height="crossHeight">
+                                    <v-icon>mdi-arrow-bottom-right-thick</v-icon>
+                                </v-btn>-->
+                            </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>
+                </template>
+            </v-container>
+        </v-card>
+        <v-card class="d-flex align-center pa-2">
             <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 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>
+        </v-card>
+    </div>
 </template>
 
 <script>
@@ -63,9 +257,10 @@
         components: {
 
         },
-        data: function() {
+        data() {
             return {
-
+                crossWidth: 40,
+                crossHeight: 40
             }
         },
         computed: {
@@ -79,10 +274,21 @@
                 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',
             ]),
+            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,8 +308,24 @@
                 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)
+                }
             }
         },
+        mounted() {
+        },
         methods: {
             doHome() {
                 this.$store.commit('server/addEvent', { message: "G28", type: 'command' });
@@ -153,4 +375,4 @@
             },
         },
     }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/panels/Settings/ControlPanel.vue b/src/components/panels/Settings/ControlPanel.vue
index fa97423f..50395444 100644
--- a/src/components/panels/Settings/ControlPanel.vue
+++ b/src/components/panels/Settings/ControlPanel.vue
@@ -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>
\ No newline at end of file
+</script>
diff --git a/src/store/gui/index.js b/src/store/gui/index.js
index 9ea8da63..8487a10e 100644
--- a/src/store/gui/index.js
+++ b/src/store/gui/index.js
@@ -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
-}
\ No newline at end of file
+}