Program Graphics (Ctrl+E)

Important Hot Keys

•Middle mouse button (scroll button): Takes you back to the last screen you were in.

•Space bar: While in Program Graphics Mode, the space bar hides or shows art (background picture). When art is hidden, only objects are shown, which makes it easier to edit graphics.

•Ctrl + E: Switches from Program mode to regular viewing mode if you’re already in Graphics View.

Other Hot Keys are shown next to their respective button in CBAS.

Getting Started With Graphics

Where do I start and what are the possibilities? How do I make the background pictures? A CBAS user may be asking himself these questions when he gets ready to do graphics for the first time.

The first thing the Dealer should do, is take a look at the graphics that come with CBAS Demo software. The software comes with 2 databases: Ardmore Data Center and Esplanade Mall. Both have very nice graphics and can serve as learning tools. Actually, the Ardmore Data Center database is included with all new versions of CBAS and is in the Example Database A folder inside the CBAS folder.

In CBAS Demo, you will find the Post Oak database listed as Example Database B in the CBAS Demo folder. It is a good example of what can be done with a multi-story building. Open the database, go to Graphics View, and choose Home Page. You’ll see a picture of the building and a column of links for each floor, Cooling Tower, and Central Plant. Click on a floor and you’ll see the floor plan, with statuses of the various temperature sensors and links to the 2 Air Handling Units on the floor. When you roll your cursor over the AHUs, they change color. Click on one and it will take you to a graphic of the AHU with many points listed. Notice that the links to the floors are still there on the left side.

Hold down the Ctrl key and hit E. This will take you to Program Graphics Mode, where you will see only the points, links and labels that are peculiar to the graphic. Hit the space bar on your keyboard and the background picture will reappear. Hit it again and it goes away. You’ll notice that the labels for the points are embedded in the background picture. This can be a good way of doing graphics if you have many graphics that are exactly alike or very similar because all your AHUs use the same .JPG image file.

Double-click in the open space in the middle of the page and you will see a configuration window, where you select your background picture. The browse button can be used to select a picture, if you were adding a new graphic page. Right-click the Graphic Picture window to close it.

Double-click the Return Air Temperature, and you will see the Graphic Object configuration window. Notice that the Object Type is “Point” and the point name is listed in the object attributes. The only attribute that is checked is Show Value. In this case, the only thing that will be shown is the temperature. Nothing else is needed, since the rest of what is needed; frame, point name, and units (degrees Farenheit), are embedded in the background.

Double-click one of the floor links on the left of the screen and you will see a similar configuration window, but this time, the object type is “Label.” Close this window and drag the object to right, exposing another object. Double-click the exposed object and you’ll see that the object is a link. Click on the link name and you will see a list of other graphics that you can choose to link to. Right-click to close the window.

Duplicating graphics makes a building like this easy to program. Hit Ctrl-D to see the Graphic Picture window again. Change the name to AHU 50-S then click in the Find field at the bottom. Type the number of the AHU you are duplicating, like 19-W, then type 50-S in the replace field. Hit the enter button and now you have a new graphic for AHU 50-S (fiftieth floor South). Right-click then go to Select Graphic on the main menu. Select AHU 50-S at the bottom of the list and you will see your new graphic. Notice that all the links are there and the Label at the top has changed. All you have to do now is click each point and select the right point for that floor. If the point names were exactly the same from one AHU to the next, the points would be changed for you. However, in this case, 50-S doesn’t exist, so the point names would not have changed. To get out of Program Graphics mode, press Ctrl-E again.

Graphics Library

Included with every CBAS version, there is a Graphics Library folder located in the CBAS folder. Inside the folder, there is a GraphicsLibrarySetup.exe, which you must click on to unzip. Explore it and you will see that the graphics are divided into categories and subcategories. The majority of them are sized to fit the CBAS graphics window when using a screen resolution of 1024×768. Many of the graphics are 3-dimensional, and some of the .max files are provided so that you can change them using the program they were created in, 3-D Studio Max.

VISIO BAS Graphics

While standard system graphics continue to be offered with CBAS licenses, Computrols, Inc. is pleased to announce a powerful tool developed specifically for the continued success of our dealers: the all-new CBAS Graphics Library Subscription. This compilation of industry-specific graphics was developed for use with one of the business world’s most popular programs, Microsoft Visio.

Other Programs

The graphics in the library can be manipulated using any illustration program, such as Adobe Illustrator. Windows comes with a limited illustrator called Paint, which can be used to add or change the labels that won’t differ from graphic to graphic, just like the AHUs in the Post Oak database. You can also take digital pictures and manipulate them with a program like Photoshop.

Wiring diagrams can be made using Microsoft’s Visio program, which is designed for making network maps and flow charts. Some dealers are using this program for all their graphics, since CAD drawings can be inserted as backgrounds and other objects or labels can be layered on top. Visio accepts dwg and dxf files, but it seems as though you have to match your Visio version to the right version of Autocad, or Visio will not accept them. Once the drawing is complete, it can be exported in many different formats to be used as CBAS graphics.

AutoCAD drawings and portions thereof can also be exported as ,JPG, .GIF, or .BMP (bitmap) files. You might have to play around with the size of the exported files in order to make them fit right in the CBAS Graphics window. Be aware that the resolution of the resulting export can leave a little to be desired, as labels that are large in CAD are very small as .JPGs. However, labels that are too small to read can always be re-written using an Illustrator program.
Note: The size of CBAS graphics background pictures should be exactly 1015×635 pixels (width x height), in order to avoid having to scroll around to see the entire picture.

Program Graphics

On the Main Menu, go to Graphics View, then Program Graphics. Selecting Program Graphics allows you to create, delete, and edit graphics in the current database.

This menu item allows you to go to any graphic in the database whose Hidden checkbox has not been checked. When left-clicked, a drop-down menu with a list of graphics from which to choose will open. They are listed in the order they were created. Left-click the graphic you wish to select. The last option is “More,” which will open a list of all existing graphics when left-clicked.

A graphic is a screen that represents a floor, controller, piece of mechanical equipment or any group of objects that you wish to view and manipulate from one screen.

Select Graphic

This menu item gives you a list of existing graphics already programmed in the database. Choose the graphic you want to edit from the drop-down list.

Graphic

The Graphic sub-menu allows you to perform a number of tasks related to individual or multiple graphics in the system. A Graphic is really a background picture (.JPG or .BMP [bitmap]) on top of which objects are placed. When you insert a graphic, you insert a picture, and then add the objects on top of it.

Insert Graphic (Ctrl+Insert)

Inserting a new graphic into the current database is simple. When this command is selected, you will be prompted with the figure below. The information entered here will be applied to the graphic being installed. When you first get CBAS, you will be given some graphics to choose from.

Note: The Graphic Picture window’s properties can be changed at anytime by simply double-clicking the background of the current graphic while in editor mode.

Title

Text entered here will be the title of the current graphic. This is the name that shows up in the Select Graphic submenu. Again, this property can be changed at anytime by double clicking the background of the current graphic while in editor mode.

Hidden (Graphic Link Only)

This feature is useful for hiding certain graphics from users who are password-protected from programming graphics. Checking this checkbox will hide the current graphic’s title from the Select Graphic submenu when you are only viewing graphics. Even if this option is checked, the current graphic’s title will be displayed when programming graphics.

Path

This is where the graphic file (.JPG, .BMP, etc.) is physically stored on your computer or on the network. The path can be typed in or browsed for.

Left-clicking “Browse…” allows you to navigate through the computer and network to find the location of the file. If you are not sure where the graphics are located, you can use the find files or folders function in your start menu at the bottom left of the screen. However, all graphics files should be placed in a folder called Graphics inside the database folder.

Repeat

In CBAS you can create multiple graphics with one graphic insertion. This feature is useful when the same image file will be used for more than one graphic. Simply enter in the total number of graphics you would like to create whose properties will be identical. Change the name of repeated graphics by double clicking the background of the current graphic while in editor mode.

Find and Replace

This is used for multiple graphics. If a number of graphics are identical, but you want the name to change, use this feature. The name you type in the Find field will be replaced with what you type in the Replace field throughout the database. For example, if you want any name that has VAV to change to VAV3, type VAV in the Find field and VAV3 in the Replace field.

Note: The graphic you insert must be located in the same folder as the database. If you would like to add a graphic that is not in the database folder, copy the graphic and paste it into the folder where your database resides. Once you select Enter, if you do not see the graphic, you could have artwork hidden. If so, press the space bar or go to Insert Graphic (Ctrl+Insert)>Show/Hide Art (Space).

Delete Graphic (Ctrl+Del)

This is used to delete the graphic you are currently viewing. Selecting this option will open a warning window. This is a safety feature so that a graphic isn’t deleted as a result of you selecting the wrong option on the menu. Left-click and the current graphic with all of its objects will be deleted from the current database.

Delete Multiple Graphics (Alt+Del)

This selection allows for more than one graphic and their associated objects to be deleted. Selecting this option will cause a “Select Graphic” window to open. In this window you can specify which of the existing graphics to delete from the database. There are several methods for doing this.

•(Ctrl+Mouse): Selects multiple (non-sequential) names in the list.

•(Shift+Mouse): Selects a range of names.

•(Select All): Selects all names in the list.

•(Clear All): De-selects all names in the list.

Right-click to return to the program screen. Click Enter to delete. Changes will not be visible until you exit and re-enter the graphics view.

Position Graphics (Ctrl+Shift+P)

Selecting this option allows you to re-order the display of graphic names in the Select Graphic submenu. When selected, a window with a list of all points opens. At the bottom of the window are options. In order to re-position the graphics in the list, left-click the graphic titles in the order in which you want them positioned in the Select Graphic menu. The first title you left-click will be displayed first in the menu as indicated by a number 1 to the left of the graphic title. The second one you left-click will be number 2 and so on. On the bottom right of the screen you will notice a number. Above it is the number 5, which indicates that the next title you left-click will become the fifth graphic title listed.

Reset All

Changes the order back to how it was before you began repositioning.

Set Start

Allows you to left-click the graphic title from which you would like to start ordering the graphics. For example, if you are satisfied with the order of the first three points, but you want to change the order of four and five, click Set Start then left-click the third graphic listed. The next graphic you click will become number four and number four will become number five and so on. One through three will remain the same.

Reset

Changes the number of the next graphic you select to 1. For example, suppose you selected a graphic to be 1 and 2. The number in the box at the bottom of the page will be 3, which means that the next graphic selected will be 3. If you left-click Reset, you will notice that the number 3 on the bottom right side of the window will change to a 1, which means that now the next graphic you select will become the 1st graphic displayed and will become your Main graphic.

Enter

Saves the changes in positioning and returns you to the graphic you were viewing.

Duplicate Graphics (Ctrl+D)

This is used to make copies of the current graphic you are viewing. The window from Insert Graphic opens with the name and path are already typed in. The number typed in the Repeats box is the number of copies made.

Show/Hide Art (Space)

Selecting this changes the way the graphic screen appears. Selecting it once displays only objects placed on top of the background. Selecting it again displays the pictures and objects. This is only a visual tool, meaning that the screen functions the same, but looks different. Choose the view that is most comfortable for whatever you wish to accomplish.

Object

An object is an image within a graphic. Selecting a submenu from Object on the Graphic Edit Menu allows you to perform a number of “graphic object” related tasks.

Insert Object (INS)

Selecting this option will insert a new object into the current graphic. The Graphic Object window shown below will open. Here you can customize the object you wish to insert.

Definition of Object Types

•Label: Has no link to any point. Only used to label the graphic page or something on the page.

•Point: Is related to an actual point in the database. Can display its name, status, units, etc.

•Status: Is a special object that is normally linked to a status point and can be set to fill up with a different color as analog status increases, or binary status changes.

•Link: Is a link on the graphic to another graphic.

•Gauge: Represents an analog input and looks like the needle of a gauge. Needle moves as status rises and falls. Similar to a Status.

•Animation: Represents the motion of a fan, pump or other binary input point. Requires a still picture and a video clip file to simulate off and on conditions.

Select the type, size, and attributes of the new object. Pressing the Enter button will remove the Graphic Object window from the active view. You will notice an “X” next to the pointer (cursor). This indicates that you are ready to place the new object where you wish.
New objects can be drawn in one of two ways:

•Single clicking in the active view area will place the upper left corner of the new object at the point of the click. By default, any new objects placed using the single click method are 100 pixels in width by 100 pixels in height.

•Left-click where you want the left corner of the new object and drag the cursor to where you want the right corner of the object, then release the left mouse button.

Once an object has been inserted it can be easily copied by left-clicking and dragging the mouse.

Edit Object

This option allows you to edit both the size and attributes of the focused object. The options are the same as in Insert Object (Insert).

Global Edit Object (Alt+E)

This is a powerful feature, which allows you to modify the attributes of multiple graphic objects within the current database at the same time. (Edit)

Delete Object (Delete)

This option will delete all selected graphic objects.

Align

This allows you to organize the objects in each graphic. Select multiple graphics by holding down Ctrl and left-clicking each object you wish to manipulate. Below is the list of alignment options. To the right of each option is a shortcut. For example, to make all selected objects the same size, press Alt, Shift, and S on your keyboard at the same time.

Note: For all Align options, the last item selected will be the object with which the other selected objects will align. For example, if you select three objects by holding down shift while left-clicking each, then select Align Left Edges, the left edges of each object will move in line with the left edge of the third (last) object selected.

•Align Left Edges: Select this to force the left edges of all selected objects to line up with that of the last object selected.

•Align Right Edges: Select this to force the right edges of all selected objects to line up with that of the last object selected.

•Align Top Edges: Select this to force the top edges of all selected objects to line up with that of the last object selected.

•Align Bottom Edges: Select this to force the bottom edges of all selected objects to line up with that of the last object selected.

•Space Across: Edit

•Space Down: Edit

•Make Same Width: Select this to force all selected items to become the same width as the last item selected.

•Make Same Height: Select this to force all selected items to become the same height as the last item selected.

•Make Same Size: Select this to force all selected items to become the same height and width as the last item selected.
Layer

This is useful for objects within a graphic that lay on top of one another. The object that is selected will move in relation to all other objects in that graphic. Objects in front of another object will be visible to the operator. Objects behind another will not be visible. There are four options:

•Send Backward (Ctrl+B) – Moves the selected object back one level.

•Send To Back (Ctrl+Shift+B) – Moves the selected object behind all other objects.

•Send Forward (Ctrl+F) – Moves the selected object forward one level.

•Send To Front (Ctrl+Shift+F) – Moves the selected object in front of all other objects.

Additional Options

These are some additional options that do not fall into the other categories. The list of options is shown below and each is briefly described.

•Delete Dead Links: For space purposes, this removes links that have been broken for whatever reason.

•Delete Dead Links: Deleting Dead Links is a good way of managing your graphic database. This option is especially useful if there have been graphics deleted from the database, which were linked to remaining graphics. Eliminating these “dead links” will keep your database running efficiently.
Copying and Pasting

•Cut (Ctrl+X): Removes selected objects from their current location, but saves them to a clipboard so they can be pasted to a different location. This can be done by holding Ctrl and pressing X.

•Copy (Ctrl+C): Saves selected objects to a clipboard so they can be pasted to a different location. This can be done by holding Ctrl and pressing C.

•Paste (Ctrl+V): Inserts objects that have been cut or copied. Within the same graphic, pasted object(s) will be placed slightly up and to the right of the original copied or cut object. If an object is pasted into a new graphic, it will be placed in the same location of the new graphic as the original copied or cut object was in the original graphic from which it was cut or copied. This can also be done by holding Ctrl and pressing V.

•Paste to Multiple Graphics (Ctrl+Alt+V): Objects can be pasted to more than one graphic. Selecting this opens a window with a list of graphics into which you can paste the copied or cut object(s).

Selected vs. Focused

There are several ways in which a user can select graphic objects in the active view area.

•Single Click: single clicking an object will select it.

•Multiple objects can also be selected by pressing the left mouse button without releasing, dragging the mouse and then releasing when all of the graphic objects needing to be selected have been encompassed.

•Shift Key (Shift+Mouse): Pressing and holding the shift key in combination with a single mouse click enables you to select multiple objects.

•Control Key (CTRL+Mouse): this key combination will alternate between select and deselect when used on any graphic object. If multiple objects have been selected, and you wish to de-select only one of them, hold Ctrl while left clicking the object you wish to de-select. The rest will remain selected.

In the CBAS 2000 graphic editor, a graphic object can reside in one of four states:

•Selected: A selected graphic object is indicated with a fill of diagonal lines. When a graphic object is selected, it can be repositioned in the active area.

•Focused: Handles on the edges of the object indicate a graphic object that is focused.

•Not Selected: The object has neither handles nor diagonal lines within its borders.

•Focused and not selected: The object has focus handles but does not have diagonal lines between its borders. Pressing the Enter key will open the graphic object window for this object.

Moving Graphic Objects

Moving objects can be done with the keyboard or mouse. In order to move a graphic object, it must be selected.

•Mouse: Left-click inside the object or any object within a selected group of objects without releasing the mouse button. Then move the object or objects with the mouse to where you want them positioned. Release the mouse button when the object is where you want it.

•Keyboard: Single and multiple objects can be moved using the arrow keys. Pressing an arrow key will move a graphic object in 20 pixel increments. Using the Ctrl key in conjunction with the arrows will move the objects in one-pixel increments. We recommend that you move objects with the arrow keys rather than the mouse so that the alignment in relation to the other objects will remain symmetrical.

•Set Snap Size: Changes the increments in which the objects move when using the arrows. The choices are 1, 2, 5, 10, and 20 pixel increments. Left-click your choice. The current Snap Size will have (current) written next to it.

Resizing a Graphic Object

Any selected object can be resized using either the keyboard or mouse.

•Mouse: Once the object is selected, it becomes filled with diagonal lines and six black focus handles appear as shown in this example:

When you position the cursor over one of the focus handles, the cursor will change into a set of re-sizing arrows. To re-size the object, left-click without releasing and drag.

•Keyboard: Any selected object can be re-sized with the arrow keys used in conjunction with either the Shift or Shift + Ctrl keys. Using the Shift key in combination with an arrow key will resize the selected object in 20 pixel increments. Using Shift + Ctrl keys in combination with an arrow will resize the selected object in one pixel increments.

Viewing Graphics (Edit)

Once all graphics are programmed, the graphics view is a helpful tool for easily keeping an eye on your facility. Below is an example of a completed graphic screen capture of a VAV box. All points on the VAV are programmable from this screen. Click any point to enter the point-programming screen. Notice when you move the cursor over any object, a pop-up widow displays the name of the object.

On the bottom, left side of the figure above, there is a navigation window, which allows you to easily maneuver around the facility. Each line in this section is a Link to another Graphic. In this case, there are two floors and a roof that are graphical representations of the actual facility.

Clicking Stores, in this case, opens a list of all the stores in this building grouped the way the programmer chooses. Each of these click-able buttons takes you to a different view of the facility. It is basically a blueprint with all mechanical equipment and controllers.