[Concept] Alternative positions for Resources Monitor

[LukeG89]

Describe the bug
In new 1.3.x frontend, when you open more workflow tabs, Resources Monitor alters the shape of other extension buttons. They also get altered when Pixel Height is at a high value.

To Reproduce
This is what happens when you open workflow tabs:

https://github.com/user-attachments/assets/27a30450-52e7-4f95-ae39-875655663f1e

And this when Pixel Height is at maximum:

Expected behavior
Resouce Monitor should not affect other extension buttons.

Error in console:
No errors.

Versions:

** Python version: 3.11.9 (tags/v3.11.9:de54cf5, Apr  2 2024, 10:12:12) [MSC v.1938 64 bit (AMD64)]

Total VRAM 8192 MB, total RAM 65277 MB
pytorch version: 2.4.1+cu124
Set vram state to: NORMAL_VRAM
Device: cuda:0 NVIDIA GeForce RTX 3070 Ti Laptop GPU : cudaMallocAsync
Using pytorch cross attention
[Prompt Server] web root: E:\ComfyUI\web_custom_versions\Comfy-Org_ComfyUI_frontend\1.3.10

[Crystools INFO] Crystools version: 1.19.0
[Crystools INFO] CPU: 12th Gen Intel(R) Core(TM) i7-12700H - Arch: AMD64 - OS: Windows 10
[Crystools INFO] Pynvml (Nvidia) initialized.
[Crystools INFO] GPU/s:
[Crystools INFO] 0) NVIDIA GeForce RTX 3070 Ti Laptop GPU
[Crystools INFO] NVIDIA Driver: 561.09

### Loading: ComfyUI-Manager (V2.51.4)
### ComfyUI Revision: 2745 [8dfa0cc5] | Released on '2024-10-07'

Additional context
Issue already reported here: https://github.com/crystian/ComfyUI-Crystools/issues/127 @crystian If you think this is a normal behavior, you can close the issue. Just wanted to separate this issue from the other one.

[amimi818]

I think it is possible to make the monitor a movable floating bar without attaching it to the top menu, so that it can not interfere with other extension buttons

[LukeG89]

@amimi818 Floating menus are very hated by users (just see what happened with Queue and Canvas Menu), so having another floating panel around is not ideal.

Topbar is extremely limited, especially now that you can open workflows in tabs. Resouces Monitor needs a lot of space, so a dedicated place is needed.

Good alternatives might be:

• Showing Resouces Monitor like canvas info

• Having a dedicated bar that you can set at top or bottom of window, like rgthree Progress Bar

[crystian]

I will wait to final release to review it, because the can change it, thanks

[crystian]

Can you mock the dedicated bar? (photoshop or whatever) as a proposal And think about various resolutions

[LukeG89]

I will wait to final release to review it, because the can change it, thanks

@crystian 1.3 frontend was officially released a couple of days ago: https://github.com/comfyanonymous/ComfyUI/commit/14eba07acd28d5b0fc250e493ab7751bd9b9b43e

Can you mock the dedicated bar? (photoshop or whatever) as a proposal

I don't know, maybe something like that? (I'm not good at mockups)

And think about various resolutions

I don't have other solutions. And honestly, the Canvas info idea is stolen from another monitor created by VykosX (but I can't find it anywhere):

[SirVeggie]

I've been using VykosX's version of the monitor since he made it and it's so much better than having it in the menu bar.

...from another monitor created by VykosX (but I can't find it anywhere)

I think he only shared the files for it in the comfyui discord server. Funnily enough this version of the monitor is partly the reason why the ui has an option to hide the canvas info.

@crystian I can give you the files for it if you want. Would be great if we could have this version of the monitor instead so I don't have to replace the files every time I update comfyui :D

Currently there's some bug with it that makes it appear only sometimes so I need to refresh the ui a bunch until it appears. I somehow remember reading that you might have had a similar problem before, so maybe you have some idea why it might happen?

[crystian]

Sorry, I'm working a lot; what do you think about this concept? Only works when you activate the left/right bar

And what happens when it is extended?

or...

[crystian]

other DIFFICULT option is a floating (and movable):

[SirVeggie]

Floating is definitely better. I think I prefer the background to be transparent. One option would be to use a box shadow with blurred edge, which blends in nicely to the background, but still gives some separation and contrast.

[LukeG89]

what do you think about this concept? Only works when you activate the left/right bar

I like it! So Resources Monitor would be on top of each sidebar windows?

And what happens when it is extended?

Maybe a mix of the two options: Bars could extend, but when they reach a limit, Resorces Monitor could act like in the second example. This just to avoid excessive bars.

other DIFFICULT option is a floating (and movable):

As I said in the other comment:

Floating menus are very hated by users (just see what happened with Queue and Canvas Menu), so having another floating panel around is not ideal.

People are not big fan of floating windows, they don't want to clutter the canvas.

The best option is still the "Canvas info" one, because:

• Bars are always visible
• You don't interact with them

But if it's not possible, I prefer inside sidebar windows.

[LukeG89]

About the floating panel, there could be a button on the topbar to toggle on/off the Resorces Monitor:

I got the icon from here (same frontend icons): https://www.primefaces.org/diamond/icons.xhtml

[SirVeggie]

Sidebar is not great, because I don't want to have the sidebar open just because of the resource monitor.

The best option is still the "Canvas info" one,

@LukeG89 VykosX's version is also a floating window/element, it just has transparent background and is not interactible.

Having a transparent background, and placing the monitor on the left side of the screen has the benefit of taking as little visual space as possible when the bars are low, with the downside of having less clarity on light colored themes.

With pointer-events: none clicks will pass through to the canvas, so it will not block any interaction.

[LukeG89]

VykosX's version is also a floating window/element, it just has transparent background and is not interactible.

I didn't know that, I thought it was like canvas info.

[LukeG89]

Having a transparent background, and placing the monitor on the left side of the screen has the benefit of taking as little visual space as possible when the bars are low, with the downside of having less clarity on light colored themes.

With pointer-events: none clicks will pass through to the canvas, so it will not block any interaction.

If we can reach that, I think the best options would be:

• Floating panel in fixed canvas positions
• In settings you can:
  • Set panel dimensions
  • Set panel position:
  • top/bottom
  • left/right
  • Set background transparency
• No interaction on canvas
• (optional) Toggle button on topbar

[crystian]

I'll see... and do (I hope) on the weekend, so stay tuned to the updates on this "thread." I accept more recommendations, of course!

[LukeG89]

Another suggestion is adding a shortcut instead of a topbar button to toggle on/off the Resources Monitor. I don't know if you can add an entry in the Keybinding section, but you can make some default shortcuts in Crystools settings that users can choose. (like in cg-controller)

[crystian]

Ok, I will do three options: 1) as today on topbar 2) inside of the sidebar 3) floating, movable, and with options to adjust transparency and size

What do you think?

I'm going to do right now the 2 option.

[LukeG89]

Seems great! 🚀

3. floating, movable, and with options to adjust transparency and size

For this option, there could be an option in settings to make the panel "non-interactive" (so you can pass through it)

[crystian]

point 2 has been added. Can you check it, please?

you need to activate it from settings

[LukeG89]

I just tried it, works good! Can we adjust the size as for the floating panel?

However, there is a problem with the bottom part of every windows: you can't reach the bottom and some elements are hidden.

No Monitor:

With Monitor:

[crystian]

Thanks for the fast feedback! I'll check that!

[Moheeb77]

It is not working anymore with the latest update of comfyui

api.ts:236 Unhandled message: {"type": "crystools.monitor", "data": {"cpu_utilization": 5.6, "ram_total": 34013278208, "ram_used": 23039090688, "ram_used_percent": 67.7, "hdd_total": 187053371392, "hdd_used": 150967230464, "hdd_used_percent": 80.7, "device_type": "cpu", "gpus": [{"gpu_utilization": -1, "gpu_temperature": -1, "vram_total": -1, "vram_used": -1, "vram_used_percent": -1}]}} Error: Unknown message type crystools.monitor at WebSocket. (api.ts:231:23)

[LukeG89]

It is not working anymore with the latest update of comfyui

It's working to me, and I have everything up-to-date and I'm also using the nightly frontend (currently at 1.4.4).

api.ts:236 Unhandled message: {"type": "crystools.monitor", "data": {"cpu_utilization": 5.6, "ram_total": 34013278208, "ram_used": 23039090688, "ram_used_percent": 67.7, "hdd_total": 187053371392, "hdd_used": 150967230464, "hdd_used_percent": 80.7, "device_type": "cpu", "gpus": [{"gpu_utilization": -1, "gpu_temperature": -1, "vram_total": -1, "vram_used": -1, "vram_used_percent": -1}]}} Error: Unknown message type crystools.monitor at WebSocket. (api.ts:231:23)

That console warning was always there as far as I can tell.

@Moheeb77 What's the problem? You don't see the bars? They are not moving?

[Moheeb77]

I don't see the bars and i'm trying to figure out what is causing the problem. I have two machines, windows 10 and 11 with the same problem after updating comfyui.

[LukeG89]

@Moheeb77 Open a new bug report about your issue, here we are working on alternative positions for Resource Monitor (it just started as a bug report). Fill your bug report with as much information as you can (full log, full console log, etc.)

[LukeG89]

@crystian Any news?