Ends Today: Save up to 95% on the Time Travel Mega Bundle!

Quiet Docking System is a set of related widgets that allows you to construct a classic desktop app user interface quickly. All these widgets are collected in one group in Widget Designer > Pallette > Quiet Docking Blocks, and the developer simply builds a widget tree with them. The screen space is pre-marked into logical areas, so the user spends almost no time on markup. The system has prepared design themes that a developer can apply at any working stage. Also, the developer can independently create new themes and edit existing ones.

Working with system

Example


Markup


The screen is divided into nine logical areas. Floating windows are placed over them. The following is a listing of these areas from top to bottom and from left to right, indicating the widgets that should be placed in them:


  • Slot_Titlebar - Titlebar. You can also fill it with any other widget or leave it empty. Independent slot.
  • Slot_MainMenu - Main Menu Root. The developer can build a hierarchy of this area either directly in the main widget or in a separate widget. There is an example in the Examples folder. Independent slot.
  • Slot_ToolbarTop – Toolbar Container. Independent slot.
  • Slot_ToolbarLeftToolbar Container. Independent slot.
  • Slot_SidebarLeft – Sidebar. It is related to Slot_DockingSystem. The user will not be able to collapse Docker Tab to Sidebar if this slot is not empty or filled with something other than Sidebar.
  • Slot_DockingSystem – Grid Panel. It is the main slot of the system. Dockers and Docker Tabs of any nesting level can be placed here. They can be freely moved around the screen and create configurations of any complexity. The main viewport is also placed in this area. The slot is related to Slot_SidebarLeft, Slot_SidebarRight.
  • Slot_SidebarRightSidebar.
  • Slot_SidebarLeft – Sidebar. It is related to Slot_DockingSystem. The user will not be able to collapse Docker Tab to Sidebar if this slot is not empty or filled with something other than Sidebar.
  • Slot_ToolbarRight – Toolbar Container. Independent slot.
  • Slot_Statusbar – Statusbar. It is related to floating windows. Each floating window contains control buttons, and the Minimize button collapses the window to the Statusbar. This button will not be active if the Statusbar is not built.


Main Feature


The main feature of the product is the dynamic Docking System. It occupies the main part of the screen, and its root is the native Grid Panel. The Grid Panel must contain a Docking Viewport to work correctly. It is a widget that contains the app viewport. All other elements are placed around it. By default, the viewport is fitted to the widget's size using a post-process. If you are using the cursor coordinate functions, for example, to trace actors in the world, you need to use the screen coordinates inverse transformation functions from the library (QuietDockingSystem > Blueprints > QuietDockingFLibrary). You can disable this fitting in the theme settings. The Docking Viewport will be optional in the next version of the product. DockingSystem and Sidebar layouts can be saved and loaded runtime.


Another smart feature is Toolbars. The developer can create an unlimited number of toolbars and place them in the desired order runtime. The widget set contains a multifunctional Toolbar Item widget that can operate in four modes: Button, Check button, Radiobutton, and Drag'n'Drop.


Almost all widgets are inherited from Docking Base Widget. So the tree has a common design theme. Each descendant contains an overridden ApplyTheme function that applies the theme selected in the root widget to the entire tree.


Limitations


  • In the current version of the product, it is not possible to set a theme for individual elements of the tree. I will add this feature in future versions.
  • Because the main viewport adjusts to the size of the Docking Viewport, some post-process effects may not work correctly. A developer can fix this by combining the viewport fit and effects in united post-process material.
  • Themes are based on structures. If the developer edits any structures or moves them, this may cause errors. It is a known issue with Unreal Engine.
  • It is essential to understand that the system is just an emulation. Windows, Tabs, Dockers, and other elements are User Widgets created within a single app window.


Quiet Tools Demo


I used widgets from my Quiet Tools collection in the examples for content. This collection is currently in development, but tools like the World Outliner or Transform Gizmo are already testable, so I've included them as examples to get feedback from users.


Conclusion


I will develop and improve this product. Therefore, if you have any comments or suggestions, write to me.

Be sure to read the manual before using this product. I will expand it, adding new details and showing how you can solve issues and fine-tune the system.


Technical Details

Features:

  •  Dynamic docking system with save and load capabilities
  • Quick building of a multi-level main menu
  • Sidebar panels
  • Dynamic toolbar panels with multimode items
  • Global design themes for the widget tree.
  • Debug tools


Number of Blueprints: 27

Number of Structures: 20

Number of Enums: 6

Number of Widget Blueprints: 72

Number of Materials: 18

Number of Material Instances: 43

Number of Textures: 185

Network Replicated: No

Supported Development Platforms:

Windows: Yes

Documentation: Link

Important/Additional Notes:

  •  Before starting work, you must carefully study the manual and strictly follow the order of placing widgets in the tree. Use debug functions.
  • In this version, you cannot edit the appearance of separate elements. Design Themes apply to the entire hierarchy.
  • Sample content widgets such as the World Outliner are just demos of a future collection of tools that I will post on the Marketplace later.
  • Try not to move structures in the project. It can cause errors that are difficult to resolve.


Example icons designed by the following authors from Flaticon:

https://www.flaticon.com/ru/authors/andrean-prabowo

https://www.flaticon.com/ru/authors/Design-Circle

https://www.flaticon.com/ru/authors/Eucalyp

https://www.flaticon.com/ru/authors/IconGeek26

https://www.flaticon.com/ru/authors/Pixel-Perfect

AS
Aleksandr Sidorov
All Assets by Author
290.45 
Platforms Windows 64-bit, Windows 32-bit
UE Versions 5.0 - 5.2
Tags TAB PANEL, UE5, SIDEBAR, DOCKTAB, USER EXPERIENCE, BLUEPRINTS, TOOLBAR, DOCKER, UMG, USER INTERFACE, UX TOOLS
Release date 30.05.2022

Similar products

Image
Sign In
Image
Sign Up
Image
Recovery