From 1ca6aed3c40e99eee42f25c8f95836561a4e7fa9 Mon Sep 17 00:00:00 2001 From: Crystian Date: Mon, 15 Jan 2024 13:19:42 +0100 Subject: [PATCH] multigpu support :) --- general/gpu.py | 7 +- server/monitor.py | 20 +--- web/monitor.js | 208 ++++++++++++++++++++++++----------- web/monitor.ts | 243 +++++++++++++++++++++++++---------------- web/monitor.types.d.ts | 3 +- 5 files changed, 306 insertions(+), 175 deletions(-) diff --git a/general/gpu.py b/general/gpu.py index 0c7c55e..8f0aa20 100644 --- a/general/gpu.py +++ b/general/gpu.py @@ -93,13 +93,14 @@ class CGPUInfo: deviceHandle = pynvml.nvmlDeviceGetHandleByIndex(deviceIndex) # GPU Utilization - # if self.switchGPU and self.gpusUtilization[deviceIndex]: - if self.switchGPU: + if self.switchGPU and self.gpusUtilization[deviceIndex]: + print('switchGPU', deviceIndex) utilization = pynvml.nvmlDeviceGetUtilizationRates(deviceHandle) gpuUtilization = utilization.gpu # VRAM - if self.switchVRAM: + if self.switchVRAM and self.gpusVRAM[deviceIndex]: + print('switchVRAM', deviceIndex) # Torch or pynvml?, pynvml is more accurate with the system, torch is more accurate with comfyUI memory = pynvml.nvmlDeviceGetMemoryInfo(deviceHandle) vramUsed = memory.used diff --git a/server/monitor.py b/server/monitor.py index 5ccb35e..97c4f70 100644 --- a/server/monitor.py +++ b/server/monitor.py @@ -28,13 +28,6 @@ async def newSettings(request): cmonitor.hardwareInfo.switchCPU = switchCPU - if 'switchGPU' in settings is not None: - switchGPU = settings['switchGPU'] - if type(switchGPU) is not bool: - raise Exception('switchGPU must be an boolean.') - - cmonitor.hardwareInfo.switchGPU = switchGPU - if 'switchHDD' in settings is not None: switchHDD = settings['switchHDD'] if type(switchHDD) is not bool: @@ -49,13 +42,6 @@ async def newSettings(request): cmonitor.hardwareInfo.switchRAM = switchRAM - if 'switchVRAM' in settings is not None: - switchVRAM = settings['switchVRAM'] - if type(switchVRAM) is not bool: - raise Exception('switchVRAM must be an boolean.') - - cmonitor.hardwareInfo.switchVRAM = switchVRAM - if 'whichHDD' in settings is not None: whichHDD = settings['whichHDD'] if type(whichHDD) is not str: @@ -122,6 +108,12 @@ async def getGPUs(request): cmonitor.hardwareInfo.GPUInfo.gpusUtilization[int(index)] = settings['utilization'] + if 'vram' in settings is not None: + if type(settings['vram']) is not bool: + raise Exception('vram must be an boolean.') + + cmonitor.hardwareInfo.GPUInfo.gpusVRAM[int(index)] = settings['vram'] + return web.Response(status=200) except Exception as e: logger.error(e) diff --git a/web/monitor.js b/web/monitor.js index 36d6a75..12db684 100644 --- a/web/monitor.js +++ b/web/monitor.js @@ -51,6 +51,18 @@ class CrystoolsMonitor { writable: true, value: '/' }); + Object.defineProperty(this, "monitorGPUSettings", { + enumerable: true, + configurable: true, + writable: true, + value: [] + }); + Object.defineProperty(this, "monitorVRAMSettings", { + enumerable: true, + configurable: true, + writable: true, + value: [] + }); Object.defineProperty(this, "monitorCPUElement", { enumerable: true, configurable: true, @@ -104,7 +116,7 @@ class CrystoolsMonitor { name: this.menuPrefix + '[menu] Display partition disk monitor (HDD)', type: 'boolean', label: 'HDD', - tooltip: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`, + title: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`, defaultValue: true, htmlMonitorRef: undefined, htmlMonitorSliderRef: undefined, @@ -118,50 +130,6 @@ class CrystoolsMonitor { }, } }); - Object.defineProperty(this, "monitorGPUElement", { - enumerable: true, - configurable: true, - writable: true, - value: { - id: 'Crystools.switchGPU', - name: this.menuPrefix + '[menu] Display GPU monitor', - type: 'boolean', - label: 'GPU', - defaultValue: true, - htmlMonitorRef: undefined, - htmlMonitorSliderRef: undefined, - htmlMonitorLabelRef: undefined, - cssColor: '#0C86F4', - onChange: async (value) => { - this.updateWidget(this.monitorGPUElement); - await this.updateServer({ - switchGPU: value, - }); - }, - } - }); - Object.defineProperty(this, "monitorVRAMElement", { - enumerable: true, - configurable: true, - writable: true, - value: { - id: 'Crystools.switchVRAM', - name: this.menuPrefix + '[menu] Display Video RAM monitor', - type: 'boolean', - label: 'VRAM', - defaultValue: true, - htmlMonitorRef: undefined, - htmlMonitorSliderRef: undefined, - htmlMonitorLabelRef: undefined, - cssColor: '#176EC7', - onChange: async (value) => { - this.updateWidget(this.monitorVRAMElement); - await this.updateServer({ - switchVRAM: value, - }); - }, - } - }); Object.defineProperty(this, "createSettings", { enumerable: true, configurable: true, @@ -169,8 +137,6 @@ class CrystoolsMonitor { value: () => { app.ui.settings.addSetting(this.monitorCPUElement); app.ui.settings.addSetting(this.monitorRAMElement); - app.ui.settings.addSetting(this.monitorGPUElement); - app.ui.settings.addSetting(this.monitorVRAMElement); app.ui.settings.addSetting(this.monitorHDDElement); app.ui.settings.addSetting({ id: this.idInputRate, @@ -246,6 +212,65 @@ class CrystoolsMonitor { }, }); }); + void this.getGPUsFromServer().then((gpus) => { + console.log(gpus); + let moreThanOneGPU = false; + if (gpus.length > 1) { + moreThanOneGPU = true; + } + gpus?.forEach(({ name, index }) => { + if (name === undefined || index === undefined) { + console.warn('getGPUsFromServer: name or index undefined', name, index); + return; + } + let label = 'GPU'; + let labelVRAM = 'VRAM'; + if (moreThanOneGPU) { + label = 'GPU ' + index; + labelVRAM = 'VRAM' + index; + } + const monitorGPUNElement = { + id: 'Crystools.switchGPU' + index, + name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`, + type: 'boolean', + label, + title: `${index}: ${name}`, + defaultValue: true, + htmlMonitorRef: undefined, + htmlMonitorSliderRef: undefined, + htmlMonitorLabelRef: undefined, + cssColor: '#0C86F4', + onChange: async (value) => { + this.updateWidget(monitorGPUNElement); + void await this.updateServerGPU(index, { + utilization: value + }); + }, + }; + const monitorVRAMNElement = { + id: 'Crystools.switchVRAM' + index, + name: this.menuPrefix + `[menu] Display GPU VRAM monitor\r\n[${index}] ${name}`, + type: 'boolean', + label: labelVRAM, + title: `${index}: ${name}`, + defaultValue: true, + htmlMonitorRef: undefined, + htmlMonitorSliderRef: undefined, + htmlMonitorLabelRef: undefined, + cssColor: '#176EC7', + onChange: async (value) => { + this.updateWidget(monitorVRAMNElement); + void await this.updateServerGPU(index, { + vram: value + }); + }, + }; + this.monitorGPUSettings[index] = monitorGPUNElement; + this.monitorVRAMSettings[index] = monitorVRAMNElement; + app.ui.settings.addSetting(this.monitorGPUSettings[index]); + app.ui.settings.addSetting(this.monitorVRAMSettings[index]); + }); + }); } }); Object.defineProperty(this, "updateServer", { @@ -264,6 +289,23 @@ class CrystoolsMonitor { throw new Error(resp.statusText); } }); + Object.defineProperty(this, "updateServerGPU", { + enumerable: true, + configurable: true, + writable: true, + value: async (index, data) => { + console.log('updateServerGPU', index, data); + const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, { + method: 'PATCH', + body: JSON.stringify(data), + cache: 'no-store', + }); + if (resp.status === 200) { + return await resp.text(); + } + throw new Error(resp.statusText); + } + }); Object.defineProperty(this, "getHDDsFromServer", { enumerable: true, configurable: true, @@ -272,6 +314,14 @@ class CrystoolsMonitor { return this.getDataFromServer('HDD'); } }); + Object.defineProperty(this, "getGPUsFromServer", { + enumerable: true, + configurable: true, + writable: true, + value: async () => { + return this.getDataFromServer('GPU'); + } + }); Object.defineProperty(this, "getDataFromServer", { enumerable: true, configurable: true, @@ -294,9 +344,13 @@ class CrystoolsMonitor { value: () => { this.updateWidget(this.monitorCPUElement); this.updateWidget(this.monitorRAMElement); - this.updateWidget(this.monitorGPUElement); - this.updateWidget(this.monitorVRAMElement); this.updateWidget(this.monitorHDDElement); + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && this.updateWidget(monitorSettings); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && this.updateWidget(monitorSettings); + }); } }); Object.defineProperty(this, "updateWidget", { @@ -315,6 +369,7 @@ class CrystoolsMonitor { configurable: true, writable: true, value: (data) => { + console.log('updateAllMonitors', data); this.updateMonitor(this.monitorCPUElement, data.cpu_utilization); this.updateMonitor(this.monitorRAMElement, data.ram_used_percent); this.updateMonitor(this.monitorHDDElement, data.hdd_used_percent); @@ -322,13 +377,32 @@ class CrystoolsMonitor { console.warn('UpdateAllMonitors: no GPU data'); return; } - const gpu = data.gpus[0] ? data.gpus[0] : { - gpu_utilization: 0, vram_used_percent: 0, - }; - const gpu_utilization = gpu.gpu_utilization; - const vram_used_percent = gpu.vram_used_percent; - this.updateMonitor(this.monitorGPUElement, gpu_utilization); - this.updateMonitor(this.monitorVRAMElement, vram_used_percent); + this.monitorGPUSettings.forEach((monitorSettings, index) => { + if (data.gpus[index]) { + const gpu = data.gpus[index]; + if (gpu === undefined) { + console.error('UpdateAllMonitors: no GPU data for index', index); + return; + } + this.updateMonitor(monitorSettings, gpu.gpu_utilization); + } + else { + console.error('UpdateAllMonitors: no GPU data for index', index); + } + }); + this.monitorVRAMSettings.forEach((monitorSettings, index) => { + if (data.gpus[index]) { + const gpu = data.gpus[index]; + if (gpu === undefined) { + console.error('UpdateAllMonitors: no GPU VRAM data for index', index); + return; + } + this.updateMonitor(monitorSettings, gpu.vram_used_percent); + } + else { + console.error('UpdateAllMonitors: no GPU VRAM data for index', index); + } + }); } }); Object.defineProperty(this, "updateMonitor", { @@ -341,9 +415,6 @@ class CrystoolsMonitor { } monitorSettings.htmlMonitorLabelRef.innerHTML = `${Math.floor(percent)}%`; monitorSettings.htmlMonitorSliderRef.style.width = monitorSettings.htmlMonitorLabelRef.innerHTML; - if (monitorSettings.tooltip) { - monitorSettings.htmlMonitorLabelRef.title = monitorSettings.tooltip; - } } }); Object.defineProperty(this, "updateAllAnimationDuration", { @@ -353,9 +424,13 @@ class CrystoolsMonitor { value: (value) => { this.updatedAnimationDuration(this.monitorCPUElement, value); this.updatedAnimationDuration(this.monitorRAMElement, value); - this.updatedAnimationDuration(this.monitorGPUElement, value); - this.updatedAnimationDuration(this.monitorVRAMElement, value); this.updatedAnimationDuration(this.monitorHDDElement, value); + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && this.updatedAnimationDuration(monitorSettings, value); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && this.updatedAnimationDuration(monitorSettings, value); + }); } }); Object.defineProperty(this, "updatedAnimationDuration", { @@ -384,6 +459,9 @@ class CrystoolsMonitor { htmlMain.style.alignItems = 'center'; htmlMain.style.flexDirection = 'row'; monitorSettings.htmlMonitorRef = htmlMain; + if (monitorSettings.title) { + htmlMain.title = monitorSettings.title; + } const htmlMonitorText = document.createElement('div'); htmlMonitorText.style.width = '35px'; htmlMonitorText.style.fontSize = '10px'; @@ -448,8 +526,12 @@ class CrystoolsMonitor { ctoolsRoot.append(htmlContainer); htmlContainer.append(this.createMonitor(this.monitorCPUElement)); htmlContainer.append(this.createMonitor(this.monitorRAMElement)); - htmlContainer.append(this.createMonitor(this.monitorGPUElement)); - htmlContainer.append(this.createMonitor(this.monitorVRAMElement)); + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings)); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings)); + }); htmlContainer.append(this.createMonitor(this.monitorHDDElement)); const currentRate = parseFloat(app.ui.settings.getSettingValue(this.idInputRate, this.defaultRate)); this.updateAllAnimationDuration(currentRate); diff --git a/web/monitor.ts b/web/monitor.ts index 5a15897..23f45a9 100644 --- a/web/monitor.ts +++ b/web/monitor.ts @@ -12,6 +12,8 @@ class CrystoolsMonitor { defaultRate = .5; idWhichHDD = 'Crystools.whichHDD'; defaultWhichHDD = '/'; + monitorGPUSettings: TMonitorSettings[] = []; + monitorVRAMSettings: TMonitorSettings[] = []; // CPU Variables monitorCPUElement: TMonitorSettings = { @@ -57,7 +59,7 @@ class CrystoolsMonitor { name: this.menuPrefix + '[menu] Display partition disk monitor (HDD)', type: 'boolean', label: 'HDD', - tooltip: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`, + title: `Drive: ${app.ui.settings.getSettingValue(this.idWhichHDD, this.defaultWhichHDD)}`, defaultValue: true, htmlMonitorRef: undefined, htmlMonitorSliderRef: undefined, @@ -71,44 +73,6 @@ class CrystoolsMonitor { }, }; - // GPU Variables - monitorGPUElement: TMonitorSettings = { - id: 'Crystools.switchGPU', - name: this.menuPrefix + '[menu] Display GPU monitor', - type: 'boolean', - label: 'GPU', - defaultValue: true, - htmlMonitorRef: undefined, - htmlMonitorSliderRef: undefined, - htmlMonitorLabelRef: undefined, - cssColor: '#0C86F4', - onChange: async(value: boolean) => { - this.updateWidget(this.monitorGPUElement); - await this.updateServer({ - switchGPU: value, - }); - }, - }; - - // VRAM Variables - monitorVRAMElement: TMonitorSettings = { - id: 'Crystools.switchVRAM', - name: this.menuPrefix + '[menu] Display Video RAM monitor', - type: 'boolean', - label: 'VRAM', - defaultValue: true, - htmlMonitorRef: undefined, - htmlMonitorSliderRef: undefined, - htmlMonitorLabelRef: undefined, - cssColor: '#176EC7', - onChange: async(value: boolean) => { - this.updateWidget(this.monitorVRAMElement); - await this.updateServer({ - switchVRAM: value, - }); - }, - }; - constructor() { this.createSettings(); } @@ -116,8 +80,6 @@ class CrystoolsMonitor { createSettings = (): void => { app.ui.settings.addSetting(this.monitorCPUElement); app.ui.settings.addSetting(this.monitorRAMElement); - app.ui.settings.addSetting(this.monitorGPUElement); - app.ui.settings.addSetting(this.monitorVRAMElement); app.ui.settings.addSetting(this.monitorHDDElement); app.ui.settings.addSetting({ @@ -199,27 +161,77 @@ class CrystoolsMonitor { }); }); + void this.getGPUsFromServer().then((gpus: TGpuName[]): void => { + console.log(gpus); + let moreThanOneGPU = false; + if (gpus.length > 1) { + moreThanOneGPU = true; + } - // void this.getGPUsFromServer().then((gpus: TGpuName[]): void => { - // console.log(gpus); - // gpus?.forEach(({ - // name, index - // }) => { - // const id = this.idSwitchGPU + index; - // app.ui.settings.addSetting({ - // id, - // name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`, - // type: 'boolean', - // defaultValue: this.defaultSwitchGPU, - // onChange: async(value: boolean)=> { - // // this.updateWidget(value, this.htmlMonitorGPURef); - // void await this.updateServerGPU(index,{ - // utilization: value - // }); - // }, - // }); - // }); - // }); + gpus?.forEach(({ + name, index + }) => { + + if(name === undefined || index === undefined) { + console.warn('getGPUsFromServer: name or index undefined', name, index); + return; + } + + let label = 'GPU'; + let labelVRAM = 'VRAM'; + if (moreThanOneGPU) { + label = 'GPU '+index; + labelVRAM = 'VRAM'+index; + } + + // GPU Utilization Variables + const monitorGPUNElement: TMonitorSettings = { + id: 'Crystools.switchGPU' + index, + name: this.menuPrefix + `[menu] Display GPU monitor\r\n[${index}] ${name}`, + type: 'boolean', + label, + title: `${index}: ${name}`, + defaultValue: true, + htmlMonitorRef: undefined, + htmlMonitorSliderRef: undefined, + htmlMonitorLabelRef: undefined, + cssColor: '#0C86F4', + onChange: async(value: boolean) => { + this.updateWidget(monitorGPUNElement); + void await this.updateServerGPU(index,{ + utilization: value + }); + }, + }; + + // GPU VRAM Variables + const monitorVRAMNElement: TMonitorSettings = { + id: 'Crystools.switchVRAM' + index, + name: this.menuPrefix + `[menu] Display GPU VRAM monitor\r\n[${index}] ${name}`, + type: 'boolean', + label: labelVRAM, + title: `${index}: ${name}`, + defaultValue: true, + htmlMonitorRef: undefined, + htmlMonitorSliderRef: undefined, + htmlMonitorLabelRef: undefined, + cssColor: '#176EC7', + onChange: async(value: boolean) => { + this.updateWidget(monitorVRAMNElement); + void await this.updateServerGPU(index,{ + vram: value + }); + }, + }; + + this.monitorGPUSettings[index] = monitorGPUNElement; + this.monitorVRAMSettings[index] = monitorVRAMNElement; + // @ts-ignore + app.ui.settings.addSetting(this.monitorGPUSettings[index]); + // @ts-ignore + app.ui.settings.addSetting(this.monitorVRAMSettings[index]); + }); + }); }; @@ -235,26 +247,26 @@ class CrystoolsMonitor { throw new Error(resp.statusText); }; - // updateServerGPU = async(index: number, data: TGpuSettings): Promise => { - // console.log('updateServerGPU', index, data); - // const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, { - // method: 'PATCH', - // body: JSON.stringify(data), - // cache: 'no-store', - // }); - // if (resp.status === 200) { - // return await resp.text(); - // } - // throw new Error(resp.statusText); - // }; + updateServerGPU = async(index: number, data: TGpuSettings): Promise => { + console.log('updateServerGPU', index, data); + const resp = await api.fetchApi(`/crystools/monitor/GPU/${index}`, { + method: 'PATCH', + body: JSON.stringify(data), + cache: 'no-store', + }); + if (resp.status === 200) { + return await resp.text(); + } + throw new Error(resp.statusText); + }; getHDDsFromServer = async(): Promise => { return this.getDataFromServer('HDD'); }; - // getGPUsFromServer = async(): Promise => { - // return this.getDataFromServer('GPU'); - // }; + getGPUsFromServer = async(): Promise => { + return this.getDataFromServer('GPU'); + }; getDataFromServer = async(what: string): Promise => { const resp = await api.fetchApi(`/crystools/monitor/${what}`, { @@ -270,9 +282,14 @@ class CrystoolsMonitor { updateAllWidget = (): void => { this.updateWidget(this.monitorCPUElement); this.updateWidget(this.monitorRAMElement); - this.updateWidget(this.monitorGPUElement); - this.updateWidget(this.monitorVRAMElement); this.updateWidget(this.monitorHDDElement); + + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && this.updateWidget(monitorSettings); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && this.updateWidget(monitorSettings); + }); }; updateWidget = (monitorSettings: TMonitorSettings): void => { @@ -283,7 +300,7 @@ class CrystoolsMonitor { }; updateAllMonitors = (data: TStatsData): void => { - // console.log('updateAllMonitors', data); + console.log('updateAllMonitors', data); this.updateMonitor(this.monitorCPUElement, data.cpu_utilization); this.updateMonitor(this.monitorRAMElement, data.ram_used_percent); this.updateMonitor(this.monitorHDDElement, data.hdd_used_percent); @@ -293,15 +310,45 @@ class CrystoolsMonitor { return; } - const gpu = data.gpus[0] ? data.gpus[0] : { - gpu_utilization: 0, vram_used_percent: 0, - }; - const gpu_utilization = gpu.gpu_utilization; - const vram_used_percent = gpu.vram_used_percent; + this.monitorGPUSettings.forEach((monitorSettings, index) => { + if (data.gpus[index]) { + const gpu = data.gpus[index]; + if (gpu === undefined) { + console.error('UpdateAllMonitors: no GPU data for index', index); + return; + } - this.updateMonitor(this.monitorGPUElement, gpu_utilization); - this.updateMonitor(this.monitorVRAMElement, vram_used_percent); + this.updateMonitor(monitorSettings, gpu.gpu_utilization); + } else { + console.error('UpdateAllMonitors: no GPU data for index', index); + } + }); + + this.monitorVRAMSettings.forEach((monitorSettings, index) => { + if (data.gpus[index]) { + const gpu = data.gpus[index]; + if (gpu === undefined) { + console.error('UpdateAllMonitors: no GPU VRAM data for index', index); + return; + } + + this.updateMonitor(monitorSettings, gpu.vram_used_percent); + } else { + console.error('UpdateAllMonitors: no GPU VRAM data for index', index); + } + }); + + + // const gpu2 = data.gpus[0] ? data.gpus[0] : { + // gpu_utilization: 0, vram_used_percent: 0, + // }; + + // const gpu_utilization = gpu.gpu_utilization; + // const vram_used_percent = gpu2.vram_used_percent; + + // this.updateMonitor(this.monitorGPUElement, gpu_utilization); + // this.updateMonitor(this.monitorVRAMElement, vram_used_percent); }; updateMonitor = (monitorSettings: TMonitorSettings, percent: number): void => { @@ -311,17 +358,18 @@ class CrystoolsMonitor { monitorSettings.htmlMonitorLabelRef.innerHTML = `${Math.floor(percent)}%`; monitorSettings.htmlMonitorSliderRef.style.width = monitorSettings.htmlMonitorLabelRef.innerHTML; - if (monitorSettings.tooltip) { - monitorSettings.htmlMonitorLabelRef.title = monitorSettings.tooltip; - } }; updateAllAnimationDuration = (value: number): void => { this.updatedAnimationDuration(this.monitorCPUElement, value); this.updatedAnimationDuration(this.monitorRAMElement, value); - this.updatedAnimationDuration(this.monitorGPUElement, value); - this.updatedAnimationDuration(this.monitorVRAMElement, value); this.updatedAnimationDuration(this.monitorHDDElement, value); + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && this.updatedAnimationDuration(monitorSettings, value); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && this.updatedAnimationDuration(monitorSettings, value); + }); }; updatedAnimationDuration = (monitorSettings: TMonitorSettings, value: number): void => { @@ -356,8 +404,12 @@ class CrystoolsMonitor { htmlContainer.append(this.createMonitor(this.monitorCPUElement)); htmlContainer.append(this.createMonitor(this.monitorRAMElement)); - htmlContainer.append(this.createMonitor(this.monitorGPUElement)); - htmlContainer.append(this.createMonitor(this.monitorVRAMElement)); + this.monitorGPUSettings.forEach((monitorSettings) => { + monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings)); + }); + this.monitorVRAMSettings.forEach((monitorSettings) => { + monitorSettings && htmlContainer.append(this.createMonitor(monitorSettings)); + }); htmlContainer.append(this.createMonitor(this.monitorHDDElement)); const currentRate = parseFloat(app.ui.settings.getSettingValue(this.idInputRate, this.defaultRate)); @@ -377,6 +429,10 @@ class CrystoolsMonitor { htmlMain.style.flexDirection = 'row'; monitorSettings.htmlMonitorRef = htmlMain; + if (monitorSettings.title) { + htmlMain.title = monitorSettings.title; + } + const htmlMonitorText = document.createElement('div'); htmlMonitorText.style.width = '35px'; htmlMonitorText.style.fontSize = '10px'; @@ -395,7 +451,6 @@ class CrystoolsMonitor { htmlMonitorSlider.style.height = '100%'; htmlMonitorSlider.style.width = '0'; htmlMonitorSlider.style.backgroundColor = monitorSettings.cssColor; - // htmlMonitorSlider.style.transition = 'width 0.5s'; monitorSettings.htmlMonitorSliderRef = htmlMonitorSlider; htmlMonitorContent.append(htmlMonitorSlider); diff --git a/web/monitor.types.d.ts b/web/monitor.types.d.ts index 99e83ce..2160da5 100644 --- a/web/monitor.types.d.ts +++ b/web/monitor.types.d.ts @@ -41,7 +41,8 @@ type TMonitorSettings = { id: string, name: string, label: string, // on monitor - tooltip?: string, + title?: string, // on monitor + tooltip?: string, // on settings type: 'boolean' | 'number' | 'string', defaultValue: boolean, onChange: (value: boolean) => Promise,