feat: add configurable GPU acceleration toggle

src/background.ts

@@ -40,12 +40,29 @@ declare const __static: string
 
 const Store = require('electron-store')
 const electronStore = new Store()
+const ENABLE_HARDWARE_ACCELERATION_SETTING_KEY = 'settings.enableHardwareAcceleration'
 let theme: Theme = 'light'
 let syncOsTheme = false
 let autoCheckUpdate: boolean = true
 const isDevelopment: boolean = process.env.NODE_ENV !== 'production'
 const isMac: boolean = process.platform === 'darwin'
 
+const getHardwareAccelerationSetting = (): boolean => {
+  return electronStore.get(ENABLE_HARDWARE_ACCELERATION_SETTING_KEY, true) !== false
+}
+
+const enableHardwareAccelerationBySetting = getHardwareAccelerationSetting()
+
+// Hardware acceleration must be configured before the app is ready, so this
+// setting is read from electron-store instead of the database settings table.
+// Call app.disableHardwareAcceleration() when enableHardwareAcceleration is false
+if (!enableHardwareAccelerationBySetting) {
+  app.disableHardwareAcceleration()
+  console.log('[GPU] Hardware acceleration disabled')
+} else {
+  console.log('[GPU] Hardware acceleration enabled')
+}
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win: BrowserWindow | null
@@ -222,6 +239,7 @@ async function createWindow() {
         logLevel: setting.logLevel,
         ignoreQoS0Message: setting.ignoreQoS0Message,
         topicWhitespaceDetection: electronStore.get('settings.topicWhitespaceDetection', false),
+        enableHardwareAcceleration: enableHardwareAccelerationBySetting,
       }
     }
   } catch (error) {
@@ -234,6 +252,7 @@ async function createWindow() {
       currentLang: 'en',
       syncOsTheme: false,
       topicWhitespaceDetection: electronStore.get('settings.topicWhitespaceDetection', false),
+      enableHardwareAcceleration: enableHardwareAccelerationBySetting,
     }
   }
   // Create the browser window.

src/lang/common.ts

@@ -327,7 +327,7 @@ export default {
     en: 'Save to Local',
     tr: 'Yerel olarak kaydet',
     ja: 'ローカルに保存',
-    hu: 'Mentés helyi',
+    hu: 'Mentés helyileg',
   },
   msgType: {
     zh: '消息类型',

src/lang/help.ts

@@ -3,7 +3,7 @@ export default {
     zh: '关于 MQTT 的一切',
     en: 'Everything about MQTT',
     ja: 'MQTT について',
-    tr: 'MQTT hakk',
+    tr: 'MQTT hakkında',
     hu: 'Minden MQTT-ről',
   },
   docs: {

src/lang/settings.ts

@@ -142,16 +142,58 @@ export default {
   topicWhitespaceDetection: {
     zh: '主题空格检测',
     en: 'Topic whitespace detection',
-    tr: 'Topic whitespace detection',
+    tr: 'Konu Boşluk Tespiti',
     ja: 'トピック空白検出',
-    hu: 'Topic whitespace detection',
+    hu: 'Téma szóköz észlelés',
   },
   topicWhitespaceDetectionDesc: {
     zh: '用于提示主题中的空格字符，帮助提前识别可能导致发布与订阅不匹配的情况。',
     en: 'Highlights whitespace in topics to help prevent publish/subscribe mismatches.',
-    tr: 'Highlights whitespace in topics to help prevent publish/subscribe mismatches.',
+    tr: 'Konulardaki boşlukları vurgulayarak yayın/abone olma uyuşmazlıklarını önlemeye yardımcı olur.',
     ja: 'トピック内の空白を示し、送受信の不一致を防ぐための確認に役立ちます。',
-    hu: 'Highlights whitespace in topics to help prevent publish/subscribe mismatches.',
+    hu: 'Kiemeli a szóközöket a témákban, hogy segítsen megelőzni a közzététel/előfizetés eltéréseket.',
+  },
+  enableHardwareAcceleration: {
+    zh: '启用 GPU 加速',
+    en: 'Enable GPU Acceleration',
+    tr: 'GPU Hızlandırmayı Etkinleştir',
+    ja: 'GPUアクセラレーションを有効にする',
+    hu: 'GPU gyorsítás engedélyezése',
+  },
+  enableHardwareAccelerationDesc: {
+    zh: 'GPU 加速利用显卡硬件渲染界面，可使操作更流畅并降低 CPU 占用。如果此选项关闭或遇到画面卡顿、花屏等问题，请检查您的显卡驱动是否为最新版本。',
+    en: 'GPU acceleration uses graphics hardware to render the UI for smoother operation and lower CPU usage. If this option is disabled or you experience screen lag, artifacts, or other issues, please check that your graphics driver is up to date.',
+    tr: "GPU hızlandırma, işlemleri daha akıcı hale getirmek ve CPU kullanımını azaltmak için grafik donanımını kullanarak UI'yi render eder. Bu seçenek devre dışıysa veya ekran gecikmesi, görsel bozukluklar veya diğer sorunlar yaşıyorsanız, lütfen grafik sürücünüzün güncel olduğundan emin olun.",
+    ja: 'GPUアクセラレーションは、グラフィックハードウェアを使用してUIをレンダリングし、操作をスムーズにし、CPU使用率を低下させます。このオプションが無効になっている場合、または画面のラグ、アーティファクト、その他の問題が発生した場合は、グラフィックドライバーが最新であるかどうかを確認してください。',
+    hu: 'A GPU gyorsítás grafikus hardvert használ a UI rendereléséhez, így a műveletek gördülékenyebbek és a CPU-használat alacsonyabb. Ha ez a lehetőség le van tiltva, vagy képernyő akadozást, artefaktokat vagy más problémákat tapasztal, kérjük, ellenőrizze, hogy a grafikus illesztőprogram naprakész-e.',
+  },
+  restartRequired: {
+    zh: '需要重启',
+    en: 'Restart Required',
+    tr: 'Yeniden Başlatma Gerekiyor',
+    ja: '再起動が必要です',
+    hu: 'Újraindítás szükséges',
+  },
+  restartRequiredDesc: {
+    zh: 'GPU 加速设置已更新。需要重启应用才能生效，是否立即重启？',
+    en: 'The GPU acceleration setting has been updated. Restart the app now to apply the change?',
+    tr: 'GPU hızlandırma ayarı güncellendi. Değişikliği uygulamak için uygulamayı şimdi yeniden başlatın?',
+    ja: 'GPUアクセラレーション設定が更新されました。変更を適用するために今すぐアプリを再起動しますか？',
+    hu: 'A GPU gyorsítás beállítása frissítve lett. Alkalmazza a változást az alkalmazás újraindításával most?',
+  },
+  restartNow: {
+    zh: '立即重启',
+    en: 'Restart Now',
+    tr: 'Şimdi Yeniden Başlat',
+    ja: '今すぐ再起動',
+    hu: 'Újraindítás most',
+  },
+  restartLater: {
+    zh: '稍后重启',
+    en: 'Later',
+    tr: 'Sonra',
+    ja: '後で',
+    hu: 'Később',
   },
   autoResubDesc: {
     zh: '开启后，MQTTX 连接后会自动重新订阅本地保存的所有订阅',
@@ -191,7 +233,7 @@ export default {
   jsonHighlight: {
     zh: 'JSON 数据高亮',
     en: 'JSON Highlighting',
-    tr: 'JSON Highlighting',
+    tr: 'JSON Vurgulama',
     ja: 'JSONハイライト',
     hu: 'JSON Kiemelés',
   },

src/store/getter.ts

@@ -26,6 +26,7 @@ const getters = {
   ignoreQoS0Message: (state: State) => state.app.ignoreQoS0Message,
   topicWhitespaceDetection: (state: State) => state.app.topicWhitespaceDetection,
   maxPayloadDisplaySize: (state: State) => state.app.maxPayloadDisplaySize,
+  enableHardwareAcceleration: (state: State) => state.app.enableHardwareAcceleration,
 }
 
 export default getters

src/store/modules/app.ts

@@ -35,6 +35,8 @@ const SET_DATABASE_FAIL_MESSAGE = 'SET_DATABASE_FAIL_MESSAGE'
 const TOGGLE_IGNORE_QOS0_MESSAGE = 'TOGGLE_IGNORE_QOS0_MESSAGE'
 const TOGGLE_TOPIC_WHITESPACE_DETECTION = 'TOGGLE_TOPIC_WHITESPACE_DETECTION'
 const SET_MAX_PAYLOAD_DISPLAY_SIZE = 'SET_MAX_PAYLOAD_DISPLAY_SIZE'
+const TOGGLE_ENABLE_HARDWARE_ACCELERATION = 'TOGGLE_ENABLE_HARDWARE_ACCELERATION'
+const ENABLE_HARDWARE_ACCELERATION_SETTING_KEY = 'settings.enableHardwareAcceleration'
 
 const getShowConnectionList = (): boolean => {
   const _showConnectionList: string | null = localStorage.getItem('showConnectionList')
@@ -44,6 +46,10 @@ const getShowConnectionList = (): boolean => {
   return JSON.parse(_showConnectionList)
 }
 
+const getEnableHardwareAcceleration = (): boolean => {
+  return electronStore.get(ENABLE_HARDWARE_ACCELERATION_SETTING_KEY, true) !== false
+}
+
 const settingData = getGlobal('sharedData')
 
 const app = {
@@ -77,6 +83,7 @@ const app = {
     maxPayloadDisplaySize: normalizeMaxPayloadDisplaySize(
       electronStore.get('settings.maxPayloadDisplaySize', DEFAULT_MAX_PAYLOAD_DISPLAY_SIZE),
     ),
+    enableHardwareAcceleration: getEnableHardwareAcceleration(),
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -190,6 +197,9 @@ const app = {
     [SET_MAX_PAYLOAD_DISPLAY_SIZE](state: App, maxPayloadDisplaySize: number) {
       state.maxPayloadDisplaySize = maxPayloadDisplaySize
     },
+    [TOGGLE_ENABLE_HARDWARE_ACCELERATION](state: App, enableHardwareAcceleration: boolean) {
+      state.enableHardwareAcceleration = enableHardwareAcceleration
+    },
   },
   actions: {
     async TOGGLE_THEME({ commit }: any, payload: App) {
@@ -325,6 +335,11 @@ const app = {
       commit(SET_MAX_PAYLOAD_DISPLAY_SIZE, normalizedValue)
       electronStore.set('settings.maxPayloadDisplaySize', normalizedValue)
     },
+    TOGGLE_ENABLE_HARDWARE_ACCELERATION({ commit }: any, payload: App) {
+      commit(TOGGLE_ENABLE_HARDWARE_ACCELERATION, payload.enableHardwareAcceleration)
+      settingData.enableHardwareAcceleration = payload.enableHardwareAcceleration
+      electronStore.set(ENABLE_HARDWARE_ACCELERATION_SETTING_KEY, payload.enableHardwareAcceleration)
+    },
   },
 }
 

src/types/global.d.ts

@@ -116,6 +116,7 @@ declare global {
     ignoreQoS0Message: boolean
     topicWhitespaceDetection: boolean
     maxPayloadDisplaySize: number
+    enableHardwareAcceleration: boolean
   }
 
   interface State {

src/views/settings/index.vue

@@ -370,6 +370,32 @@
       </el-row>
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('settings.enableHardwareAcceleration') }}</label>
+          <el-tooltip
+            placement="top"
+            :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+            :open-delay="500"
+            :content="$t('settings.enableHardwareAccelerationDesc')"
+          >
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-switch
+            :value="enableHardwareAcceleration"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleEnableHardwareAccelerationChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+
       <ImportData :visible.sync="showImportData" />
       <ExportData :visible.sync="showExportData" />
       <ClearUpHistoryData :visible.sync="showHistoryData" />
@@ -474,7 +500,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { ipcRenderer } from 'electron'
-import { nativeTheme } from '@electron/remote'
+import { app as remoteApp, nativeTheme } from '@electron/remote'
 import ImportData from '@/components/ImportData.vue'
 import ExportData from '@/components/ExportData.vue'
 import ClearUpHistoryData from '@/components/ClearUpHistoryData.vue'
@@ -521,6 +547,9 @@ export default class Settings extends Vue {
   @Action('SET_MAX_PAYLOAD_DISPLAY_SIZE') private actionSetMaxPayloadDisplaySize!: (payload: {
     maxPayloadDisplaySize: number
   }) => void
+  @Action('TOGGLE_ENABLE_HARDWARE_ACCELERATION') private actionToggleEnableHardwareAcceleration!: (payload: {
+    enableHardwareAcceleration: boolean
+  }) => void
 
   @Getter('currentTheme') private currentTheme!: Theme
   @Getter('currentLang') private currentLang!: Language
@@ -538,6 +567,7 @@ export default class Settings extends Vue {
   @Getter('ignoreQoS0Message') private ignoreQoS0Message!: boolean
   @Getter('topicWhitespaceDetection') private topicWhitespaceDetection!: boolean
   @Getter('maxPayloadDisplaySize') private maxPayloadDisplaySize!: number
+  @Getter('enableHardwareAcceleration') private enableHardwareAcceleration!: boolean
 
   private showAIModelsSelect = false
 
@@ -630,6 +660,11 @@ export default class Settings extends Vue {
     this.actionToggleTopicWhitespaceDetection({ topicWhitespaceDetection: value })
   }
 
+  private handleEnableHardwareAccelerationChange(value: boolean) {
+    this.actionToggleEnableHardwareAcceleration({ enableHardwareAcceleration: value })
+    this.promptAppRestart()
+  }
+
   private handleInputChanged(value: number) {
     this.actionMaxReconnectTimes({ maxReconnectTimes: value })
   }
@@ -701,14 +736,30 @@ export default class Settings extends Vue {
     this.showAIModelsSelect = false
   }
 
-  private queryAIAPIHost(queryString: string, cb: (r: any[]) => {}) {
+  private queryAIAPIHost(queryString: string, cb: (r: any[]) => void) {
     cb(queryString ? this.AIAPIHostOptions.filter((item) => item.value.includes(queryString)) : this.AIAPIHostOptions)
   }
 
   private handleIgnoreQoS0MessageSwitchChange(value: boolean) {
     this.actionToggleIgnoreQoS0Message({ ignoreQoS0Message: value })
   }
 
+  private promptAppRestart() {
+    this.$confirm(this.$t('settings.restartRequiredDesc') as string, {
+      title: this.$t('settings.restartRequired') as string,
+      showClose: false,
+      closeOnClickModal: false,
+      confirmButtonText: this.$t('settings.restartNow') as string,
+      cancelButtonText: this.$t('settings.restartLater') as string,
+      type: 'warning',
+    })
+      .then(() => {
+        remoteApp.relaunch()
+        remoteApp.exit()
+      })
+      .catch(() => undefined)
+  }
+
   private created() {
     this.getAIConfigs()
     this.payloadDisplaySizeValue = this.maxPayloadDisplaySize