Skip to content

GUI: Reimplement slider. #2035

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Mar 30, 2024
Merged

GUI: Reimplement slider. #2035

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
65947a4
GUI: Reimplement slider.
eruvanos Mar 25, 2024
657b808
Fix resource listing
eruvanos Mar 25, 2024
61a0070
Expose UISlider in arcade.gui
eruvanos Mar 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions arcade/gui/__init__.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,38 @@
from arcade.gui.events import UIMousePressEvent
from arcade.gui.events import UIMouseReleaseEvent
from arcade.gui.events import UIMouseScrollEvent
from arcade.gui.events import UIOnClickEvent
from arcade.gui.events import UIOnActionEvent
from arcade.gui.events import UIOnChangeEvent
from arcade.gui.events import UIOnClickEvent
from arcade.gui.events import UIOnUpdateEvent
from arcade.gui.events import UITextEvent
from arcade.gui.events import UIOnActionEvent
from arcade.gui.events import UITextMotionEvent
from arcade.gui.events import UITextMotionSelectEvent
from arcade.gui.mixins import UIDraggableMixin
from arcade.gui.mixins import UIMouseFilterMixin
from arcade.gui.mixins import UIWindowLikeMixin
from arcade.gui.nine_patch import NinePatchTexture
from arcade.gui.property import ListProperty, DictProperty, Property, bind, unbind
from arcade.gui.style import UIStyleBase, UIStyledWidget
from arcade.gui.surface import Surface
from arcade.gui.nine_patch import NinePatchTexture
from arcade.gui.ui_manager import UIManager
from arcade.gui.widgets import UILayout
from arcade.gui.widgets.layout import (
UIBoxLayout,
UIAnchorLayout,
UIGridLayout
)
from arcade.gui.widgets import UIDummy, Rect
from arcade.gui.widgets import UIInteractiveWidget
from arcade.gui.widgets.text import UILabel, UIInputText, UITextArea, UITextWidget
from arcade.gui.widgets.toggle import UITextureToggle
from arcade.gui.widgets.image import UIImage
from arcade.gui.widgets import UILayout
from arcade.gui.widgets import UISpace
from arcade.gui.widgets.dropdown import UIDropdown
from arcade.gui.widgets import UISpriteWidget
from arcade.gui.widgets.buttons import UITextureButton, UITextureButtonStyle, UIFlatButton
from arcade.gui.widgets.slider import UISlider, UISliderStyle
from arcade.gui.widgets import UIWidget
from arcade.gui.property import ListProperty, DictProperty, Property, bind, unbind
from arcade.gui.mixins import UIDraggableMixin
from arcade.gui.mixins import UIMouseFilterMixin
from arcade.gui.mixins import UIWindowLikeMixin
from arcade.gui.widgets.buttons import (
UITextureButton,
UITextureButtonStyle,
UIFlatButton,
)
from arcade.gui.widgets.dropdown import UIDropdown
from arcade.gui.widgets.image import UIImage
from arcade.gui.widgets.layout import UIBoxLayout, UIAnchorLayout, UIGridLayout
from arcade.gui.widgets.slider import UIBaseSlider, UISlider, UITextureSlider, UISliderStyle
from arcade.gui.widgets.text import UILabel, UIInputText, UITextArea, UITextWidget
from arcade.gui.widgets.toggle import UITextureToggle

__all__ = [
"UIAnchorLayout",
Expand Down Expand Up @@ -76,7 +76,9 @@
"UIOnActionEvent",
"UIOnChangeEvent",
"UIOnClickEvent",
"UIBaseSlider",
"UISlider",
"UITextureSlider",
"UISliderStyle",
"UIStyleBase",
"UIStyledWidget",
Expand Down
75 changes: 10 additions & 65 deletions arcade/gui/examples/textured_slider.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,85 +1,30 @@
"""
Create a slider using a custom texture subclass
Create a slider using textures.

The initial theme is a 90s sci-fi style, but you can replace the textures
in this example to match the theme of your project.

If arcade and Python are properly installed, you can run this example with:
python -m arcade.gui.examples.textured_slider
"""
from __future__ import annotations

from typing import Union

import arcade
from arcade import Texture
from arcade.gui import UIManager, Surface, UIAnchorLayout, NinePatchTexture
from arcade.gui.widgets.slider import UISlider, UISliderStyle


class UITextureSlider(UISlider):
"""
A custom slider subclass which supports textures.

You can copy this as-is into your own project, or you can modify
the class to have more features as needed.
"""

def __init__(
self,
bar: Union[Texture, NinePatchTexture],
thumb: Union[Texture, NinePatchTexture],
style=None,
**kwargs
):
self.bar = bar
self.thumb = thumb
style = style or UISlider.DEFAULT_STYLE

super().__init__(style=style, **kwargs)

def do_render(self, surface: Surface):
style: UISliderStyle = self.get_current_style() # type: ignore

self.prepare_render(surface)

surface.draw_texture(0, 0, self.width, self.height, self.bar)

# TODO accept constructor params
slider_height = self.height // 4
slider_left_x = self._x_for_value(self.vmin)
cursor_center_x = self.value_x

slider_bottom = (self.height - slider_height) // 2

# slider
arcade.draw_xywh_rectangle_filled(
slider_left_x - self.x,
slider_bottom,
cursor_center_x - slider_left_x,
slider_height,
style.filled_bar,
)

# cursor
rel_cursor_x = cursor_center_x - self.x
surface.draw_texture(
x=rel_cursor_x - self.thumb.width // 4 + 2,
y=0,
width=self.thumb.width // 2,
height=self.height,
tex=self.thumb,
)
from arcade.gui import UIManager, UIAnchorLayout
from arcade.gui.widgets.slider import UITextureSlider


class MyView(arcade.View):
def __init__(self):
super().__init__()
self.ui = UIManager()

bar_tex = arcade.load_texture(":resources:gui_basic_assets/slider_bar.png")
track_tex = arcade.load_texture(":resources:gui_basic_assets/slider_track.png")
thumb_tex = arcade.load_texture(":resources:gui_basic_assets/slider_thumb.png")
self.slider = UITextureSlider(bar_tex, thumb_tex)
self.slider = UITextureSlider(track_tex, thumb_tex)

@self.slider.event
def on_change(event):
print(f"Slider value: {event}")

# Add button to UIManager, use UIAnchorWidget defaults to center on screen
self.ui.add(UIAnchorLayout(children=[self.slider]))
Expand All @@ -101,7 +46,7 @@ def on_draw(self):
self.ui.draw()


if __name__ == '__main__':
if __name__ == "__main__":
window = arcade.Window(800, 600, "UIExample", resizable=True)
window.show_view(MyView())
window.run()
50 changes: 14 additions & 36 deletions arcade/gui/examples/widget_gallery.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,15 +47,9 @@ def __init__(self):
col_num=0,
row_num=0,
child=UITextureButton(
texture=load_texture(
":resources:gui_basic_assets/red_button_normal.png"
),
texture_hovered=load_texture(
":resources:gui_basic_assets/red_button_hover.png"
),
texture_pressed=load_texture(
":resources:gui_basic_assets/red_button_press.png"
),
texture=load_texture(":resources:gui_basic_assets/red_button_normal.png"),
texture_hovered=load_texture(":resources:gui_basic_assets/red_button_hover.png"),
texture_pressed=load_texture(":resources:gui_basic_assets/red_button_press.png"),
),
)

Expand All @@ -69,27 +63,21 @@ def __init__(self):
right=5,
bottom=5,
top=5,
texture=load_texture(
":resources:gui_basic_assets/red_button_normal.png"
),
texture=load_texture(":resources:gui_basic_assets/red_button_normal.png"),
),
texture_hovered=NinePatchTexture(
left=5,
right=5,
bottom=5,
top=5,
texture=load_texture(
":resources:gui_basic_assets/red_button_hover.png"
),
texture=load_texture(":resources:gui_basic_assets/red_button_hover.png"),
),
texture_pressed=NinePatchTexture(
left=5,
right=5,
bottom=5,
top=5,
texture=load_texture(
":resources:gui_basic_assets/red_button_press.png"
),
texture=load_texture(":resources:gui_basic_assets/red_button_press.png"),
),
),
)
Expand All @@ -106,12 +94,8 @@ def __init__(self):
col_num=0,
row_num=3,
child=UITextureToggle(
on_texture=load_texture(
":resources:gui_basic_assets/toggle/switch_green.png"
),
off_texture=load_texture(
":resources:gui_basic_assets/toggle/switch_red.png"
),
on_texture=load_texture(":resources:gui_basic_assets/toggle/switch_green.png"),
off_texture=load_texture(":resources:gui_basic_assets/toggle/switch_red.png"),
),
)

Expand All @@ -120,10 +104,8 @@ def __init__(self):
col_num=0,
row_num=4,
child=UITextureSlider(
bar=arcade.load_texture(":resources:gui_basic_assets/slider_bar.png"),
thumb=arcade.load_texture(
":resources:gui_basic_assets/slider_thumb.png"
),
track=arcade.load_texture(":resources:gui_basic_assets/slider_bar.png"),
thumb=arcade.load_texture(":resources:gui_basic_assets/slider_thumb.png"),
),
)

Expand All @@ -132,18 +114,14 @@ def __init__(self):
col_num=0,
row_num=5,
child=UITextureSlider(
bar=NinePatchTexture(
texture=arcade.load_texture(
":resources:gui_basic_assets/slider_bar.png"
),
track=NinePatchTexture(
texture=arcade.load_texture(":resources:gui_basic_assets/slider_bar.png"),
left=30,
right=33,
bottom=18,
top=18,
),
thumb=arcade.load_texture(
":resources:gui_basic_assets/slider_thumb.png"
),
thumb=arcade.load_texture(":resources:gui_basic_assets/slider_thumb.png"),
height=40,
),
)
Expand Down Expand Up @@ -181,7 +159,7 @@ def on_draw(self):
self.ui.draw()


if __name__ == '__main__':
if __name__ == "__main__":
window = arcade.Window(800, 600, "UIExample", resizable=True)
window.show_view(MyView())
window.run()
Loading
Loading