UI System

[Syncaidius]

This issue is for tracking progress on the UI system. Feel free to post any suggestions here also.

Core:

• Component docking, padding and margin system #78
• Mouse & touch input handling
• Text/keyboard input support #85
• Parenting
• Drag-and-drop support #67
• UI Skinning support #76
• Compound components - e.g. scroll area made of a panel and 2 scroll bars
• UIManagerComponent - A scene component for managing the update and render of UI. Scene input should pass through this for UI interaction.
• UI Serialization support  #77
• Scroll wheel support #84
• Double-click support #93

Elements:

• Button - UIButton
• Checkbox - UICheckbox
• Collapsible panel with toggle button and label
• Container - UIContainer
• [UI] Context Menu Support #90
• [UI] Data Grid/Table #100
• [UI] Dropdown/combo box #88
• Horizontal scrollbar - UIScrollBar
• Image - Automatically handles loading of image asset to avoid render issues. Should display colored rectangle if no image
• Label/Text - UILabel
• [UI] Graph - Bar #87
• [UI] Graph - Line #86
• [UI] Graph Legend #101
• [UI] Graph - Pie chart #91
• GridView - Displays a grid of grid cells. Each cell can have elements parented to it which will render inside it
  • GridViewItem
• List view - UIListView
  • ListViewItem - UIListViewItem
• UI - Menu Bar/Item Element #128
• UI Element - Multi-line text-box/block #75
• Panel - UIPanel
• [UI] Progress Bars #89
• [UI] Radio Button #102
• Scroll area - UIContainer
• Sprite - UISprite - Provides functionality for rendering a static or animated sprite into UI
• Loading wheel/spinner - configurable speed, segment count, fade, etc
• Stack panel - UIStackPanel - Renders children horizontally or vertically in order
• UI Element - Tab control #74
• Text box/field #73
• UI Element - Tree view #72
  • TreeViewItem
• Vertical scrollbar - UIScrollBar
• Window - UIWindow

[IceReaper]

Maui has some classes which reflect the CSS FlexBox and Grid layout systems. They are extremely powerful, but sadly most UI frameworks around only come along with the standard stack / row / column / table layouts. Might be worth a look to eventualy implement?

[IceReaper]

Oh and before i forget it: It would be awesome if its possible to mix up render targets in the engine in some fancy way. Doom3 for example has awesome ui-as-texture implementations, which allow complex uis to be drawn and interacted in the world. Which means if there is a CamerComponent which is able to render the scene using a specific camera into a framebuffer which then is used on an security-camera-ui screen, which again is used as texture on a screen in the scene, which is fully interactible, it gets pretty mighty :)

[Syncaidius]

@IceReaper The Doom3 ui-as-texture system is something I've been specifically designing the UI to be capable of. There's no working example of it in Molten yet, but the engine is already capable of pulling this off.

Right now the way it would be achieved is by:

1. Attaching a UIManagerComponent to a SceneObject - This lets you draw a UI into a Scene and will adopt the transform of it's parent SceneObject.
2. Setup a CameraComponent with it's OutputSurface property set to the RenderSurface you wish to draw the UI to,
3. Apply camera's RenderSurface to an in-world object/mesh.

Minus any bugs, that should give you an in-world UI.

Hopefully this will become easier over time. I'm glad there is someone else out there who wants Doom3-style in-world interfaces.😄