From 095b1db0094d16a6b381da67aad22e991d3a8c88 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Sun, 24 Apr 2022 23:43:18 +0200
Subject: [PATCH] feat: extruder control panel (#711)

Co-authored-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/inputs/NumberInput.vue         |  14 +-
 src/components/inputs/ToolSlider.vue          | 154 +++--
 src/components/mixins/responsive.ts           |   4 +
 src/components/panels/ControlPanel.vue        |  35 +-
 .../panels/ControlPanelExtruder.vue           | 197 -------
 .../panels/ExtruderControlPanel.vue           | 555 ++++++++++++++++++
 .../MachineSettings/MachineSettingsPanel.vue  |   5 -
 .../PressureAdvanceSettings.vue               | 126 ++--
 src/components/panels/PrintsettingsPanel.vue  |  27 +-
 .../settings/SettingsControlTab.vue           |  62 +-
 .../settings/SettingsUiSettingsTab.vue        |  54 +-
 src/components/ui/SubPanel.vue                |  20 +-
 src/locales/da.json                           |  11 +-
 src/locales/de.json                           |  26 +-
 src/locales/en.json                           |  29 +-
 src/locales/es.json                           |  10 +-
 src/locales/fr.json                           |  12 +-
 src/locales/hu.json                           |  10 +-
 src/locales/it.json                           |  10 +-
 src/locales/nl.json                           |   9 +-
 src/locales/pl.json                           |  10 +-
 src/locales/ru.json                           |  10 +-
 src/locales/zh-tw.json                        |   9 +-
 src/locales/zh.json                           |  10 +-
 src/pages/Dashboard.vue                       |   2 +
 src/plugins/helpers.ts                        |   3 +
 src/store/gui/index.ts                        |   9 +-
 src/store/gui/types.ts                        |   1 +
 src/store/printer/getters.ts                  |  22 +
 src/store/printer/types.ts                    |   9 +
 src/store/variables.ts                        |   1 +
 31 files changed, 937 insertions(+), 519 deletions(-)
 delete mode 100644 src/components/panels/ControlPanelExtruder.vue
 create mode 100644 src/components/panels/ExtruderControlPanel.vue

diff --git a/src/components/inputs/NumberInput.vue b/src/components/inputs/NumberInput.vue
index f627139e..c89ab6fe 100644
--- a/src/components/inputs/NumberInput.vue
+++ b/src/components/inputs/NumberInput.vue
@@ -1,7 +1,9 @@
 <style scoped>
 ._spin_button_group {
     width: 24px;
-    margin: -6px -6px 0 -6px;
+    margin-top: -6px;
+    margin-left: -6px;
+    margin-bottom: -6px;
 }
 
 .v-input--has-state {
@@ -13,10 +15,8 @@
     <form @submit.prevent="submit">
         <v-text-field
             v-model.number="value"
-            class="d-flex align-top"
             :label="label"
             :suffix="unit"
-            :append-icon="target !== defaultValue ? mdiRestart : ''"
             :error="invalidInput()"
             :error-messages="inputErrors()"
             :disabled="disabled"
@@ -29,9 +29,13 @@
             hide-details="auto"
             outlined
             dense
+            class="d-flex align-top"
             @blur="value = target"
-            @click:append="resetToDefault"
+            @focus="$event.target.select()"
             @keydown="checkInvalidChars">
+            <template v-if="defaultValue" #append>
+                <v-icon @click="resetToDefault">{{ value !== defaultValue ? mdiRestart : '' }}</v-icon>
+            </template>
             <template v-if="hasSpinner" #append-outer>
                 <div class="_spin_button_group">
                     <v-btn
@@ -85,7 +89,7 @@ export default class NumberInput extends Mixins(BaseMixin) {
     @Prop({ type: Number, required: true })
     declare readonly target: number
 
-    @Prop({ type: Number, required: true })
+    @Prop({ type: Number, required: false })
     declare readonly defaultValue: number
 
     // props for internal processing
diff --git a/src/components/inputs/ToolSlider.vue b/src/components/inputs/ToolSlider.vue
index 71da0e26..349012eb 100644
--- a/src/components/inputs/ToolSlider.vue
+++ b/src/components/inputs/ToolSlider.vue
@@ -49,86 +49,84 @@
 </style>
 
 <template>
-    <v-container class="px-0 py-2">
-        <v-row>
-            <v-col class="pb-1 pt-3">
-                <v-subheader class="_tool-slider-subheader">
-                    <v-icon small class="mr-2">
-                        {{ icon }}
+    <v-row dense>
+        <v-col class="pa-0">
+            <v-subheader class="_tool-slider-subheader px-1">
+                <v-icon small class="mr-2">
+                    {{ icon }}
+                </v-icon>
+                <span>{{ label }}</span>
+                <v-btn
+                    v-if="value !== defaultValue && !hasInputField"
+                    x-small
+                    icon
+                    class="ml-2"
+                    :disabled="isLocked"
+                    @click="resetSlider">
+                    <v-icon>{{ mdiRestart }}</v-icon>
+                </v-btn>
+                <v-spacer></v-spacer>
+                <span v-if="!hasInputField" class="font-weight-bold">{{ value }} {{ unit }}</span>
+                <v-text-field
+                    v-if="hasInputField"
+                    v-model="numInput"
+                    :error="errors().length > 0"
+                    :suffix="unit"
+                    type="number"
+                    hide-spin-buttons
+                    hide-details
+                    outlined
+                    dense
+                    class="_slider-input d-flex align-center pt-1"
+                    @blur="numInput = value"
+                    @focus="$event.target.select()"
+                    @keydown="checkInvalidChars"
+                    @keyup.enter="submitInput">
+                    <template v-if="value !== defaultValue || value !== numInput" #append>
+                        <v-icon small @click="resetSlider">{{ mdiRestart }}</v-icon>
+                    </template>
+                </v-text-field>
+            </v-subheader>
+            <transition name="fade">
+                <!-- display errors-->
+                <div v-show="errors().length > 0" class="_error-msg d-flex justify-end">
+                    {{ errors()[0] }}
+                </div>
+            </transition>
+            <v-card-text class="pa-0 d-flex align-center">
+                <v-btn
+                    v-if="lockSliders && isTouchDevice"
+                    plain
+                    small
+                    icon
+                    class="_lock-button"
+                    @click="isLocked = !isLocked">
+                    <v-icon small :color="isLocked ? 'red' : ''">
+                        {{ isLocked ? mdiLockOutline : mdiLockOpenVariantOutline }}
                     </v-icon>
-                    <span>{{ label }}</span>
-                    <v-btn
-                        v-if="value !== defaultValue && !hasInputField"
-                        x-small
-                        icon
-                        class="ml-2"
-                        :disabled="isLocked"
-                        @click="resetSlider">
-                        <v-icon>{{ mdiRestart }}</v-icon>
-                    </v-btn>
-                    <v-spacer></v-spacer>
-                    <span v-if="!hasInputField" class="font-weight-bold">{{ value }} {{ unit }}</span>
-                    <v-text-field
-                        v-if="hasInputField"
-                        v-model="numInput"
-                        :error="errors().length > 0"
-                        :suffix="unit"
-                        type="number"
-                        hide-spin-buttons
-                        hide-details
-                        outlined
-                        dense
-                        class="_slider-input d-flex align-center pt-1"
-                        @blur="numInput = value"
-                        @focus="$event.target.select()"
-                        @keydown="checkInvalidChars"
-                        @keyup.enter="submitInput">
-                        <template v-if="value !== defaultValue || value !== numInput" #append>
-                            <v-icon small @click="resetSlider">{{ mdiRestart }}</v-icon>
-                        </template>
-                    </v-text-field>
-                </v-subheader>
-                <transition name="fade">
-                    <!-- display errors-->
-                    <div v-show="errors().length > 0" class="_error-msg d-flex justify-end">
-                        {{ errors()[0] }}
-                    </div>
-                </transition>
-                <v-card-text class="py-0 pb-2 d-flex align-center">
-                    <v-btn
-                        v-if="lockSliders && isTouchDevice"
-                        plain
-                        small
-                        icon
-                        class="_lock-button"
-                        @click="isLocked = !isLocked">
-                        <v-icon small :color="isLocked ? 'red' : ''">
-                            {{ isLocked ? mdiLockOutline : mdiLockOpenVariantOutline }}
-                        </v-icon>
-                    </v-btn>
-                    <v-slider
-                        v-model="value"
-                        v-touch="{ start: resetLockTimer }"
-                        :disabled="isLocked"
-                        :min="min"
-                        :max="processedMax"
-                        :color="colorBar"
-                        hide-details
-                        @change="changeSlider">
-                        <template #prepend>
-                            <v-icon :disabled="isLocked || value <= min" @click="decrement">{{ mdiMinus }}</v-icon>
-                        </template>
+                </v-btn>
+                <v-slider
+                    v-model="value"
+                    v-touch="{ start: resetLockTimer }"
+                    :disabled="isLocked"
+                    :min="min"
+                    :max="processedMax"
+                    :color="colorBar"
+                    hide-details
+                    @change="changeSlider">
+                    <template #prepend>
+                        <v-icon :disabled="isLocked || value <= min" @click="decrement">{{ mdiMinus }}</v-icon>
+                    </template>
 
-                        <template #append>
-                            <v-icon :disabled="isLocked || (value >= max && !dynamicRange)" @click="increment">
-                                {{ mdiPlus }}
-                            </v-icon>
-                        </template>
-                    </v-slider>
-                </v-card-text>
-            </v-col>
-        </v-row>
-    </v-container>
+                    <template #append>
+                        <v-icon :disabled="isLocked || (value >= max && !dynamicRange)" @click="increment">
+                            {{ mdiPlus }}
+                        </v-icon>
+                    </template>
+                </v-slider>
+            </v-card-text>
+        </v-col>
+    </v-row>
 </template>
 
 <script lang="ts">
diff --git a/src/components/mixins/responsive.ts b/src/components/mixins/responsive.ts
index 008063aa..a1d552d7 100644
--- a/src/components/mixins/responsive.ts
+++ b/src/components/mixins/responsive.ts
@@ -39,6 +39,10 @@ export default class ResponsiveMixin extends BaseMixin {
     }
 
     private onResize(entries: ResizeObserverEntry[]) {
+        if (entries[0].contentRect.height === 0 && entries[0].contentRect.width === 0) {
+            return
+        }
+
         const cr = entries[0].contentRect
         const conds = this.breakpoints
         for (const breakpoint in conds) {
diff --git a/src/components/panels/ControlPanel.vue b/src/components/panels/ControlPanel.vue
index c7a6dbe4..4a7be2e9 100644
--- a/src/components/panels/ControlPanel.vue
+++ b/src/components/panels/ControlPanel.vue
@@ -1,37 +1,14 @@
-<style lang="scss" scoped>
-.btnHomeAxis {
-    width: 36px;
-    min-width: 36px !important;
-}
-
-.btnMinWidthAuto {
-    min-width: auto !important;
-}
-
-.steps {
-    width: 100%;
-    > div {
-        width: 100%;
-        display: flex;
-        > button {
-            flex-grow: 1;
-        }
-    }
-}
-</style>
-
 <template>
     <panel
         v-if="klipperReadyForGui && ['standby', 'paused', 'complete', 'cancelled', 'error'].includes(printer_state)"
         :icon="mdiGamepad"
-        :title="$t('Panels.ControlPanel.Headline')"
+        :title="$t('Panels.ControlPanel.Headline').toString()"
         :collapsible="true"
         card-class="control-panel">
         <v-container>
             <control-panel-cross-control v-if="controlStyle === 'cross'"></control-panel-cross-control>
             <control-panel-circle-control v-else-if="controlStyle === 'circle'"></control-panel-circle-control>
             <control-panel-bars-control v-else></control-panel-bars-control>
-            <control-panel-extruder v-if="existsExtruder"></control-panel-extruder>
         </v-container>
     </panel>
 </template>
@@ -39,7 +16,6 @@
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
-import ControlPanelExtruder from '@/components/panels/ControlPanelExtruder.vue'
 import ControlPanelCrossControl from '@/components/panels/ControlPanelCrossControl.vue'
 import ControlPanelBarsControl from '@/components/panels/ControlPanelBarsControl.vue'
 import ControlPanelCircleControl from '@/components/panels/ControlPanelCircleControl.vue'
@@ -51,7 +27,6 @@ import { mdiGamepad } from '@mdi/js'
         ControlPanelCircleControl,
         ControlPanelBarsControl,
         ControlPanelCrossControl,
-        ControlPanelExtruder,
     },
 })
 export default class ControlPanel extends Mixins(BaseMixin) {
@@ -60,13 +35,5 @@ export default class ControlPanel extends Mixins(BaseMixin) {
     get controlStyle() {
         return this.$store.state.gui.control.style ?? 'bars'
     }
-
-    get existsExtruder() {
-        return 'extruder' in this.$store.state.printer
-    }
-
-    get boolExtrudePossible() {
-        return this.$store.getters['printer/getExtrudePossible']
-    }
 }
 </script>
diff --git a/src/components/panels/ControlPanelExtruder.vue b/src/components/panels/ControlPanelExtruder.vue
deleted file mode 100644
index cf7408ce..00000000
--- a/src/components/panels/ControlPanelExtruder.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<style lang="scss" scoped>
-.btnHomeAxis {
-    width: 36px;
-    min-width: 36px !important;
-}
-
-.btnMinWidthAuto {
-    min-width: auto !important;
-}
-
-.steps {
-    width: 100%;
-    > div {
-        width: 100%;
-        display: flex;
-        > button {
-            flex-grow: 1;
-        }
-    }
-}
-</style>
-
-<template>
-    <div class="mt-6">
-        <v-row>
-            <v-col class="pa-0">
-                <v-divider></v-divider>
-            </v-col>
-        </v-row>
-        <v-row class="">
-            <v-col class="col col-md-6 pt-2">
-                <span class="text--disabled" style="font-size: 0.9em">
-                    {{ $t('Panels.ControlPanel.FeedAmountIn') }} [mm]
-                </span>
-                <v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%">
-                    <v-btn
-                        v-for="amount in feedamountsSorted"
-                        :key="amount"
-                        dense
-                        :class="
-                            (amount === currentFeedAmount ? 'v-btn--active' : '') +
-                            ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'
-                        "
-                        @click="setFeedAmount(amount)">
-                        {{ amount }}
-                    </v-btn>
-                </v-btn-toggle>
-            </v-col>
-            <v-col class="col col-md-6 pt-2">
-                <span class="text--disabled" style="font-size: 0.9em">
-                    {{ $t('Panels.ControlPanel.FeedrateIn') }} [mm/s]
-                </span>
-                <v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%">
-                    <v-tooltip v-for="rate in feedratesSorted" :key="rate" top color="panel">
-                        <template #activator="{ on, attrs }">
-                            <v-btn
-                                v-bind="attrs"
-                                dense
-                                :class="
-                                    (rate === currentFeedRate ? 'v-btn--active' : '') +
-                                    ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'
-                                "
-                                v-on="on"
-                                @click="setFeedrate(rate)">
-                                {{ rate }}
-                            </v-btn>
-                        </template>
-                        <span v-if="filamentDiameter">
-                            {{ Math.round(Math.pow(filamentDiameter / 2, 2) * Math.PI * rate * 10) / 10 }} mm&sup3;/s
-                        </span>
-                    </v-tooltip>
-                </v-btn-toggle>
-            </v-col>
-        </v-row>
-        <v-row class="">
-            <v-col class="col text-center pt-0">
-                <v-tooltip top :disabled="boolExtrudePossible" color="panel">
-                    <template #activator="{ on }">
-                        <div class="d-inline-block" v-on="on">
-                            <v-btn
-                                small
-                                class="mx-3"
-                                :loading="loadings.includes('btnRetract')"
-                                :disabled="!boolExtrudePossible"
-                                @click="sendRetract()">
-                                <v-icon small class="mr-1">{{ mdiArrowUpBold }}</v-icon>
-                                {{ $t('Panels.ControlPanel.Retract') }}
-                            </v-btn>
-                        </div>
-                    </template>
-                    <span>{{ $t('Panels.ControlPanel.HotendTooCold') }} {{ minExtrudeTemp }} °C</span>
-                </v-tooltip>
-                <v-tooltip top :disabled="boolExtrudePossible" color="panel">
-                    <template #activator="{ on }">
-                        <div class="d-inline-block" v-on="on">
-                            <v-btn
-                                small
-                                class="mx-3"
-                                :loading="loadings.includes('btnDetract')"
-                                :disabled="!boolExtrudePossible"
-                                @click="sendDetract()">
-                                <v-icon small class="mr-1">{{ mdiArrowDownBold }}</v-icon>
-                                {{ $t('Panels.ControlPanel.Extrude') }}
-                            </v-btn>
-                        </div>
-                    </template>
-                    <span>{{ $t('Panels.ControlPanel.HotendTooCold') }} {{ minExtrudeTemp }} °C</span>
-                </v-tooltip>
-            </v-col>
-        </v-row>
-    </div>
-</template>
-
-<script lang="ts">
-import { mdiArrowDownBold, mdiArrowUpBold } from '@mdi/js'
-import { Component, Mixins } from 'vue-property-decorator'
-import BaseMixin from '../mixins/base'
-
-@Component
-export default class ControlPanelExtruder extends Mixins(BaseMixin) {
-    mdiArrowUpBold = mdiArrowUpBold
-    mdiArrowDownBold = mdiArrowDownBold
-
-    get filamentDiameter() {
-        return this.$store.state.printer.configfile?.settings?.extruder?.filament_diameter ?? 1.75
-    }
-
-    get feedamounts() {
-        return this.$store.state.gui.control.extruder?.feedamounts ?? []
-    }
-
-    get feedrates() {
-        return this.$store.state.gui.control.extruder?.feedrates ?? []
-    }
-
-    get feedamountsSorted() {
-        return [...this.feedamounts].sort((a, b) => {
-            return b - a
-        })
-    }
-
-    get feedratesSorted() {
-        return [...this.feedrates].sort((a, b) => {
-            return b - a
-        })
-    }
-
-    get currentFeedAmount() {
-        return parseFloat(this.$store.state.gui.control.extruder.feedamount)
-    }
-
-    set currentFeedAmount(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.feedamount', value: newVal })
-    }
-
-    get currentFeedRate() {
-        return parseFloat(this.$store.state.gui.control.extruder.feedrate)
-    }
-
-    set currentFeedRate(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.feedrate', value: newVal })
-    }
-
-    get boolExtrudePossible() {
-        return this.$store.getters['printer/getExtrudePossible']
-    }
-
-    get minExtrudeTemp() {
-        return this.$store.state.printer.configfile?.settings?.extruder?.min_extrude_temp ?? 170
-    }
-
-    doSend(gcode: string) {
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
-    }
-
-    setFeedAmount(value: number) {
-        this.currentFeedAmount = value
-    }
-
-    setFeedrate(value: number) {
-        this.currentFeedRate = value
-    }
-
-    sendRetract() {
-        const gcode = 'M83\nG1 E-' + this.currentFeedAmount + ' F' + this.currentFeedRate * 60
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnRetract' })
-    }
-
-    sendDetract() {
-        const gcode = 'M83\nG1 E' + this.currentFeedAmount + ' F' + this.currentFeedRate * 60
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnDetract' })
-    }
-}
-</script>
diff --git a/src/components/panels/ExtruderControlPanel.vue b/src/components/panels/ExtruderControlPanel.vue
new file mode 100644
index 00000000..fa3138aa
--- /dev/null
+++ b/src/components/panels/ExtruderControlPanel.vue
@@ -0,0 +1,555 @@
+<style lang="scss" scoped>
+._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);
+        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;
+    max-height: 24px;
+}
+
+._btn-extruder-cmd {
+    min-width: 135px !important;
+}
+</style>
+
+<template>
+    <panel
+        v-if="klipperReadyForGui && extruders.length"
+        :icon="mdiPrinter3dNozzle"
+        :title="$t('Panels.ExtruderControlPanel.Headline').toString()"
+        :collapsible="true"
+        card-class="extruder-control-panel">
+        <!-- PANEL-HEADER 3-DOT-MENU -->
+        <template #buttons>
+            <v-menu v-if="filamentChangeMacros" left :offset-y="true" :close-on-content-click="false" class="pa-0">
+                <template #activator="{ on, attrs }">
+                    <v-btn icon tile v-bind="attrs" v-on="on">
+                        <v-icon>{{ mdiDotsVertical }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-list dense>
+                    <v-list-item>
+                        <!-- FILAMENT UNLOAD -->
+                        <v-tooltip top :disabled="extrudePossible" color="secondary">
+                            <template #activator="{ on }">
+                                <div style="width: 100%" v-on="on">
+                                    <v-btn
+                                        :loading="loadings.includes('btnUnloadFilament')"
+                                        :disabled="!extrudePossible || isPrinting"
+                                        small
+                                        style="width: 100%"
+                                        @click="sendUnloadFilament()">
+                                        <span class="d-flex align-center">
+                                            <v-icon left small style="transform: rotate(270deg)" class="mr-1">
+                                                {{ mdiLocationExit }}
+                                            </v-icon>
+                                            {{ $t('Panels.ExtruderControlPanel.UnloadFilament') }}
+                                        </span>
+                                    </v-btn>
+                                </div>
+                            </template>
+                            <span>
+                                {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                {{ minExtrudeTemp }} °C
+                            </span>
+                        </v-tooltip>
+                    </v-list-item>
+                    <v-list-item>
+                        <!-- FILAMENT LOAD -->
+                        <v-tooltip top :disabled="extrudePossible" color="secondary">
+                            <template #activator="{ on }">
+                                <div style="width: 100%" v-on="on">
+                                    <v-btn
+                                        :loading="loadings.includes('btnLoadFilament')"
+                                        :disabled="!extrudePossible || isPrinting"
+                                        small
+                                        style="width: 100%"
+                                        @click="sendLoadFilament()">
+                                        <span class="d-flex align-center">
+                                            <v-icon left small style="transform: rotate(90deg)" class="mr-1">
+                                                {{ mdiLocationEnter }}
+                                            </v-icon>
+                                            {{ $t('Panels.ExtruderControlPanel.LoadFilament') }}
+                                        </span>
+                                    </v-btn>
+                                </div>
+                            </template>
+                            <span>
+                                {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                {{ minExtrudeTemp }} °C
+                            </span>
+                        </v-tooltip>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
+        </template>
+        <responsive :breakpoints="{ large: (el) => el.width >= 640 }">
+            <template #default="{ el }">
+                <!-- TOOL SELECTOR BUTTONS -->
+                <v-container v-if="extruders.length > 1" class="pb-1">
+                    <v-item-group class="_btn-group py-0">
+                        <v-btn
+                            v-for="extruder in extruders"
+                            :key="extruder.key"
+                            :class="extruder.key === activeExtruder ? 'primary--text' : {}"
+                            :value="extruder.key"
+                            :disabled="isPrinting"
+                            dense
+                            class="flex-grow-1 px-0"
+                            @click="activateExtruder(extruder.key)">
+                            {{
+                                toolchangeMacros.length === extruders.length
+                                    ? toolchangeMacros[extruders.indexOf(extruder)]
+                                    : extruder.name
+                            }}
+                        </v-btn>
+                    </v-item-group>
+                </v-container>
+                <!-- EXTRUSION FACTOR SLIDER -->
+                <v-container class="pb-1">
+                    <tool-slider
+                        :label="$t('Panels.ExtruderControlPanel.ExtrusionFactor').toString()"
+                        :icon="mdiPrinter3dNozzleOutline"
+                        :target="extrudeFactor"
+                        :min="1"
+                        :max="200"
+                        :multi="100"
+                        :step="1"
+                        :has-input-field="true"
+                        command="M221"
+                        attribute-name="S"></tool-slider>
+                </v-container>
+                <!-- PRESSURE ADVANCE SETTINGS -->
+                <v-divider></v-divider>
+                <pressure-advance-settings></pressure-advance-settings>
+                <v-divider class="pb-1"></v-divider>
+                <!-- EXTRUDER INPUTS AND QUICKSELECTS -->
+                <v-container>
+                    <v-row>
+                        <v-col>
+                            <number-input
+                                :label="$t('Panels.ExtruderControlPanel.FilamentLength').toString()"
+                                param="feedamount"
+                                :target="feedamount"
+                                :disabled="isPrinting"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="100"
+                                :step="0.01"
+                                :min="0.01"
+                                :max="maxExtrudeOnlyDistance"
+                                :dec="2"
+                                unit="mm"
+                                :submit-on-blur="true"
+                                @submit="setFeedamount"></number-input>
+                            <v-item-group class="_btn-group pt-3">
+                                <v-btn
+                                    v-for="value in feedamountsSorted"
+                                    :key="value"
+                                    :disabled="isPrinting"
+                                    dense
+                                    class="_btn-qs flex-grow-1 px-0"
+                                    @click="setFeedamount({ value })">
+                                    {{ value }}
+                                </v-btn>
+                            </v-item-group>
+                        </v-col>
+                        <v-col>
+                            <number-input
+                                :label="$t('Panels.ExtruderControlPanel.ExtrusionFeedrate').toString()"
+                                param="feedrate"
+                                :target="feedrate"
+                                :disabled="isPrinting"
+                                :has-spinner="true"
+                                :output-error-msg="true"
+                                :spinner-factor="100"
+                                :step="0.01"
+                                :min="0.01"
+                                :max="null"
+                                :dec="2"
+                                type="number"
+                                unit="mm/s"
+                                @submit="setFeedrate"></number-input>
+                            <v-item-group class="_btn-group pt-3">
+                                <v-btn
+                                    v-for="value in feedratesSorted"
+                                    :key="value"
+                                    :disabled="isPrinting"
+                                    dense
+                                    class="_btn-qs flex-grow-1 px-0"
+                                    @click="setFeedrate({ value })">
+                                    {{ value }}
+                                </v-btn>
+                            </v-item-group>
+                        </v-col>
+                        <!-- EXTRUDE AND RETRACT BUTTON LARGE SIZED PANEL -->
+                        <v-col v-if="el.is.large" class="col-3 d-flex align-center flex-column justify-center">
+                            <!-- RETRACT -->
+                            <v-tooltip left :disabled="extrudePossible && !tooLargeExtrusion" color="secondary">
+                                <template #activator="{ on }">
+                                    <div class="mb-4" v-on="on">
+                                        <v-btn
+                                            :loading="loadings.includes('btnRetract')"
+                                            :disabled="!extrudePossible || tooLargeExtrusion || isPrinting"
+                                            small
+                                            class="_btn-extruder-cmd"
+                                            @click="sendRetract()">
+                                            <v-icon small class="mr-1">{{ mdiArrowUpBold }}</v-icon>
+                                            {{ $t('Panels.ExtruderControlPanel.Retract') }}
+                                        </v-btn>
+                                    </div>
+                                </template>
+                                <span v-show="!extrudePossible">
+                                    {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                    {{ minExtrudeTemp }} °C
+                                </span>
+                                <span v-show="tooLargeExtrusion">
+                                    {{ $t('Panels.ExtruderControlPanel.TooLargeExtrusion') }}
+                                    <br />
+                                    {{ $t('Panels.ExtruderControlPanel.Requested') }}:
+                                    {{ feedamount * extrudeFactor }} mm
+                                    <br />
+                                    {{ $t('Panels.ExtruderControlPanel.Allowed') }}: {{ maxExtrudeOnlyDistance }} mm
+                                </span>
+                            </v-tooltip>
+                            <!-- EXTRUDE  -->
+                            <v-tooltip left :disabled="extrudePossible && !tooLargeExtrusion" color="secondary">
+                                <template #activator="{ on }">
+                                    <div v-on="on">
+                                        <v-btn
+                                            :loading="loadings.includes('btnDetract')"
+                                            :disabled="!extrudePossible || tooLargeExtrusion || isPrinting"
+                                            small
+                                            class="_btn-extruder-cmd"
+                                            @click="sendExtrude()">
+                                            <v-icon small class="mr-1">{{ mdiArrowDownBold }}</v-icon>
+                                            {{ $t('Panels.ExtruderControlPanel.Extrude') }}
+                                        </v-btn>
+                                    </div>
+                                </template>
+                                <span v-show="!extrudePossible">
+                                    {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                    {{ minExtrudeTemp }} °C
+                                </span>
+                                <span v-show="tooLargeExtrusion">
+                                    {{ $t('Panels.ExtruderControlPanel.TooLargeExtrusion') }}
+                                    <br />
+                                    {{ $t('Panels.ExtruderControlPanel.Requested') }}:
+                                    {{ feedamount * extrudeFactor }} mm
+                                    <br />
+                                    {{ $t('Panels.ExtruderControlPanel.Allowed') }}: {{ maxExtrudeOnlyDistance }} mm
+                                </span>
+                            </v-tooltip>
+                        </v-col>
+                    </v-row>
+                    <!-- EXTRUDE AND RETRACT BUTTON SMALL AND MEDIUM SIZED PANEL -->
+                    <v-row v-if="!el.is.large" :class="{ 'pb-1': !showEstimatedExtrusion }">
+                        <v-col class="pa-0">
+                            <div class="d-flex justify-space-around">
+                                <div class="d-flex align-center">
+                                    <!-- RETRACT -->
+                                    <v-tooltip top :disabled="extrudePossible && !tooLargeExtrusion" color="secondary">
+                                        <template #activator="{ on }">
+                                            <div class="pt-1 pb-2 px-3" v-on="on">
+                                                <v-btn
+                                                    :loading="loadings.includes('btnRetract')"
+                                                    :disabled="!extrudePossible || tooLargeExtrusion || isPrinting"
+                                                    small
+                                                    class="_btn-extruder-cmd"
+                                                    @click="sendRetract()">
+                                                    <v-icon small class="mr-1">{{ mdiArrowUpBold }}</v-icon>
+                                                    {{ $t('Panels.ExtruderControlPanel.Retract') }}
+                                                </v-btn>
+                                            </div>
+                                        </template>
+                                        <span v-show="!extrudePossible">
+                                            {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                            {{ minExtrudeTemp }} °C
+                                        </span>
+                                        <span v-show="tooLargeExtrusion">
+                                            {{ $t('Panels.ExtruderControlPanel.TooLargeExtrusion') }}
+                                            <br />
+                                            {{ $t('Panels.ExtruderControlPanel.Requested') }}:
+                                            {{ feedamount * extrudeFactor }} mm
+                                            <br />
+                                            {{ $t('Panels.ExtruderControlPanel.Allowed') }}:
+                                            {{ maxExtrudeOnlyDistance }} mm
+                                        </span>
+                                    </v-tooltip>
+                                    <!-- EXTRUDE  -->
+                                    <v-tooltip top :disabled="extrudePossible && !tooLargeExtrusion" color="secondary">
+                                        <template #activator="{ on }">
+                                            <div class="pt-1 pb-2 px-3" v-on="on">
+                                                <v-btn
+                                                    :loading="loadings.includes('btnDetract')"
+                                                    :disabled="!extrudePossible || tooLargeExtrusion || isPrinting"
+                                                    small
+                                                    class="_btn-extruder-cmd"
+                                                    @click="sendExtrude()">
+                                                    <v-icon small class="mr-1">{{ mdiArrowDownBold }}</v-icon>
+                                                    {{ $t('Panels.ExtruderControlPanel.Extrude') }}
+                                                </v-btn>
+                                            </div>
+                                        </template>
+                                        <span v-show="!extrudePossible">
+                                            {{ $t('Panels.ExtruderControlPanel.ExtruderTempTooLow') }}
+                                            {{ minExtrudeTemp }} °C
+                                        </span>
+                                        <span v-show="tooLargeExtrusion">
+                                            {{ $t('Panels.ExtruderControlPanel.TooLargeExtrusion') }}
+                                            <br />
+                                            {{ $t('Panels.ExtruderControlPanel.Requested') }}:
+                                            {{ feedamount * extrudeFactor }} mm
+                                            <br />
+                                            {{ $t('Panels.ExtruderControlPanel.Allowed') }}:
+                                            {{ maxExtrudeOnlyDistance }} mm
+                                        </span>
+                                    </v-tooltip>
+                                </div>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-container>
+                <!-- EXTRUSION ESTIMATION NOTE -->
+                <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-2">
+                    <div
+                        v-if="filamentDiameter && nozzleDiameter"
+                        style="font-size: 0.8em"
+                        class="text--disabled text-caption font-weight-light d-flex justify-center">
+                        {{ $t('Panels.ExtruderControlPanel.EstimatedExtrusion') }} ~ {{ extrudedLength }} mm @
+                        {{ volumetricFlow }} mm³/s
+                    </div>
+                </v-container>
+            </template>
+        </responsive>
+    </panel>
+</template>
+
+<script lang="ts">
+import {
+    mdiArrowDownBold,
+    mdiArrowUpBold,
+    mdiPrinter3dNozzle,
+    mdiPrinter3dNozzleOutline,
+    mdiLocationEnter,
+    mdiLocationExit,
+    mdiDotsVertical,
+} from '@mdi/js'
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { PrinterStateExtruder } from '@/store/printer/types'
+import BaseMixin from '../mixins/base'
+import NumberInput from '@/components/inputs/NumberInput.vue'
+import Panel from '@/components/ui/Panel.vue'
+import PressureAdvanceSettings from '@/components/panels/MachineSettings/PressureAdvanceSettings.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+import ToolSlider from '@/components/inputs/ToolSlider.vue'
+
+@Component({
+    components: {
+        Panel,
+        PressureAdvanceSettings,
+        NumberInput,
+        Responsive,
+        ToolSlider,
+    },
+})
+export default class ExtruderControlPanel extends Mixins(BaseMixin) {
+    mdiArrowUpBold = mdiArrowUpBold
+    mdiArrowDownBold = mdiArrowDownBold
+    mdiPrinter3dNozzle = mdiPrinter3dNozzle
+    mdiPrinter3dNozzleOutline = mdiPrinter3dNozzleOutline
+    mdiLocationEnter = mdiLocationEnter
+    mdiLocationExit = mdiLocationExit
+    mdiDotsVertical = mdiDotsVertical
+
+    get isPrinting(): boolean {
+        return ['printing'].includes(this.printer_state)
+    }
+
+    get toolchangeMacros(): string[] {
+        let tools: string[] = []
+        for (let i = 0; i < this.extruders.length; i++) {
+            this.$store.getters['printer/getMacros'].forEach((m: any) => {
+                if (`T${i}`.includes(m.name.toUpperCase())) tools.push(`T${i}`)
+            })
+        }
+        return tools
+    }
+
+    get filamentChangeMacros(): boolean {
+        let macros: string[] = []
+        this.$store.getters['printer/getMacros'].forEach((m: any) => {
+            if (m.name.toUpperCase().startsWith('LOAD_FILAMENT')) macros.push(m.name)
+            if (m.name.toUpperCase().startsWith('UNLOAD_FILAMENT')) macros.push(m.name)
+        })
+        return macros.length === 2
+    }
+
+    get extruders(): PrinterStateExtruder[] {
+        return this.$store.getters['printer/getExtruders']
+    }
+
+    get activeExtruder(): string {
+        return this.$store.state.printer.toolhead?.extruder
+    }
+
+    get filamentDiameter(): number {
+        return this.$store.state.printer.configfile?.settings?.[this.activeExtruder]?.filament_diameter ?? 1.75
+    }
+
+    get nozzleDiameter(): number {
+        return this.$store.state.printer.configfile?.settings?.[this.activeExtruder]?.nozzle_diameter ?? 0.4
+    }
+
+    get feedamounts(): number[] {
+        return this.$store.state.gui.control.extruder?.feedamounts ?? []
+    }
+
+    get feedrates(): number[] {
+        return this.$store.state.gui.control.extruder?.feedrates ?? []
+    }
+
+    get feedamountsSorted(): number[] {
+        return [...this.feedamounts].sort((a, b) => {
+            return b - a
+        })
+    }
+
+    get feedratesSorted(): number[] {
+        return [...this.feedrates].sort((a, b) => {
+            return b - a
+        })
+    }
+
+    get feedamount(): number {
+        return parseFloat(this.$store.state.gui.control.extruder.feedamount)
+    }
+
+    setFeedamount(params: { value: number }): void {
+        this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.feedamount', value: params.value })
+    }
+
+    get feedrate(): number {
+        return parseFloat(this.$store.state.gui.control.extruder.feedrate)
+    }
+
+    setFeedrate(params: { value: number }): void {
+        this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.feedrate', value: params.value })
+    }
+
+    get extrudePossible(): boolean {
+        return this.$store.getters['printer/getExtrudePossible']
+    }
+
+    get minExtrudeTemp(): number {
+        return this.$store.state.printer.configfile?.settings?.[this.activeExtruder]?.min_extrude_temp ?? 170
+    }
+
+    get maxExtrudeOnlyDistance(): number {
+        return this.$store.state.printer.configfile?.settings?.[this.activeExtruder]?.max_extrude_only_distance ?? 50
+    }
+
+    get tooLargeExtrusion(): boolean {
+        return this.feedamount * this.extrudeFactor > this.maxExtrudeOnlyDistance
+    }
+
+    get extrudedLength(): number {
+        return Math.round(this.feedamount * this.extrudeFactor * (this.filamentDiameter / this.nozzleDiameter))
+    }
+
+    get volumetricFlow(): number {
+        return Math.round(Math.pow(this.filamentDiameter / 2, 2) * Math.PI * this.feedrate * 10) / 10
+    }
+
+    get extrudeFactor() {
+        return this.$store.state.printer?.gcode_move?.extrude_factor ?? 1
+    }
+
+    get showEstimatedExtrusion() {
+        return this.$store.state.gui.control.extruder.showEstimatedExtrusionInfo
+    }
+
+    @Watch('maxExtrudeOnlyDistance', { immediate: true })
+    onMaxExtrudeOnlyDistanceChange(): void {
+        /**
+         * If, while switching from ex. A to ex. B, the feedamount
+         * from ex. A exceeds the maxExtrudeOnlyDistance of ex. B,
+         * set the feedamount to maxExtrudeOnlyDistance of ex. B
+         */
+        if (this.feedamount > this.maxExtrudeOnlyDistance) {
+            this.setFeedamount({ value: this.maxExtrudeOnlyDistance })
+        }
+    }
+
+    activateExtruder(extruder: string): void {
+        /**
+         * If toolchange macros in the form of T{n} are found, use those
+         * otherwise use the regular 'ACTIVATE_EXTRUDER' Klipper command
+         */
+        let gcode: string
+        if (this.toolchangeMacros.length === this.extruders.length) {
+            gcode = `T${this.extruders.findIndex((ex: any) => ex.key === extruder)}`
+        } else {
+            gcode = `ACTIVATE_EXTRUDER EXTRUDER=${extruder}`
+        }
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
+
+    sendRetract(): void {
+        const gcode = `M83\nG1 E-${this.feedamount} F${this.feedrate * 60}`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnRetract' })
+    }
+
+    sendExtrude(): void {
+        const gcode = `M83\nG1 E${this.feedamount} F${this.feedrate * 60}`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnDetract' })
+    }
+
+    sendUnloadFilament(): void {
+        const gcode = 'UNLOAD_FILAMENT'
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnUnloadFilament' })
+    }
+
+    sendLoadFilament(): void {
+        const gcode = 'LOAD_FILAMENT'
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'btnLoadFilament' })
+    }
+}
+</script>
diff --git a/src/components/panels/MachineSettings/MachineSettingsPanel.vue b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
index a18fe97d..c54d3661 100644
--- a/src/components/panels/MachineSettings/MachineSettingsPanel.vue
+++ b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
@@ -11,11 +11,6 @@
                 sub-panel-class="motion-settings-subpanel">
                 <motion-settings></motion-settings>
             </sub-panel>
-            <sub-panel
-                :title="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.PressureAdvance').toString()"
-                sub-panel-class="pressure-advance-settings-subpanel">
-                <pressure-advance-settings></pressure-advance-settings>
-            </sub-panel>
             <sub-panel
                 v-if="existsFirmwareRetraction"
                 :title="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.FirmwareRetraction').toString()"
diff --git a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
index 7b4e1dc9..0b2c1257 100644
--- a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
+++ b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
@@ -1,73 +1,77 @@
 <template>
-    <v-card-text>
-        <v-row>
-            <v-col v-if="allExtruders.length > 1" class="col-12 col-xl-4">
-                <div class="d-flex align-center">
-                    <v-btn
-                        v-if="selectedExtruder !== activeExtruder"
-                        icon
-                        plain
-                        class="mr-2"
-                        @click="resetToActiveExtruder">
-                        <v-icon>{{ mdiRestart }}</v-icon>
-                    </v-btn>
-                    <v-select
-                        v-model="selectedExtruder"
-                        :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Extruder').toString()"
-                        :items="allExtruders"
-                        :value="activeExtruder"
-                        hide-details
-                        outlined
-                        dense></v-select>
-                </div>
-            </v-col>
-            <v-col :class="allExtruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
-                <number-input
-                    :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Advance').toString()"
-                    param="ADVANCE"
-                    :target="pressureAdvance"
-                    :default-value="defaultPressureAdvance"
-                    :extruder="selectedExtruder"
-                    :output-error-msg="true"
-                    :has-spinner="true"
-                    :min="0"
-                    :max="null"
-                    :step="0.001"
-                    :dec="3"
-                    unit="mm/s"
-                    @submit="sendCmd"></number-input>
-            </v-col>
-            <v-col :class="allExtruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
-                <number-input
-                    :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.SmoothTime').toString()"
-                    param="SMOOTH_TIME"
-                    :target="smoothTime"
-                    :default-value="defaultSmoothTime"
-                    :extruder="selectedExtruder"
-                    :output-error-msg="true"
-                    :has-spinner="true"
-                    :spinner-factor="10"
-                    :min="0"
-                    :max="0.2"
-                    :step="0.001"
-                    :dec="3"
-                    unit="s"
-                    @submit="sendCmd"></number-input>
-            </v-col>
-        </v-row>
-    </v-card-text>
+    <v-container>
+        <responsive
+            :breakpoints="{
+                small: (el) => el.width <= 350,
+                medium: (el) => el.width > 350 && el.width <= 500,
+            }">
+            <template #default="{ el }">
+                <v-row>
+                    <v-col v-if="allExtruders.length > 1" :class="{ 'col-12': el.is.small || el.is.medium }">
+                        <div class="d-flex align-center">
+                            <v-btn v-if="selectedExtruder !== activeExtruder" icon plain @click="resetToActiveExtruder">
+                                <v-icon>{{ mdiRestart }}</v-icon>
+                            </v-btn>
+                            <v-select
+                                v-model="selectedExtruder"
+                                :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Extruder').toString()"
+                                :items="allExtruders"
+                                :value="activeExtruder"
+                                hide-details
+                                outlined
+                                dense></v-select>
+                        </div>
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Advance').toString()"
+                            param="ADVANCE"
+                            :target="pressureAdvance"
+                            :default-value="defaultPressureAdvance"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :min="0"
+                            :max="null"
+                            :step="0.001"
+                            :dec="3"
+                            unit="mm/s"
+                            @submit="sendCmd"></number-input>
+                    </v-col>
+                    <v-col :class="{ 'col-12': el.is.small }">
+                        <number-input
+                            :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.SmoothTime').toString()"
+                            param="SMOOTH_TIME"
+                            :target="smoothTime"
+                            :default-value="defaultSmoothTime"
+                            :extruder="selectedExtruder"
+                            :output-error-msg="true"
+                            :has-spinner="true"
+                            :spinner-factor="10"
+                            :min="0"
+                            :max="0.2"
+                            :step="0.001"
+                            :dec="3"
+                            unit="s"
+                            @submit="sendCmd"></number-input>
+                    </v-col>
+                </v-row>
+            </template>
+        </responsive>
+    </v-container>
 </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 NumberInput from '@/components/inputs/NumberInput.vue'
 import { Debounce } from 'vue-debounce-decorator'
+import BaseMixin from '@/components/mixins/base'
+import NumberInput from '@/components/inputs/NumberInput.vue'
+import Panel from '@/components/ui/Panel.vue'
+import Responsive from '@/components/ui/Responsive.vue'
 import { mdiRestart } from '@mdi/js'
 
 @Component({
-    components: { Panel, NumberInput },
+    components: { NumberInput, Panel, Responsive },
 })
 export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
     mdiRestart = mdiRestart
diff --git a/src/components/panels/PrintsettingsPanel.vue b/src/components/panels/PrintsettingsPanel.vue
index ba304db0..e1b8891d 100644
--- a/src/components/panels/PrintsettingsPanel.vue
+++ b/src/components/panels/PrintsettingsPanel.vue
@@ -1,5 +1,3 @@
-<style scoped></style>
-
 <template>
     <panel
         v-if="klipperReadyForGui && ['printing', 'paused'].includes(printer_state)"
@@ -19,20 +17,6 @@
             :has-input-field="true"
             command="M220"
             attribute-name="S"></tool-slider>
-        <template v-if="existsExtruder">
-            <v-divider></v-divider>
-            <tool-slider
-                :label="$t('Panels.PrintsettingsPanel.ExtrusionFactor').toString()"
-                :icon="mdiPrinter3dNozzleOutline"
-                :target="extrude_factor"
-                :min="1"
-                :max="200"
-                :multi="100"
-                :step="1"
-                :has-input-field="true"
-                command="M221"
-                attribute-name="S"></tool-slider>
-        </template>
     </panel>
 </template>
 
@@ -41,7 +25,7 @@ import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import ToolSlider from '@/components/inputs/ToolSlider.vue'
-import { mdiPrinter3d, mdiPrinter3dNozzleOutline, mdiSpeedometer } from '@mdi/js'
+import { mdiPrinter3d, mdiSpeedometer } from '@mdi/js'
 
 @Component({
     components: {
@@ -52,18 +36,9 @@ import { mdiPrinter3d, mdiPrinter3dNozzleOutline, mdiSpeedometer } from '@mdi/js
 export default class PrintsettingsPanel extends Mixins(BaseMixin) {
     mdiPrinter3d = mdiPrinter3d
     mdiSpeedometer = mdiSpeedometer
-    mdiPrinter3dNozzleOutline = mdiPrinter3dNozzleOutline
-
-    get extrude_factor() {
-        return this.$store.state.printer?.gcode_move?.extrude_factor ?? 1
-    }
 
     get speed_factor() {
         return this.$store.state.printer?.gcode_move?.speed_factor ?? 1
     }
-
-    get existsExtruder() {
-        return 'extruder' in this.$store.state.printer
-    }
 }
 </script>
diff --git a/src/components/settings/SettingsControlTab.vue b/src/components/settings/SettingsControlTab.vue
index a55f35cb..6fdfb536 100644
--- a/src/components/settings/SettingsControlTab.vue
+++ b/src/components/settings/SettingsControlTab.vue
@@ -5,7 +5,9 @@
         <v-card flat>
             <v-card-text>
                 <v-form ref="formControlExtruder">
-                    <settings-row :title="$t('Settings.ControlTab.Style')">
+                    <!-- TOOLHEAD CONTROL SETTINGS -->
+                    <v-card-title class="mx-n4">{{ $t('Panels.ToolheadControlPanel.Headline') }}</v-card-title>
+                    <settings-row :title="$t('Settings.ControlTab.Style').toString()">
                         <v-select
                             v-model="controlStyle"
                             :items="controlStyles"
@@ -16,20 +18,26 @@
                     </settings-row>
                     <v-divider class="my-2"></v-divider>
                     <template v-if="['circle', 'cross'].includes(controlStyle)">
-                        <settings-row :title="$t('Settings.ControlTab.InvertXMovement')" :dynamic-slot-width="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.InvertXMovement').toString()"
+                            :dynamic-slot-width="true">
                             <v-switch v-model="reverseX" hide-details class="mt-0"></v-switch>
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
-                        <settings-row :title="$t('Settings.ControlTab.InvertYMovement')" :dynamic-slot-width="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.InvertYMovement').toString()"
+                            :dynamic-slot-width="true">
                             <v-switch v-model="reverseY" hide-details class="mt-0"></v-switch>
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
-                        <settings-row :title="$t('Settings.ControlTab.InvertZMovement')" :dynamic-slot-width="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.InvertZMovement').toString()"
+                            :dynamic-slot-width="true">
                             <v-switch v-model="reverseZ" hide-details class="mt-0"></v-switch>
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
                     </template>
-                    <settings-row :title="$t('Settings.ControlTab.SpeedXY')">
+                    <settings-row :title="$t('Settings.ControlTab.SpeedXY').toString()">
                         <v-text-field
                             v-model="feedrateXY"
                             type="number"
@@ -42,7 +50,7 @@
                             @blur="blurFeedrateXY"></v-text-field>
                     </settings-row>
                     <v-divider class="my-2"></v-divider>
-                    <settings-row :title="$t('Settings.ControlTab.SpeedZ')">
+                    <settings-row :title="$t('Settings.ControlTab.SpeedZ').toString()">
                         <v-text-field
                             v-model="feedrateZ"
                             type="number"
@@ -56,7 +64,9 @@
                     </settings-row>
                     <v-divider class="my-2"></v-divider>
                     <template v-if="controlStyle === 'cross'">
-                        <settings-row :title="$t('Settings.ControlTab.MoveDistancesInMm')" :mobile-second-row="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.MoveDistancesInMm').toString()"
+                            :mobile-second-row="true">
                             <v-combobox
                                 v-model="stepsAll"
                                 hide-selected
@@ -79,7 +89,9 @@
                         <v-divider class="my-2"></v-divider>
                     </template>
                     <template v-else-if="controlStyle === 'circle'">
-                        <settings-row :title="$t('Settings.ControlTab.MoveDistancesXYInMm')" :mobile-second-row="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.MoveDistancesXYInMm').toString()"
+                            :mobile-second-row="true">
                             <v-combobox
                                 v-model="stepsCircleXY"
                                 hide-selected
@@ -98,7 +110,9 @@
                                 hide-spin-buttons></v-combobox>
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
-                        <settings-row :title="$t('Settings.ControlTab.MoveDistancesZInMm')" :mobile-second-row="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.MoveDistancesZInMm').toString()"
+                            :mobile-second-row="true">
                             <v-combobox
                                 v-model="stepsCircleZ"
                                 hide-selected
@@ -119,7 +133,9 @@
                         <v-divider class="my-2"></v-divider>
                     </template>
                     <template v-else>
-                        <settings-row :title="$t('Settings.ControlTab.MoveDistancesXYInMm')" :mobile-second-row="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.MoveDistancesXYInMm').toString()"
+                            :mobile-second-row="true">
                             <v-combobox
                                 v-model="stepsXY"
                                 hide-selected
@@ -140,7 +156,9 @@
                                 hide-spin-buttons></v-combobox>
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
-                        <settings-row :title="$t('Settings.ControlTab.MoveDistancesZInMm')" :mobile-second-row="true">
+                        <settings-row
+                            :title="$t('Settings.ControlTab.MoveDistancesZInMm').toString()"
+                            :mobile-second-row="true">
                             <v-combobox
                                 v-model="stepsZ"
                                 hide-selected
@@ -162,7 +180,11 @@
                         </settings-row>
                         <v-divider class="my-2"></v-divider>
                     </template>
-                    <settings-row :title="$t('Settings.ControlTab.MoveDistancesEInMm')" :mobile-second-row="true">
+                    <!-- EXTRUDER CONTROL SETTINGS -->
+                    <v-card-title class="mx-n4">{{ $t('Panels.ExtruderControlPanel.Headline') }}</v-card-title>
+                    <settings-row
+                        :title="$t('Settings.ControlTab.MoveDistancesEInMm').toString()"
+                        :mobile-second-row="true">
                         <v-combobox
                             v-model="feedamountsE"
                             hide-selected
@@ -183,7 +205,7 @@
                             hide-spin-buttons></v-combobox>
                     </settings-row>
                     <v-divider class="my-2"></v-divider>
-                    <settings-row :title="$t('Settings.ControlTab.SpeedEInMms')" :mobile-second-row="true">
+                    <settings-row :title="$t('Settings.ControlTab.SpeedEInMms').toString()" :mobile-second-row="true">
                         <v-combobox
                             v-model="feedratesE"
                             hide-selected
@@ -203,6 +225,12 @@
                             outlined
                             hide-spin-buttons></v-combobox>
                     </settings-row>
+                    <settings-row
+                        :title="$t('Settings.ControlTab.EstimatedExtrusionInfo').toString()"
+                        :sub-title="$t('Settings.ControlTab.EstimatedExtrusionInfoDescription').toString()"
+                        :dynamic-slot-width="true">
+                        <v-switch v-model="showEstimatedExtrusionInfo" hide-details class="mt-0"></v-switch>
+                    </settings-row>
                 </v-form>
             </v-card-text>
         </v-card>
@@ -391,6 +419,14 @@ export default class SettingsControlTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.feedrates', value: rates })
     }
 
+    get showEstimatedExtrusionInfo() {
+        return this.$store.state.gui.control.extruder.showEstimatedExtrusionInfo
+    }
+
+    set showEstimatedExtrusionInfo(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'control.extruder.showEstimatedExtrusionInfo', value: newVal })
+    }
+
     blurFeedrateXY() {
         if (!(this.feedrateXY > 0)) this.feedrateXY = 100
     }
diff --git a/src/components/settings/SettingsUiSettingsTab.vue b/src/components/settings/SettingsUiSettingsTab.vue
index f1e393b5..2b5bb2a6 100644
--- a/src/components/settings/SettingsUiSettingsTab.vue
+++ b/src/components/settings/SettingsUiSettingsTab.vue
@@ -2,7 +2,7 @@
     <div>
         <v-card flat>
             <v-card-text>
-                <settings-row :title="$t('Settings.UiSettingsTab.Logo')">
+                <settings-row :title="$t('Settings.UiSettingsTab.Logo').toString()">
                     <v-btn
                         v-if="logoColor.toLowerCase() !== defaultLogoColor.toLowerCase()"
                         small
@@ -23,7 +23,7 @@
                     </v-menu>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.Primary')">
+                <settings-row :title="$t('Settings.UiSettingsTab.Primary').toString()">
                     <v-btn
                         v-if="primaryColor.toLowerCase() !== defaultPrimaryColor.toLowerCase()"
                         small
@@ -45,8 +45,8 @@
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.GcodeThumbnails')"
-                    :sub-title="$t('Settings.UiSettingsTab.GcodeThumbnailsDescription')"
+                    :title="$t('Settings.UiSettingsTab.GcodeThumbnails').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.GcodeThumbnailsDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-btn
                         outlined
@@ -59,33 +59,33 @@
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.BoolBigThumbnail')"
-                    :sub-title="$t('Settings.UiSettingsTab.BoolBigThumbnailDescription')"
+                    :title="$t('Settings.UiSettingsTab.BoolBigThumbnail').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.BoolBigThumbnailDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolBigThumbnail" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
-                <settings-row :title="$t('Settings.UiSettingsTab.ShowWebcamInNavigation')">
+                <settings-row :title="$t('Settings.UiSettingsTab.ShowWebcamInNavigation').toString()">
                     <v-switch v-model="boolWebcamInNavigation" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT')"
-                    :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription')"
+                    :title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINT').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.DisplayCANCEL_PRINTDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="displayCancelPrint" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.DisplayZOffset')"
-                    :sub-title="$t('Settings.UiSettingsTab.DisplayZOffsetDescription')"
+                    :title="$t('Settings.UiSettingsTab.DisplayZOffset').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.DisplayZOffsetDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="displayZOffsetStandby" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.LockSliders')"
-                    :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription')"
+                    :title="$t('Settings.UiSettingsTab.LockSliders').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.LockSlidersDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="lockSliders" hide-details class="mt-0"></v-switch>
                 </settings-row>
@@ -93,8 +93,8 @@
                 <v-expand-transition>
                     <settings-row
                         v-show="lockSliders"
-                        :title="$t('Settings.UiSettingsTab.LockSlidersDelay')"
-                        :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription')"
+                        :title="$t('Settings.UiSettingsTab.LockSlidersDelay').toString()"
+                        :sub-title="$t('Settings.UiSettingsTab.LockSlidersDelayDescription').toString()"
                         :dynamic-slot-width="true">
                         <v-text-field
                             v-model="lockSlidersDelay"
@@ -115,35 +115,35 @@
                 </v-expand-transition>
                 <v-divider v-show="lockSliders" class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop')"
-                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription')"
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStop').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnEmergencyStopDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange')"
-                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription')"
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0"></v-switch>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.NavigationStyle')"
-                    :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
+                    :title="$t('Settings.UiSettingsTab.NavigationStyle').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription').toString()">
                     <v-select
                         v-model="navigationStyleSetting"
                         :items="navigationStyles"
-                        outlined
-                        dense
-                        hide-details
                         class="mt-0"
-                        attach></v-select>
+                        hide-details
+                        outlined
+                        attach
+                        dense></v-select>
                 </settings-row>
                 <v-divider class="my-2"></v-divider>
                 <settings-row
-                    :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton')"
-                    :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription')"
+                    :title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButton').toString()"
+                    :sub-title="$t('Settings.UiSettingsTab.BoolHideUploadAndPrintButtonDescription').toString()"
                     :dynamic-slot-width="true">
                     <v-switch v-model="boolHideUploadAndPrintButton" hide-details class="mt-0"></v-switch>
                 </settings-row>
diff --git a/src/components/ui/SubPanel.vue b/src/components/ui/SubPanel.vue
index 67d0c8c8..4b61afe9 100644
--- a/src/components/ui/SubPanel.vue
+++ b/src/components/ui/SubPanel.vue
@@ -4,22 +4,22 @@
     transition: transform 500ms;
 }
 
-.icon-rotate-180 {
-    transform: rotate(180deg);
+.icon-rotate-n90 {
+    transform: rotate(-90deg);
 }
 </style>
 
 <template>
     <div>
-        <v-card-actions>
-            <v-btn class="btn-collapsible" plain small @click="expand = !expand">
-                <v-icon small :class="!expand ? 'icon-rotate-180' : ''">
+        <div class="px-3 d-flex align-center">
+            <v-btn class="px-0 btn-collapsible" plain small :ripple="false" @click="expand = !expand">
+                <v-icon small :class="!expand ? 'icon-rotate-n90' : ''">
                     {{ expand ? iconExpanded : iconCollapsed }}
                 </v-icon>
                 <span class="pl-1">{{ title }}</span>
             </v-btn>
-            <v-divider class="mx-1"></v-divider>
-        </v-card-actions>
+            <v-divider class="ml-3"></v-divider>
+        </div>
         <v-expand-transition>
             <div v-show="expand">
                 <slot></slot>
@@ -32,12 +32,12 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
-import { mdiMinus, mdiPlus } from '@mdi/js'
+import { mdiChevronDown } from '@mdi/js'
 
 @Component
 export default class Panel extends Mixins(BaseMixin) {
-    @Prop({ required: false, default: mdiMinus }) declare readonly iconExpanded: string | null
-    @Prop({ required: false, default: mdiPlus }) declare readonly iconCollapsed: string | null
+    @Prop({ required: false, default: mdiChevronDown }) declare readonly iconExpanded: string | null
+    @Prop({ required: false, default: mdiChevronDown }) declare readonly iconCollapsed: string | null
     @Prop({ required: true, default: '' }) declare readonly title: string
     @Prop({ required: true }) declare readonly subPanelClass: string
 
diff --git a/src/locales/da.json b/src/locales/da.json
index 39818a6e..366df946 100644
--- a/src/locales/da.json
+++ b/src/locales/da.json
@@ -415,17 +415,12 @@
         "ControlPanel": {
             "ALL": "Alle",
             "AlternateControls": "Alternative kontroller",
-            "Extrude": "Extrude",
-            "FeedAmountIn": "Længde",
-            "FeedrateIn": "Hastighed",
             "Headline": "Kontrolpanel",
-            "HotendTooCold": "Hotend temp. under",
             "InvertX": "Invertér X",
             "InvertY": "Invertér Y",
             "InvertZ": "Invertér Z",
             "PleaseConfigureSteps": "Konfigurer steps",
             "QGL": "QGL",
-            "Retract": "Retract",
             "SettingsInterfaceControl": "Indstillinger > Interface > Control",
             "SetupControls": "Kontrolindstillinger",
             "X": "X",
@@ -437,6 +432,12 @@
             "Dependency": "Afhængighed | Afhængigheder",
             "DependencyDescription": "Din nuværende version af {name} understøtter ikke alle funktioner i Mainsail. Opdater {name} til mindst version {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Extrude",
+            "ExtruderTempTooLow": "Hotend temp. <",
+            "Headline": "Extruder Kontrolpanel",
+            "Retract": "Retract"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Genopret forbindelse",
             "SwitchToPrinter": "Skift til printer",
diff --git a/src/locales/de.json b/src/locales/de.json
index ff8388c5..18a2b0ee 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -436,17 +436,12 @@
         "ControlPanel": {
             "ALL": "ALLE",
             "AlternateControls": "Steuerkreuz",
-            "Extrude": "Extrudieren",
-            "FeedAmountIn": "Vorschub in",
-            "FeedrateIn": "Geschwindigkeit in",
             "Headline": "Steuerung",
-            "HotendTooCold": "Hotend-Temp. niedriger als",
             "InvertX": "X invertieren",
             "InvertY": "Y invertieren",
             "InvertZ": "Z invertieren",
             "PleaseConfigureSteps": "Bitte Schritte konfigurieren",
             "QGL": "QGL",
-            "Retract": "Rückzug",
             "SettingsInterfaceControl": "Einstellungen > Interface > Steuerung",
             "SetupControls": "Setup-Steuerelemente",
             "X": "X",
@@ -454,6 +449,20 @@
             "Z": "Z",
             "ZTilt": "Z Tilt"
         },
+        "ExtruderControlPanel": {
+            "Allowed": "Erlaubt",
+            "EstimatedExtrusion": "Geschätzte Extrusion:",
+            "Extrude": "Extrudieren",
+            "ExtruderTempTooLow": "Extruder Temp. <",
+            "ExtrusionFeedrate": "Extrusionsgeschwindigkeit",
+            "FilamentLength": "Filamentlänge",
+            "Headline": "Extruder",
+            "LoadFilament": "Filament laden",
+            "Requested": "Angefordert",
+            "Retract": "Rückzug",
+            "TooLargeExtrusion": "Extrusion zu groß!",
+            "UnloadFilament": "Filament entladen"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Neu verbinden",
             "SwitchToPrinter": "Zum Drucker wechseln",
@@ -483,7 +492,7 @@
                 "Velocity": "Geschwindigkeit"
             },
             "PressureAdvanceSettings": {
-                "Advance": "Advance",
+                "Advance": "Pressure Advance",
                 "Extruder": "Extruder",
                 "PressureAdvance": "Pressure Advance",
                 "SmoothTime": "Smooth Time"
@@ -561,6 +570,9 @@
             "Y": "Y",
             "Z": "Z"
         },
+        "ToolheadControlPanel": {
+            "Headline": "Werkzeugkopf-Steuerung"
+        },
         "TemperaturePanel": {
             "AutoscaleChart": "Autoskalierung",
             "Avg": "Ø",
@@ -673,6 +685,8 @@
             "Circle": "Kreis",
             "Control": "Steuerung",
             "Cross": "Kreuz",
+            "EstimatedExtrusionInfo": "Info zur geschätzten Extrusion",
+            "EstimatedExtrusionInfoDescription": "Anzeigen/ausblenden der Info zur geschätzten Extrusion, basierend auf Extrusionmenge und Extrusionsgeschwindigkeit",
             "InvertXMovement": "X-Bewegung invertieren",
             "InvertYMovement": "Y-Bewegung invertieren",
             "InvertZMovement": "Z-Bewegung invertieren",
diff --git a/src/locales/en.json b/src/locales/en.json
index 3d9cc8a6..ab008256 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -437,17 +437,12 @@
         "ControlPanel": {
             "ALL": "ALL",
             "AlternateControls": "Alternate controls",
-            "Extrude": "Extrude",
-            "FeedAmountIn": "Feed amount in",
-            "FeedrateIn": "Feedrate in",
             "Headline": "Controls",
-            "HotendTooCold": "Hotend temp. lower than",
             "InvertX": "Invert X",
             "InvertY": "Invert Y",
             "InvertZ": "Invert Z",
             "PleaseConfigureSteps": "Please configure steps",
             "QGL": "QGL",
-            "Retract": "Retract",
             "SettingsInterfaceControl": "Settings > Interface > Control",
             "SetupControls": "Setup Controls",
             "X": "X",
@@ -455,6 +450,21 @@
             "Z": "Z",
             "ZTilt": "Z Tilt"
         },
+        "ExtruderControlPanel": {
+            "Allowed": "Allowed",
+            "EstimatedExtrusion": "Estimated Extrusion:",
+            "Extrude": "Extrude",
+            "ExtruderTempTooLow": "Extruder temp. <",
+            "ExtrusionFactor": "Extrusion factor",
+            "ExtrusionFeedrate": "Extrusion Feedrate",
+            "FilamentLength": "Filament Length",
+            "Headline": "Extruder",
+            "LoadFilament": "Load Filament",
+            "Requested": "Requested",
+            "Retract": "Retract",
+            "TooLargeExtrusion": "Extrusion too large!",
+            "UnloadFilament": "Unload Filament"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Reconnect",
             "SwitchToPrinter": "Switch to Printer",
@@ -484,7 +494,7 @@
                 "Velocity": "Velocity"
             },
             "PressureAdvanceSettings": {
-                "Advance": "Advance",
+                "Advance": "Pressure Advance",
                 "Extruder": "Extruder",
                 "PressureAdvance": "Pressure Advance",
                 "SmoothTime": "Smooth Time"
@@ -562,7 +572,10 @@
             "Y": "Y",
             "Z": "Z"
         },
-        "TemperaturePanel": {
+        "ToolheadControlPanel": {
+            "Headline": "Toolhead Controls"
+        },
+        "ToolsPanel": {
             "AutoscaleChart": "Autoscale Chart",
             "Avg": "Avg",
             "Color": "Color",
@@ -676,6 +689,8 @@
             "Circle": "Circle",
             "Control": "Control",
             "Cross": "Cross",
+            "EstimatedExtrusionInfo": "Estimated Extrusion Info",
+            "EstimatedExtrusionInfoDescription": "Show / Hide info for estimated extrusions based on extrusion amount and feedrate",
             "InvertXMovement": "Invert X movement",
             "InvertYMovement": "Invert Y movement",
             "InvertZMovement": "Invert Z movement",
diff --git a/src/locales/es.json b/src/locales/es.json
index 12a39e68..c1c12fd3 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -399,17 +399,12 @@
         "ControlPanel": {
             "ALL": "TODO",
             "AlternateControls": "Alternar controles",
-            "Extrude": "Extruir",
-            "FeedAmountIn": "Cantidad alim.",
-            "FeedrateIn": "Velocidad alim.",
             "Headline": "Controles",
-            "HotendTooCold": "Temp. del Hotend por debajo de",
             "InvertX": "Invertir X",
             "InvertY": "Invertir Y",
             "InvertZ": "Invertir Z",
             "PleaseConfigureSteps": "Por favor configure los pasos",
             "QGL": "QGL",
-            "Retract": "Retraer",
             "SettingsInterfaceControl": "Configuración > Interfaz > Control",
             "SetupControls": "Configurar controles",
             "X": "X",
@@ -421,6 +416,11 @@
             "Dependency": "Dependencia | Dependencias",
             "DependencyDescription": "La versión de {name} actual no soporta todas las funciones de Mainsail. Actualice {name} por lo menos a la versión {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Extruir",
+            "ExtrusionFactor": "Factor de extrusión",
+            "Retract": "Retraer"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Reconectar",
             "SwitchToPrinter": "Cambiar a impresora",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index bbad4b09..fbd6286f 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -383,17 +383,12 @@
         "ControlPanel": {
             "ALL": "Tous",
             "AlternateControls": "Commandes en croix",
-            "Extrude": "Extrusion",
-            "FeedAmountIn": "Longueur à extraire",
-            "FeedrateIn": "Vitesse d'extrusion",
             "Headline": "Contrôles",
-            "HotendTooCold": "Tête d'impression trop froide",
             "InvertX": "Inversion X",
             "InvertY": "Inversion Y",
             "InvertZ": "Inversion Z",
             "PleaseConfigureSteps": "Configurez Pas",
             "QGL": "QGL",
-            "Retract": "Rétractation",
             "SettingsInterfaceControl": "Réglages > Interface > Contrôle",
             "SetupControls": "Réglages",
             "X": "X",
@@ -405,6 +400,13 @@
             "Dependency": "Dépendance(s)",
             "DependencyDescription": "Votre version {name} ne supporte pas toutes possibilités de Mainsail. Mettez à jour {name} vers {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Extrusion",
+            "ExtrusionFactor": "Facteur d'extrusion",
+            "ExtrusionFeedrate": "Vitesse d'extrusion",
+            "Headline": "Contrôles d'Extrudeur",
+            "Retract": "Rétractation"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Re-connection",
             "SwitchToPrinter": "Changer d'imprimante",
diff --git a/src/locales/hu.json b/src/locales/hu.json
index fffb96a6..592dcde2 100644
--- a/src/locales/hu.json
+++ b/src/locales/hu.json
@@ -382,17 +382,12 @@
         "ControlPanel": {
             "ALL": "MIND",
             "AlternateControls": "Vezérlési alternatívák",
-            "Extrude": "Extrudálás",
-            "FeedAmountIn": "Behúzás mennyisége",
-            "FeedrateIn": "Behúzási ráta",
             "Headline": "Vezérlések",
-            "HotendTooCold": "Hotend hőm. kevesebb mint",
             "InvertX": "X invertálása",
             "InvertY": "Y invertálása",
             "InvertZ": "Z invertálása",
             "PleaseConfigureSteps": "Kérlek állítsd be a step értékét",
             "QGL": "QGL",
-            "Retract": "Visszahúzás",
             "SettingsInterfaceControl": "Beállítások > Kezelőfelület > Vezérlés",
             "SetupControls": "Beállítás vezérlései",
             "X": "X",
@@ -404,6 +399,11 @@
             "Dependency": "Függőség | Függőségek",
             "DependencyDescription": "A jelenlegi verzió {name} nem támogatja a Mainsail minden funkcióját. Frissítsd a {name} verziót legalább erre: {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Extrudálás",
+            "ExtrusionFactor": "Extrudálási szorzó",
+            "Retract": "Visszahúzás"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Újracsatlakozás",
             "SwitchToPrinter": "Váltás a nyomtatóra",
diff --git a/src/locales/it.json b/src/locales/it.json
index 63fe9455..d805128e 100644
--- a/src/locales/it.json
+++ b/src/locales/it.json
@@ -382,17 +382,12 @@
         "ControlPanel": {
             "ALL": "TUTTI",
             "AlternateControls": "Controlli Alternativi",
-            "Extrude": "Estrudi",
-            "FeedAmountIn": "Quantità di alimentazione in",
-            "FeedrateIn": "Velocità di avanzamento",
             "Headline": "Controlli",
-            "HotendTooCold": "Temp. hotend più bassa di",
             "InvertX": "Inverti X",
             "InvertY": "Inverti Y",
             "InvertZ": "Inverti Z",
             "PleaseConfigureSteps": "Configura gli step",
             "QGL": "QGL",
-            "Retract": "Retrazione",
             "SettingsInterfaceControl": "Impostazioni> Interfaccia> Controllo",
             "SetupControls": "Controlli Installazione",
             "X": "X",
@@ -404,6 +399,11 @@
             "Dependency": "Dipendenze",
             "DependencyDescription": "L'attuale versione di {name} non supporta tutte le features di Mainsail. Aggiorna {name} almeno alla versione {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Estrudi",
+            "ExtrusionFactor": "Fattore di estrusione",
+            "Retract": "Retrazione"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Riconnetti",
             "SwitchToPrinter": "Passa alla Stampante",
diff --git a/src/locales/nl.json b/src/locales/nl.json
index 2afc2f33..ecefc9ff 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -383,9 +383,6 @@
             "ALL": "ALLES",
             "AlternateControls": "Alternatieve bediening",
             "Controls": "Bediening",
-            "Extrude": "Extrude",
-            "FeedAmountIn": "Feedlengte in",
-            "FeedrateIn": "Feedsnelheid in",
             "Headline": "Bediening",
             "Home": "Home",
             "HotendTooCold": "Hotend temp. lager dan",
@@ -395,7 +392,6 @@
             "Macros": "Macros",
             "PleaseConfigureSteps": "Configureer steps",
             "QGL": "QGL",
-            "Retract": "Retract",
             "SettingsInterfaceControl": "Instllingen > Interface > Bediening",
             "SetupControls": "Bewerk Bediening",
             "X": "X",
@@ -407,6 +403,11 @@
             "Dependency": "Afhankelijkheid | Afhankelijkheden",
             "DependencyDescription": "Je huidige {name} versie ondersteunt niet alle features van Mainsail. Update {name} naar tenminste {neededVersion}"
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Extrude",
+            "ExtrusionFactor": "Extrusie factor",
+            "Retract": "Retract"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Opnieuw verbinden",
             "SwitchToPrinter": "Wissel naar Printer",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 1f00c252..ab094231 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -382,17 +382,12 @@
         "ControlPanel": {
             "ALL": "WSZYSTKIE",
             "AlternateControls": "Alternatywne sterowanie",
-            "Extrude": "Wytłocz",
-            "FeedAmountIn": "Ilość filamentu",
-            "FeedrateIn": "Tempo podawania",
             "Headline": "Sterowanie drukarką",
-            "HotendTooCold": "Temperatura hotendu mniejsza niż",
             "InvertX": "Odwróć oś X",
             "InvertY": "Odwróć oś Y",
             "InvertZ": "Odwróć oś Z",
             "PleaseConfigureSteps": "Proszę skonfigurować kroki",
             "QGL": "QGL",
-            "Retract": "Retrakcja",
             "SettingsInterfaceControl": "Ustawienia > Interfejs > Konfiguracja",
             "SetupControls": "Konfiguracja sterowania",
             "X": "X",
@@ -404,6 +399,11 @@
             "Dependency": "Zależność | Zależności",
             "DependencyDescription": "Twoja aktualna {name} wersja nie wspiera wszystkich funkcji Mainsaila. Zaktualizuj {name} do wersji co najmniej {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Wytłocz",
+            "ExtrusionFactor": "Wartość ekstruzji",
+            "Retract": "Retrakcja"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Ponownie połącz",
             "SwitchToPrinter": "Przełącz do drukarki",
diff --git a/src/locales/ru.json b/src/locales/ru.json
index 55e75e91..9add4baf 100644
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@@ -383,19 +383,14 @@
             "ALL": "ALL",
             "AlternateControls": "Альтернативный контроль",
             "Controls": "Контроль",
-            "Extrude": "Экструдировать",
-            "FeedAmountIn": "Скорость подачи Количество в",
-            "FeedrateIn": "Скорость подачи",
             "Headline": "Управление",
             "Home": "Home",
-            "HotendTooCold": "Температура нагревателя ниже, чем",
             "InvertX": "X инвертировать",
             "InvertY": "Y инвертировать",
             "InvertZ": "Z инвертировать",
             "Macros": "Макрос",
             "PleaseConfigureSteps": "Пожалуйста, настройте расстояние вращения",
             "QGL": "QGL",
-            "Retract": "Въехать",
             "SettingsInterfaceControl": "Настройки > интерфейс > управление",
             "SetupControls": "Установить контроль",
             "X": "X",
@@ -407,6 +402,11 @@
             "Dependency": "Зависимость | Зависимости",
             "DependencyDescription": "Ваша текущая версия {name} не поддерживает все функции Mainsail. Обновите {name} по крайней мере до версии {neededVersion}."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "Экструдировать",
+            "ExtrusionFactor": "Коэффициент экструзии",
+            "Retract": "Въехать"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "Подключите",
             "SwitchToPrinter": "Переключение на принтер",
diff --git a/src/locales/zh-tw.json b/src/locales/zh-tw.json
index 8ff7e4c4..126a344c 100644
--- a/src/locales/zh-tw.json
+++ b/src/locales/zh-tw.json
@@ -331,16 +331,12 @@
         "ControlPanel": {
             "ALL": "所有",
             "AlternateControls": "備用控制",
-            "Extrude": "擠出",
-            "FeedAmountIn": "進料",
-            "FeedrateIn": "擠出率",
             "Headline": "控制",
             "InvertX": "翻轉 X",
             "InvertY": "翻轉 Y",
             "InvertZ": "翻轉 Z",
             "PleaseConfigureSteps": "請設定步進",
             "QGL": "QGL",
-            "Retract": "回抽",
             "SettingsInterfaceControl": "設定 > 界面 > 控制",
             "SetupControls": "設定控制",
             "X": "X",
@@ -352,6 +348,11 @@
             "Dependency": "依賴 | 依賴關係",
             "DependencyDescription": "您當前的 {name} 版本不支持 Mainsail 的所有功能。將 {name} 更新為至少 {neededVersion}。"
         },
+        "ExtruderControlPanel": {
+            "Extrude": "擠出",
+            "ExtrusionFactor": "擠出係數",
+            "Retract": "回抽"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "重新連線",
             "SwitchToPrinter": "切換到列印機",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index ae5602b8..7834df04 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -382,17 +382,12 @@
         "ControlPanel": {
             "ALL": "所有",
             "AlternateControls": "翻转控制",
-            "Extrude": "挤出",
-            "FeedAmountIn": "进料量",
-            "FeedrateIn": "进料速度",
             "Headline": "控制",
-            "HotendTooCold": "挤出头温度. 低于",
             "InvertX": "翻转 X",
             "InvertY": "翻转 Y",
             "InvertZ": "翻转 Z",
             "PleaseConfigureSteps": "请设置步",
             "QGL": "四点调平",
-            "Retract": "回抽",
             "SettingsInterfaceControl": "设置 > 界面 > 控制",
             "SetupControls": "设置",
             "X": "X",
@@ -404,6 +399,11 @@
             "Dependency": "依赖",
             "DependencyDescription": "你当前 {name} 版本并不支持所有 Mainsail 的特性. 跟新 {name} 到至少 {neededVersion}版本."
         },
+        "ExtruderControlPanel": {
+            "Extrude": "挤出",
+            "ExtrusionFactor": "挤出因子",
+            "Retract": "回抽"
+        },
         "FarmPrinterPanel": {
             "ReconnectToPrinter": "重新连接",
             "SwitchToPrinter": "切换到打印机",
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index ede70a2b..a9dd472b 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -83,6 +83,7 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import ControlPanel from '@/components/panels/ControlPanel.vue'
+import ExtruderControlPanel from '@/components/panels/ExtruderControlPanel.vue'
 import DashboardMixin from '@/components/mixins/dashboard'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
 import MachineSettingsPanel from '@/components/panels/MachineSettings/MachineSettingsPanel.vue'
@@ -101,6 +102,7 @@ import kebabCase from 'lodash.kebabcase'
 @Component({
     components: {
         ControlPanel,
+        ExtruderControlPanel,
         KlippyStatePanel,
         MachineSettingsPanel,
         MacrogroupPanel,
diff --git a/src/plugins/helpers.ts b/src/plugins/helpers.ts
index 2dc3dd53..9ebd82d8 100644
--- a/src/plugins/helpers.ts
+++ b/src/plugins/helpers.ts
@@ -9,6 +9,7 @@ import {
     mdiGamepad,
     mdiInformation,
     mdiPrinter3d,
+    mdiPrinter3dNozzle,
     mdiThermometerLines,
     mdiWebcam,
 } from '@mdi/js'
@@ -67,6 +68,8 @@ export const convertPanelnameToIcon = (name: string): string => {
             return mdiConsoleLine
         case 'machine-settings':
             return mdiEngine
+        case 'extruder-control':
+            return mdiPrinter3dNozzle
 
         default:
             return mdiInformation
diff --git a/src/store/gui/index.ts b/src/store/gui/index.ts
index 3ea98098..8d650397 100644
--- a/src/store/gui/index.ts
+++ b/src/store/gui/index.ts
@@ -37,9 +37,10 @@ export const getDefaultState = (): GuiState => {
             reverseZ: false,
             extruder: {
                 feedamount: 25,
-                feedamounts: [50, 25, 10, 5, 1],
+                feedamounts: [50, 10, 5, 1],
                 feedrate: 5,
-                feedrates: [15, 10, 5, 2, 1],
+                feedrates: [10, 5, 2, 1],
+                showEstimatedExtrusionInfo: true,
             },
         },
         dashboard: {
@@ -53,6 +54,7 @@ export const getDefaultState = (): GuiState => {
                 { name: 'webcam', visible: false },
                 { name: 'zoffset', visible: true },
                 { name: 'control', visible: true },
+                { name: 'extruder-control', visible: true },
                 { name: 'macros', visible: true },
                 { name: 'printsettings', visible: true },
                 { name: 'machine-settings', visible: true },
@@ -64,6 +66,7 @@ export const getDefaultState = (): GuiState => {
                 { name: 'webcam', visible: true },
                 { name: 'zoffset', visible: true },
                 { name: 'control', visible: true },
+                { name: 'extruder-control', visible: true },
                 { name: 'macros', visible: true },
                 { name: 'printsettings', visible: true },
                 { name: 'machine-settings', visible: true },
@@ -77,6 +80,7 @@ export const getDefaultState = (): GuiState => {
                 { name: 'webcam', visible: true },
                 { name: 'zoffset', visible: true },
                 { name: 'control', visible: true },
+                { name: 'extruder-control', visible: true },
                 { name: 'macros', visible: true },
                 { name: 'printsettings', visible: true },
                 { name: 'machine-settings', visible: true },
@@ -89,6 +93,7 @@ export const getDefaultState = (): GuiState => {
             widescreenLayout1: [
                 { name: 'zoffset', visible: true },
                 { name: 'control', visible: true },
+                { name: 'extruder-control', visible: true },
                 { name: 'macros', visible: true },
                 { name: 'miscellaneous', visible: true },
             ],
diff --git a/src/store/gui/types.ts b/src/store/gui/types.ts
index 8658e1e0..5f742554 100644
--- a/src/store/gui/types.ts
+++ b/src/store/gui/types.ts
@@ -31,6 +31,7 @@ export interface GuiState {
             feedamounts: number[]
             feedrate: number
             feedrates: number[]
+            showEstimatedExtrusionInfo: boolean
         }
     }
     dashboard: {
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index 66151ea9..3cd240ff 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -3,6 +3,7 @@ import { GetterTree } from 'vuex'
 import {
     PrinterState,
     PrinterStateBedMesh,
+    PrinterStateExtruder,
     PrinterStateFan,
     PrinterStateFilamentSensors,
     PrinterStateHeater,
@@ -672,6 +673,27 @@ export const getters: GetterTree<PrinterState, RootState> = {
         return caseInsensitiveSort(profiles, 'name')
     },
 
+    getExtruders: (state) => {
+        const extruders: PrinterStateExtruder[] = []
+        if (state.configfile?.settings) {
+            Object.keys(state.configfile?.settings)
+                .filter((key) => key.startsWith('extruder'))
+                .sort()
+                .forEach((key: string) => {
+                    const extruder = state.configfile?.settings[key]
+                    extruders.push({
+                        key: key,
+                        name: `Extruder ${key == 'extruder' ? '0' : key.replace('extruder', '')}`,
+                        filamentDiameter: extruder.filament_diameter,
+                        nozzleDiameter: extruder.nozzle_diameter,
+                        minExtrudeTemp: extruder.min_extrude_temp,
+                        maxExtrudeOnlyDistance: extruder.max_extrude_only_distance,
+                    })
+                })
+        }
+        return extruders
+    },
+
     getExtrudePossible: (state) => {
         const extruderName = state.toolhead?.extruder ?? 'extruder'
 
diff --git a/src/store/printer/types.ts b/src/store/printer/types.ts
index a64c30d7..9a6760b4 100644
--- a/src/store/printer/types.ts
+++ b/src/store/printer/types.ts
@@ -203,3 +203,12 @@ export interface PrinterStateKlipperConfigWarning {
     type: 'deprecated_value' | 'deprecated_option'
     value: string
 }
+
+export interface PrinterStateExtruder {
+    key: string
+    name: string
+    filamentDiameter: number
+    minExtrudeTemp: number
+    nozzleDiameter: number
+    maxExtrudeOnlyDistance: number
+}
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 37be973f..8457f941 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -70,6 +70,7 @@ export const maxGcodeHistory = 50
  */
 export const allDashboardPanels = [
     'control',
+    'extruder-control',
     'macros',
     'machine-settings',
     'miniconsole',