From 9071ccfa12c148c31cfa3c7494820a88bfc651f2 Mon Sep 17 00:00:00 2001
From: Pedro Lamas <pedrolamas@gmail.com>
Date: Mon, 27 May 2024 15:49:59 +0100
Subject: [PATCH] feat: Beacon support

Signed-off-by: Pedro Lamas <pedrolamas@gmail.com>
---
 src/components/widgets/beacon/BeaconCard.vue  | 197 ++++++++++++++++++
 .../widgets/beacon/SaveModelDialog.vue        |  63 ++++++
 src/globals.ts                                |   9 +-
 src/locales/en.yaml                           |  15 ++
 src/store/layout/state.ts                     |   3 +-
 src/store/printer/getters.ts                  |  23 +-
 src/store/printer/types.ts                    |  32 +++
 src/views/Dashboard.vue                       |   9 +-
 src/views/Tune.vue                            |  12 +-
 9 files changed, 356 insertions(+), 7 deletions(-)
 create mode 100644 src/components/widgets/beacon/BeaconCard.vue
 create mode 100644 src/components/widgets/beacon/SaveModelDialog.vue

diff --git a/src/components/widgets/beacon/BeaconCard.vue b/src/components/widgets/beacon/BeaconCard.vue
new file mode 100644
index 0000000000..5047da071e
--- /dev/null
+++ b/src/components/widgets/beacon/BeaconCard.vue
@@ -0,0 +1,197 @@
+<template>
+  <collapsable-card
+    :title="$t('app.general.title.beacon_controls')"
+    icon="$beacon"
+    :draggable="!fullscreen"
+    :collapsable="!fullscreen"
+    layout-path="dashboard.beacon-card"
+  >
+    <template v-if="beaconModels.length > 0">
+      <v-simple-table>
+        <thead>
+          <tr>
+            <th>{{ $t('app.general.label.name') }}</th>
+            <th>&nbsp;</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="item in beaconModels"
+            :key="item.name"
+          >
+            <td class="">
+              {{ item.name }}
+            </td>
+            <td>
+              <v-chip
+                v-if="item.active"
+                small
+                block
+              >
+                {{ $t('app.beacon.label.active') }}
+              </v-chip>
+            </td>
+            <td
+              class="text-right"
+              nowrap
+            >
+              <v-tooltip
+                v-if="!item.active"
+                bottom
+              >
+                <template #activator="{ on, attrs }">
+                  <app-btn
+                    v-bind="attrs"
+                    x-small
+                    color=""
+                    fab
+                    text
+                    @click="loadModel(item.name)"
+                    v-on="on"
+                  >
+                    <v-icon>$open</v-icon>
+                  </app-btn>
+                </template>
+                <span>{{ $t('app.beacon.tooltip.load') }}</span>
+              </v-tooltip>
+
+              <v-tooltip bottom>
+                <template #activator="{ on, attrs }">
+                  <app-btn
+                    v-bind="attrs"
+                    color=""
+                    class="ml-2"
+                    fab
+                    text
+                    x-small
+                    @click="removeModel(item.name)"
+                    v-on="on"
+                  >
+                    <v-icon color="">
+                      $close
+                    </v-icon>
+                  </app-btn>
+                </template>
+                <span>{{ $t('app.beacon.tooltip.delete') }}</span>
+              </v-tooltip>
+            </td>
+          </tr>
+        </tbody>
+      </v-simple-table>
+    </template>
+
+    <v-divider />
+
+    <v-card-text>
+      <div
+        v-if="beaconModels.length === 0"
+        class="mb-4"
+      >
+        No existing beacon models found
+      </div>
+      <v-row>
+        <v-col cols="6">
+          <app-btn
+            block
+            small
+            color="primary"
+            @click="handleOpenSaveDialog"
+          >
+            {{ $t('app.general.btn.save_as') }}
+          </app-btn>
+        </v-col>
+        <v-col cols="6">
+          <app-btn
+            small
+            block
+            class="mb-2"
+            :loading="hasWait($waits.onBeaconCalibrate)"
+            :disabled="printerBusy || !xyHomed"
+            @click="calibrate"
+          >
+            {{ $t('app.general.btn.calibrate') }}
+          </app-btn>
+        </v-col>
+      </v-row>
+
+      <!-- <div>{{ beacon }}</div> -->
+    </v-card-text>
+
+    <save-model-dialog
+      v-if="saveDialogState.open"
+      v-model="saveDialogState.open"
+      :existing-name="saveDialogState.existingName"
+      @save="handlModelSave"
+    />
+  </collapsable-card>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import SaveModelDialog from './SaveModelDialog.vue'
+import StateMixin from '@/mixins/state'
+import ToolheadMixin from '@/mixins/toolhead'
+import type { BeaconModel, BeaconState } from '@/store/printer/types'
+
+@Component({
+  components: {
+    SaveModelDialog
+  }
+})
+export default class BeaconCard extends Mixins(StateMixin, ToolheadMixin) {
+  saveDialogState = {
+    open: false,
+    existingName: 'default'
+  }
+
+  @Prop({ type: Boolean })
+  readonly fullscreen?: boolean
+
+  get beacon (): BeaconState {
+    return this.$store.state.printer.printer.beacon
+  }
+
+  get beaconModels (): BeaconModel[] {
+    return this.$store.getters['printer/getBeaconModels']
+  }
+
+  async loadModel (name: string) {
+    const result = (
+      !this.printerPrinting ||
+      await this.$confirm(
+        this.$tc('app.general.simple_form.msg.confirm_change_beacon_model'),
+        { title: this.$tc('app.general.label.confirm'), color: 'card-heading', icon: '$error' }
+      )
+    )
+
+    if (result) {
+      this.sendGcode(`BEACON_MODEL_SELECT NAME="${name}"`)
+    }
+  }
+
+  removeModel (name: string) {
+    this.sendGcode(`BEACON_MODEL_REMOVE NAME="${name}"`)
+  }
+
+  calibrate () {
+    this.sendGcode('BEACON_CALIBRATE', this.$waits.onBeaconCalibrate)
+  }
+
+  handleOpenSaveDialog () {
+    this.saveDialogState = {
+      open: true,
+      existingName: this.beacon.model ?? ''
+    }
+  }
+
+  handlModelSave (config: { name: string; removeDefault: boolean }) {
+    if (config.name !== this.beacon.model) {
+      this.sendGcode(`BEACON_MODEL_SAVE NAME="${config.name}"`)
+    }
+    if (config.removeDefault) {
+      this.sendGcode(`BEACON_MODEL_REMOVE NAME="${this.beacon.model}"`)
+    }
+  }
+}
+</script>
diff --git a/src/components/widgets/beacon/SaveModelDialog.vue b/src/components/widgets/beacon/SaveModelDialog.vue
new file mode 100644
index 0000000000..9b76e53ab7
--- /dev/null
+++ b/src/components/widgets/beacon/SaveModelDialog.vue
@@ -0,0 +1,63 @@
+<template>
+  <app-dialog
+    v-model="open"
+    :title="$t('app.general.label.save_as')"
+    max-width="450"
+    @save="handleSubmit()"
+  >
+    <v-card-text>
+      <v-text-field
+        v-model="name"
+        autofocus
+        filled
+        required
+        class="mb-4"
+        :rules="[
+          $rules.required
+        ]"
+        hide-details="auto"
+        :label="$t('app.beacon.label.model_name')"
+      />
+
+      <v-checkbox
+        v-model="removeDefault"
+        :label="$t('app.beacon.label.remove_model', { name: existingName })"
+        hide-details="auto"
+        class="mb-4"
+        :disabled="name === existingName"
+      />
+
+      <span>
+        {{ $t('app.beacon.msg.hint', { name: existingName }) }}
+      </span>
+    </v-card-text>
+  </app-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, VModel } from 'vue-property-decorator'
+import StateMixin from '@/mixins/state'
+import ToolheadMixin from '@/mixins/toolhead'
+
+@Component({})
+export default class SaveModelDialog extends Mixins(StateMixin, ToolheadMixin) {
+  @VModel({ type: Boolean })
+  open?: boolean
+
+  @Prop({ type: String })
+  readonly existingName!: string
+
+  mounted () {
+    this.name = 'default'
+    this.removeDefault = false
+  }
+
+  name = 'default'
+  removeDefault = false
+
+  handleSubmit () {
+    this.$emit('save', { name: this.name, removeDefault: this.removeDefault })
+    this.open = false
+  }
+}
+</script>
diff --git a/src/globals.ts b/src/globals.ts
index d16a5832fb..5208baa404 100644
--- a/src/globals.ts
+++ b/src/globals.ts
@@ -152,7 +152,8 @@ import {
   mdiRotateLeft,
   mdiRotateRight,
   mdiToothbrush,
-  mdiUsb
+  mdiUsb,
+  mdiMagnet
 } from '@mdi/js'
 
 const mdiFilament = 'M 12 2 C 11.811244 2.0027 11.62182 2.01009 11.433594 2.0234375 C 11.245368 2.0367892 11.058338 2.0560871 10.871094 2.0800781 C 10.528376 2.1223311 10.188076 2.1823072 9.8515625 2.2597656 C 9.4050859 2.3584685 8.9659029 2.4876777 8.5371094 2.6464844 C 8.2433457 2.7507726 7.9546177 2.8687402 7.671875 3 L 7.6699219 3 C 7.2200923 3.2179359 6.7872406 3.4692919 6.375 3.7519531 C 6.1149723 3.9281592 5.8633915 4.1165194 5.6210938 4.3164062 C 5.2734281 4.6063526 4.9458497 4.9195737 4.640625 5.2539062 C 4.4299712 5.4884886 4.2305306 5.7329027 4.0429688 5.9863281 C 4.0007188 6.0418801 3.9590487 6.0978726 3.9179688 6.1542969 C 3.7241339 6.4206091 3.543575 6.6963363 3.3769531 6.9804688 C 3.3651531 7.0019097 3.3534369 7.0233949 3.3417969 7.0449219 C 2.9828732 7.6642764 2.691488 8.3203821 2.4726562 9.0019531 C 2.3383154 9.4325109 2.233258 9.8716656 2.1582031 10.316406 C 2.1085032 10.625133 2.0733024 10.936022 2.0527344 11.248047 L 2.0527344 11.25 L 2.0527344 11.251953 L 2.0527344 11.253906 L 2.0527344 11.255859 C 2.0258944 11.502973 2.00832 11.751383 2 12 C 2.000879 12.252257 2.0113 12.504391 2.03125 12.755859 L 2.0332031 12.767578 C 2.0566631 13.076458 2.0944624 13.384082 2.1464844 13.689453 C 2.2214943 14.129536 2.3258985 14.564103 2.4589844 14.990234 C 2.5675343 15.334756 2.6946769 15.673142 2.8398438 16.003906 L 2.8457031 16.017578 L 2.8535156 16.03125 C 2.9986205 16.362102 3.1616911 16.684839 3.3417969 16.998047 L 3.34375 17 C 3.5265728 17.317394 3.7267926 17.624495 3.9433594 17.919922 C 4.1600882 18.215026 4.3928602 18.498004 4.640625 18.767578 C 4.9426097 19.096141 5.2662503 19.404121 5.609375 19.689453 C 5.8509948 19.889955 6.1019244 20.078968 6.3613281 20.255859 C 6.7778367 20.540458 7.2152833 20.793132 7.6699219 21.011719 L 7.671875 21.011719 C 7.9543247 21.147608 8.2431027 21.27014 8.5371094 21.378906 C 8.956542 21.533797 9.3858911 21.660384 9.8222656 21.757812 L 9.8242188 21.757812 C 10.165943 21.833832 10.511518 21.891861 10.859375 21.931641 C 10.885405 21.935041 10.91144 21.938206 10.9375 21.941406 C 11.290376 21.979776 11.645044 21.99934 12 22 C 12.188756 21.9973 12.37818 21.98991 12.566406 21.976562 C 12.754632 21.963215 12.941662 21.943912 13.128906 21.919922 C 13.471624 21.877672 13.811924 21.817693 14.148438 21.740234 C 14.594914 21.641534 15.034096 21.512323 15.462891 21.353516 C 15.756653 21.249229 16.045381 21.131261 16.328125 21 L 16.330078 21 C 16.779908 20.782064 17.21276 20.530708 17.625 20.248047 C 17.885029 20.07184 18.136608 19.883481 18.378906 19.683594 C 18.726573 19.393647 19.054149 19.080425 19.359375 18.746094 C 19.570029 18.511511 19.76947 18.267097 19.957031 18.013672 C 19.999281 17.958122 20.040951 17.902127 20.082031 17.845703 C 20.275866 17.57939 20.456425 17.303665 20.623047 17.019531 C 20.634847 16.998091 20.646563 16.976598 20.658203 16.955078 C 21.017127 16.335724 21.308511 15.679617 21.527344 14.998047 C 21.661685 14.567489 21.766742 14.128334 21.841797 13.683594 C 21.891497 13.374867 21.926698 13.063978 21.947266 12.751953 L 21.947266 12.75 L 21.947266 12.748047 L 21.947266 12.746094 L 21.947266 12.744141 C 21.974096 12.496824 21.99169 12.248617 22 12 C 21.999121 11.747743 21.9887 11.495609 21.96875 11.244141 L 21.966797 11.232422 C 21.943337 10.923542 21.905537 10.615918 21.853516 10.310547 C 21.778506 9.8704641 21.6741 9.4358974 21.541016 9.0097656 C 21.432464 8.6652447 21.305324 8.3268573 21.160156 7.9960938 L 21.154297 7.9824219 L 21.146484 7.96875 C 21.001384 7.6379017 20.838309 7.315161 20.658203 7.0019531 L 20.65625 7 C 20.47338 6.6826091 20.273207 6.375505 20.056641 6.0800781 C 19.839912 5.7849746 19.60714 5.5019958 19.359375 5.2324219 C 19.05739 4.903859 18.73375 4.5958783 18.390625 4.3105469 C 18.149005 4.1100449 17.898076 3.921033 17.638672 3.7441406 C 17.222163 3.459542 16.784717 3.2068671 16.330078 2.9882812 L 16.328125 2.9882812 C 16.045675 2.8523915 15.756897 2.72986 15.462891 2.6210938 C 15.043458 2.4662029 14.614109 2.3396166 14.177734 2.2421875 L 14.175781 2.2421875 C 13.834058 2.1661636 13.488482 2.1081404 13.140625 2.0683594 C 13.114595 2.0649994 13.08856 2.0617537 13.0625 2.0585938 C 12.709629 2.0202237 12.354956 2.0006604 12 2 z M 10.701172 4.25 L 10.957031 4.3984375 L 11.066406 4.4609375 L 11.132812 4.5 L 11.566406 4.75 L 11.566406 5.75 L 11.132812 6 L 10.875 6.1484375 C 10.874877 6.1490598 10.875123 6.1497684 10.875 6.1503906 L 10.701172 6.25 L 10.267578 6 L 9.8359375 5.75 L 9.8359375 4.75 L 10.103516 4.5957031 L 10.701172 4.25 z M 13.298828 4.25 L 14.164062 4.75 L 14.164062 5.75 L 13.298828 6.25 L 12.433594 5.75 L 12.433594 4.75 L 13.298828 4.25 z M 8.8398438 4.6757812 L 8.96875 4.75 L 8.96875 5.75 L 8.5371094 6 L 8.1035156 6.25 L 7.2382812 5.75 L 7.2382812 5.578125 C 7.7356888 5.2168041 8.2730923 4.9140239 8.8398438 4.6757812 z M 15.160156 4.6757812 C 15.726909 4.914025 16.264309 5.2168044 16.761719 5.578125 L 16.761719 5.75 L 16.103516 6.1308594 L 15.896484 6.25 L 15.03125 5.75 L 15.03125 4.75 L 15.160156 4.6757812 z M 6.8046875 6.5 L 7.6699219 7 L 7.6699219 8 L 6.8046875 8.5 L 6.7011719 8.4394531 L 5.9394531 8 L 5.9394531 7.75 L 5.9394531 7 L 6.8046875 6.5 z M 9.4023438 6.5 L 10.267578 7 L 10.267578 7.8398438 L 10.267578 8 L 10.140625 8.0742188 L 9.8339844 8.25 L 9.4023438 8.5 L 8.9707031 8.25 L 8.5371094 8 L 8.5371094 7 L 8.96875 6.75 L 9.4023438 6.5 z M 12 6.5 L 12.865234 7 L 12.865234 7.75 L 12.865234 8 L 12.744141 8.0703125 C 12.743508 8.0701923 12.74282 8.0704324 12.742188 8.0703125 C 12.497492 8.0239396 12.249054 8.0001594 12 8 C 11.754037 8.00282 11.508857 8.0283149 11.267578 8.0761719 L 11.134766 8 L 11.134766 7.25 L 11.134766 7 L 11.896484 6.5605469 L 12 6.5 z M 14.597656 6.5 L 15.029297 6.75 L 15.462891 7 L 15.462891 8 L 14.597656 8.5 L 14.166016 8.25 L 13.732422 8 L 13.732422 7 L 14.166016 6.75 L 14.597656 6.5 z M 17.195312 6.5 L 17.298828 6.5605469 L 18.060547 7 L 18.060547 7.25 L 18.060547 8 L 17.298828 8.4394531 L 17.195312 8.5 L 16.330078 8 L 16.330078 7 L 17.195312 6.5 z M 5.5058594 8.75 L 6.3710938 9.25 L 6.3710938 10.25 L 5.5058594 10.75 L 4.640625 10.25 L 4.640625 9.25 L 5.5058594 8.75 z M 8.1035156 8.75 L 8.96875 9.25 L 8.96875 9.390625 C 8.6470443 9.7691664 8.398667 10.204324 8.2363281 10.673828 L 8.1035156 10.75 L 7.5449219 10.427734 L 7.2382812 10.25 L 7.2382812 9.25 L 8.1035156 8.75 z M 15.896484 8.75 L 16.761719 9.25 L 16.761719 10.25 L 16.328125 10.5 L 15.896484 10.75 L 15.775391 10.679688 C 15.6258 10.253096 15.401287 9.8581752 15.119141 9.5058594 C 15.089259 9.4685462 15.062498 9.4288507 15.03125 9.3925781 L 15.03125 9.390625 L 15.03125 9.25 L 15.462891 9 L 15.896484 8.75 z M 18.494141 8.75 L 19.359375 9.25 L 19.359375 10.25 L 18.494141 10.75 L 18.287109 10.630859 L 17.628906 10.25 L 17.628906 9.25 L 18.494141 8.75 z M 12 10 C 13.104568 10 14 10.895432 14 12 C 14 13.035532 13.213589 13.887814 12.205078 13.990234 C 12.137844 13.997062 12.069035 14 12 14 C 11.792894 14 11.592174 13.968592 11.404297 13.910156 C 11.028542 13.793284 10.701584 13.567814 10.457031 13.271484 C 10.416272 13.222096 10.377738 13.172341 10.341797 13.119141 C 10.126148 12.799939 10 12.414213 10 12 C 10 11.930965 10.002938 11.862156 10.009766 11.794922 C 10.037078 11.525986 10.119032 11.273584 10.242188 11.046875 C 10.396132 10.763489 10.614858 10.521504 10.880859 10.341797 C 10.93406 10.305855 10.990198 10.272976 11.046875 10.242188 C 11.330261 10.088243 11.654823 10 12 10 z M 4.2070312 11 L 5.0722656 11.5 L 5.0722656 11.75 L 5.0722656 12.5 L 4.2070312 13 L 4.0722656 12.921875 C 4.0304257 12.616234 4.0063 12.308428 4 12 C 4.00315 11.845786 4.0113888 11.690819 4.0234375 11.537109 C 4.0354862 11.383399 4.0513406 11.230945 4.0722656 11.078125 L 4.2070312 11 z M 6.8046875 11 L 7.2363281 11.25 L 7.6699219 11.5 L 7.6699219 12.5 L 6.8046875 13 L 6.7011719 12.939453 L 5.9394531 12.5 L 5.9394531 11.5 L 6.7011719 11.060547 L 6.8046875 11 z M 17.195312 11 L 17.298828 11.060547 L 18.060547 11.5 L 18.060547 12.5 L 17.298828 12.939453 L 17.195312 13 L 16.763672 12.75 L 16.330078 12.5 L 16.330078 11.5 L 17.195312 11 z M 19.792969 11 L 19.927734 11.078125 C 19.969574 11.383766 19.9937 11.691572 20 12 C 19.9937 12.308428 19.969584 12.616234 19.927734 12.921875 L 19.792969 13 L 18.927734 12.5 L 18.927734 12.25 L 18.927734 11.5 L 19.792969 11 z M 5.5058594 13.25 L 5.7128906 13.369141 L 6.3710938 13.75 L 6.3710938 14.75 L 5.5058594 15.25 L 4.640625 14.75 L 4.640625 13.75 L 5.5058594 13.25 z M 8.1035156 13.25 L 8.2246094 13.320312 C 8.3742003 13.746904 8.5987134 14.141825 8.8808594 14.494141 C 8.9107409 14.531454 8.9375015 14.571149 8.96875 14.607422 C 8.9690848 14.607816 8.968415 14.608981 8.96875 14.609375 L 8.96875 14.75 L 8.5371094 15 L 8.1035156 15.25 L 7.2382812 14.75 L 7.2382812 13.75 L 7.671875 13.5 L 8.1035156 13.25 z M 15.896484 13.25 L 16.455078 13.572266 L 16.761719 13.75 L 16.761719 14.75 L 15.896484 15.25 L 15.03125 14.75 L 15.03125 14.609375 C 15.288819 14.306302 15.495308 13.965789 15.652344 13.601562 C 15.6928 13.511265 15.729958 13.419415 15.763672 13.326172 L 15.896484 13.25 z M 18.494141 13.25 L 19.359375 13.75 L 19.359375 14.75 L 18.494141 15.25 L 17.628906 14.75 L 17.628906 13.75 L 18.494141 13.25 z M 6.8046875 15.5 L 7.6699219 16 L 7.6699219 17 L 6.8046875 17.5 L 6.7011719 17.439453 L 5.9394531 17 L 5.9394531 16.75 L 5.9394531 16 L 6.7011719 15.560547 L 6.8046875 15.5 z M 9.4023438 15.5 L 9.8339844 15.75 L 10.267578 16 L 10.267578 17 L 9.8339844 17.25 L 9.4023438 17.5 L 8.9707031 17.25 L 8.5371094 17 L 8.5371094 16.25 L 8.5371094 16 L 8.96875 15.75 L 8.9707031 15.75 L 9.4023438 15.5 z M 14.597656 15.5 L 15.029297 15.75 L 15.462891 16 L 15.462891 17 L 15.03125 17.25 L 14.597656 17.5 L 13.732422 17 L 13.732422 16.160156 L 13.732422 16 L 13.859375 15.925781 L 14.166016 15.75 L 14.597656 15.5 z M 17.195312 15.5 L 17.298828 15.560547 L 18.060547 16 L 18.060547 16.25 L 18.060547 17 L 17.195312 17.5 L 16.330078 17 L 16.330078 16 L 17.195312 15.5 z M 12.732422 15.923828 L 12.865234 16 L 12.865234 16.75 L 12.865234 17 L 12.103516 17.439453 L 12 17.5 L 11.134766 17 L 11.134766 16 L 11.255859 15.929688 C 11.256492 15.929808 11.25718 15.929568 11.257812 15.929688 C 11.502508 15.976059 11.750946 15.99984 12 16 C 12.122981 15.9986 12.244987 15.991227 12.367188 15.978516 C 12.489388 15.965806 12.611782 15.947758 12.732422 15.923828 z M 8.1035156 17.75 L 8.96875 18.25 L 8.96875 19.25 L 8.8398438 19.324219 C 8.2730923 19.085975 7.7356888 18.783196 7.2382812 18.421875 L 7.2382812 18.25 L 7.8964844 17.869141 L 8.1035156 17.75 z M 10.701172 17.75 L 11.566406 18.25 L 11.566406 19.25 L 10.701172 19.75 L 9.8359375 19.25 L 9.8359375 18.25 L 10.701172 17.75 z M 13.298828 17.75 L 13.732422 18 L 14.164062 18.25 L 14.164062 19.25 L 13.896484 19.404297 L 13.298828 19.75 L 13.042969 19.601562 L 12.867188 19.5 L 12.433594 19.25 L 12.433594 18.25 L 12.867188 18 L 13.125 17.851562 C 13.125123 17.85094 13.124877 17.850232 13.125 17.849609 L 13.298828 17.75 z M 15.896484 17.75 L 16.761719 18.25 L 16.761719 18.421875 C 16.264309 18.783196 15.726909 19.085977 15.160156 19.324219 L 15.03125 19.25 L 15.03125 18.25 L 15.462891 18 L 15.896484 17.75 z'
@@ -432,7 +433,8 @@ export const Icons = Object.freeze({
   screenshot: mdiMonitorScreenshot,
   zRotateClockwise: mdiRotateRight,
   zRotateCounterclockwise: mdiRotateLeft,
-  devices: mdiUsb
+  devices: mdiUsb,
+  beacon: mdiMagnet
 })
 
 export const Waits = Object.freeze({
@@ -494,7 +496,8 @@ export const Waits = Object.freeze({
   onMachinePeripheralsUsb: 'onMachinePeripheralsUsb',
   onMachinePeripheralsSerial: 'onMachinePeripheralsSerial',
   onMachinePeripheralsVideo: 'onMachinePeripheralsVideo',
-  onMachinePeripheralsCanbus: 'onMachinePeripheralsCanbus'
+  onMachinePeripheralsCanbus: 'onMachinePeripheralsCanbus',
+  onBeaconCalibrate: 'onBeaconCalibrate'
 })
 
 export const SupportedLocales = Object.freeze([
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
index 7beafddefb..921d29ea3e 100644
--- a/src/locales/en.yaml
+++ b/src/locales/en.yaml
@@ -377,6 +377,7 @@ app:
       msg:
         confirm: Are you sure?
         confirm_cancel_print: Are you sure you want to cancel the current print?
+        confirm_change_beacon_model: The printer is currently busy. Are you sure you want to change the beacon model?
         confirm_clear_mesh: The printer is currently busy. Are you sure you want to clear the bed mesh?
         confirm_delete: Are you sure? This will delete the selected item. | Are you sure? This will delete the {count} selected items.
         confirm_emergency_stop: Are you sure you want to emergency stop the printer?
@@ -430,6 +431,7 @@ app:
     title:
       add_chart: Add Chart
       add_printer: Add Printer
+      beacon_controls: Beacon Controls
       bedmesh: Bed Mesh
       bedmesh_controls: Bed Mesh Controls
       camera: Camera | Cameras
@@ -940,3 +942,16 @@ app:
       pause: Pause
       printing: Printing
       tool: Tool
+  beacon:
+    label:
+      active: active
+      model_name: Model Name
+      remove_model: Remove %{name} model
+    msg:
+      hint: >-
+        If saving as something other than %{name}, you can choose to also remove
+        the %{name} model
+      not_found: No existing beacon models found.
+    tooltip:
+      delete: Delete Model
+      load: Load Model
diff --git a/src/store/layout/state.ts b/src/store/layout/state.ts
index 50e5786a93..d8ff9a7451 100644
--- a/src/store/layout/state.ts
+++ b/src/store/layout/state.ts
@@ -31,7 +31,8 @@ export const defaultState = (): LayoutState => {
           { id: 'jobs-card', enabled: true, collapsed: false },
           { id: 'job-queue-card', enabled: false, collapsed: false },
           { id: 'gcode-preview-card', enabled: true, collapsed: false },
-          { id: 'bed-mesh-card', enabled: false, collapsed: false }
+          { id: 'bed-mesh-card', enabled: false, collapsed: false },
+          { id: 'beacon-card', enabled: false, collapsed: false }
         ]
       },
       diagnostics: {
diff --git a/src/store/printer/getters.ts b/src/store/printer/getters.ts
index f0c01dd113..4cc1eca1c4 100644
--- a/src/store/printer/getters.ts
+++ b/src/store/printer/getters.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import type { GetterTree } from 'vuex'
 import type { RootState } from '../types'
-import type { PrinterState, Heater, Fan, Led, OutputPin, Sensor, RunoutSensor, KnownExtruder, MCU, Endstop, Probe, ExtruderStepper, Extruder, ExtruderConfig, ProbeName, Stepper, ScrewsTiltAdjustScrew, ScrewsTiltAdjust, BedScrews, BedSize, GcodeCommands, TimeEstimates } from './types'
+import type { PrinterState, Heater, Fan, Led, OutputPin, Sensor, RunoutSensor, KnownExtruder, MCU, Endstop, Probe, ExtruderStepper, Extruder, ExtruderConfig, ProbeName, Stepper, ScrewsTiltAdjustScrew, ScrewsTiltAdjust, BedScrews, BedSize, GcodeCommands, TimeEstimates, BeaconState } from './types'
 import { get } from 'lodash-es'
 import getKlipperType from '@/util/get-klipper-type'
 import i18n from '@/plugins/i18n'
@@ -1049,5 +1049,26 @@ export const getters: GetterTree<PrinterState, RootState> = {
       results &&
       Object.keys(results).length > 0
     )
+  },
+
+  getSupportsBeacon: (state, getters) => {
+    return getters.getPrinterSettings('beacon') != null
+  },
+
+  getBeaconModels: (state, getters) => {
+    const beacon = state.printer.beacon as BeaconState
+
+    const models = Object.keys(getters.getPrinterSettings())
+      .filter(key => key.startsWith('beacon model '))
+      .map(key => {
+        const name = key.substring(13)
+
+        return {
+          name,
+          active: beacon.model === name
+        }
+      })
+
+    return models
   }
 }
diff --git a/src/store/printer/types.ts b/src/store/printer/types.ts
index 462fab474a..eec10b93af 100644
--- a/src/store/printer/types.ts
+++ b/src/store/printer/types.ts
@@ -247,3 +247,35 @@ export interface TimeEstimates {
   actualLeft: number;
   eta: number;
 }
+
+export interface BeaconState {
+  last_sample?: BeaconLastSample | null;
+  last_received_sample?: BeaconLastReceivedSample | null;
+  last_z_result?: number | null,
+  last_probe_position?: [number, number] | null,
+  last_probe_result?: number | null,
+  last_offset_result?: number | null,
+  last_poke_result?: number | null
+  model?: string | null;
+}
+
+export interface BeaconLastSample {
+  time: number;
+  value: number;
+  temp: number;
+  dist?: number | null;
+}
+
+export interface BeaconLastReceivedSample {
+  temp: number;
+  clock: number;
+  time: number;
+  data: number;
+  data_smooth: number;
+  freq: number;
+}
+
+export interface BeaconModel {
+  name: string;
+  active: boolean;
+}
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5ff5782f3d..9f14d7d388 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -62,6 +62,7 @@ import JobQueueCard from '@/components/widgets/job-queue/JobQueueCard.vue'
 import SpoolmanCard from '@/components/widgets/spoolman/SpoolmanCard.vue'
 import SensorsCard from '@/components/widgets/sensors/SensorsCard.vue'
 import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
+import BeaconCard from '@/components/widgets/beacon/BeaconCard.vue'
 
 @Component({
   components: {
@@ -80,7 +81,8 @@ import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensors
     JobQueueCard,
     SpoolmanCard,
     SensorsCard,
-    RunoutSensorsCard
+    RunoutSensorsCard,
+    BeaconCard
   }
 })
 export default class Dashboard extends Mixins(StateMixin) {
@@ -144,6 +146,10 @@ export default class Dashboard extends Mixins(StateMixin) {
     return this.$store.getters['mesh/getSupportsBedMesh']
   }
 
+  get supportsBeacon (): boolean {
+    return this.$store.getters['printer/getSupportsBeacon']
+  }
+
   get supportsRunoutSensors () {
     return this.$store.getters['printer/getRunoutSensors'].length > 0
   }
@@ -222,6 +228,7 @@ export default class Dashboard extends Mixins(StateMixin) {
     if (item.id === 'job-queue-card' && !this.supportsJobQueue) return true
     if (item.id === 'retract-card' && !this.firmwareRetractionEnabled) return true
     if (item.id === 'bed-mesh-card' && !this.supportsBedMesh) return true
+    if (item.id === 'beacon-card' && !this.supportsBeacon) return true
     if (item.id === 'runout-sensors-card' && !this.supportsRunoutSensors) return true
     if (item.id === 'spoolman-card' && !this.supportsSpoolman) return true
     if (item.id === 'sensors-card' && !this.hasSensors) return true
diff --git a/src/views/Tune.vue b/src/views/Tune.vue
index b383d16218..bf25709b15 100644
--- a/src/views/Tune.vue
+++ b/src/views/Tune.vue
@@ -23,6 +23,10 @@
         v-if="supportsRunoutSensors"
         fullscreen
       />
+      <beacon-card
+        v-if="supportsBeacon"
+        fullscreen
+      />
     </v-col>
   </v-row>
 </template>
@@ -35,13 +39,15 @@ import BedMeshCard from '@/components/widgets/bedmesh/BedMeshCard.vue'
 import BedMeshControls from '@/components/widgets/bedmesh/BedMeshControls.vue'
 import EndStopsCard from '@/components/widgets/endstops/EndStopsCard.vue'
 import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
+import BeaconCard from '@/components/widgets/beacon/BeaconCard.vue'
 
 @Component({
   components: {
     BedMeshCard,
     BedMeshControls,
     EndStopsCard,
-    RunoutSensorsCard
+    RunoutSensorsCard,
+    BeaconCard
   }
 })
 export default class Tune extends Mixins(StateMixin) {
@@ -57,5 +63,9 @@ export default class Tune extends Mixins(StateMixin) {
     const endStops = this.$store.getters['printer/getEndstops']
     return (Object.keys(endStops).length > 0)
   }
+
+  get supportsBeacon () {
+    return this.$store.getters['printer/getSupportsBeacon']
+  }
 }
 </script>