chrisgoringe / cg-controller

MIT License
26 stars 3 forks source link

[ aesthetics ] make all widgets full width ( was make "true/false" toggles same width ) #140

Open JorgeR81 opened 5 days ago

JorgeR81 commented 5 days ago

If would fit better with the rest of the GUI, if you:


Original :

tf


Mockup:

tf2

chrisgoringe commented 4 days ago

I did it as it is because I've got several nodes with very long titles for the toggles which don't fit in the label space...

So not sure the best solution. Maybe all widgets should be full width, and the title just done as a tooltip?

JorgeR81 commented 4 days ago

Yeah that could work ! ( I changed the issue name )

You could align the labels on the left. Maybe with a less bright / more transparent font ( not pictured ). And the values to the right. This is what Comfy UI does on the widgets.

What do you think ?


original:

m0


mockup:

m2

chrisgoringe commented 4 days ago

yes, that could work.

JorgeR81 commented 3 days ago

Consider adding this in version 1.0, instead of 1.1

This way you'll have the prettier GUI in the documentation :)

And the GUI version 1.0, will probably be the first image people will find, when they search for this extension.

If I search for "InvokeAI", in Google Images, I find mostly images of v3 ( which was a major stable release ) instead of the latest v5.

JorgeR81 commented 4 hours ago

It seems ComfyUI already has native sliders, but they are not enabled ( https://github.com/chrisgoringe/cg-controller/issues/61#issuecomment-2424974260 )

They are just used by some custom extensions ( mostly with hardcoded min / max settings ).

They look like this:

es


I don't like the centered values. They are less readable, if we have many sliders.

But I like the more muted color scheme. I think it's pretty readable, and it makes the GUI less distracting.

The bright blue color, that we have now, worked better on the "Blender style" sliders. But with "full width" sliders, it may be too strong, especially if many sliders are used.

What do you think ?

new mockup:

color1


old mockup:

376834355-84f7d7cd-fd63-47f7-817e-993b8615f12b