feat: download bed mesh image (#1656)

pedrolamas · web-flow · commit 8dcfe21b5f87 · 2025-03-28T09:37:03.000Z
Signed-off-by: Pedro Lamas &lt;pedrolamas@gmail.com&gt;
diff --git a/src/components/settings/GeneralSettings.vue b/src/components/settings/GeneralSettings.vue
@@ -285,10 +285,9 @@ import { readFileAsTextAsync } from '@/util/file-system-entry'
 import { EventBus } from '@/eventBus'
 import { isFluiddContent, toFluiddContent } from '@/util/fluidd-content'
 import { getAllLocales } from '@/plugins/i18n'
+import downloadUrl from '@/util/download-url'
 
-@Component({
-  components: {}
-})
+@Component({})
 export default class GeneralSettings extends Mixins(StateMixin) {
   @Ref('instanceName')
   readonly instanceNameElement!: VInput
@@ -630,17 +629,10 @@ export default class GeneralSettings extends Mixins(StateMixin) {
         const backupData = toFluiddContent('settings-backup', data)
         const backupDataAsString = JSON.stringify(backupData)
 
-        const link = document.createElement('a')
+        const filename = `backup-fluidd-v${import.meta.env.VERSION}-${this.instanceName}.json`
+        const url = `data:text/plain;charset=utf-8,${encodeURIComponent(backupDataAsString)}`
 
-        link.href = `data:text/plain;charset=utf-8,${encodeURIComponent(backupDataAsString)}`
-        link.download = `backup-fluidd-v${import.meta.env.VERSION}-${this.instanceName}.json`
-        link.target = '_blank'
-
-        document.body.appendChild(link)
-
-        link.click()
-
-        document.body.removeChild(link)
+        downloadUrl(filename, url)
       }
     } catch (e) {
       consola.error('[Settings] backup failed', e)
diff --git a/src/components/widgets/bedmesh/BedMeshCard.vue b/src/components/widgets/bedmesh/BedMeshCard.vue
@@ -19,24 +19,21 @@
         {{ $t('app.general.btn.calibrate') }}
       </app-btn>
 
-      <v-tooltip
-        v-if="canCopyImage"
-        bottom
-      >
+      <v-tooltip bottom>
         <template #activator="{ on, attrs }">
           <app-btn
             v-bind="attrs"
             icon
             :disabled="!hasMeshLoaded"
             v-on="on"
-            @click="copyImage()"
+            @click="downloadImage()"
           >
             <v-icon dense>
               $screenshot
             </v-icon>
           </app-btn>
         </template>
-        <span>{{ $t('app.bedmesh.tooltip.copy_image') }}</span>
+        <span>{{ $t('app.bedmesh.tooltip.download_image') }}</span>
       </v-tooltip>
 
       <app-btn
@@ -228,16 +225,8 @@ export default class BedMeshCard extends Mixins(StateMixin, ToolheadMixin, Brows
     return this.$typedGetters['mesh/getCurrentMeshData']
   }
 
-  get canCopyImage () {
-    return (
-      typeof navigator.clipboard === 'object' &&
-      typeof navigator.clipboard.write === 'function' &&
-      typeof ClipboardItem === 'function'
-    )
-  }
-
-  copyImage () {
-    this.bedMeshChart.copyImage()
+  downloadImage () {
+    this.bedMeshChart.downloadImage()
   }
 }
 </script>
diff --git a/src/components/widgets/bedmesh/BedMeshChart.vue b/src/components/widgets/bedmesh/BedMeshChart.vue
@@ -25,6 +25,7 @@ import type { ECharts, EChartsOption, GraphicComponentOption } from 'echarts'
 import { merge, cloneDeepWith } from 'lodash-es'
 import BrowserMixin from '@/mixins/browser'
 import type { BedSize } from '@/store/printer/types'
+import downloadUrl from '@/util/download-url'
 
 @Component({})
 export default class BedMeshChart extends Mixins(BrowserMixin) {
@@ -241,16 +242,18 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     return opts
   }
 
-  async copyImage () {
-    const image = await fetch(this.chart.getDataURL({ type: 'png', backgroundColor: '#262629' }))
-
-    const blob = await image.blob()
+  async downloadImage () {
+    const url = this.chart.getDataURL({
+      type: 'png',
+      backgroundColor: '#262629'
+    })
 
-    const data = [
-      new ClipboardItem({ 'image/png': blob })
-    ]
+    const filename = [
+      'bedmesh',
+      this.$typedState.printer.printer.bed_mesh?.profile_name
+    ].filter(x => x).join('-')
 
-    await navigator.clipboard.write(data)
+    downloadUrl(filename, url)
   }
 }
 </script>
diff --git a/src/locales/de.yaml b/src/locales/de.yaml
@@ -22,7 +22,6 @@ app:
       delete: Profil löschen
       load: Profil laden
       save: Fügt das Mesh Profil der printer.cfg hinzu
-      copy_image: Bett-Mesh-Abbildung kopieren
   chart:
     label:
       current: Aktuell
diff --git a/src/locales/en.yaml b/src/locales/en.yaml
@@ -22,7 +22,7 @@ app:
       delete: Delete Profile
       load: Load Profile
       save: Commits calibrated profile to printer.cfg
-      copy_image: Copy bed mesh image
+      download_image: Download bed mesh image
   chart:
     label:
       current: Actual
diff --git a/src/locales/es.yaml b/src/locales/es.yaml
@@ -22,7 +22,6 @@ app:
       delete: Elimina el perfil
       load: Cargar el perfil
       save: Guarda el perfil de calibracion en el archivo printer.cfg
-      copy_image: Copiar imagen de la malla de cama
   chart:
     label:
       current: Tª
diff --git a/src/locales/fr.yaml b/src/locales/fr.yaml
@@ -24,7 +24,6 @@ app:
       delete: Supprime le profil
       load: Charger le profil
       save: Enregistrer le profil calibré dans 'printer.cfg'
-      copy_image: Copier l'image du bed mesh
   chart:
     label:
       current: Courant
diff --git a/src/locales/hu.yaml b/src/locales/hu.yaml
@@ -22,7 +22,6 @@ app:
       delete: Profil törlése
       load: Profil betöltése
       save: A kalibrált profil a printer.cfg fájlba íródik
-      copy_image: Ágyhálós kép másolása
   chart:
     label:
       current: Aktuális
diff --git a/src/locales/it.yaml b/src/locales/it.yaml
@@ -22,7 +22,6 @@ app:
       delete: Elimina profilo
       load: Carica profilo
       save: Salva il profilo calibrato in printer.cfg
-      copy_image: Copia immagine mesh
   chart:
     label:
       current: Effettivo
diff --git a/src/locales/ja.yaml b/src/locales/ja.yaml
@@ -28,7 +28,6 @@ app:
       not_loaded: メッシュを読込しない
     tooltip:
       calibrate: 新しいキャリブレーションを開始し、プロファイル'default'として保存します
-      copy_image: ベッドメッシュ画像をコピー
       delete: プロファイルを削除します。
       load: プロファイルを読込み
       save: キャリブレーションされたプロファイルをprinter.cfgに書込みします。
diff --git a/src/locales/ko.yaml b/src/locales/ko.yaml
@@ -20,7 +20,6 @@ app:
       delete: 프로파일을 삭제합니다
       load: 프로파일 불러오기
       save: 캘리브레이션이 된 프로파일을 printer.cfg에 적용합니다
-      copy_image: 베드 메쉬 이미지 복사
   chart:
     label:
       current: 현재 온도
diff --git a/src/locales/nl.yaml b/src/locales/nl.yaml
@@ -22,7 +22,6 @@ app:
       delete: Verwijder profiel
       load: Laad profiel
       save: Slaat afgesteld profiel op naar printer.cfg
-      copy_image: Kopieer bed mesh afbeelding
   chart:
     label:
       current: Huidig
diff --git a/src/locales/pl.yaml b/src/locales/pl.yaml
@@ -21,7 +21,6 @@ app:
       delete: Usuń profil
       load: Wczytaj profil
       save: Zapisuje skalibrowany profil do pliku printer.cfg
-      copy_image: Skopiuj obraz siatki stołu
   chart:
     label:
       current: Aktualnie
diff --git a/src/locales/pt.yaml b/src/locales/pt.yaml
@@ -22,7 +22,6 @@ app:
       delete: Eliminar perfil
       load: Carregar perfil
       save: Guard perfil calibrado no ficheiro printer.cfg
-      copy_image: Copiar imagem da malha da cama
   chart:
     label:
       current: Corrente
diff --git a/src/locales/pt_BR.yaml b/src/locales/pt_BR.yaml
@@ -18,7 +18,6 @@ app:
       not_loaded: Nenhuma malha carregada
     tooltip:
       load: Carregar perfil
-      copy_image: Copiar imagem da malha da cama
       calibrate: Começa uma nova calibração, salvando o perfil como 'default'
       delete: Apagar perfil
       save: Salva perfil calibrado no arquivo printer.cfg
diff --git a/src/locales/ru.yaml b/src/locales/ru.yaml
@@ -22,7 +22,6 @@ app:
       delete: Удалить профиль
       load: Загрузить профиль
       save: Сохранить данные откалиброванного профиля в printer.cfg
-      copy_image: Скопировать изображение сетки кровати
   chart:
     label:
       current: Текущая
diff --git a/src/locales/sl.yaml b/src/locales/sl.yaml
@@ -22,7 +22,6 @@ app:
       delete: Zbriši profil
       load: Naloži profil
       save: Shrani kalibriran profil v printer.cfg.
-      copy_image: Kopiraj sliko posteljne mreže
   chart:
     label:
       current: Dejansko
diff --git a/src/locales/ta.yaml b/src/locales/ta.yaml
@@ -598,7 +598,6 @@ app:
         என்று சேமிக்கிறது
       delete: சுயவிவரத்தை நீக்கு
       load: சுயவிவரத்தை ஏற்றவும்
-      copy_image: படுக்கை கண்ணி படத்தை நகலெடுக்கவும்
     label:
       active: செயலில்
       base: காரம்
diff --git a/src/locales/tr.yaml b/src/locales/tr.yaml
@@ -23,7 +23,6 @@ app:
       delete: Profili Sil
       load: Profil Yükle
       save: Kalibre edilmiş profili printer.cfg'ye kaydeder
-      copy_image: Yatak örgüsü görüntüsünü kopyala
   chart:
     label:
       current: Gerçek
diff --git a/src/locales/uk.yaml b/src/locales/uk.yaml
@@ -22,7 +22,6 @@ app:
       delete: Видалити профіль
       load: Завантажити профіль
       save: Зберегти калібрований профіль в printer.cfg
-      copy_image: Скопіюйте сітчасте зображення ліжка
   chart:
     label:
       current: Поточне значення
diff --git a/src/mixins/files.ts b/src/mixins/files.ts
@@ -7,6 +7,7 @@ import type { FileWithPath } from '@/types'
 import { consola } from 'consola'
 import { v4 as uuidv4 } from 'uuid'
 import type { AppUser } from '@/store/auth/types'
+import downloadUrl from '@/util/download-url'
 
 @Component
 export default class FilesMixin extends Vue {
@@ -147,20 +148,9 @@ export default class FilesMixin extends Vue {
    */
   async downloadFile (filename: string, path: string) {
     // Grab a oneshot.
-    try {
-      const url = await this.createFileUrlWithToken(filename, path)
-
-      // Create a link, handle its click - and finally remove it again.
-      const link = document.createElement('a')
-      link.href = url
-      link.setAttribute('download', filename)
-      link.setAttribute('target', '_blank')
-      document.body.appendChild(link)
-      link.click()
-      document.body.removeChild(link)
-    } catch {
-      // Likely a 401.
-    }
+    const url = await this.createFileUrlWithToken(filename, path)
+
+    downloadUrl(filename, url)
   }
 
   /**
diff --git a/src/util/download-url.ts b/src/util/download-url.ts
@@ -0,0 +1,22 @@
+import { consola } from 'consola'
+
+const downloadUrl = (filename: string, url: string) => {
+  try {
+    // Create a link, handle its click - and finally remove it again.
+    const link = document.createElement('a')
+
+    link.href = url
+    link.download = filename
+    link.target = '_blank'
+
+    document.body.appendChild(link)
+
+    link.click()
+
+    document.body.removeChild(link)
+  } catch (error) {
+    consola.error('[DownloadUrl] error', error)
+  }
+}
+
+export default downloadUrl
