1. Create a folder under Config in your station and name it

Templates. Create a subfolder under Templates and call it

titleBar:

2. In your station‟s file system, create a subfolder under px

and call it includes. Now create a new view on the folder

titleBar, and create the px file for it under the includes folder.

PxInclude as a Title/Nav Bar

STEPS

Note: The px folder does

not exist until a “New

View” is created for an

object or added manually.

3. In the PxEditor view of the titleBar folder, copy the canvas

pane widget, delete the top-level scroll pane widget, then paste

the canvas pane back onto the „x‟ (the root of the px page).

4. In the properties sheet of the canvas pane, change the

ViewSize property‟s “Width and Height” to 1022 by 100, then

change the Scale property to “FitRatio”.

5. Add whatever graphics you like into the page. I typically

put a logo on the left, a couple of bound labels for a title

(something like Building Control System or the like), maybe a

label bound to the output of a CurrentTime object from kitControl.

You can also add bound labels with hyperlinks to sections of your

station (AHU shortcut pages, floorplans, alarm consoles, etc).

Don‟t forget to save the view.

6. Now create a folder named Home in your station. Create a

new view on that folder (call it “home”) for your home page. In

the PxEditor view on that folder, edit the CanvasPane‟s

ViewSize‟s “Width and Height” properties in that page and make

it 1022 pixels wide by 710 high (or whatever you‟re used to

making your page sizes).

7. Drag and drop the px file you created for the title bar in the

above steps (most likely titleBar.px) onto your home px page. It

should size itself to 1022 by 100. Drag your new title bar to the

top of your page.

8. On any new px view you make, start the page off by

dragging and dropping your titleBar.px file onto it and placing it

at the top. For any further changes you want to make to your

title bar, simply edit the view on the titleBar folder under the

Templates folder in your station.

1. In AX Workbench, under My Host/My File System, locate a

graphic image (jpg, gif or png file) that you‟d like to use. For our

purposes, we‟ll find a home page image of a building. Right click

on the image file and select Copy, then expand the Files section

under your station.

2. If you don‟t already have an images folder or some place for

storing graphic files in your station, right click on Files and select

New-New Folder. Name that new folder images. Now right click

on your images folder and select paste. Your image file should

appear under the images folder.

3. Under Files/px in your station, create a subfolder called

resize.

4. Right click on the resize folder and select New-PxFile.px.

Name the new PxFile homeImage.px.

5. Open the px editor for that page by right clicking on the px

file and selecting Views-PxEditor.

6. Copy the canvas pane widget, delete the top-level scroll

pane widget, then paste the canvas pane back onto the „x‟ (the

root of the px page).

7. Now drag the image file from the images folder under your

station and drop it onto the PxPage editor. Left click the image

in the PxPage and drag it to the upper left hand corner of the

page.

8. With that image being the active (or highlighted) object in

the PxEditor, left click the layout property of that image.

9. Note the Width and Height of the image.

PxInclude for resizing images

STEPS

10. In the Widget Tree area to the right of the PxPage, left

click the CanvasPane, then edit the “viewSize” property of the

CanvasPane and make the “Width and Height” the same as the

image, so that the CanvasPane is the same size as the image.

11. Edit the CanvasPane‟s scale property and change it to

“FitRatio”. Save your PxPage.

12. Now right click on the Home folder in your station and

select Views-Edit home.

13. In the PxEditor view, drag the homeImage.px file from

your station‟s Files/px/resize folder and drop it on your home

page. It will become a PxInclude in your home page that you can

grab the corners of to resize to any size you want! You can

repeat this process with floorplan graphics, titlebar images, etc.

1. In your station in AX Workbench, right click on Config and

select New-New Folder. Name the new folder Logic.

2. Right click on the new Logic folder, select New-New Folder

and name the new folder BuildingMode.

3. Right click on the new BuildingMode folder and select

Views-Wire Sheet.

4. Right click on the wire sheet and select New-

BooleanWriteable. Name the new BooleanWriteable Mode.

5. Double click the Mode object to go into its Property Sheet

view. Edit the Facets-true/falseText from “true and false” to

“Green and Blue”. Left click on the Save button at the bottom.

6. Now right click on your Templates folder and select New-

Folder. Name the new Folder baseInclude.

PxInclude for Themes

STEPS

7. Right click on the new baseInclude folder and select Views-

New View. In the New Px View window that pops up, change the

view name to baseInclude, and change the source path to

file:^px/includes/baseInclude.px so that your px file will be under

the includes folder in the px folder.

8. In the PxEditor for your baseInclude, copy the canvas pane

widget, delete the top-level scroll pane widget, then paste the

canvas pane back onto the „x‟ (the root of the px page).

9. In the properties sheet of the canvas pane, change the

ViewSize property‟s “Width and Height” to 1022 by 710, then

change the Scale property to “FitRatio”.

10. From your Files/px/includes folder in your station, drag

the titleBar and drop it into your baseInclude page.

11. In the Nav pane on the left, locate the Mode object

under the BuildingMode folder, right click on it and select Copy.

12. Double click the CanvasPane in the Widget Tree pane

on the right. In the Properties window that pops up, left click the

Add Binding button in the upper right corner. In the popup Add

Binding window, select bajaui:Value Binding and click the OK

button.

13. In the new Value Binding section of the canvasPane

property sheet, left click the ord property. In the ord popup

window, left click the text area so that the word null in

highlighted, then hold down the control key and the v key to

paste in the ord to the Mode object, then click the OK button.

14. Now right click on the background property in the

CanvasPane property sheet and select animate.

15. In the Animate popup window, select colors to use for

the True and False values (Green and Blue for our example, but

you could do anything), then left click the OK button.

16. Drag the Mode object onto the page and create a

BoundLabel for it, then save the PxPage. This saves the

baseInclude.px file for future use in other pages as a PxInclude.

17. Create another view on a folder in your station, then

in the PxEditor, drag the baseInclude.px file onto your PxPage

first, then add your supporting graphics to the page. Any time

you create a new page, just drag the baseInclude.px file into it

first, and you‟ll always have the same style graphics on every

page, with the ability to programmatically change the “theme” or

color sequence based on the output of an object.

1. These steps assume you have a series of zone controllers

(FPBs, VAVs, etc) added to your station, with point folders and

box graphics associated with them (NiagaraNetwork,

LonNetwork, or otherwise). In the Files/px/include folder in your

station, create a new px file and name it vav.px.

2. Edit vav.px and copy the canvas pane widget, delete the

top-level scroll pane widget, then paste the canvas pane back

onto the „x‟ (the root of the px page).

3. In the properties sheet of the canvas pane, change the

ViewSize property‟s “Width and Height” to 70 by 40.

4. Add a bound label to the PxPage (you can do this by

dragging the Space Temperature point from one of your boxes

onto the page and specifying BoundLabel in the MakeWidget

popup that appears).

5. Edit the bound label by double clicking it to bring up the

BoundLabel properties popup. Change the ord in the Bound Label

Binding section of the property sheet to $(VAV)/SpaceTemp,

where SpaceTemp is the name of the Space Temperature object

in your database (i.e. nvoSpaceTemp, SpcTmp, or whatever).

6. Using the Add Binding button in the top right corner of the

BoundLabel property sheet, add a Spectrum Binding and a

Spectrum Setpoint Binding to the BoundLabel.

PxInclude for Floorplans

STEPS

7. Change the ord of the Spectrum Binding to

$(VAV)/SpaceTemp, and the ord of the Spectrum Setpoint Binding

to $(VAV)/EffSetPt (using the real point names in your station for

your space temp and effective setpoint points), then left click the

OK button on the BoundLabel properties popup. I usually also

change the extent property of the Spectrum Binding to 12.

8. Add another bound label as in step 4.

9. Edit this second bound label‟s ord property and change it to

$(VAV). Do the same to the hyperlink property.

10. Edit the text property of the second bound label and

change the Format to %displayName%.

11. Save the px file.

12. Now edit your floorplan PxView. Locate one of the

folders (be it Lon/Bacnet points folder or Niagara Points

subfolder) that contain a VAV/FPB box‟s points; drag and drop the

folder to your floorplan view.

13. Instead of creating a bound label in the Make Widget

popup, select the second option down, “Include Px File”. In the

bottom left section of the popup, click the file folder under

“Choose Px file:” and navigate to the vav.px file you just made.

After selecting it and clicking the OK button, a variable called

VAV will appear in the “Select Px file variables to bind:” section –

highlight the VAV line, then left click the OK button.

14. You will now see a representation of that particular

vav box on your floorplan that you can move where needed, that

shows the temperature relative to setpoint via colorization of the

label, and that also contains a hyperlink to the VAV itself. The

beauty of this is, it is now as simple as a drag-and-drop for all

your other vav links on your floorplans.