Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to change application window background color? #173

Open
phong-phuong opened this issue Jan 24, 2024 · 4 comments
Open

How to change application window background color? #173

phong-phuong opened this issue Jan 24, 2024 · 4 comments
Labels
faq A frequent issue, remaining opened to facilitate discoverability

Comments

@phong-phuong
Copy link

phong-phuong commented Jan 24, 2024

Despite setting the background color manually via

self.backgroundColor = (0, 0, 0, 0.0)

# Main render function
def gui(self):
        gl.glClearColor(*self.backgroundColor)
        gl.glClear(gl.GL_COLOR_BUFFER_BIT)

immapp.run(app.gui)

This imgui implementation seems to have its background color painted outside of the user's defined render loop.
In the sample code, I set the application background to fully transparent, yet the result has a grayish tranparent background.
How to adjust that background color that is hidden from the user? I could not find examples on how to do this.

image

from imgui_bundle import immapp
import glfw
import OpenGL.GL as gl


class App:
    def __init__(self):
        self.backgroundColor = (0, 0, 0, 0.0)

    def gui(self):
        gl.glClearColor(*self.backgroundColor)
        gl.glClear(gl.GL_COLOR_BUFFER_BIT)


# Main function
def main():
    if not glfw.init():
        print("Could not initialize OpenGL context")
        exit(1)

    # Transparent window
    glfw.window_hint(glfw.TRANSPARENT_FRAMEBUFFER, glfw.TRUE)

    app = App()
    immapp.run(app.gui, with_implot=True, with_markdown=True, window_size=(1000, 800))


# Run the main function
if __name__ == "__main__":
    main()


@pthom
Copy link
Owner

pthom commented Jan 25, 2024

See backgroundColor inside imguiwindowparams

    runner_params = hello_imgui.RunnerParams()
    runner_params.imgui_window_params.background_color = (0.0, 0.0, 0.0, 1.0)

    addons = immapp.AddOnsParams()
    addons.with_markdown = True
    
    immapp.run(runner_params, addons)

You should not use gl calls inside the gui functions. If you want to draw a custom background with OpenGL, see https://pthom.github.io/imgui_bundle/quickstart.html#_custom_3d_background

@phong-phuong
Copy link
Author

Thanks for the response.
I am not trying to draw a custom background, the goal is to have complete control the background, in my use case, the goal is to have a completely transparent background.

Updating the example code to use the code you have provided, I'm still at square one. It still produces a grayish transcluent background.

from imgui_bundle import immapp, hello_imgui
import glfw
import OpenGL.GL as gl


class App:
    def show_gui(self):
        # gl.glClearColor(*self.backgroundColor)
        # gl.glClear(gl.GL_COLOR_BUFFER_BIT)
        pass


def main():
    if not glfw.init():
        print("Could not initialize OpenGL context")
        exit(1)

    # Transparent window
    glfw.window_hint(glfw.TRANSPARENT_FRAMEBUFFER, glfw.TRUE)

    app = App()
    runner_params = hello_imgui.RunnerParams()
    runner_params.imgui_window_params.background_color = (0.0, 0.0, 0.0, 0.0)
    runner_params.callbacks.show_gui = app.show_gui

    addons = immapp.AddOnsParams()
    addons.with_markdown = True
    addons.with_implot = True

    immapp.run(runner_params, addons)


if __name__ == "__main__":
    main()

image

This is the result I am after (which can be achieved using pyimgui):
image

@phong-phuong
Copy link
Author

Nevermind, I modified the custom 3d background example and it gave me the result I was after, thank you again :)

@pthom pthom changed the title How to change background color? How to change application window background color? Jan 25, 2024
@pthom
Copy link
Owner

pthom commented Jan 25, 2024

Now, I understand the issue better: by default Hello ImGui will provide a default ImGui Window that occupies the full Application Window. This differs from ImGui's default behavior, but can be changed.

See below:

from imgui_bundle import imgui, hello_imgui


def gui():
    imgui.text("Hello world")


def main():
    runner_params = hello_imgui.RunnerParams()
    # Tell Hello ImGui to not create a default window
    runner_params.imgui_window_params.default_imgui_window_type = hello_imgui.DefaultImGuiWindowType.no_default_window

    # Change the background color
    runner_params.imgui_window_params.background_color = (0, 0.5, 0.5, 0.3)
    runner_params.callbacks.show_gui = gui

    hello_imgui.run(runner_params)


if __name__ == "__main__":
    main()
image

And for a transparent application window:

from imgui_bundle import imgui, hello_imgui, ImVec4
import glfw  # Always import glfw after imgui_bundle


def gui():
    imgui.text("Hello world")


def main():
    # Tell glfw to use a transparent application window, before running Hello ImGui
    if not glfw.init():
        exit(1)
    glfw.window_hint(glfw.TRANSPARENT_FRAMEBUFFER, glfw.TRUE)

    runner_params = hello_imgui.RunnerParams()
    # Tell Hello ImGui to not create a default window
    runner_params.imgui_window_params.default_imgui_window_type = (
        hello_imgui.DefaultImGuiWindowType.no_default_window)

    # Change the background color
    runner_params.imgui_window_params.background_color = (0, 0.5, 0.5, 0.5)
    runner_params.callbacks.show_gui = gui

    # Also make ImGui windows transparent
    runner_params.callbacks.setup_imgui_style = \
        lambda : imgui.get_style().set_color_(imgui.Col_.window_bg, ImVec4(1.0, 0.0, 0.0, 0.6))

    hello_imgui.run(runner_params)


if __name__ == "__main__":
    main()
image

@pthom pthom added the faq A frequent issue, remaining opened to facilitate discoverability label Jan 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
faq A frequent issue, remaining opened to facilitate discoverability
Projects
None yet
Development

No branches or pull requests

2 participants