why my button in python arcade section seems inactive?

Question

Hello this is My first post on stackoverflow, so I apologize in advance if my post is irrelant or problematic.

I am using the python libraries Arcade and Arcade.gui.

Currently I try to add GUI widgets in a Section instance (named popup in the code below). The button is visible but my problem is : it seems to be inactive. It doesn't react to hovering or click (images are in the same folder as source code)

Thanks for helping.

My minimal code :

import arcade
import arcade.gui

class Popup(arcade.Section):

    def __init__(self, left: int, bottom: int, width: int, height: int, **kwargs):
        super().__init__(left, bottom, width, height, **kwargs)

        self.ui_manager = arcade.gui.UIManager()
        self.ui_manager.enable()

        box = arcade.gui.UIBoxLayout()

        button = arcade.gui.UITextureButton(
            x=0, y=0,
            texture=arcade.load_texture('button.png'),
            texture_hovered=arcade.load_texture('button_hovered.png'),
            texture_pressed=arcade.load_texture('button_pressed.png'),
            text='Click !'
        )

        box.add(button)
        button.on_click = self.on_click_button
        anchored_box = arcade.gui.UIAnchorWidget(anchor_x="center_x", anchor_y="center_y", child=box)

        self.manager.add(anchored_box)

    def on_click_button(self, event):
        print('clicked')

    def on_draw(self):
        self.manager.draw()

class GameView(arcade.View):

    def __init__(self):
        super().__init__()

        popup_width = 400
        popup_height = 300
        popup_left = self.window.width // 2 - popup_width // 2
        popup_bottom = self.window.height // 2 - popup_height // 2

        self.popup = Popup(popup_left, popup_bottom, popup_width, popup_height, self.ui_manager)
        self.section_manager.add_section(self.popup)

    def on_draw(self):
        arcade.start_render()


def main():
    window = arcade.Window(width=800, height=600, title='title')
    game_view = GameView()
    window.show_view(game_view)
    window.run()


if __name__ == "__main__":
    main()

I also tries to create the GUImanager in the gameView and pass it to the section through an argument, it doesn't change anything.

I looked at the "Sections Demo 3" example on the Arcade website, but it's not using Arcade GUI buttons.

Answer 1

There are few issues:

1. You need to rename self.ui_manager to self.manager
2. You need to remove self.ui_manager from Popup(popup_left, popup_bottom, popup_width, popup_height, self.ui_manager)
3. You need to set proper Popup size and position, e.g.: Popup(0, 0, 400, 300)

Code:

import arcade
import arcade.gui


class Popup(arcade.Section):

    def __init__(self, left, bottom, width, height):
        super().__init__(left, bottom, width, height)
        self.manager = arcade.gui.UIManager()
        self.manager.enable()
        box = arcade.gui.UIBoxLayout()
        button = arcade.gui.UITextureButton(x=0, y=0, texture=arcade.load_texture('button.png'), texture_hovered=arcade.load_texture('button_hovered.png'), texture_pressed=arcade.load_texture('button_pressed.png'), text='Click !')
        box.add(button)
        button.on_click = self.on_click_button
        anchored_box = arcade.gui.UIAnchorWidget(anchor_x='center_x', anchor_y='center_y', child=box)
        self.manager.add(anchored_box)
        self.clicked = False

    def on_click_button(self, event):
        self.clicked = True

    def on_draw(self):
        self.manager.draw()
        if self.clicked:
            arcade.draw_text(text='Clicked!', start_x=window.width/2, start_y=window.height-40, color=arcade.color.RED, anchor_x='center', font_size=20)


class GameView(arcade.View):
    def __init__(self):
        super().__init__()
        self.popup = Popup(0, 0, 400, 300)
        self.section_manager.add_section(self.popup)

    def on_draw(self):
        arcade.start_render()


window = arcade.Window()
game_view = GameView()
window.show_view(game_view)
window.run()