User:Yirkha/drafts/Layout Editing Mode

From Hydrogenaudio Knowledgebase

The Layout Editing Mode of Default User Interface enables users to easily change the overall window layout, add or remove various UI elements and change their settings, all using simple and consistent WYSIWYG-based interface.

Layout Editing Mode can be activated either by choosing its option in "Main Menu > View > Layout", or by clicking the appropriate button on toolbar (if enabled). Additionally, a "Scratchbox" window can be created using the "Main Menu > View > Layout > Create Scratchbox" command. In a Scratchbox, it is possible to try out different themes without changing the currently used layout, and apply the changes to the main window only when needed.

Easy way to get started might be choosing one of the predefined layouts using the Quick Appearance Setup, then change some of the elements afterwards.


Basic operation

The whole layout consists of individual UI elements. They can be divided into two groups:

  • functional elements - like a playlist viewer, album list or a visualisation
  • container elements - splitters and tabs

The fundamental difference is that containers can contain additional child elements, including more containers, which makes them essential for creating a complex layout. Each simple left/right or top/bottom splitter divides its area to two parts; tabbed containers, for instance, can obviously have more pages with more children.

Control

When in Layout Editing Mode, clicking anywhere inside the window with right mouse button selects the UI element underneath mouse cursor and shows a popup menu with its options. To select a splitter, it's necessary to click on the border between its children.

The popup menu shows the active UI element's name (if there is one), a few common actions to replace, cut, copy and paste the element, and any other options the element itself might provide.

Adding UI elements

To add a new element, choose the "Add New UI Element" item from the popup menu, or simply by click in an unused area with left mouse button. New UI element can be added to an empty space only, replacing the old one is needed otherwise.

Replacing UI elements

Replacing an element with a different one is possible using the "Replace UI Element" option in the popup menu. Another way is to copy or cut another UI element to put it into clipboard, then select the element to replace and paste it over.

When an UI element is replaced with an empty container, it automatically embraces the old element (or its children when it's a container) - e.g. replacing a horizontal splitter with a vertical one doesn't clear its contents.

Removing UI elements

To remove an UI element, choose the "Cut UI Element" command in its popup menu (note that this will also put it into clipboard).

When removing an element in a container, the above action will leave the splitted area intact. To replace the whole container element with only one of its children, either select the parent and replace it with the wanted element, or use the copy/paste function.


Bundled UI Elements

Containers

  • Splitter (left/right or top/bottom)

A simple container which divides its area to two panes horizontally or vertically. The child elements can be resized by dragging the border between them. Moreover, size of each side can be locked, so that it will stay the same when the whole window is resized - this feature is available in splitter's popup menu.

  • Tabs

This container uses the well-established concept of a tabbed document. It can have any number of pages, each page containing another child element(s). The popup menu have commands to add, remove, rename and reorder the individual tabs.

  • Playlist Tabs

A tabbed container automatically populated with tabs corresponding to available playlists. Note that the child area is the same regardless of the active tab (playlist). Commonly used to host a "Playlist view" element.

  • Toolbar Header

Shows a toolbar which can be filled with various buttons and controls, configurable in its popup menu. Additional options include whether to be shown at the top or bottom of assigned area, or if the toolbar should be locked to avoid rearranging the items. It can contain only one static child element.

Media Library Viewers

  • Album List (available if selected during installation)

UI element version of the Album List viewer, as available in the "Main menu > Library > Album List".

  • Media Library Search (available if selected during installation)

UI element version of the Media Library search, as available in the "Main menu > Library > Search".

Playback Visualisation

  • Oscilloscope
  • Peak Meter
  • Spectrogram
  • Spectrum
  • VU Meter

Various visualisations providing some graphical feedback. Most of them have their additional style, color or quality settings available in their popup menu.

Playlist Renderers

  • Playlist View

Shows items of currently active playlist. Note that any number of "Playlist View" elements will all show the same content. Format of displayed columns and item grouping can be customized.

Selection Information

  • Album Art Viewer

Shows album (cover) art image for the selected or currently playing track. Looks both for embedded images in the file itself and in its folder.

  • Selection Properties

An element capable of displaying various information about the selected track(s). Popup menu allows customization of what kind of information to show.

Utility

  • Console

UI element version of the Console window, as available in the "Main menu > View > Console".

  • Equalizer

UI element version of the Equalizer window, as available in the "Main menu > View > Equalizer".

  • Playlist Manager

UI element version of the Playlist Manager window, as available in the "Main menu > View > Playlist Manager".


Colors and Fonts

Some additional settings affecting appearance of all UI elements, like colors and fonts, are available in the "Preferences > Display > Default User Interface > Colors and Fonts".


Theme Import/Export

The themes can be exported to a .fth file from the "Default User Interface" page in Preferences. It is possible to choose which parts of the theme (main layout, toolbar layout, colors, etc.), should actually be saved. Similarly, when importing, some parts can be prevented from overwritting the current values.

Themes can also be imported and exported in the Scratchbox.

Retrieved from "https://wiki.hydrogenaud.io/index.php?title=User:Yirkha/drafts/Layout_Editing_Mode&oldid=18760"