From f15cf899c12aa1459db162af944dec50673a83cc Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 26 Nov 2021 22:53:02 +0100
Subject: [PATCH 1/5] fix: return i18n panel name if it contains dashes

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/mixins/dashboard.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/mixins/dashboard.ts b/src/components/mixins/dashboard.ts
index 2ce02768b..0f7804422 100644
--- a/src/components/mixins/dashboard.ts
+++ b/src/components/mixins/dashboard.ts
@@ -82,6 +82,13 @@ export default class DashboardMixin extends BaseMixin {
             return (group) ? group.name : 'Macrogroup'
         }
 
-        return this.$t('Panels.'+capitalize(name)+'Panel.Headline')
+        if (name.includes('-')) {
+            let panelName = ''
+            const subStrings = name.split('-')
+            subStrings.forEach((subStr) => {panelName += capitalize(subStr)})
+            return this.$t('Panels.' + panelName + 'Panel.Headline')
+        }
+
+        return this.$t('Panels.' + capitalize(name) + 'Panel.Headline')
     }
 }
\ No newline at end of file

From 4ee55e56d053dc8508d276f5e50925a849ec4d9f Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 26 Nov 2021 22:59:00 +0100
Subject: [PATCH 2/5] feat: machine settings panel on dashboard * support for
 motion setting input * replaces previous machine limits panel on machine page

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 ...imitsInput.vue => MotionSettingsInput.vue} |  2 +-
 src/components/panels/Machine/LimitsPanel.vue | 91 ------------------
 .../MachineSettings/MachineSettingsPanel.vue  | 25 +++++
 .../panels/MachineSettings/MotionSettings.vue | 93 +++++++++++++++++++
 src/locales/en.json                           | 16 ++--
 src/pages/Dashboard.vue                       | 38 ++++----
 src/pages/Machine.vue                         | 11 ++-
 src/plugins/helpers.ts                        |  1 +
 src/store/gui/index.ts                        |  4 +
 src/store/variables.ts                        |  1 +
 10 files changed, 162 insertions(+), 120 deletions(-)
 rename src/components/inputs/{MachineLimitsInput.vue => MotionSettingsInput.vue} (96%)
 delete mode 100644 src/components/panels/Machine/LimitsPanel.vue
 create mode 100644 src/components/panels/MachineSettings/MachineSettingsPanel.vue
 create mode 100644 src/components/panels/MachineSettings/MotionSettings.vue

diff --git a/src/components/inputs/MachineLimitsInput.vue b/src/components/inputs/MotionSettingsInput.vue
similarity index 96%
rename from src/components/inputs/MachineLimitsInput.vue
rename to src/components/inputs/MotionSettingsInput.vue
index 8b835b2c6..54893ff06 100644
--- a/src/components/inputs/MachineLimitsInput.vue
+++ b/src/components/inputs/MotionSettingsInput.vue
@@ -25,7 +25,7 @@ import {Mixins, Prop, Watch} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 
 @Component
-export default class MachineLimitsInput extends Mixins(BaseMixin) {
+export default class MotionSettingsInput extends Mixins(BaseMixin) {
     private value: any = 0
 
     @Prop({ type: String, required: true }) readonly label!: string
diff --git a/src/components/panels/Machine/LimitsPanel.vue b/src/components/panels/Machine/LimitsPanel.vue
deleted file mode 100644
index 2ee1bb41b..000000000
--- a/src/components/panels/Machine/LimitsPanel.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <panel :title="$t('Machine.LimitsPanel.MachineLimits')" v-if="klipperReadyForGui" icon="mdi-speedometer" card-class="machine-machinelimits-panel" :collapsible="true">
-        <v-card-text>
-            <v-row>
-                <v-col class="col-6">
-                    <machine-limits-input
-                        :label="$t('Machine.LimitsPanel.Velocity')"
-                        :target="current_velocity"
-                        :max="max_velocity"
-                        :default-value="max_velocity"
-                        unit="mm/s"
-                        attribute-name="VELOCITY"
-                    ></machine-limits-input>
-                </v-col>
-                <v-col class="col-6">
-                    <machine-limits-input
-                        :label="$t('Machine.LimitsPanel.SquareCornerVelocity')"
-                        :target="current_square_corner_velocity"
-                        :max="max_square_corner_velocity"
-                        :default-value="max_square_corner_velocity"
-                        unit="mm/s"
-                        attribute-name="SQUARE_CORNER_VELOCITY"
-                    ></machine-limits-input>
-                </v-col>
-            </v-row>
-            <v-row>
-                <v-col class="col-6">
-                    <machine-limits-input
-                        :label="$t('Machine.LimitsPanel.Acceleration')"
-                        :target="current_accel"
-                        :max="max_accel"
-                        :default-value="max_accel"
-                        unit="mm/s²"
-                        attribute-name="ACCEL"
-                    ></machine-limits-input>
-                </v-col>
-                <v-col class="col-6">
-                    <machine-limits-input
-                        :label="$t('Machine.LimitsPanel.Deceleration')"
-                        :target="current_accel_to_decel"
-                        :max="max_accel_to_decel"
-                        :default-value="max_accel_to_decel"
-                        unit="mm/s²"
-                        attribute-name="ACCEL_TO_DECEL"
-                    ></machine-limits-input>
-                </v-col>
-            </v-row>
-        </v-card-text>
-    </panel>
-</template>
-
-<script>
-
-
-import { Component, Mixins } from 'vue-property-decorator'
-import BaseMixin from '@/components/mixins/base.ts'
-import ToolSlider from '@/components/inputs/ToolSlider'
-import MachineLimitsInput from '@/components/inputs/MachineLimitsInput'
-import Panel from '@/components/ui/Panel'
-@Component({
-    components: {Panel, MachineLimitsInput, ToolSlider}
-})
-export default class LimitsPanel extends Mixins(BaseMixin) {
-    
-    get current_velocity() {
-        return this.$store.state.printer?.toolhead?.max_velocity ?? 300
-    }
-    get current_accel() {
-        return this.$store.state.printer?.toolhead?.max_accel ?? 3000
-    }
-    get current_accel_to_decel() {
-        return this.$store.state.printer?.toolhead?.max_accel_to_decel ?? 1500
-    }
-    get current_square_corner_velocity() {
-        return this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8
-    }
-    
-    get max_velocity() {
-        return this.$store.state.printer?.configfile?.settings?.printer?.max_velocity ?? 300
-    }
-    get max_accel() {
-        return this.$store.state.printer?.configfile?.settings?.printer?.max_accel ?? 3000
-    }
-    get max_accel_to_decel() {
-        return this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500
-    }
-    get max_square_corner_velocity() {
-        return this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8
-    }
-}
-</script>
diff --git a/src/components/panels/MachineSettings/MachineSettingsPanel.vue b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
new file mode 100644
index 000000000..c6e36c230
--- /dev/null
+++ b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
@@ -0,0 +1,25 @@
+<template>
+    <panel
+        v-if="klipperReadyForGui"
+        icon="mdi-engine"
+        :title="$t('Panels.MachineSettingsPanel.Headline')"
+        :collapsible="true"
+        card-class="machine-settings-panel"
+    >
+        <motion-settings></motion-settings>
+    </panel>
+</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 MotionSettings from '@/components/panels/MachineSettings/MotionSettings.vue'
+
+@Component({
+    components: {Panel, MotionSettings}
+})
+export default class MachineSettingsPanel extends Mixins(BaseMixin) {
+
+}
+</script>
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
new file mode 100644
index 000000000..7b250cdff
--- /dev/null
+++ b/src/components/panels/MachineSettings/MotionSettings.vue
@@ -0,0 +1,93 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="col-6">
+                <motion-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
+                    :target="current_velocity"
+                    :max="max_velocity"
+                    :default-value="max_velocity"
+                    unit="mm/s"
+                    attribute-name="VELOCITY"
+                ></motion-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <motion-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
+                    :target="current_square_corner_velocity"
+                    :max="max_square_corner_velocity"
+                    :default-value="max_square_corner_velocity"
+                    unit="mm/s"
+                    attribute-name="SQUARE_CORNER_VELOCITY"
+                ></motion-settings-input>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col class="col-6">
+                <motion-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
+                    :target="current_accel"
+                    :max="max_accel"
+                    :default-value="max_accel"
+                    unit="mm/s²"
+                    attribute-name="ACCEL"
+                ></motion-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <motion-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.MotionSettings.Deceleration')"
+                    :target="current_accel_to_decel"
+                    :max="max_accel_to_decel"
+                    :default-value="max_accel_to_decel"
+                    unit="mm/s²"
+                    attribute-name="ACCEL_TO_DECEL"
+                ></motion-settings-input>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</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 MotionSettingsInput from '@/components/inputs/MotionSettingsInput.vue'
+
+@Component({
+    components: {Panel, MotionSettingsInput}
+})
+export default class MotionSettings extends Mixins(BaseMixin) {
+    
+    get current_velocity() {
+        return this.$store.state.printer?.toolhead?.max_velocity ?? 300
+    }
+
+    get current_accel() {
+        return this.$store.state.printer?.toolhead?.max_accel ?? 3000
+    }
+
+    get current_accel_to_decel() {
+        return this.$store.state.printer?.toolhead?.max_accel_to_decel ?? 1500
+    }
+
+    get current_square_corner_velocity() {
+        return this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8
+    }
+    
+    get max_velocity() {
+        return this.$store.state.printer?.configfile?.settings?.printer?.max_velocity ?? 300
+    }
+
+    get max_accel() {
+        return this.$store.state.printer?.configfile?.settings?.printer?.max_accel ?? 3000
+    }
+
+    get max_accel_to_decel() {
+        return this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500
+    }
+
+    get max_square_corner_velocity() {
+        return this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8
+    }
+}
+</script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 02ab18256..46908c1d7 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -367,6 +367,15 @@
       "DeprecatedOption": "Option '{option}' in section '{section}' is deprecated and will be removed in a future release.",
       "DeprecatedValue": "Value '{value}' in option '{option}' in section '{section}' is deprecated and will be removed in a future release."
     },
+    "MachineSettingsPanel": {
+      "Headline": "Machine Settings",
+      "MotionSettings": {
+        "Velocity": "Velocity",
+        "Acceleration": "Acceleration",
+        "Deceleration": "Deceleration",
+        "SquareCornerVelocity": "Square Corner Velocity"
+      }
+    },
     "MiniconsolePanel": {
       "Headline": "Console",
       "SetupConsole": "Setup Console",
@@ -528,13 +537,6 @@
       "open": "OPEN",
       "EndstopInfo": "Press the sync-button on the right-bottom to load the current endstop status."
     },
-    "LimitsPanel": {
-      "MachineLimits": "Machine Limits",
-      "Velocity": "Velocity",
-      "Acceleration": "Acceleration",
-      "Deceleration": "Deceleration",
-      "SquareCornerVelocity": "Square corner velocity"
-    },
     "LogfilesPanel": {
       "Logfiles": "Logfiles"
     },
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 99d984915..8466afd05 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -59,36 +59,38 @@
 
 import Component from 'vue-class-component'
 import {Mixins} from 'vue-property-decorator'
-import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
+import ControlPanel from '@/components/panels/ControlPanel.vue'
+import DashboardMixin from '@/components/mixins/dashboard'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
+import MachineSettingsPanel from '@/components/panels/MachineSettings/MachineSettingsPanel.vue'
+import MacrogroupPanel from '@/components/panels/MacrogroupPanel.vue'
+import MacrosPanel from '@/components/panels/MacrosPanel.vue'
+import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'
+import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
+import MiscellaneousPanel from '@/components/panels/MiscellaneousPanel.vue'
 import MoonrakerStatePanel from '@/components/panels/MoonrakerStatePanel.vue'
+import PrintsettingsPanel from '@/components/panels/PrintsettingsPanel.vue'
 import StatusPanel from '@/components/panels/StatusPanel.vue'
 import ToolsPanel from '@/components/panels/ToolsPanel.vue'
 import WebcamPanel from '@/components/panels/WebcamPanel.vue'
 import ZoffsetPanel from '@/components/panels/ZoffsetPanel.vue'
-import ControlPanel from '@/components/panels/ControlPanel.vue'
-import MacrosPanel from '@/components/panels/MacrosPanel.vue'
-import MacrogroupPanel from '@/components/panels/MacrogroupPanel.vue'
-import MiscellaneousPanel from '@/components/panels/MiscellaneousPanel.vue'
-import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'
-import PrintsettingsPanel from '@/components/panels/PrintsettingsPanel.vue'
-import DashboardMixin from '@/components/mixins/dashboard'
 
 @Component({
     components: {
-        PrintsettingsPanel,
-        MiniconsolePanel,
-        MiscellaneousPanel,
         ControlPanel,
-        MacrosPanel,
+        KlippyStatePanel,
+        MachineSettingsPanel,
         MacrogroupPanel,
-        ZoffsetPanel,
-        WebcamPanel,
-        ToolsPanel,
-        StatusPanel,
+        MacrosPanel,
+        MiniconsolePanel,
+        MinSettingsPanel,
+        MiscellaneousPanel,
         MoonrakerStatePanel,
-        KlippyStatePanel,
-        MinSettingsPanel
+        PrintsettingsPanel,
+        StatusPanel,
+        ToolsPanel,
+        WebcamPanel,
+        ZoffsetPanel
     }
 })
 export default class PageDashboard extends Mixins(DashboardMixin) {
diff --git a/src/pages/Machine.vue b/src/pages/Machine.vue
index dde575417..a1b02028a 100644
--- a/src/pages/Machine.vue
+++ b/src/pages/Machine.vue
@@ -6,7 +6,6 @@
             </v-col>
             <v-col class="col-12 col-md-6 pt-0 pt-md-3">
                 <klippy-state-panel></klippy-state-panel>
-                <limits-panel></limits-panel>
                 <system-panel></system-panel>
                 <update-panel></update-panel>
                 <v-row>
@@ -26,14 +25,20 @@
 import {Component, Mixins} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
-import LimitsPanel from '@/components/panels/Machine/LimitsPanel.vue'
 import UpdatePanel from '@/components/panels/Machine/UpdatePanel.vue'
 import LogfilesPanel from '@/components/panels/Machine/LogfilesPanel.vue'
 import EndstopPanel from '@/components/panels/Machine/EndstopPanel.vue'
 import ConfigFilesPanel from '@/components/panels/Machine/ConfigFilesPanel.vue'
 import SystemPanel from '@/components/panels/Machine/SystemPanel.vue'
 @Component({
-    components: {SystemPanel, ConfigFilesPanel, EndstopPanel, LogfilesPanel, UpdatePanel, LimitsPanel, KlippyStatePanel}
+    components: {
+        SystemPanel,
+        ConfigFilesPanel,
+        EndstopPanel,
+        LogfilesPanel,
+        UpdatePanel,
+        KlippyStatePanel
+    }
 })
 export default class PageMachine extends Mixins(BaseMixin) {
 
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index e36ab7856..cc64bb33a 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -46,6 +46,7 @@ export const convertPanelnameToIcon = (name: string): string => {
     case 'miscellaneous': return 'mdi-dip-switch'
     case 'tools': return 'mdi-thermometer-lines'
     case 'miniconsole': return 'mdi-console-line'
+    case 'machine-settings': return 'mdi-engine'
 
     default: return 'mdi-information'
     }
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index e85d3fad0..534c06844 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -64,6 +64,7 @@ export const getDefaultState = (): GuiState => {
                 { 'name': 'control', visable: true },
                 { 'name': 'macros', visable: true },
                 { 'name': 'printsettings', visable: true },
+                { 'name': 'machine-settings', visable: true },
                 { 'name': 'miscellaneous', visable: true },
                 { 'name': 'tools', visable: true },
                 { 'name': 'miniconsole', visable: false },
@@ -74,6 +75,7 @@ export const getDefaultState = (): GuiState => {
                 { 'name': 'control', visable: true  },
                 { 'name': 'macros', visable: true },
                 { 'name': 'printsettings', visable: true  },
+                { 'name': 'machine-settings', visable: true },
                 { 'name': 'miscellaneous', visable: true  },
             ],
             tabletLayout2: [
@@ -86,6 +88,7 @@ export const getDefaultState = (): GuiState => {
                 { 'name': 'control', visable: true },
                 { 'name': 'macros', visable: true },
                 { 'name': 'printsettings', visable: true },
+                { 'name': 'machine-settings', visable: true },
                 { 'name': 'miscellaneous', visable: true },
             ],
             desktopLayout2: [
@@ -101,6 +104,7 @@ export const getDefaultState = (): GuiState => {
             widescreenLayout2: [
                 { 'name': 'tools', visable: true },
                 { 'name': 'printsettings', visable: true },
+                { 'name': 'machine-settings', visable: true },
             ],
             widescreenLayout3: [
                 { 'name': 'webcam', visable: true },
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 1f59edd44..7a3ac5476 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -83,6 +83,7 @@ export const maxEventHistory = 500
 export const allDashboardPanels = [
     'control',
     'macros',
+    'machine-settings',
     'miniconsole',
     'miscellaneous',
     'printsettings',

From d8e324313df1c11f8a3a256517304bc40429043f Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 26 Nov 2021 23:14:50 +0100
Subject: [PATCH 3/5] fix: no upper limit for input

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/inputs/MotionSettingsInput.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/inputs/MotionSettingsInput.vue b/src/components/inputs/MotionSettingsInput.vue
index 54893ff06..27b7148dc 100644
--- a/src/components/inputs/MotionSettingsInput.vue
+++ b/src/components/inputs/MotionSettingsInput.vue
@@ -12,7 +12,8 @@
             outlined
             dense
             :append-icon="this.value !== this.defaultValue ? 'mdi-refresh' : ''"
-            :error="this.value > this.defaultValue"
+            :error="this.value <= 0"
+            min="1"
             @click:append="resetLimit"
             hide-details
         ></v-text-field>

From 13c68e81c3d868c53f5ce17b865d73d1390eb373 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sat, 27 Nov 2021 11:30:10 +0100
Subject: [PATCH 4/5] feat: collapsible sub panels

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/ui/SubPanel.vue | 56 ++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/ui/SubPanel.vue

diff --git a/src/components/ui/SubPanel.vue b/src/components/ui/SubPanel.vue
new file mode 100644
index 000000000..fc5eb8ac2
--- /dev/null
+++ b/src/components/ui/SubPanel.vue
@@ -0,0 +1,56 @@
+<style lang="scss" scoped>
+    .btn-collapsible i::before {
+        transition: transform 500ms;
+    }
+
+    .icon-rotate-180:before {
+        transform: rotate(180deg);
+    }
+</style>
+
+<template>
+    <div>
+        <v-card-actions>
+            <v-btn
+                @click="expand = !expand"
+                class="btn-collapsible"
+                plain
+                small
+            >
+                <v-icon small :class="(!expand ? 'icon-rotate-180' : '')">{{ expand ? iconExpanded : iconCollapsed }}</v-icon>
+                <span class="pl-1">{{ title }}</span>
+            </v-btn>
+            <v-divider class="mx-1"></v-divider>
+        </v-card-actions>
+        <v-expand-transition>
+            <div v-show="expand">
+                <slot></slot>
+            </div>
+        </v-expand-transition>
+    </div>
+</template>
+
+<script lang="ts">
+
+import Component from 'vue-class-component'
+import {Mixins, Prop} from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+
+export default class Panel extends Mixins(BaseMixin) {
+
+    @Prop({ required: false, default: 'mdi-minus' }) readonly iconExpanded!: string | null
+    @Prop({ required: false, default: 'mdi-plus' }) readonly iconCollapsed!: string | null
+    @Prop({ required: true, default: '' }) readonly title!: string
+    @Prop({ required: true }) readonly subPanelClass!: string
+
+    get expand() {
+        return this.$store.getters['gui/getPanelExpand'](this.subPanelClass)
+    }
+
+    set expand(newVal) {
+        this.$store.dispatch('gui/saveExpandPanel', { name: this.subPanelClass, value: newVal })
+    }
+}
+</script>
\ No newline at end of file

From 5919956d815e8d1185d25d0a9c57ca86bcfd055f Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sat, 27 Nov 2021 11:32:08 +0100
Subject: [PATCH 5/5] feat: firmware retraction settings panel on dashboard

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../FirmwareRetractionSettingsInput.vue       | 58 ++++++++++++
 .../FirmwareRetractionSettings.vue            | 91 +++++++++++++++++++
 .../MachineSettings/MachineSettingsPanel.vue  | 30 +++++-
 src/locales/en.json                           |  8 ++
 4 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 src/components/inputs/FirmwareRetractionSettingsInput.vue
 create mode 100644 src/components/panels/MachineSettings/FirmwareRetractionSettings.vue

diff --git a/src/components/inputs/FirmwareRetractionSettingsInput.vue b/src/components/inputs/FirmwareRetractionSettingsInput.vue
new file mode 100644
index 000000000..4ac91ded1
--- /dev/null
+++ b/src/components/inputs/FirmwareRetractionSettingsInput.vue
@@ -0,0 +1,58 @@
+<template>
+    <form v-on:submit.prevent="sendCmd">
+        <v-text-field
+            v-model="value"
+            @click:append="resetLimit"
+            :label="label"
+            :suffix="unit"
+            :append-icon="this.value !== this.defaultValue ? 'mdi-refresh' : ''"
+            :error="this.value < 0"
+            :step="step"
+            type="number"
+            min="0"
+            hide-details
+            outlined
+            dense
+        ></v-text-field>
+    </form>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import {Mixins, Prop, Watch} from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class FirmwareRetractionSettingsInput extends Mixins(BaseMixin) {
+    private value: any = 0
+
+    @Prop({ type: String, required: true }) readonly label!: string
+    @Prop({ type: Number, required: false }) readonly step!: string
+    @Prop({ type: Number, required: true, default: 0 }) readonly target!: number
+    @Prop({ type: Number, required: true, default: 0 }) readonly defaultValue!: number
+    @Prop({ type: String, required: true }) readonly attributeName!: string
+    @Prop({ type: String, required: true }) readonly unit!: string
+
+    @Watch('target')
+    targetChanged(newVal: number): void {
+        this.value = newVal
+    }
+
+    created(): void {
+        this.value = this.target
+    }
+
+    resetLimit() {
+        this.value = this.defaultValue
+
+        this.sendCmd()
+    }
+
+    sendCmd() {
+        const gcode = 'SET_RETRACTION ' + this.attributeName + '=' + Math.max(0, this.value).toFixed(2)
+        this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
+        this.$socket.emit('printer.gcode.script', {script: gcode})
+    }
+
+}
+</script>
\ No newline at end of file
diff --git a/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
new file mode 100644
index 000000000..5164f4f0f
--- /dev/null
+++ b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
@@ -0,0 +1,91 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractLength')"
+                    :target="current_retract_length"
+                    :default-value="config_retract_length"
+                    :step="0.01"
+                    unit="mm"
+                    attribute-name="RETRACT_LENGTH"
+                ></firmware-retraction-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractSpeed')"
+                    :target="current_retract_speed"
+                    :default-value="config_retract_speed"
+                    unit="mm/s"
+                    attribute-name="RETRACT_SPEED"
+                ></firmware-retraction-settings-input>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractExtraLength')"
+                    :target="current_unretract_extra_length"
+                    :default-value="config_unretract_extra_length"
+                    :step="0.01"
+                    unit="mm"
+                    attribute-name="UNRETRACT_EXTRA_LENGTH"
+                ></firmware-retraction-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractSpeed')"
+                    :target="current_unretract_speed"
+                    :default-value="config_unretract_speed"
+                    unit="mm/s"
+                    attribute-name="UNRETRACT_SPEED"
+                ></firmware-retraction-settings-input>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</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 FirmwareRetractionSettingsInput from '@/components/inputs/FirmwareRetractionSettingsInput.vue'
+
+@Component({
+    components: {Panel, FirmwareRetractionSettingsInput}
+})
+export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
+
+    get current_retract_length() {
+        return this.$store.state.printer?.firmware_retraction?.retract_length ?? 0
+    }
+
+    get current_retract_speed() {
+        return this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20
+    }
+
+    get current_unretract_extra_length() {
+        return this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0
+    }
+
+    get current_unretract_speed() {
+        return this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10
+    }
+    
+    get config_retract_length() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_length ?? 0
+    }
+
+    get config_retract_speed() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_speed ?? 20
+    }
+
+    get config_unretract_extra_length() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_extra_length ?? 0
+    }
+
+    get config_unretract_speed() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_speed ?? 10
+    }
+}
+</script>
diff --git a/src/components/panels/MachineSettings/MachineSettingsPanel.vue b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
index c6e36c230..0c7e82380 100644
--- a/src/components/panels/MachineSettings/MachineSettingsPanel.vue
+++ b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
@@ -6,7 +6,22 @@
         :collapsible="true"
         card-class="machine-settings-panel"
     >
-        <motion-settings></motion-settings>
+        <motion-settings v-if="!existsFirmwareRetraction"></motion-settings>
+
+        <div v-if="existsFirmwareRetraction">
+            <sub-panel
+                :title="$t('Panels.MachineSettingsPanel.MotionSettings.Motion')"
+                sub-panel-class="motion-settings-subpanel"
+            >
+                <motion-settings></motion-settings>
+            </sub-panel>
+            <sub-panel
+                :title="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.FirmwareRetraction')"
+                sub-panel-class="firmware-retraction-settings-subpanel"
+            >
+                <firmware-retraction-settings></firmware-retraction-settings>
+            </sub-panel>
+        </div>
     </panel>
 </template>
 
@@ -14,12 +29,23 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
+import SubPanel from '@/components/ui/SubPanel.vue'
 import MotionSettings from '@/components/panels/MachineSettings/MotionSettings.vue'
+import FirmwareRetractionSettings from '@/components/panels/MachineSettings/FirmwareRetractionSettings.vue'
 
 @Component({
-    components: {Panel, MotionSettings}
+    components: {
+        Panel,
+        SubPanel,
+        MotionSettings,
+        FirmwareRetractionSettings
+    }
 })
 export default class MachineSettingsPanel extends Mixins(BaseMixin) {
 
+    get existsFirmwareRetraction() {
+        return this.$store.state.printer.configfile?.settings?.firmware_retraction ?? false
+    }
+
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 46908c1d7..a2eee2e88 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -370,10 +370,18 @@
     "MachineSettingsPanel": {
       "Headline": "Machine Settings",
       "MotionSettings": {
+        "Motion": "Motion",
         "Velocity": "Velocity",
         "Acceleration": "Acceleration",
         "Deceleration": "Deceleration",
         "SquareCornerVelocity": "Square Corner Velocity"
+      },
+      "FirmwareRetractionSettings": {
+        "FirmwareRetraction": "Firmware Retraction",
+        "RetractLength": "Retract Length",
+        "RetractSpeed": "Retract Speed",
+        "UnretractExtraLength": "Unretract Extra Length",
+        "UnretractSpeed": "Unretract Speed"
       }
     },
     "MiniconsolePanel": {