Images and Symbols

Image Resources

You can import any image file in the Edit > Displays > Resources 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 Draw > Drawing.

You can import the following file types:

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

To manage resources:

• Go to Edit > Displays > Resources.
• 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 Draw Environment, and click on the Insert Image Resource.
• A new window will open. Click on the Import file button.
• The new image becomes the Fill for the rectangle. Click on 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 .

Symbol Factory

The symbols from the Symbol Factory are efficient and well designed vector graphic images. If you need an object like a pump or a valve in your application, open the library and browse for the element or search by name. The difference in symbols from the Symbol Factory and Local Symbols is that the symbols from the Symbol Factory, once included in a display, become part of that display and have no further connection with the library. In contrast, Local Symbols can keep an active link with the library and can have dynamic properties.

• Go to the Draw Environment and click on the Symbol Factory Icon in the vertical toolbar.
• After clicking on the icon, the Symbol Factory will open. To insert a symbol, choose one category and symbol. Then, double-click on the symbol and click in any place on the screen.

Adding color change animation to Symbol Factory elements

If you want to insert a color change animation without changing anything on the symbol, copy the symbol and overlay a transparent image on top of your image.

For example, suppose we have two pumps. To insert a simple animation that shows when the pump is ON or OFF, follow these steps:

• First, make a copy of the object, select the symbol, and click Ctrl+D to duplicate it. You can also select the Symbol, hold the CTRL key and drag the object, or you can copy/paste it.

• Then select the second pump and click on the Union button  in the horizontal toolbar.
• With this new pump, locate the OPACITY property in the left panel, select an Opacity from 0.2 to 0.5 and the color for your initial brush (red or green, for instance).

• Double click on the second pump and change the setting of the Fill Dynamic.

• Select both pumps and click on the Align Horizontal Center button and Align Vertical Center button.

• If the pump, with the Opacity changes, stays behind the other pump, click on the Move to The Front button to bring the pump with the Opacity changes to the front.

• You can now click on the Display Preview button  in the top toolbar to see the new pump's animation.

Smart Symbols

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

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

• To see the symbols used in this project, go to Draw > Symbols. You can export, import, or delete symbols on this page.
• To see all of the available symbols, go to Draw > Drawing, and click Open Symbol Library

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 bring symbols from the Symbol Factory and click on 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 the 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 components in the Local Symbol library may have built-in dynamic properties and may have an easy way to map them to the realtime tags in your application. This is explained in the following section.

If you have dynamic properties and tags being used in that symbol, the system will automatically create the symbol label parameters. After making the new symbol, double click it to verify its configuration parameters.

In order to Edit a symbol that is already in the Local Symbol library, insert the symbol in a display, right click on the symbol, and select "Edit Symbol". This will let you change the symbol by changing the drawing tool and locking the other elements in the page. When you finish, right-click on any position to select Save to Library, Save Only to Local display, or to cancel your editing.

The Local Symbols objects are composed of default symbols from the file SymbolLibrary.tproj 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 all projects in that computer. The symbols you are using 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 Draw Environment, right-click on the screen and select "Insert Symbol". Alternately, you can click on the "Local Symbol icon" in the vertical toolbar.

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

Symbol Parameters

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

Editing and modifying symbols

Right-click on the VerticalTank symbol and select Edit Symbol. Now you enter in the Edit mode, you can see all objects that are part of the Vertical Tank.

Click on the Black rectangle to see its Dynamics.

As you see we use #<PropertyName>:TagName 

That syntax will create exposed label parameters for the symbol, making it easier to map the linked tags when using the symbol. In this examples, the symbol has the labels "Level","MinScale" and "MaxScale". When you insert this symbol, you will be able to set values for those parameters. After the ":" character, you have the default value. 

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

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

Linking Tags and Symbols

You can configure a symbol to be the default representation of a Tag Type. In this way, every time you paste a tag into the Draw Environment, a symbol will be automatically created mapping to the inserted tag. 

The tags of type Digital, Integer, Double, Decimal, Text, DateTime and TimeSpan have a default visualization that is the name of tag and an input/output text box. If you select multiple lines at Edit>Tags>Objects (click in one line, shift click in another line to mark a range), right-click to copy those lines to the clipboard, and paste into the displays, the system will automatically create one object to each of those tags.

If you want to change the properties of the objects created, for instance change the TextIO dynamic from "TwoWay" to "OutputOnly", select all the TextBox objects (clicking with the mouse on the display, and keeping it pressed, select the area with the objects), and double-click at any selected object to open the "Edit Combined Dynamics" dialog. 

Mapping a Symbol to a Tag Template

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

• Go to Edit > Tags > Templates to create a new template.

Go to Edit > Tags > Objects and create Tags with Type: Demo.

• Back at the Draw environment insert some 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) in their dynamic properties

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

• Back to Draw environment and paste the tags.

When inserting tags of that template type, the system will look for a Symbol with the same name of Template. If a match is found, that symbol is created and linked to the Tag you were inserting at the display. 

Linking Tags and Symbols using Categories

If you want to map a Symbol with a group of Tags, but you don't want to make this symbol map all Tags with the same Type. you can use the Category column to link which symbols should be used as the default interface to each group of tags.

• Go to Run > Dictionaries > Categories and create new categories.

• Back to Draw Environment and insert one symbol.
• Go to Draw > Symbols Tab and on the Category Column chose the respective category for the symbol.

Go to Edit > Tags and define the category for the tags.

Select all Tags, copy then paste then into the Draw Environment. Each Tag will map to the respective symbol, according to the association defined in the Category column.