feat: download bed mesh image (#1656)

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

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)

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>

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>

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

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

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ª

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

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

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

src/locales/ja.yaml

@@ -28,7 +28,6 @@ app:
       not_loaded: メッシュを読込しない
     tooltip:
       calibrate: 新しいキャリブレーションを開始し、プロファイル'default'として保存します
-      copy_image: ベッドメッシュ画像をコピー
       delete: プロファイルを削除します。
       load: プロファイルを読込み
       save: キャリブレーションされたプロファイルをprinter.cfgに書込みします。

src/locales/ko.yaml

@@ -20,7 +20,6 @@ app:
       delete: 프로파일을 삭제합니다
       load: 프로파일 불러오기
       save: 캘리브레이션이 된 프로파일을 printer.cfg에 적용합니다
-      copy_image: 베드 메쉬 이미지 복사
   chart:
     label:
       current: 현재 온도

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

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

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

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

src/locales/ru.yaml

@@ -22,7 +22,6 @@ app:
       delete: Удалить профиль
       load: Загрузить профиль
       save: Сохранить данные откалиброванного профиля в printer.cfg
-      copy_image: Скопировать изображение сетки кровати
   chart:
     label:
       current: Текущая

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

src/locales/ta.yaml

@@ -598,7 +598,6 @@ app:
         என்று சேமிக்கிறது
       delete: சுயவிவரத்தை நீக்கு
       load: சுயவிவரத்தை ஏற்றவும்
-      copy_image: படுக்கை கண்ணி படத்தை நகலெடுக்கவும்
     label:
       active: செயலில்
       base: காரம்

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

src/locales/uk.yaml

@@ -22,7 +22,6 @@ app:
       delete: Видалити профіль
       load: Завантажити профіль
       save: Зберегти калібрований профіль в printer.cfg
-      copy_image: Скопіюйте сітчасте зображення ліжка
   chart:
     label:
       current: Поточне значення

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)
   }
 
   /**

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