This page goes over the process on how to create a new equipment graphic in FIN Stack using the Graphics Builder.

Now with FIN 4.0, most everything in the software is "context-sensitive." What the means is, depending on where you are at in the navigation menu (location being your "context") determines what info/data you will see and get in return. This helps FIN Stack automatically do certain things for the user, and also helps return the user-specific details/wizards that relate to their context.

This applies to create graphics too, which is why each level of the graphic will have a slightly different process. Use the following steps to get a general idea of how to create a basic equipment graphic:

Watch VIDEO here

Navigate & Create

1. The user will need to navigate (using navigation bar) down to any one of the equipments for which they would like to make a graphic.

Make sure the equipment name is on the header of the menu (which indicates that you are in that context).

2. Once the user has navigated to the desired location, Select the Menu, which is located on the top left corner

3. Select the Graphics Builder tile

4. When the user clicks on the Graphics Builder tile, it will slide out and give the user 3 options

In this case, the user will select on New

Equip Graphic Wizard

1. When the user selects on the New button, a wizard will appear allowing for you to pre-set a few things for your graphic.

Graphic Name: Allows you to type in a name for the graphic.
Graphic Template: Allows you to select a starter template from a list of available pre-built "duct templates." This is not a required parameter, just gives you a starting point of ductwork. (You can also create your own templates to be used here).
Graphic On Filter: The Graphic On filter refers to the graphic's "graphicOn" tags, which determine what database records this graphic will run on. By default, this filter will automatically be filled in based on your context equipment. (In our example, I created the graphic while on a VAV, which is why this filter in the screenshot is filled in with that VAV's tags). This filter can be changed after the fact if the need arises.
Relative - By Tags: This option makes it so that the points automatically come in Relative, based on their current tags. When points are relative, they are not "hardcoded" to one set of equipment's data. They are relative and will load on any equipment that has similar points based on the points' tags. An example of a Room Temp's point binding that was brought in 'Relative By Tags,' will be as follows: equipRef=$self and air and temp and point and zone. So, if this same graphic is loaded on any VAV it will look for a point that has those same exact tags, and use that as the path to load up the point's data.

Recommendation: Relative - By Tags

We recommend this option for when your database has points from several similar types of equipment that do not share the same navName. This is common when using different brands where point names don't match. Instead of having to worry about each point having the same exact name, you can have them be relative by tags instead. NOT recommended for a server that is still being worked on where tags will be changing often.

Relative - By navName: This option makes it so that the points automatically come in Relative, based on their current navName. When points are relative, they are not "hardcoded" to one set of equipment's data. They are relative and will load on any equipment that has similar points based on the points' navName. An example of a Room Temp's point binding that was brought in 'Relative By navName,' will be as follows: equipRef=$self and navName=="Room Temp" . So if this same graphic is loaded on any other equipment it will look for a point that has that same exact navName and use that as the path to load up the point's data.

Recommendation: Relative - By navName

We highly recommend using this setting when you know your equipment's point names all match up, and your tags are going to be changing often. This allows your bindings to look for a navName instead of breaking every time a tag is changed. This is your safest route to having relativized graphic.

Absolute - by Point Ids: This option makes it so that the points automatically come in Absolute (or `hardcoded`) to the current equipment you are on. When a point is brought in "Absolute by Point id" the path is automatically hardcoded to get data from that exact point no matter where the graphic is loaded. An example of a Room Temp's point binding, that was brought in 'Absolute by Point Id', will be as follows: id==@1eeaf884-82cd6356. So if this same graphic is loaded on any other equipment it will always reference that exact specific point (id) in the database and load up that specific points data.

Recommendation: Absolute - By Point Ids

This is only recommended for graphics that are not relative or will contain specific data from a piece of exact equipment. Some common examples that would utilize this setting would be Plants, specific 1-off equipment, and certain summary-style equip graphics.

Points: This allows you to select which points you would like to bring into the graphic. By using the CTRL and/or SHIFT keys, you can select multiple points. The points are populated based on your context equipment. You also get points associated to that equip's refs. (In our example, the VAV has an ahuRef, so we are able to select points from the ahuRef to show in our graphic)
Add Components For: This list is populated by the points you select in the previous "Points" section. By highlighting points in this section, you are telling FIN Stack to automatically create a graphical component (based on its tags) and bind the point to the graphical component. This isn't required but can save time since it selects the component, brings it in, binds the point to it, and brings out a Display Label for it.

2. Once done, select on the Ok button and your graphic will be created using those parameters, and your Smart Menu will jump you over to the available graphics view.

Many things will automatically be created within the graphic, so now all you have to do is go in and move a few things around, and possibly, create some overview boxes.
To edit your graphic, click on the graphic's name in the menu and select "Edit" to open up the graphic in the Graphics Builder app.

Organizing Components & Smart Labels (Automatically)

3a. When you open your graphic for the first time since creating it via the Wizard, you will automatically have a few things done for you.

If you selected a "Template" you will see a generic duct pre-built for you. If this does not match your duct setup, go into the components menu on the top left and bring out the ducts you want to use.

If you selected points to "Add Components" to, you will see those components and corresponding smart labels stacked up on the top left corner of the graphic. Don't worry if the components came in as the wrong type or orientation, you can manually edit those parameters as well as choose other components from the left. (Part 4 of this article, this is described in more detail - How to bring out components, bind to them, and then add a smart label display for it)

3b. The first thing you should do now is organize your components and smart labels, to do this quickly and efficiently, we recommend utilizing the Builder's Magic Buttons. The Graphics Builder's Magic Buttons can be found in the right menu (3 overlapping lines on the top right corner).

→ →

3c. The Magic Button you want to use first is "Smart Label to GraphicObjects." As soon as you click the button (only the first time), it will organize the smart labels and components neatly across the top and left of the screen.

Now, using your mouse, drag the components and place them on the ductwork where you would like them to be.

Once your components have been arranged on your ductwork, use the same "Smart Label to GraphicObjects" Magic Button to move your Smart Labels over to your Components. This time (and any time from here on) this Magic Button will resize your Smart Labels and place them next to the component that shares the same binding. You may wish to adjust the position of the labels. If so, simply drag them with your mouse.

Your components are now in place and have visual smart label displays to represent them. If you're missing any components or are wondering how to bring out components / bind / create smart labels manually, you can follow the procedure the the next section.

4. Components / Binding Points / Smart Labels / Custom Titles (Manually)

If FIN Stack didn't automatically pick the correct component or if you didn't select it in the Creation Wizard, nothing to worry about - you can do everything manually as well.

By default builder brings up 2 left Panels. 1 is the "Components Panel" and the other is "Properties Panel." There are many Panels, check the Builder Menus section for more info on them.

4a. (Bringing out a component) In the Components Panel, you can search for different available graphic components that come with FIN Stack, as well as any models you may have saved or created previously. Once you find the component you want, drag and drop it into your workspace to create a copy of it.

4b. (Binding Points to your Components) To bind a point to your component, switch one of your left panels to the "Virtual Point Panel" view by clicking on the three dots and selecting it.

4C. Drag and drop the desired point over and onto the component to create the binding.

You can always double check and see what point is bound to the component by selecting the component, going to the property Panel on the left, switching to advanced, then scrolling down to view the "VirtualPointRef" property's value:

Once you're done, drag the component where it belongs.

4d. (Creating a Smart Label Display) To create a smart label display, simply drag and drop the point from the Virtual Point menu onto an empty spot in the Workspace. This will automatically create a smart label.

4e. (Renaming your point display name on the graphic) Sometimes your point names might describe the point very well, or may need some adjustments so the end user can understand it. To solve this, we've added a Magic Button that allows you to manually customize the display name on any of our Smart Labels or display models. The button can be found in the list of "Magic Buttons" and is called Smart Label: ShortNames.

5. Creating Overview Boxes

The next step is to add Overview boxes. Typically, these consist of points that do not have physical components but need to be visible in the graphic for the end-user to command/view.

5a. To create an overview box, go to the right Builder Menu, click on "Magic Buttons" and then select Overview Box and "New."

5b. A new window will appear with an option to select a mini group or regular group, and allowing for you to select which points you would like to include in the overview box.

Mini Group: If enabled, this will make the overview box appear with larger values and smaller title area. This box is smaller than the regular box and is recommended for scenarios where the box needs to be on the graphic, such as VFD (Spd,Cmd,Ena,Stat)
Points: This will allow you to select which points to include in the overview box. TIP: If you had any smart labels selected before opening the Overview Box wizard, those points will already be selected in the list of points in the wizard.

5c. After selecting your points, the next window allows you to type in a Title for the overview box, select from a list of icons, and also allows you to give each of your points a custom "shortName"

→ →

Create as many overview boxes as you need. The points that are commandable will automatically get an Action Gear, indicating that it is a commandable point that has actions.