From 03a61d690379f22c6bffc42ea4845f797deb316c Mon Sep 17 00:00:00 2001 From: Crystian Date: Sat, 9 Nov 2024 17:30:02 +0100 Subject: [PATCH] monitors on sidebar (beta) --- __init__.py | 2 +- core/version.py | 2 +- pyproject.toml | 2 +- version | 2 +- web/monitor.css | 11 ++- web/monitor.js | 223 ++++++++++++++++++++++++++++++--------------- web/monitor.ts | 196 +++++++++++++++++++++++++-------------- web/progressBar.js | 2 - web/progressBar.ts | 2 - 9 files changed, 290 insertions(+), 152 deletions(-) diff --git a/__init__.py b/__init__.py index bf011b7..a54eb71 100644 --- a/__init__.py +++ b/__init__.py @@ -2,7 +2,7 @@ @author: Crystian @title: Crystools @nickname: Crystools -@version: 1.20.0 +@version: 1.21.0 @project: "https://github.com/crystian/ComfyUI-Crystools", @description: Plugins for multiples uses, mainly for debugging, you need them! IG: https://www.instagram.com/crystian.ia """ diff --git a/core/version.py b/core/version.py index 8e84480..7ff31dc 100644 --- a/core/version.py +++ b/core/version.py @@ -1 +1 @@ -version = "1.20.0" +version = "1.21.0" diff --git a/pyproject.toml b/pyproject.toml index fcf8cb1..82a1805 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "comfyui-crystools" description = "With this suit, you can see the resources monitor, progress bar & time elapsed, metadata and compare between two images, compare between two JSONs, show any value to console/display, pipes, and more!\nThis provides better nodes to load/save images, previews, etc, and see \"hidden\" data without loading a new workflow." -version = "1.20.0" +version = "1.21.0" license = { file = "LICENSE" } dependencies = ["deepdiff", "torch", "numpy", "Pillow", "pynvml", "py-cpuinfo"] diff --git a/version b/version index 3989355..3500250 100644 --- a/version +++ b/version @@ -1 +1 @@ -1.20.0 +1.21.0 diff --git a/web/monitor.css b/web/monitor.css index 8988f65..cfcff78 100644 --- a/web/monitor.css +++ b/web/monitor.css @@ -1,5 +1,5 @@ /* Vertical UI */ -.comfy-menu { +.comfy-menu, .side-bar-panel { #crystools-monitors-root { /*background-color: red;*/ box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); @@ -91,6 +91,15 @@ } } +/* side-bar-panel */ +.side-bar-panel { + #crystools-monitors-root { + width: 230px; + margin-left: auto; + margin-right: auto; + } +} + .comfyui-queue-button { /*width: unset !important;*/ } diff --git a/web/monitor.js b/web/monitor.js index a093c0e..6d4b40d 100644 --- a/web/monitor.js +++ b/web/monitor.js @@ -4,6 +4,12 @@ import { MonitorUI } from './monitorUI.js'; import { Colors } from './styles.js'; import { convertNumberToPascalCase } from './utils.js'; import { ComfyKeyMenuDisplayOption, MenuDisplayOptions } from './progressBarUIBase.js'; +var MonitorPoistion; +(function (MonitorPoistion) { + MonitorPoistion["Top"] = "Top"; + MonitorPoistion["Sidebar"] = "Sidebar"; + MonitorPoistion["Floating"] = "Floating"; +})(MonitorPoistion || (MonitorPoistion = {})); class CrystoolsMonitor { constructor() { Object.defineProperty(this, "idExtensionName", { @@ -30,6 +36,12 @@ class CrystoolsMonitor { writable: true, value: null }); + Object.defineProperty(this, "settingsMonitorPosition", { + enumerable: true, + configurable: true, + writable: true, + value: void 0 + }); Object.defineProperty(this, "settingsRate", { enumerable: true, configurable: true, @@ -96,6 +108,18 @@ class CrystoolsMonitor { writable: true, value: void 0 }); + Object.defineProperty(this, "monitorPositionId", { + enumerable: true, + configurable: true, + writable: true, + value: 'Crystools.MonitorPosition' + }); + Object.defineProperty(this, "monitorPosition", { + enumerable: true, + configurable: true, + writable: true, + value: MonitorPoistion.Top + }); Object.defineProperty(this, "monitorWidthId", { enumerable: true, configurable: true, @@ -120,6 +144,44 @@ class CrystoolsMonitor { writable: true, value: 30 }); + Object.defineProperty(this, "createSettingsMonitorPosition", { + enumerable: true, + configurable: true, + writable: true, + value: () => { + this.settingsMonitorPosition = { + id: this.monitorPositionId, + name: 'Position (floating not implemented yet)', + category: ['Crystools', this.menuPrefix + ' Configuration', 'position'], + tooltip: 'Only for new UI', + experimental: true, + data: [], + type: 'combo', + options: (value) => { + const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition); + return [{ + value: MonitorPoistion.Top, + text: MonitorPoistion.Top, + selected: value === position, + }, { + value: MonitorPoistion.Sidebar, + text: MonitorPoistion.Sidebar, + selected: value === position, + }, { + value: MonitorPoistion.Floating, + text: MonitorPoistion.Floating, + selected: value === position, + }]; + }, + defaultValue: this.monitorPosition, + onChange: (_value) => { + if (this.monitorUI) { + this.moveMonitor(this.menuDisplayOption); + } + }, + }; + } + }); Object.defineProperty(this, "createSettingsRate", { enumerable: true, configurable: true, @@ -183,6 +245,76 @@ class CrystoolsMonitor { }; } }); + Object.defineProperty(this, "createSettingsMonitorWidth", { + enumerable: true, + configurable: true, + writable: true, + value: () => { + this.settingsMonitorWidth = { + id: this.monitorWidthId, + name: 'Pixel Width', + category: ['Crystools', this.menuPrefix + ' Configuration', 'width'], + tooltip: 'The width of the monitor in pixels on the UI (only on top/bottom UI)', + type: 'slider', + attrs: { + min: 60, + max: 100, + step: 1, + }, + defaultValue: this.monitorWidth, + onChange: (value) => { + let valueNumber; + try { + valueNumber = parseInt(value); + if (isNaN(valueNumber)) { + throw new Error('invalid value'); + } + } + catch (error) { + console.error(error); + return; + } + const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight); + this.monitorUI?.updateMonitorSize(valueNumber, h); + }, + }; + } + }); + Object.defineProperty(this, "createSettingsMonitorHeight", { + enumerable: true, + configurable: true, + writable: true, + value: () => { + this.settingsMonitorHeight = { + id: this.monitorHeightId, + name: 'Pixel Height', + category: ['Crystools', this.menuPrefix + ' Configuration', 'height'], + tooltip: 'The height of the monitor in pixels on the UI (only on top/bottom UI)', + type: 'slider', + attrs: { + min: 16, + max: 50, + step: 1, + }, + defaultValue: this.monitorHeight, + onChange: async (value) => { + let valueNumber; + try { + valueNumber = parseInt(value); + if (isNaN(valueNumber)) { + throw new Error('invalid value'); + } + } + catch (error) { + console.error(error); + return; + } + const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth); + this.monitorUI?.updateMonitorSize(w, valueNumber); + }, + }; + } + }); Object.defineProperty(this, "createSettingsCPU", { enumerable: true, configurable: true, @@ -377,76 +509,6 @@ class CrystoolsMonitor { }; } }); - Object.defineProperty(this, "createSettingsMonitorWidth", { - enumerable: true, - configurable: true, - writable: true, - value: () => { - this.settingsMonitorWidth = { - id: this.monitorWidthId, - name: 'Pixel Width', - category: ['Crystools', this.menuPrefix + ' Configuration', 'width'], - tooltip: 'The width of the monitor in pixels on the UI (only on floating UI)', - type: 'slider', - attrs: { - min: 60, - max: 100, - step: 1, - }, - defaultValue: this.monitorWidth, - onChange: (value) => { - let valueNumber; - try { - valueNumber = parseInt(value); - if (isNaN(valueNumber)) { - throw new Error('invalid value'); - } - } - catch (error) { - console.error(error); - return; - } - const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight); - this.monitorUI?.updateMonitorSize(valueNumber, h); - }, - }; - } - }); - Object.defineProperty(this, "createSettingsMonitorHeight", { - enumerable: true, - configurable: true, - writable: true, - value: () => { - this.settingsMonitorHeight = { - id: this.monitorHeightId, - name: 'Pixel Height', - category: ['Crystools', this.menuPrefix + ' Configuration', 'height'], - tooltip: 'The height of the monitor in pixels on the UI (only on floating UI)', - type: 'slider', - attrs: { - min: 16, - max: 50, - step: 1, - }, - defaultValue: this.monitorHeight, - onChange: async (value) => { - let valueNumber; - try { - valueNumber = parseInt(value); - if (isNaN(valueNumber)) { - throw new Error('invalid value'); - } - } - catch (error) { - console.error(error); - return; - } - const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth); - this.monitorUI?.updateMonitorSize(w, valueNumber); - }, - }; - } - }); Object.defineProperty(this, "createSettings", { enumerable: true, configurable: true, @@ -455,6 +517,7 @@ class CrystoolsMonitor { app.ui.settings.addSetting(this.settingsRate); app.ui.settings.addSetting(this.settingsMonitorHeight); app.ui.settings.addSetting(this.settingsMonitorWidth); + app.ui.settings.addSetting(this.settingsMonitorPosition); app.ui.settings.addSetting(this.monitorRAMElement); app.ui.settings.addSetting(this.monitorCPUElement); void this.getHDDsFromServer().then((data) => { @@ -504,9 +567,9 @@ class CrystoolsMonitor { enumerable: true, configurable: true, writable: true, - value: (position) => { + value: (menuPosition) => { let parentElement; - switch (position) { + switch (menuPosition) { case MenuDisplayOptions.Disabled: parentElement = document.getElementById('queue-button'); if (parentElement && this.monitorUI.rootElement) { @@ -518,7 +581,20 @@ class CrystoolsMonitor { break; case MenuDisplayOptions.Top: case MenuDisplayOptions.Bottom: - app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element); + const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition); + if (position === MonitorPoistion.Top) { + app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element); + } + else { + parentElement = document.getElementsByClassName('side-bar-panel')[0]; + if (parentElement) { + parentElement.insertBefore(this.crystoolsButtonGroup.element, parentElement.firstChild); + } + else { + console.error('Crystools: parentElement to move monitors not found! back to top'); + app.ui.settings.setSettingValue(this.monitorPositionId, MonitorPoistion.Top); + } + } } } }); @@ -623,6 +699,7 @@ class CrystoolsMonitor { if (this.monitorUI) { return; } + this.createSettingsMonitorPosition(); this.createSettingsRate(); this.createSettingsMonitorHeight(); this.createSettingsMonitorWidth(); diff --git a/web/monitor.ts b/web/monitor.ts index 7b4c4e1..2649e01 100644 --- a/web/monitor.ts +++ b/web/monitor.ts @@ -5,12 +5,19 @@ import { Colors } from './styles.js'; import { convertNumberToPascalCase } from './utils.js'; import { ComfyKeyMenuDisplayOption, MenuDisplayOptions } from './progressBarUIBase.js'; +enum MonitorPoistion { + 'Top' = 'Top', + 'Sidebar' = 'Sidebar', + 'Floating' = 'Floating', +} + class CrystoolsMonitor { readonly idExtensionName = 'Crystools.monitor'; private readonly menuPrefix = commonPrefix; private menuDisplayOption: MenuDisplayOptions = MenuDisplayOptions.Disabled; private crystoolsButtonGroup: ComfyButtonGroup = null; + private settingsMonitorPosition: TMonitorSettings; private settingsRate: TMonitorSettings; private settingsMonitorHeight: TMonitorSettings; private settingsMonitorWidth: TMonitorSettings; @@ -24,11 +31,48 @@ class CrystoolsMonitor { private monitorUI: MonitorUI; + private readonly monitorPositionId = 'Crystools.MonitorPosition'; + private readonly monitorPosition: MonitorPoistion = MonitorPoistion.Top; private readonly monitorWidthId = 'Crystools.MonitorWidth'; private readonly monitorWidth = 60; private readonly monitorHeightId = 'Crystools.MonitorHeight'; private readonly monitorHeight = 30; + createSettingsMonitorPosition = (): void => { + this.settingsMonitorPosition = { + id: this.monitorPositionId, + name: 'Position (floating not implemented yet)', + category: ['Crystools', this.menuPrefix + ' Configuration', 'position'], + tooltip: 'Only for new UI', + experimental: true, + data: [], + type: 'combo', + options: (value: string): any => { + const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition); + return [{ + value: MonitorPoistion.Top, + text: MonitorPoistion.Top, + selected: value === position, + }, { + value: MonitorPoistion.Sidebar, + text: MonitorPoistion.Sidebar, + selected: value === position, + }, { + value: MonitorPoistion.Floating, + text: MonitorPoistion.Floating, + selected: value === position, + }]; + }, + defaultValue: this.monitorPosition, + // @ts-ignore + onChange: (_value: string): void => { + if (this.monitorUI) { + this.moveMonitor(this.menuDisplayOption); + } + }, + }; + }; + createSettingsRate = (): void => { this.settingsRate = { id: 'Crystools.RefreshRate', @@ -92,6 +136,72 @@ class CrystoolsMonitor { }; }; + createSettingsMonitorWidth = (): void => { + this.settingsMonitorWidth = { + id: this.monitorWidthId, + name: 'Pixel Width', + category: ['Crystools', this.menuPrefix + ' Configuration', 'width'], + tooltip: 'The width of the monitor in pixels on the UI (only on top/bottom UI)', + type: 'slider', + attrs: { + min: 60, + max: 100, + step: 1, + }, + defaultValue: this.monitorWidth, + // @ts-ignore + onChange: (value: string): void => { + let valueNumber: number; + + try { + valueNumber = parseInt(value); + if (isNaN(valueNumber)) { + throw new Error('invalid value'); + } + } catch (error) { + console.error(error); + return; + } + + const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight); + this.monitorUI?.updateMonitorSize(valueNumber, h); + }, + }; + }; + + createSettingsMonitorHeight = (): void => { + this.settingsMonitorHeight = { + id: this.monitorHeightId, + name: 'Pixel Height', + category: ['Crystools', this.menuPrefix + ' Configuration', 'height'], + tooltip: 'The height of the monitor in pixels on the UI (only on top/bottom UI)', + type: 'slider', + attrs: { + min: 16, + max: 50, + step: 1, + }, + defaultValue: this.monitorHeight, + // @ts-ignore + onChange: async(value: string): void => { + let valueNumber: number; + + try { + valueNumber = parseInt(value); + if (isNaN(valueNumber)) { + throw new Error('invalid value'); + } + } catch (error) { + console.error(error); + return; + } + + const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth); + this.monitorUI?.updateMonitorSize(w, valueNumber); + }, + }; + }; + createSettingsCPU = (): void => { // CPU Variables this.monitorCPUElement = { @@ -286,76 +396,11 @@ class CrystoolsMonitor { }; }; - createSettingsMonitorWidth = (): void => { - this.settingsMonitorWidth = { - id: this.monitorWidthId, - name: 'Pixel Width', - category: ['Crystools', this.menuPrefix + ' Configuration', 'width'], - tooltip: 'The width of the monitor in pixels on the UI (only on floating UI)', - type: 'slider', - attrs: { - min: 60, - max: 100, - step: 1, - }, - defaultValue: this.monitorWidth, - // @ts-ignore - onChange: (value: string): void => { - let valueNumber: number; - - try { - valueNumber = parseInt(value); - if (isNaN(valueNumber)) { - throw new Error('invalid value'); - } - } catch (error) { - console.error(error); - return; - } - - const h = app.ui.settings.getSettingValue(this.monitorHeightId, this.monitorHeight); - this.monitorUI?.updateMonitorSize(valueNumber, h); - }, - }; - }; - - createSettingsMonitorHeight = (): void => { - this.settingsMonitorHeight = { - id: this.monitorHeightId, - name: 'Pixel Height', - category: ['Crystools', this.menuPrefix + ' Configuration', 'height'], - tooltip: 'The height of the monitor in pixels on the UI (only on floating UI)', - type: 'slider', - attrs: { - min: 16, - max: 50, - step: 1, - }, - defaultValue: this.monitorHeight, - // @ts-ignore - onChange: async(value: string): void => { - let valueNumber: number; - - try { - valueNumber = parseInt(value); - if (isNaN(valueNumber)) { - throw new Error('invalid value'); - } - } catch (error) { - console.error(error); - return; - } - - const w = await app.ui.settings.getSettingValue(this.monitorWidthId, this.monitorWidth); - this.monitorUI?.updateMonitorSize(w, valueNumber); - }, - }; - }; - createSettings = (): void => { app.ui.settings.addSetting(this.settingsRate); app.ui.settings.addSetting(this.settingsMonitorHeight); app.ui.settings.addSetting(this.settingsMonitorWidth); + app.ui.settings.addSetting(this.settingsMonitorPosition); app.ui.settings.addSetting(this.monitorRAMElement); app.ui.settings.addSetting(this.monitorCPUElement); @@ -398,10 +443,10 @@ class CrystoolsMonitor { } }; - moveMonitor = (position: MenuDisplayOptions): void => { + moveMonitor = (menuPosition: MenuDisplayOptions): void => { let parentElement: Element | null | undefined; - switch (position) { + switch (menuPosition) { case MenuDisplayOptions.Disabled: parentElement = document.getElementById('queue-button'); if (parentElement && this.monitorUI.rootElement) { @@ -413,9 +458,19 @@ class CrystoolsMonitor { case MenuDisplayOptions.Top: case MenuDisplayOptions.Bottom: - app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element); + const position = app.ui.settings.getSettingValue(this.monitorPositionId, this.monitorPosition); + if(position === MonitorPoistion.Top) { + app.menu?.settingsGroup.element.before(this.crystoolsButtonGroup.element); + } else { + parentElement = document.getElementsByClassName('side-bar-panel')[0]; + if(parentElement){ + parentElement.insertBefore(this.crystoolsButtonGroup.element, parentElement.firstChild); + } else { + console.error('Crystools: parentElement to move monitors not found! back to top'); + app.ui.settings.setSettingValue(this.monitorPositionId, MonitorPoistion.Top); + } + } } - }; updateAllWidget = (): void => { @@ -493,6 +548,7 @@ class CrystoolsMonitor { return; } + this.createSettingsMonitorPosition(); this.createSettingsRate(); this.createSettingsMonitorHeight(); this.createSettingsMonitorWidth(); diff --git a/web/progressBar.js b/web/progressBar.js index 6c3e214..c53ec49 100644 --- a/web/progressBar.js +++ b/web/progressBar.js @@ -90,7 +90,6 @@ class CrystoolsProgressBar { this.progressBarUI.showSection(this.menuDisplayOption === MenuDisplayOptions.Disabled); } if (this.menuDisplayOption === MenuDisplayOptions.Disabled && this.progressBarUI.showProgressBarFlag) { - console.log('updateDisplay progress bar'); this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress); } } @@ -107,7 +106,6 @@ class CrystoolsProgressBar { } this.menuDisplayOption = app.ui.settings.getSettingValue(ComfyKeyMenuDisplayOption, MenuDisplayOptions.Disabled); app.ui.settings.addEventListener(`${ComfyKeyMenuDisplayOption}.change`, (e) => { - console.log('Comfy.UseNewMenu.change desde progress bar', e.detail.value); this.updateDisplay(e.detail.value); }); const progressBarElement = document.createElement('div'); diff --git a/web/progressBar.ts b/web/progressBar.ts index 4a8080f..47cb136 100644 --- a/web/progressBar.ts +++ b/web/progressBar.ts @@ -36,7 +36,6 @@ class CrystoolsProgressBar { this.progressBarUI.showSection(this.menuDisplayOption === MenuDisplayOptions.Disabled); } if (this.menuDisplayOption === MenuDisplayOptions.Disabled && this.progressBarUI.showProgressBarFlag) { - console.log('updateDisplay progress bar'); this.progressBarUI.updateDisplay(this.currentStatus, this.timeStart, this.currentProgress); } }; @@ -51,7 +50,6 @@ class CrystoolsProgressBar { this.menuDisplayOption = app.ui.settings.getSettingValue(ComfyKeyMenuDisplayOption, MenuDisplayOptions.Disabled); app.ui.settings.addEventListener(`${ComfyKeyMenuDisplayOption}.change`, (e: any) => { - console.log('Comfy.UseNewMenu.change desde progress bar', e.detail.value); this.updateDisplay(e.detail.value); }, );