PxInclude as a Title/Nav Bar

STEPS
1. Create a folder under Config in your station and name it Templates. Create a subfolder under Templates and call it titleBar:

Note: The px folder does not exist until a New View is created for an object or added manually.

2. In your stations 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.

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 propertys 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). Dont 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 CanvasPanes ViewSizes Width and Height properties in that page and make it 1022 pixels wide by 710 high (or whatever youre 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.

PxInclude for resizing images

STEPS
1. In AX Workbench, under My Host/My File System, locate a graphic image (jpg, gif or png file) that youd like to use. For our purposes, well 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 dont 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.

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 CanvasPanes 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 stations 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.

PxInclude for Themes

STEPS
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 NewBooleanWriteable. 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 NewFolder. Name the new Folder baseInclude.

7. Right click on the new baseInclude folder and select ViewsNew 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 propertys 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 youll 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.

PxInclude for Floorplans

STEPS
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 propertys 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.

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 labels 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 boxs 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.