ImageButton

An ImageButton is a button that displays an image. It can also optionally display text in addition to the image. The image can be positioned to the left, right, top or bottom of the text.

Examples

Media Player

In this (totally fake) media player, three image buttons are used for play, pause and shuffle controls. This shows how an ImageButton can have optional text in addition to the image. The images are from IconsDB.

media_player.py

import gooeypie as gp

def media_control(event):
    if event.widget == play_btn:
        status_lbl.text = "Now playing"
    elif event.widget == pause_btn:
        status_lbl.text = "Media paused"
    elif event.widget == shuffle_btn:
        status_lbl.text = "Starting shuffle..."

app = gp.GooeyPieApp("Media Player")

# Create widgets
play_btn = gp.ImageButton("play.png", media_control)
pause_btn = gp.ImageButton("pause.png", media_control)
shuffle_btn = gp.ImageButton("shuffle.png", media_control, "Shuffle all")
status_lbl = gp.Label("Nothing playing")

# Add some additional space around each button
play_btn.style.padding = 10
pause_btn.style.padding = 10
shuffle_btn.style.padding = 10

# Add widgets to app
app.add(play_btn, 1, 1)
app.add(pause_btn, 2, 1)
app.add(shuffle_btn, 3, 1)
app.add(status_lbl, 1, 2, column_span=3)

app.run()

---

Creating an ImageButton widget

my_imagebutton = gp.ImageButton(image_path, event_function, button_text)

Parameters

• image_path (string): The path and filename of the image to be displayed on the button.
• event_function (function): The event function that will be called when the button is pressed. This function must accept a single argument for the event object.
• button_text (string): Optional. The text of the button.

Properties

Name	Type	Description
.text	string	Gets or sets the text of the button.
.image	string	Gets or sets the path and filename of the image to be displayed on the button.
.image_position	string	Gets or sets the position of the image on the button relative to any text, if it has been set. Valid values are "left", "right", "top" and "bottom". Default is "left".
.width	integer	Gets or sets the width of the button in pixels.
.height	integer	Gets or sets the height of the button in pixels.
.disabled	boolean	Gets or sets whether the button is disabled. When disabled is set to True, the button does not respond to click events.

Methods

This widget has no unique methods.

Events

This widget supports the following events as well as the standard events listed below.

Name	Description
.on_activate(event_function)	The function to call when the button is pressed. This event should be set when the button is first created.

Standard events

• .on_click
• .on_double_click
• .on_right_click
• .on_middle_click
• .on_mouse_down
• .on_mouse_up
• .on_mouse_enter
• .on_mouse_leave

Styles

How to specify colors

• Colors can be specified as either a hex code (e.g. "#FF0000"), a CSS color name, or "transparent".
• When specifying a color for a style, you can provide either a single color or two colors separated by a comma. If you provide two colors, the first will be used for light mode and the second for dark mode. For example, my_widget.text_color = "steelblue", "skyblue" would specify steelblue for light mode and sky blue for dark mode.

Name	Description	Default
.style.border_color	The color of the border of the button. Will not be visible unless border_width is greater than 0.	"transparent"
.style.border_width	The width of the border of the button.	0
.style.button_color	The color of the button.
.style.button_disabled_color	The color of the button when it is disabled.
.style.button_hover_color	The color of the button when it is hovered over.
.style.corner_radius	The radius of the corners of the button.	6
.style.padding	Additional space around the text of the button	0
.style.text_color	The color of the text of the button.
.style.text_disabled_color	The color of the text of the button when it is disabled.
.style.font_name	The font of the text of the button. Either an installed font or a generic font name: "serif", "sans-serif", "monospace" or "system"	"system"
.style.font_size	The size of the text of the button.	12
.style.font_weight	The weight of the text of the button. Either "normal" or "bold".	"normal"
.style.font_style	The style of the text of the button. Either "normal" or "italic".	"normal"