Documentation

Editor Panels - 01 - The Docking System

In this tutorial we’ll talk about the various windows and panels in Aximmetry and about the docking system that provides the framework for these.

00:00:08

Basically the main window of Aximmetry can be split into two areas. There is a central area where our loaded document or documents are displayed. If there are several, they are indicated as tabs here at the top, and we can alternate between them using the tabs.

00:00:25

And there are three side bands that we can place various assisting panels into. Each side band can have multiple instances, and these can be split into smaller areas filled with various panels.

00:00:37

We have two different window types. One is the already mentioned document window. When we load a document, its main editing interface is always displayed in this central area. The editing interface itself is a node-based one, we call it “Flow Editor” in Aximmetry.

00:00:54

The other window type is what we call “panel” in Aximmetry. Panels are assisting windows serving various editing and viewing purposes. These also can reside in the central area with their own tabs at the top. But they also can be placed into any of these three side bands.

00:01:11

As I mentioned, side bands can have several instances, filled with various panels. Let’s examine this right side band. Its icons here at the edge are split into two groups. The first group contains the icons for the three panels: Pin Values, Dashboard and Processor Load. The second group has a single icon only. If I click on it, a completely different side band appears which contains a single panel only: the History panel. Now if I click on any icon from the first group, we get back the previous side band with the three panels.

00:01:45

If I click on the currently active icon designated by a blue color, it closes the whole side band. Thus by clicking on the icon repatedly we can close and open the side band. There are other ways to close a side band. We can click the double arrow icon at the header of any panel. The third way is double-clicking the header of any panel.

00:02:10

Of course, the side band can be sized at will. But if we pull the separator all along to the edge, the side band closes. So this is the fourth way to do that.

00:02:21

Let’s rearrange the interface a bit. For e.g. I want to move this Preview panel in between the Pin Values and the Dashboard panels thus further dividing the right side band. I simply grab the panel at its header. As I dragging it along the side band I can see the possible target areas marked with blue. At the desired one I release the mouse. As we can see, a new icon appeared here in the first group, representing the Preview panel.

00:02:49

What if I want a completely new instance of the side band containing a different set of panels? Grab the Log panel this time, we have to pull it to the side until we see a full height blue marking, then release the mouse. We can see that a new icon group is created here, and along with that a new instance of the side band filled with a single panel. We can fill it up with further panels for e.g. if you relocate the Messages panel, and then the Preview panel, thus creating a new three-element side band. As before we can switch between the groups at will.

00:03:25

Within the band the panels can be resized as well. There is a special resizing method. I add a fourth panel to demonstrate it. If we hold down the Control key while dragging the separator, the upper and lower group of panels are resized proportionally, they maintain their relative sizes.

00:03:47

The sides bands have a priority system. Currently the right band fills the window in full height thus seizing this corner from the bottom band. We can change that priority. There’s a little hamburger menu here in the tab bar. It contains the four possible arrangements of the side bars. For e.g. we can give the right corner to the bottom bar, or take the left corner away and give the full height to the File Browser and so on.

00:04:13

As I mentioned before we can place our panels into the central area as well if we want to see them enlarged. This feature is particularly useful with the Preview panels. I grab this one and simply drop it on the central area. It appears as a tab. I also drop the Preview 1 panel which resides in the first side group here. Now we can switch between them using the tabs in the same way we do between the documents.

00:04:38

The hamburger menu I mentioned before also contains the list of all the tabs, so we can select documents and central-placed panels here as well.

00:04:47

The panel that currently has the focus, in other words the one that receives our keyboard input, is designated by a thin blue frame and by a blue header. For e.g. if the Pin Values panel has the focus, then it’s the one we can control with the keyboard, for e.g. we can move between the properties with the up/down arrow keys, or use Enter to enter or leave a property edit box.

00:05:11

Since the central Flow Editor itself also has numerous keyboard shortcut commands, it’s important to note a convenience function. If the focus is on any of the side panels pressing Esc always brings the focus back to the central area, after which I can issue keyboard commands for the Flow Editor, for e.g. inserting a module by pressing the Insert key.

00:05:32

The other related convenience funtion is that if the focus is already on the central area, and we press Esc again, certain panels are closed automatically. An example of this type of panel is the File Browser. There is a logic in this: the File Browser is usually only needed temporarily only. After we’ve done a file operation, for e.g. drag-n-dropped a shader into the editor, we usually don’t need the File Browser anymore. In this case we press Esc once to put the focus back to the central area, the press Esc once more to close the side panel. This way by using a quick double-Esc we get rid of the panel and return to the Flow Editor. The Module Type Browser panel behaves the same way. Later we return to these panels.

00:06:20

Panels also can be detached from the main window which is particularly useful if we work on multiple monitors. Now I’ll demonstrate this function on a single monitor, so I shrink the main window. Let’s suppose we want to detach the Pin Values panel, and put it into a separate window either on the same monitor or on another one. I simply grab its header and drag it outside the main window. Upon this a new so called “floating window” is created. It can be placed arbitrarily independently of the main window.

00:06:52

This floating window is a complete full-featured docking window, with a structure identical to the main window’s structure. So we can insert the other panels into it, either dropping them on the central area thus creating tabs, or adding them to the three side bars. Let’s add the File Browser, too.

00:07:09

We can create any number of floating windows, all with the full docking functionality. But notice an important thing. If a floating window contains a single panel only, we have to differentiate between the window itself and the contained panel. By grabbing the entire window we cannot transfer the panel into another window. Instead, we have to grab the panel itself by its tab. Of course, when a floating window is completely emptied, the window itself also disappears.

00:07:40

The tabs of the central area can be rearranged, in the main window and in the floating windows as well.

00:07:46

The last panel arrangement is always automatically saved by the system upon quitting. If we want to switch between multiple arrangements, there are manual save/load functions for that. In the View menu choose Save Layout. Let’s save it to the Practising project and name it “test”. To test it I first change back to the default arrangement, by choosing View / Restore Default Layout. To restore the saved arrangement we can choose View / Load Layout, and then choose the desired layout file. But we can use the side File Browser as well. Let’s find our file, it’s the “test.xlay”. Simply double-click it and we get our arrangement back.

Aximmetry Technologies Ltd.

Incorporation no: 01-09-171556
EU VAT registration no: HU24314486
Tax registration no: 24314486-2-41

Gömb utca 26., 1139 Budapest, Hungary
+36 1 300 5060
This email address is being protected from spambots. You need JavaScript enabled to view it.
Office hours

©2020 Aximmetry Technologies Ltd. All Rights Reserved. Designed By freeart.hu

Search

We use cookies
This site uses cookies to personalize content, to provide social media features and to analyse traffic.