feat: add manual_probe helper dialog

src/App.vue

@@ -39,6 +39,7 @@
             <the-timelapse-rendering-snackbar></the-timelapse-rendering-snackbar>
             <the-fullscreen-upload></the-fullscreen-upload>
             <the-upload-snackbar></the-upload-snackbar>
+            <the-manual-probe-dialog />
         </template>
         <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'"></the-select-printer-dialog>
         <the-connecting-dialog v-else></the-connecting-dialog>
@@ -59,6 +60,7 @@ import { panelToolbarHeight, topbarHeight, navigationItemHeight } from '@/store/
 import TheTimelapseRenderingSnackbar from '@/components/TheTimelapseRenderingSnackbar.vue'
 import TheFullscreenUpload from '@/components/TheFullscreenUpload.vue'
 import TheUploadSnackbar from '@/components/TheUploadSnackbar.vue'
+import TheManualProbeDialog from '@/components/dialogs/TheManualProbeDialog.vue'
 
 @Component({
     components: {
@@ -71,6 +73,7 @@ import TheUploadSnackbar from '@/components/TheUploadSnackbar.vue'
         TheSidebar,
         TheFullscreenUpload,
         TheUploadSnackbar,
+        TheManualProbeDialog,
     },
     metaInfo() {
         const title = this.$store.getters['getTitle']

src/components/dialogs/TheManualProbeDialog.vue

@@ -0,0 +1,222 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent :fullscreen="isMobile">
+        <panel
+            :title="$t('ManualProbe.Headline').toString()"
+            :icon="mdiArrowCollapseDown"
+            card-class="manual_probe-dialog"
+            :margin-bottom="false"
+            style="overflow: hidden"
+            :height="isMobile ? 0 : 548">
+            <template #buttons>
+                <v-btn icon tile @click="sendAbort">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-container>
+                <v-row>
+                    <v-col class="d-flex align-center justify-center">
+                        <span class="text-h5">{{ z_position_lower }}</span>
+                        <v-icon class="mx-2">{{ mdiChevronTripleRight }}</v-icon>
+                        <span class="text-h4">{{ z_position }}</span>
+                        <v-icon class="mx-2">{{ mdiChevronTripleLeft }}</v-icon>
+                        <span class="text-h5">{{ z_position_upper }}</span>
+                    </v-col>
+                </v-row>
+                <v-row>
+                    <v-col class="text-left">
+                        <v-btn class="" color="primary" @click="sendTestZ('--')">
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-left">
+                        <v-btn class="" color="primary" @click="sendTestZ('-')">
+                            <v-icon small>{{ mdiMinusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-right">
+                        <v-btn class="" color="primary" @click="sendTestZ('+')">
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                    <v-col class="text-right">
+                        <v-btn class="" color="primary" @click="sendTestZ('++')">
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                            <v-icon small>{{ mdiPlusThick }}</v-icon>
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-container>
+            <sub-panel :title="$t('ManualProbe.Advanced')" sub-panel-class="manual-probe-dialog-advanced" class="mb-n2">
+                <v-container>
+                    <v-item-group class="_btn-group">
+                        <v-btn
+                            v-for="(offset, index) in offsetsZ"
+                            :key="`offsetsUp-${index}`"
+                            small
+                            class="_btn-qs flex-grow-1 px-1"
+                            @click="sendTestZ(offset.toString())">
+                            <v-icon v-if="index === 0" left small class="mr-1 ml-n1">
+                                {{ mdiArrowExpandUp }}
+                            </v-icon>
+                            <span>&plus;{{ offset }}</span>
+                        </v-btn>
+                    </v-item-group>
+                    <v-item-group class="_btn-group mt-3">
+                        <v-btn
+                            v-for="(offset, index) in offsetsZ"
+                            :key="`offsetsDown-${index}`"
+                            small
+                            class="_btn-qs flex-grow-1 px-1"
+                            @click="sendTestZ((offset * -1).toString())">
+                            <v-icon v-if="index === 0" left small class="mr-1 ml-n1">
+                                {{ mdiArrowCollapseDown }}
+                            </v-icon>
+                            <span>&minus;{{ offset }}</span>
+                        </v-btn>
+                    </v-item-group>
+                </v-container>
+            </sub-panel>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn text :loading="loadingAbort" @click="sendAbort">
+                    {{ $t('ManualProbe.Abort') }}
+                </v-btn>
+                <v-btn color="primary" text :loading="loadingAccept" @click="sendAccept">
+                    {{ $t('ManualProbe.Accept') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+
+import {
+    mdiArrowCollapseDown,
+    mdiArrowExpandUp,
+    mdiInformation,
+    mdiPlusThick,
+    mdiMinusThick,
+    mdiChevronTripleLeft,
+    mdiChevronTripleRight,
+    mdiCloseThick,
+} from '@mdi/js'
+@Component({
+    components: { Panel, Responsive },
+})
+export default class TheManualProbeDialog extends Mixins(BaseMixin) {
+    mdiArrowCollapseDown = mdiArrowCollapseDown
+    mdiArrowExpandUp = mdiArrowExpandUp
+    mdiInformation = mdiInformation
+    mdiPlusThick = mdiPlusThick
+    mdiMinusThick = mdiMinusThick
+    mdiChevronTripleLeft = mdiChevronTripleLeft
+    mdiChevronTripleRight = mdiChevronTripleRight
+    mdiCloseThick = mdiCloseThick
+
+    get showDialog() {
+        return this.$store.state.printer.manual_probe?.is_active ?? false
+    }
+
+    get offsetsZ() {
+        const offsets = [1, 0.1, 0.05, 0.01, 0.005]
+
+        return offsets.sort()
+    }
+
+    get z_position() {
+        return (this.$store.state.printer.manual_probe?.z_position ?? 0).toFixed(3)
+    }
+
+    get z_position_lower() {
+        const value = this.$store.state.printer.manual_probe?.z_position_lower
+        if (value === null) return '??????'
+
+        return value.toFixed(3)
+    }
+
+    get z_position_upper() {
+        const value = this.$store.state.printer.manual_probe?.z_position_upper
+        if (value === null) return '??????'
+
+        return value.toFixed(3)
+    }
+
+    get loadingAbort() {
+        return this.loadings.includes('manualProbeAbort')
+    }
+
+    get loadingAccept() {
+        return this.loadings.includes('manualProbeAccept')
+    }
+
+    sendTestZ(offset: string) {
+        const gcode = `TESTZ Z=${offset}`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+
+    sendAbort() {
+        const gcode = `ABORT`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAbort' })
+    }
+
+    sendAccept() {
+        const gcode = `ACCEPT`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'manualProbeAccept' })
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.v-btn-toggle {
+    width: 100%;
+}
+
+._btn-group {
+    border-radius: 4px;
+    display: inline-flex;
+    flex-wrap: nowrap;
+    max-width: 100%;
+    min-width: 100%;
+    width: 100%;
+
+    .v-btn {
+        border-radius: 0;
+        border-color: rgba(255, 255, 255, 0.12) !important;
+        border-style: solid;
+        border-width: thin;
+        box-shadow: none;
+        height: 28px;
+        opacity: 0.8;
+        min-width: auto !important;
+    }
+
+    .v-btn:first-child {
+        border-top-left-radius: inherit;
+        border-bottom-left-radius: inherit;
+    }
+
+    .v-btn:last-child {
+        border-top-right-radius: inherit;
+        border-bottom-right-radius: inherit;
+    }
+
+    .v-btn:not(:first-child) {
+        border-left-width: 0;
+    }
+}
+
+._btn-qs {
+    font-size: 0.8rem !important;
+    font-weight: 400;
+    max-height: 28px;
+}
+</style>

src/locales/de.json

@@ -458,6 +458,12 @@
             "UpToDate": "aktuell"
         }
     },
+    "ManualProbe": {
+        "Abort": "abbrechen",
+        "Accept": "akzeptieren",
+        "Advanced": "Erweitert",
+        "Headline": "Manuelle Messung"
+    },
     "Panels": {
         "ExtruderControlPanel": {
             "Allowed": "Erlaubt",

src/locales/en.json

@@ -458,6 +458,12 @@
             "UpToDate": "up-to-date"
         }
     },
+    "ManualProbe": {
+        "Abort": "abort",
+        "Accept": "accept",
+        "Advanced": "Advanced",
+        "Headline": "Manual Probe"
+    },
     "Panels": {
         "ExtruderControlPanel": {
             "Allowed": "Allowed",