GUI enhancements planned for 3.0

[eruvanos]

To enhance the GUI code, a few things have to be cleaned which might break compatibility. The goal is to collect all these changes within a bigger update like 3.0.

Summary of breaking changes

• Removed
  • UIWrapper (it is a UILayout)
  • UIBorder (functionality covered in UIWidget)
  • UIPadding (functionality covered in UIWidget)
  • UITexturePane (functionality covered in UIWidget)
• Renamed
  • Rect (_Rect)
  • Property (_Property)

Working on development

Planned

• [x] UIWidget supports
  • [x] padding
  • [x] border
  • [x] background color
  • [x] states:
  • [x] visibility,
  • [x] disabled,
  • [x] hover,
  • [x] pressed,
  • [x] maybe use a dict mapping state to style class
• [x] UIWidgets use observable Property
• [x] Rect is used as the space representation on screen
• [x] UILayouts shrink and grow children
  • [x] UIAnchorLayout use min_size_hint of UIBoxLayout
  • [x] UIBoxLayout use size_hint to grow children
  • [x] UIBoxLayout respects size_hint_max while growing
  • [x] UIAnchorLayout use size_hint to grow children
  • [x] UIAnchorLayout respects size_hint_max while growing
• [x] UILayoutManager use size hints
  • [x] UIManager respects size_hint and size_hint_min
• [x] UIAnchorLayout should behave like a layout (rect set from outside, place children within bounds)
• [x] Fix stats_top_left example (fix UILabel not showing text)
• [x] Refactor UIMessageBox to fit into general event system
• [x] Support NinePatch
  • [x] Basic support and rendering
  • [x] Use as background in UIWidget
  • [x] Use as texture in UITexturedButton
• [x] Methods do only contain supported parameters
• [x] Missing documentation
  • [x] UISlider
• [x] Replace draw_text with a label
  • [x] UIFlatButton
  • [x] UITexturedButton
• [x] Fix curser in inputtext
• [x] Improve UIInputText, expose more pyglet parameters (now exposes text.py as UIInputText.layout)
• [x] Improve UILabel, expose more pyglet parameters (now exposes pyglet.text.Label as UILabel.layout)
• [x] New widgets
  • [x] UIGridLayout - Finally arrange widgets within a grid
  • [x] resizes child widgets
  • [x] UITexturedSlider (using images for bar and thumb) ⛈️ freeze on some mac

Small improvements

• [x] UIWidget
  • [x] resize

Styling <-- WIP

• [x] UIWidgets provide a state, which they currently are in (normal, hover, press, active, focused, deactivated, ...)
• [x] document known states
• [x] provide a static and typed style class on style-able widgets
• [x] store default style as static variable
• [x] document styles

Maybe

• [x] button supporting an icon in front of text

Canceled

Postponed to Arcade 3.1

• [ ] Text Widgets
  • [ ] trigger render on text layout changes
• [ ] Improve dev life:
  • [ ] Generate state images (press, hover, ...) from a base image
  • [ ] Provide NinePatchTextures
• [ ] Widget focus management
  • [ ] support focus state
  • [ ] manage state in a central place
  • [ ] support switching between widgets using tab
  • [ ] support defining tab order
• [ ] call do_layout only if "something" changes
• [ ] Support placeholder in text widgets
• [ ] call do_layout only if "something" changes
• [ ] New widgets
  • [ ] UIProgressBar
  • [ ] UIMenu - a menu like widget, which is at the top/bottom of the screen and provides methods to add sub menus and buttons
  • [ ] UIDigitLabel - provides a UILabel explicit for digits (format support, performant updates)
  • [ ] UIFile - Choose a file dialogue (crazy but possible) #1201
  • [ ] TK Listbox (text selection widget, without dropdown)
  • [ ] DropDownMenu (contribution from jans#1643)
  • [ ] Radio buttons

Suggestions by @pushfoo

• Rethink our widget hierarchy a little, including making a UINinePatchLayout baseclass to encapsulate 9-patch and anchor layout behavior
• Add a class UIModal(UINinePatchLayout, UIMouseFilterMixin)
• Make UIMessageBox and this PR's SubMenu inherit from UIModal
• Create a views index page to aggregate view & menu tutorials like the shader tutorials index page
• Split this PR's concerns into a Basic Menu & Advanced Menu tutorial

[Ibrahim2750mi]

@eruvanos

UIInputText - restrict input to digits (optional)

By this it means just '0123456789' or python's builtin isdigit functionality?

UIFile - Choose a file dialogue (crazy but possible)

Will this be an inheritance of arcade.window and arcade.gui.UIWidget or just arcade.gui.UIWidget?

[pushfoo]

By this it means just '0123456789' or python's builtin isdigit functionality?

Imo, the clearest option for beginners would be subclass that's right-aligned by default and only accepts ints as in #842. We still need a clear way for users to display scores and numbers, even if the details in that ticket are no longer relevant due to major some changes to text rendering.

[eruvanos]

Progress Info:

• [x] New simplified UIStyle for UIFlatButton
• [x] use Property in UIInteractive
• [x] use Property in UIFlatButton.text
• [x] Fix size of OKMessageBox
• [x] test disabled state
• [x] Add disabled state to UIInteractiveWidget and UISlider
• [x] Fix size hint example
• [x] Remove callback from OKMessageBox
• [x] clean up event flow (window vs widget events)
• [ ] use UIInteractive for slider, remove redundant disabled implementation

[eruvanos]

@Ibrahim2750mi do you have some time to have a look on: https://github.com/pythonarcade/arcade/blob/gui/grid_layout/tests/test_gui/test_layouting_gridlayout.py

I added a few tests, which should cover the resize behaviour for UIGridLayout. Maybe you can have a look at the code and fix them, implementing the missing features.

[Ibrahim2750mi]

@eruvanos Yeah I am currently free and will definitely look into it, maybe best case scenario even today and will update you on the requested fixes and implementations.

[eruvanos]

All work done, everything else will be covered in a minor update