Pharos Interface Editor comes with several page layouts for you to use, but many projects will require custom layouts.
To create your own layouts for Interface Editor, you will need to understand how the XML in the layout files translates to the positions of items on the screen of the TPC. To help you get started, I will use the example of the ‘4 Button 6 Slider’ layout which comes with Interface Editor. To find the XML file behind this layout on Windows, navigate to /Program Files/Pharos/Interface Editor/library/layout/. On Mac OS X, right-click Pharos Interface Editor in your Applications folder and select ‘Show Package Contents’, then browse to /Content/Resources/layout/. Look for the file named ‘4_button_6_slider.xml’ in this folder. A screenshot containing the text in the XML file is below for reference. It’s a good idea to get a text editor that can handle XML when working with custom layouts, such as Notepad++.
Example XML
The first line defines the properties of the layout. Here you can change the name of the layout as it appears in the New Page wizard in Interface Editor, but note that two layouts can’t have the same name, otherwise only one will be available in Interface Editor. You can also change the orientation of the layout between landscape and portrait. Removing the ‘orientation’ attribute will allow the layout to be used in both orientations – some layouts are more flexible than others.
The next line is the start of an hbox, which stands for ‘horizontal box’. The hbox is one of two types of layout box that are available; the other is the vbox. These boxes are used to contain a number of different items and the direction of the layout of these items is decided by the type of box you put them in. A vbox arranges items from top to bottom and an hbox arranges items from left to right. Boxes can contain other boxes, as shown in this example: the top level hbox contains a vbox and an hbox.
Boxes support a spacing and a margin attribute. The spacing is the measurement in pixels between each item; the margin is the number of pixels between the outline of the box and the items inside.
Boxes in a Layout
In the vbox shown, there are four buttons, each 10 pixels from its neighbour. In the XML file, you can see that there’s a spacer at the top and bottom of the list of items in the vbox. The spacers push the items together as far as the box’s spacing attribute will allow – otherwise they’d spread out to fill the space available.
If you look at the button definitions in the XML file, you can see that it’s possible to specify a width and height, though this is optional – items will distribute themselves evenly and expand to fill the available space in their box if you don’t provide this information. The lower hbox in the XML file contains the sliders. You can see that this appears next to the vbox in the image above because it’s inside the top level hbox.
Another way of laying out items is in a grid. This method allows you to easily layout items in rows and columns. The screen shot below shows the XML for the ‘12 buttons’ layout, which you can find in the same folder as the previous layout. As you can see, 4 rows and 3 columns have been specified, along with a spacing and margin of 10 pixels. This will distribute the listed buttons around the grid and separate them by 10 pixels in each direction. These grids can be used in boxes, allowing for complex, nested layouts to be created with ease.
Grid XML Example
The items that you have available to you are button, slider, label, keypad, colourpicker and spacer.
Next time, we will look at how to create your own custom layouts. If you feel like having a go now, make sure you save your layouts in the directory /Documents/Pharos/Interface Editor/Layouts/ to ensure they do not get deleted if you uninstall Interface Editor.
