[bug] Kind a glitch of desktop background from widgets when the main window has a transparent color

[SeyRyuu]

What happend?

Hey there,

i'm not 100% sure if this is a bug, but i want to create a main window with a slight transparent color. I did the following:

• Created a new main window with the flag g.MasterWindowFlagsTransparent
• Set the main window background color to something transparent like wnd.SetBgColor(color.RGBA{A: 175})
• Create a window with some widgets
• Then, the background behind the actual main window will kinda glitch through the created window (see following image as reference)

I'll added the code that i used to take the screenshot to reproduce/test.

Any ideas to fix this issue?

Kind regards

Code example

main.go

package main

import (
	g "github.com/AllenDang/giu"
	"image/color"
)

var (
	foo  string
	foo2 bool
)

func loop() {
	//Render one window
	g.Window("Test window").Layout(
		g.Label("Hello World! I'm a label"),
		g.Selectable("Hello World! I'm a selectable"),
		g.InputText(&foo).Hint("You can enter something here..."),
		g.Checkbox("Check me!", &foo2),
		g.Button("Press me!"),
		g.RadioButton("One lonely radio button!", foo2),

		g.Table().Columns(
			g.TableColumn("Col1"),
			g.TableColumn("Col2"),
			g.TableColumn("Col3"),
		).Rows(
			g.TableRow(
				g.Label("Row1"),
				g.Label("Row1"),
				g.Label("Row1"),
			),
			g.TableRow(
				g.Label("Row2"),
				g.Label("Row2"),
				g.Label("Row2"),
			),
			g.TableRow(
				g.Label("Row3"),
				g.Label("Row3"),
				g.Label("Row3"),
			),
		).Size(400, 200),

		g.Child().Layout(
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
		).Size(200, 100),
	)

	//Render another window
	g.Window("I have no focus").Size(200, 100).Layout(
		g.Checkbox("I'm a checkbox!", &foo2),
	)
}

func main() {
	//Main window (set flag transparent, otherwise transparent color will not work)
	wnd := g.NewMasterWindow("Hello World!", 800, 600, g.MasterWindowFlagsTransparent)

	//Set main window slightly transparent
	wnd.SetBgColor(color.RGBA{A: 175})

	wnd.Run(loop)
}

To Reproduce

1. Run my demo
2. You should see the same as my screenshot (if ur background is green :D)

Version

master (v0.6.2)

OS

Windows 11 Go 1.18

[gucio321]

what do you mean by "glich"? these dots around widgets?

[SeyRyuu]

Hey, thanks for your response @gucio321 !

Yes, may it was the wrong wording for this, sorry. But yes, these dots are one thing i meant. I think it is not right that the green background color from the os desktop "shine through" at some points, like these dots and the boarders from the widgets. Also for example the hint text of the InputText widget, the green background of the child scrollbar and the green table boarders.

I added a picture with some markings to clearify what i meant:

[gucio321]

well, my guss is, that it may be caused by FrameRounding property that rounds corners and behind these corneers you don't see window, but masterWindow instead... @AllenDang what do you think about it?

[AllenDang]

Yeah, seems the window has transparent background and frame corner's color of widget is mixed with master window.

[SeyRyuu]

Hey, thanks for your response @gucio321 and @AllenDang !

Sounds quite plausible that this property cause the problems. Are there any ideas to fix this?

[AllenDang]

@SeyRyuu Use opacity color of the child window.

[SeyRyuu]

Hey, thanks for this idea @AllenDang , but unfortunately i am not able to solve my issue with my understanding of your idea. I tryed to set the bg color of the window itself and also tryed to set the bg color of a child, but the problem is still occuring. May i just missunderstand your comment.

Just for clarification, i want to set the main window color to a transparent color (e.g. masterWindow.SetBgColor(color.RGBA{A: 175})) and use a solid bg-color (e.g. black) for the window widgets. How can i archive this without these "green dots"? I appended my current code and a picture of the result.

main.go

package main

import (
	g "github.com/AllenDang/giu"
	"github.com/AllenDang/imgui-go"
	"image/color"
)

var (
	foo  string
	foo2 bool
)

func loop() {
	g.PushStyleColor(g.StyleColorWindowBg, color.RGBA{R: 255, A: 255})
	
	g.Window("Test window").Layout(
		g.Label("Hello World! I'm a label"),
		g.Selectable("Hello World! I'm a selectable"),
		g.InputText(&foo).Hint("You can enter something here..."),
		g.Checkbox("Check me!", &foo2),
		g.Button("Press me!"),
		g.RadioButton("One lonely radio button!", foo2),

		g.Table().Columns(
			g.TableColumn("Col1"),
			g.TableColumn("Col2"),
			g.TableColumn("Col3"),
		).Rows(
			g.TableRow(
				g.Label("Row1"),
				g.Label("Row1"),
				g.Label("Row1"),
			),
			g.TableRow(
				g.Label("Row2"),
				g.Label("Row2"),
				g.Label("Row2"),
			),
			g.TableRow(
				g.Label("Row3"),
				g.Label("Row3"),
				g.Label("Row3"),
			),
		).Size(400, 200),

		g.Custom(func() {
			imgui.PushStyleColor(imgui.StyleColorChildBg, g.ToVec4Color(color.RGBA{R: 255, G: 128, A: 255}))
		}),
		g.Child().Layout(
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
			g.Checkbox("Checkbox inside a child!", &foo2),
		).Size(200, 100),
		g.Custom(func() { g.PopStyleColor() }),
	)
	
	g.PopStyleColor()
	
	
	g.Window("I have no focus").Size(200, 100).Layout(
		g.Checkbox("I'm a checkbox!", &foo2),
	)
}

func main() {
	//Main window (set flag transparent, otherwise transparent color will not work)
	wnd := g.NewMasterWindow("Hello World!", 800, 600, g.MasterWindowFlagsTransparent)

	//Set main window slightly transparent
	wnd.SetBgColor(color.RGBA{A: 175})

	wnd.Run(loop)
}

[AllenDang]

@SeyRyuu Here is one useful tool to test and adjust the color setting.

1. Nav to ./giu/examples/imguidemo
2. go run .

[AllenDang]

@SeyRyuu You could adjust the color settings for all style and see the result in real time.

[SeyRyuu]

Hey, thanks for this @AllenDang !

I'll played a bit with this and could nearly "fix" all issues i had with the transparent main window color. But a few things are still there, one of the initially mentioned FrameRounding property by @gucio321 together with anti-aliased lines and anti-aliased fill options. If these are at default, it would look like this:

Picture 1: I set all transparent colors to non transparent colors

If you disable anti-aliased lines, anti-aliased fill and set FrameRounding to 0 it looks like this:

Picture 2: I set all transparent colors to non transparent colors, no FrameRounding, disabled anti-aliased lines and anti-aliased fill

FrameRounding and anti-aliasing seems to take reference from the main window background and creates these "green-dots". Disable these options will fix this, but it does not look nice without them :D. Is there a way to change the ref color for FrameRounding and the anti-aliasing options? Also for example the PopUp seems to take the main window also as reference for the background color (see the following picture, color is set to RGB: 20, A: 150). Is there any way to change this too?

Another thing is text which uses the color from "TextDisabled" like these "(?)" in the demo window. Even if you set the color for this to full opacity, it has still a "shine through" from the green os desktop.

I added the code for the demo i used:

main.go

package main

import (
	g "github.com/AllenDang/giu"
	"github.com/AllenDang/imgui-go"
	"image/color"
)

func loop() {
	imgui.ShowDemoWindow(nil)
}

func main() {
	//Main window (set flag transparent, otherwise transparent color will not work)
	wnd := g.NewMasterWindow("Widgets", 1024, 768, g.MasterWindowFlagsTransparent)
	//Set main window slightly transparent
	wnd.SetBgColor(color.RGBA{A: 175})

	wnd.Run(loop)
}

and the colors i changed if this help in any way:

colorExport.txt

ImVec4* colors = ImGui::GetStyle().Colors;
colors[ImGuiCol_PopupBg]                = ImVec4(0.08f, 0.08f, 0.08f, 0.59f);
colors[ImGuiCol_TitleBg]                = ImVec4(0.09f, 0.12f, 0.14f, 1.00f);
colors[ImGuiCol_ScrollbarBg]            = ImVec4(0.02f, 0.02f, 0.02f, 1.00f);
colors[ImGuiCol_Header]                 = ImVec4(0.20f, 0.25f, 0.29f, 1.00f);
colors[ImGuiCol_HeaderHovered]          = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_SeparatorHovered]       = ImVec4(0.10f, 0.40f, 0.75f, 1.00f);
colors[ImGuiCol_ResizeGrip]             = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_ResizeGripHovered]      = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_ResizeGripActive]       = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_TabHovered]             = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_TableBorderLight]       = ImVec4(0.20f, 0.25f, 0.29f, 1.00f);
colors[ImGuiCol_TableRowBgAlt]          = ImVec4(1.00f, 1.00f, 1.00f, 0.00f);
colors[ImGuiCol_TextSelectedBg]         = ImVec4(0.26f, 0.59f, 0.98f, 1.00f);
colors[ImGuiCol_DragDropTarget]         = ImVec4(1.00f, 1.00f, 0.00f, 1.00f);
colors[ImGuiCol_NavWindowingHighlight]  = ImVec4(1.00f, 1.00f, 1.00f, 1.00f);
colors[ImGuiCol_NavWindowingDimBg]      = ImVec4(0.80f, 0.80f, 0.80f, 1.00f);
colors[ImGuiCol_ModalWindowDimBg]       = ImVec4(0.80f, 0.80f, 0.80f, 1.00f);

[Aronii]

Hi, are there any news at this? @AllenDang or @gucio321 ? Or did you already found an solution @SeyRyuu ? I also want to create a transparent main window and facing the same problems.

PS: I am fairly new at github, so i hope it is okay to comment in this thread.

[SeyRyuu]

Hey @Aronii , you're fine with posting in this thread, no problem. But sorry, I did not found an fix for this problem yet. May @AllenDang or @gucio321 have any further ideas for solving this problem. I read a bit through the issues of the Dear ImGui and imgui-go repo, but i could not find anything helpful.

[gucio321]

Oh 2 pings - I'm coming xD I can't remember - can you guys reproduce that behavior with plain ( C version of) imgui? If so maybe that bug should be reported there?

[SeyRyuu]

@gucio321 Thanks for your response :). Yeah, need more pings ^^.

No seriously, i tryed to install the pure c version of imgui and managed to get the demo compiled and running on linux (failed at windows very badly...). But i have no idea and found only less helpfull posts (may also difficult for me as a german person to search for right wordings, etc.) to set the main window color to a semi-transparent one. I never touched C++ before and i was happy to get the demo running :P. Do you know how to set the main-window color to transparent? I used / run this example code.

[gucio321]

Hehe sadly I'm not familiar with c++ too. Go is awesome and c isn't 😃 I will try to rewrite failing c code into c version of imgui as i get some time to do it

[SeyRyuu]

Ah, okay. Yes. same for me here, go is nice and c isn't ^^ Cool, thanks. I will also look a bit further when i'm back from work.

[Aronii]

Hi, unfortunately i also have no experience with c. Sorry, i can't support you there.

[SeyRyuu]

Hey @gucio321 , i now found some time to hang on this and I was finally able to rebuild this in the plain c imgui (i used a main window bg-color with rgba: 0 0 0 128):

The mentioned issues above are not occuring in plain imgui, so my guess this is a giu related issue.

[gucio321]

@SeyRyuu could you try setting frame rounding style property

[SeyRyuu]

@gucio321 Sure, seems to be still fine:

[gucio321]

Thank you now we are sure that there is something wrong with giu/imgui-go. @AllenDang needs to investigate it

[Aronii]

Hi, are there any news on this? @AllenDang

[AllenDang]

@Aronii I just changed the imgui bindings to cimgui-go, and havent finish the migration in giu, but you could have a try with giu's docking branch.

[gucio321]

@AllenDang is cimgui-go ready to be used in giu? I can work on migration if i get some time

[Aronii]

@Aronii I just changed the imgui bindings to cimgui-go, and havent finish the migration in giu, but you could have a try with giu's docking branch.

Hey @AllenDang, thanks for the quick reply. I will try in the next few days when i get time.

[SeyRyuu]

Hey @AllenDang , i just switched to the docking branch and i can not run the code i used as demo in this issue. The MasterWindow-type does not provide any other functions besides the Run() func, so the used SetBgColor() func used in the demo code is not available. Is this func missing or may a problem on my side?

[AllenDang]

@SeyRyuu My bad, I missed the SetBgColor, just added it, update the code of docking branch and try again.

[SeyRyuu]

Hey @AllenDang , thanks for adding! I just updated the imports and compiled the code again and it seems that the issue is fixed! I will test it later on my windows machine too and respond back to you and close this issue, but on my Linux machine it is working fine.

[SeyRyuu]

Also running fine on my Windows 11 machine, issue is fixed. I will close this Issue now.

Thanks for solving this and all your effords on giu and (the new) cimgui-go @AllenDang!