Coach AX and Graphics

How graphics work

In Coach AX graphics have two parts:

• The first is a .px file which is the graphic itself
• The second is an object to which the graphic is attached

In Coach AX a graphic can be attached to any object.

To keep things simple we will make a graphics folder and put all the graphics in the folder.

Supervisor

If you have a supervisor PC then you can put all the graphics on the supervisor PC to free up the controllers from serving graphics.

Making a graphic

Step 1

Right-click on the Config object and select New > Folder. Right-click on that folder and select New > IconFolder.

Create a Graphics Folder

Icon folders are the same as folders but you can easily change the icon that appears next to them.

Step 2

For this example we have created a folder and created two points that we will put on a graphic.

Demo Points

Step 3

Right-click on the IconFolder we just made and select Views > New View.

Create New Graphic

Enter a name for the graphic and click OK.

Step 4

The graphical editor will open and you can now modify the graphic.

Open the kitPx palette by clicking the folder icon in the palette sidebar and typing kitpx into the filter box.

Open kitPx Palette

This palette contains the basic components that you can put on a graphic.

Step 5

In the properties bar on the right are some basic options for the graphic like size and background.

Click on the viewSize property to resize the graphic.

Edit Graphic Properties

Step 6

To get a point on the screen drag a BoundLabel on the screen from the kitPx palette.

Click the ORD property and click the down-arrow next to the folder and click Component Chooser.

Select ORD

Select the point you want to view. Click OK.

Select ORD

The point gives us more information than we need as we only need the value of the point. Click the text property of the BoundLabel.

Change the value from %.% to %out.value%. Click OK.

Change Text Value

Anything inside %% is a special value that will be replaced with its actual value. Anything outside %% is just plain text.

Here are some examples:

Value: %out.value%

%displayName% : %out.value%

This text data is referred to as BFormat.

Step 7

To complete a graphic just drag-and-drop objects onto the screen and where necessary change the ORD property to point to the object you want to display.

To add regular text open the bajaui palette.

Open bajaui Palette

Expand the Widgets folder and drag-and-drop a Label onto the graphic.

Enter the required text into the Text property.

Add Text Label

Click File > Save.

Step 8

To view the graphic double-click the IconFolder.

View Graphic

To change the icon, right-click on the folder and select Views > Property sheet. Click the folder icon to select an icon for the folder.

Select Icon

Click Open then Save to save the icon.

More information can be found in part II of this tutorial.

Step 9

After you have made your graphics you will want to link between them. Many widgets have a hyperlink property. By setting this property if the user clicks the widget they will be sent to the linked graphic.

There are two basic widgets with the hyperlink property:

• BoundLabel — kitPx palette
• HyperlinkButton — kitPx palette

Drag and drop one of these onto the screen and click the hyperlink property.

Click the down-arrow next to the folder icon and select Component Chooser.

Select the object that has the graphic attached.

Graphics storage

Once a new graphic .px file has been made it is stored in Files > px on the station.

PX Storage

Useful palettes

Here are some palettes that contain objects to drag-and-drop onto graphics:

• kitPx
• bajaui
• kitPxGraphics
• kitPxHVAC

Further reading

Part II of this tutorial

Relativised Graphics (make one PX file and assign it to multiple objects)

Relativised Graphics and Objects