Controller aesthetics

[JorgeR81]

Current ideas:

• Add an option to have only white icons, if the buttons use multiple icons ( e.g. mute / bypass button )

• Use a pastel red in the mute icon, like on the Queue menu

[JorgeR81]

We could also have user options to set font size in different places:

• global ( like we have now )
• node header ( to increase header size, as @LukeG89 suggested: (edit - main at 1.3.1) dev at 1.3.1 #309 (comment) )
• prompt text ( this will only change text size, not GUI size )

---

Instead of a slider, the other options could have only value fields.
These files will be empty, by default.

And the 2 new options could be called:

• override global font size, for node headers
• override global font size, for prompt text

[LukeG89]

• node header ( to increase header size, as @LukeG89 suggested: (edit - main at 1.3.1) dev at 1.3.1 #309 (comment) )

About that, I was thinking that adding some margins PADDING on headers would be enough to make them more relevant.
I tried a mockup by expanding headers of +25%, keep the same font size and make bypass/mute button same size of group button

[chrisgoringe]

Technical point - that’s padding, not margin. Margin is outside the border (if any) and doesn’t have the element’s background. It’s the space between boxes. Padding is the space inside a box around the thing inside it 😀

…

On Sat, 9 Nov 2024 at 11:00 PM, LukeG89 ***@***.***> wrote: - node header ( to increase header size, as @LukeG89 <https://github.com/LukeG89> suggested: #309 (comment) <#309 (comment)> ) About that, I was thinking that adding some margins on headers would be enough to make them more relevant. I tried a mockup by expanding headers of +25%, keep the same font size and make bypass/muyte button same size of group button compare.jpg (view on web) <https://github.com/user-attachments/assets/39eb5c88-7014-4fd8-ae08-c119626a43b9> — Reply to this email directly, view it on GitHub <#314 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABBLMA77OVVEXOCWSF4B2SLZ7X2NHAVCNFSM6AAAAABRO7QGVOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMJZGY2DCNQ> . You are receiving this because you are subscribed to this thread.Message ID: <chrisgoringe/cg-controller/repo-discussions/314/comments/11196416@ github.com>

[LukeG89]

Thanks teacher! Correct it! 😆

[JorgeR81]

About the node header, I think it would look better if we increase padding above and below, equally, to keep the button and text centered.

1 or 2 pixels should be enough ( this is at 1920 x 1080 resolution )

Probably 2 pixels is better, to be more noticeable.

---

original:

---

1 pixel above and below

---

2 pixels above and below

[JorgeR81]

About the red mute icon,

I think we should try the VAE link color, to see how it looks.

It's also a pastel red, and it's already matched with colored node panels in ComfyUI.

[LukeG89]

I just use the color picker to see the difference between this one and the "X" in Queue menu... They are almost the same color! 😆

[JorgeR81]

Well, ... see ... proof that this is the best color :)

[JorgeR81]

About white icons in node panels,

I think we could have a "crossed" pin icon and not use a blue icon. 

But this is not about color matching or aesthetic preferences. 
Having a non neutral color next to an image, can change our color perception. 
That's why most image editors use neutral grey colors now. 

---

[JorgeR81]

I've made some more mockups and I agree with @LukeG89, that thicker headers would look better.

This is at 1920 x 1080 resolution:

---

Original

---

2 pixels above + 2 pixels below the text

[JorgeR81]

I've made some mockups.
But I'm not sure if they look better.

The text seems too small the thicker header ( 3+3 ).

The icon could be a little larger ( about 10 % ), but no more than that.

---

• original ( we can clearly see the "master" button )

• icon 10 % larger

• icon 25 % larger ( they seem the same button )

---

• 2+2 pixels ( above an below ) ( like before )
• icon 10 % larger
• text 2 pixels to the right

---

• 3+3 pixels ( above an below )
• icon 10 % larger
• text 4 pixels to the right

[LukeG89]

Yeah, the last option (3+3 pixels and +10% icon) seems the best one!

[JorgeR81]

I still think 2+2 would be enough.
The text seems a bit to small for 3+3.

But both are fine ( 3+3 may look better on wider Controllers )

[JorgeR81]

Yeah, I'm starting to lean more to 3+3, now that my eyes are getting used to it.

[JorgeR81]

I also noticed, the Image node header is already 3 pixels taller ( to fit the larger pin icon ).
So this would make all headers the same size.

[JorgeR81]

Also, when we have a snapping, the Controller would look better with a design similar to the one we had before:

• no round corners
• larger horizontal space between the node and the gutter ( same as the vertical space between nodes )

And when Controller windows are snapped:

• the windows would share the gutter

---