Page History

Terminology

Symbols and Images Overview

The document introduces the concepts of symbols and images, emphasizing their critical role in creating dynamic graphical displays. This includes the usage of Image Resources, which allow users to import, manage, and employ images within the platform for various purposes.

Smart Symbols and Local Symbols Gallery

The document elaborates on the concept of Smart Symbols, predefined or user-created symbols that can be widely used across projects. It also delves into the creation, management, and utilization of symbols from the Local Symbols Gallery, highlighting their dynamic properties and tag mapping capabilities.

Tag-Symbol Integration

The guide provides a comprehensive overview of linking tags and symbols for efficient representation of data. It explains automatic symbol-tag mapping, defining a default symbol for tag templates, and the use of categories for organized symbol-tag associations.

Understanding Symbols and Images

There are three main repositories for reusable components: the Images, the Symbol Factory library, and the Local Symbols Gallery. Let's delve into each one.

• Images.
• SmartSymbols.
• Custom Symbols and Data Types.

Images

Images are used to insert an external image file (such as an icon, wallpaper, object, or a background image) from your computer into the project configuration. Images can be managed on Edit → Displays → Resources. Once imported, the original file is no longer needed. Images can be used as color brushes for any drawing object and can even be used as "color" or the ColorFill dynamic attributes.

Smart Symbols

Smart Symbols are among the most frequently used symbols. They include the symbols you create in a project and a library of over 500 symbols specifically designed for FactoryStudio. The symbols in this library can be synchronized with the library, meaning any changes made to a symbol in this library will automatically apply to all displays using that symbol. Local Symbols can have dynamic properties that can be easily mapped to tags in displays; they can also be defined as the default graphical representation of tags.

All our symbol objects are vector-based, meaning they intelligently resize across all displays. These symbols can be used in both .NET and HTML5 displays, ensuring a uniform experience regardless of user display needs.

Symbols are powerful objects that can contain multiple data references or "input parameters", making them easy to replicate and use for various purposes while easily linking them to data-driven actions (such as showing color, running/off states, etc.).

Custom Symbols and Data Types

You also have the flexibility to create your own symbols with any data links you want built in. You can tie them to a datatype, such as a pump object appearing every time you drag an integer datatype onto the screen. You can also create your own data types! For instance, you could make a pump data type with sub-parameters and link it to a symbol. Dropping the PumpUDT on the screen will bring ALL your data parameters with it automatically!

Working with Symbols and Images.

Image Resources

You can import any image file in the Displays → Images tab. This creates a repository of images for the application that is stored inside the project database file. You do not need the original files anymore. These images can be used to be the Fill of an object, such as rectangles, ellipses, LabelBoxes, paths, page background, or target color in runtime dynamics using colors. 

If you need to update an image with a new version, you can replace it, and it will be updated throughout the application. Be sure to keep the resource name the same.

You can use any image file to fill or "paint" an object when you create displays in Display Drawing → Drawing.

You can import the following file types:

• .bmp
• .gif
• .ico
• .jpg
• .png
• .tiff
• .wdp

To manage resources:

• Go to Displays → Images.
• Click Import Images.
• Navigate to where the images you want to import.
• Select the image files and click Open.
• In each row, enter or select information, as needed.

Adding an image to a display

• Go to Drawing Environment, and click Insert an Image.
• A new window will open. Click the Import file button.
• The new image becomes the Fill for the rectangle. Click Fill to change the image settings.
• You can change the Stretch to None, Fill, Uniform and UniformToFill. Also, you can see all of the image files that are in the project, and you can change between them by using the Select Resource button or clicking on the image in the top toolbar .

Smart Symbols

The Smart Symbols Library includes the most frequently used graphics. You can create symbols and add them to a project's local library. Symbols can be static images, or they can have dynamic properties and tags links.

To view the symbols used in your project, do one of the following:

• To see the symbols used in a specific project, go to Displays → Symbols. You can export, import, or delete symbols on this page.
• To see all of the available symbols, go to Display Drawing → Drawing, and click Insert Symbol.

Creating new Symbols

You can use the drawing tools and the COMBINE commands in the horizontal toolbar to draw your own symbols.

You can also use the symbols from the Symbol Factory and click the UNGROUP command in the horizontal toolbar to edit the imported symbols.

You can use the Direct Selection cursor to edit internal elements without needing to ungroup.

If you want to save a new symbol to the Local Symbols Library, select the object or objects that you want to be part of the symbol. Then, right-click and select Make a new symbol. 

• Enter the Name, Folder, and the description of the Symbol.

• You can open the Symbol Library and choose the symbol to use in your displays.

The Local Symbol library's components may have built-in dynamic properties, and they may have an easy way to map them to the realtime tags in your application. This is explained in the following section.

If a symbol has both dynamic properties and tags, the system will automatically create label parameters for the symbol. After making a new symbol, double-click the symbol to check these parameters.

In order to Edit one of the symbols in the Local Symbol library, insert the symbol in a display, right-click it, and select Edit Symbol. This will allow you to change the symbol by changing the drawing tool and locking the other elements in the page. When you finish, right-click anywhere to select Save to Library, Save Only to Local display, or to cancel your editing.

The Local Symbols are composed of the default symbols in the SymbolLibrary.tproj file and the symbols you created for your specific project. If you change, delete, or insert a symbol in the SymbolLibrary.Tproj, it will be accessible to any project on that computer. The symbols you use in your project are saved inside the PROJECT file. Therefore, they are completely independent of any external file.

Inserting a Local Symbol

• Go to the Display Drawing Environment, right-click the screen and select Insert Symbol. Alternately, you can click the Local Symbol icon in the vertical toolbar.

• After selecting a category and symbol, click the symbol. Then, click the screen to position the symbol. You can also drag-drop symbols onto the screen. If you double-click a symbol, it will close the library window and will allow you to insert the selected object.
• Double-click a symbol to see its runtime properties and map it to the tags in your application.

Symbol Parameters

When you insert a symbol from the Symbol Library, it may have parameters. For our example, the VerticalTank symbol has the LevelValue, MaxScale, and MinScale parameters. To change the tags linked to these parameters, edit the new tag names in the dialog.

Right-click the VerticalTank symbol and select Edit Symbol. This starts the Edit mode and allows you to see all of the objects that are part of the Vertical Tank.

Click on the black rectangle to see its Dynamics.

We use #<PropertyName>:TagName 

This syntax will create the exposed label parameters for the symbol. This makes it easier to map any linked tags when you are using the symbol.

For this example, the symbol has the "Level","MinScale", and "MaxScale" labels. When you insert this symbol in your display, you will be able to set the values for these parameters. The default value is after the colon ":" character.

When creating symbols, it is useful to initially map the properties to client.SimulationDigital, Client.SimulationAnalog, or Client.SimulationDouble. These are variables with values that change every second so you can see the result of your dynamic properties. You can use the internal Client.DigitalValue, Client.NumericValue, and Client.TextValue variables when you want to use a placeholder value without any built-in simulation.

In order to save the symbol, right-click the symbol or on the display and click Save to Symbol Library or click the Save icon on the top toolbar. Double-click the symbol to verify its properties. 

Linking Tags and Symbols

A symbol can be configured to be the default representation of a tag type. Every time you paste a tag into the Draw Environment, a symbol will be automatically created and mapped to the inserted tag. 

The Digital, Integer, Double, Decimal, Text, DateTime, and TimeSpan tag types have the name of the tag and an input/output text box as their default visualization. To select multiple lines on Edit Unified Namespace → Tags → Objects, click  click on a line and hold Shift while clicking on another line to mark a range. The system will automatically create one object for each of the tags.

If you want to change any of the properties for the objects that were created, select all the TextBox objects by clicking and dragging over the display. Select the area with the objects and double-click on any selected object to open the "Edit Combined Dynamics" dialog. 

Mapping a Symbol to a Tag Template

You can define a symbol to be the default view for a tag template.

• Go to Unified Namespace → Data Templates to create a new template.

Go to Unified Tags → Tags and create tags with Demo type.

• In the Display Drawing environment, insert any objects that you want to be part of the symbol. In the example, we use a TextBlock and TextBox with the parameters #Tag: (Tag.Demo.Integer1) for their dynamic properties.

• Now, select the TextBox and the TextBlock and right-click to make it a New Symbol with the Name and Folder called "Demo".
• The parentheses () in the TextBox and TextBlock expression define the scope on what should be replaced when you map the symbol.
• For the hashtag syntax, #Label: When you paste the tags, they become the placeholder that will show where the tag name should be replaced with the dynamic animations or expressions.
• Go to Unified Namespace → Tags and copy all tags with Type:Demo.

• Paste the tags in the Drawing environment 

When inserting tags of this template type, the system will look for a symbol with the same name of the template. If a match is found, the symbol is created and linked to the tag you inserted in the display. 

Linking Tags and Symbols using Categories

You can map a symbol to a group of tags, but you do not have to make the symbol map to all tags with the same type. To do this, use the Category column to link which symbols should be used as the default interface for each group of tags.

• Go to Project Settings → Categories and create new categories.

• Insert a symbol in the Drawing Environment. 
• Go to the Displays→ Symbols tab and chose the respective category for the symbol in the Category column. 

Go to Unified Namespace → Tags and define the category for the tags.

Select all the tags and copy/paste them into the Draw Environment. Each tag will map to the respective symbol, according to the association defined in the Category column.