Search the Community

Hello people, I start this topic in order to give you my intents, visibility and get early feedback from you. I initially developed Canvas2D to serve as the foundation of a new GUI Library that would be built on the top of it. That's why you actually can find many features in the Canvas2D that are related to GUI (Pointer Event, Alignment, Positioning, etc.). Many of you started to write little wrappers to create GUI components on the top of that. Depending of what you're trying to achieve it can be easy/feasible or pretty hard. I've spent the latest weeks to stabilize Canvas2D and I'm now starting the GUI library (while still fixing C2D bugs being reported, when they're important). This post will explain you what I've designed so far and what I want to do: I build the GUI Lib for myself but also for you, the community. So the earliest I have your feedback the better chances I can make it the way you want it to be! So please read, think and give feedback! The GUI library will have the following core features: Data Binding mechanism: in order to display/refresh data in the GUI without having you to write all the wiring manually. You will still be able to do so, but I hope the Data Binding feature will be convenient and easy enough for you to use it. It will also be able to use it to update a model object with data the user would enter via a Form like Window. Commands: GUI is about responding to user input, which triggers events. These events can be encapsulated in a more generic feature which would be the Command one. The simplest example is being the Button control which exposes a single Command: "Click". You as the user, don't care about how is triggered this command, in fact it can be triggered from a Pointer Event Up, but also from a keyboard shortcut. The purpose of Commands is to give you a semantic that you understand and a way to respond to it. Templating/Styling: Each control will have a default look/style, for instance a Button will by default looking like a Bootstrap Button. But in order for the lib to be successful, it's critical to separate logic (i.e. a button is a control design to trigger a single Command called "click") of the rendering. Because you may be fine with the default look of the button or you may not! So I have to give you the tools for you to give a custom look in order for your buttons to blend with you game/app the way you want. State Manager: A button has many states: enabled (default state), disabled (you can't click), hovered (ready to be clicked), pushed (clicked but not released), etc. Each state which is not the default one will give additional changes on the style for the user to be able to identify this state from the others. Transitions between states through animation will also be possible. Content Presenter: when you create a button, most of the time you want its content to be a text, for games you may also want a combination of text and/or picture. But the content of the button should be arbitrary: it could be anything. Remember, the intent of a button is to provide the user a visual info of the command he will trigger by activating the button. Content Presenter will give you the ability to put whatever content you want in controls that are using it. For simple content like Text or number, you won't have anything to do. But for Picture or custom content you will have to rely on what is called a Data Template. Data Template: the Data Template is a way to associate a Visual Rendering (through a Tree of Primitives) corresponding to a given custom data object. For Instance you may want to create a custom type with two fields: Label: string and Picture: string. Then you will associate this custom type to a Primitive tree made of a Group2D containing a Text2D Primitive and a Sprite2D one, you will rely on Data Binding to map the content of the Text2D with the Label field and the Picture of the Sprite2D with the Picture one. Controls ScrollableContent: this will be more a Control component than a real Control. You'll be able to use it when the logical content of a Control will be bigger than the allocated content. In such case ScrollBar will appear for the user to be able to scroll the content and view what he/she wants. Button: you can guess now what it's about SceneContent: by assigning a Scene and an Active Camera this control will display the content of the Scene through the camera ItemsControl: will be a base class that gives the ability to manage a list of items. You will have a specific Data Template that will be used to render one particular item. ListView: will be the first Control inheriting of ItemsControl, design to display a collection of objects. Then others controls like: Label, CheckBox, Slider, ComboBox, TreeView, Accordion, Menu, ContextMenu, TextBox, ProgressBar, ColorPicker, PasswordBox, TabControl will be designed/developed. Layout Control will also be built: Grid Layout, Responsive Grid Layout, Stack Panel are on the top of my mind. Some architecture facts The GUI Controls won't be Primitive based classes. It will be classes that instances make their own logical tree that describe a given UI. But it will be from this tree that the Visual Tree (made of Primitives) will be built/updated. DataBinding will be essential to develop Data Template and Styling, but you won't have to necessary rely on it to use the GUI, you can set the data directly if you want: either way will be fine, you choose the one that fits you best. You will be able to declare a Tree of Controls the same way you can declare today a Tree of Primitive, with a new Statement, then a series of attributes and the children attribute that can be used to declare the direct children. No designer will be built in the short term, short term will be about performances and feature range. Performances will be key, I finally will push the best Caching Strategies to make sure static content is drawn as less as possible. You will be able to use if for Screen Space or World Space. Schedule In four weeks I intend to deliver an alpha version with the bar minimal, for people to try it out Four weeks after I hope to release the first beta with a limited set of stable controls After we will see! By the way, one of the first contribution regarding babylon.js will be the total redesign of the Debug Layer using this lib! It will be a perfect test!