Search
Start typing to search...

User Interface

Author:
Please note that this is a BETA version of the document. All information presented is correct but we are working on improving the details.


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 sidebands that we can place various assisting panels into. Each sideband 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 sidebands.

00:01:11

As I mentioned, sidebands can have several instances, filled with various panels. Let’s examine this right sideband. 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 sideband 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 sideband with the three panels.

00:01:45

If I click on the currently active icon designated by a blue color, it closes the whole sideband. Thus by clicking on the icon repeatedly we can close and open the sideband. There are other ways to close a sideband. 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 sideband can be sized at will. But if we pull the separator all along to the edge, the sideband closes. So this is the fourth way to do that.

00:02:21

Let’s rearrange the interface a bit. E.g. I want to move this Preview panel in between the Pin Values and the Dashboard panels thus further dividing the right sideband. I simply grab the panel at its header. As I drag it along the sideband 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 sideband 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 sideband filled with a single panel. We can fill it up with further panels, e.g. if you relocate the Messages panel, and then the Preview panel, thus creating a new three-element sideband. 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 sidebars. 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 in 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. E.g. if the Pin Values panel has the focus, then it’s the one we can control with the keyboard, 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, e.g. inserting a module by pressing the Insert key.

00:05:32

The other related convenience function 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. After we’ve done a file operation, 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, then 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 sidebars. 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. But 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.

Article content

Loading
Close
Loading spinner icon
1/10