Post on 16-Oct-2014
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.