Image and Symbol Repositories

There are two main repositories of reusable components, the Images, and the gallery of Local Symbols.

Better detailing each of these sources, the following.

Images: Used to insert an external image file from your computer for the project configuration, such as an icon, wallpaper, object, or background image. You can manage the imported images in Edit>Display>Resources. After the image is imported, you no longer need the original file because it is embedded in the project file. Images can be used for any drawing object, even as "color" or for dynamics attributes colorfill.

Local Symbols: Local symbols are the most frequently used symbols, and include symbols created within the scope of a project. The symbols in this library can be kept synchronized with the library, so by changing a symbol in this library, this change will be automatically applied to all screens that use the symbol. The local symbol can also have dynamic properties that can be easily mapped to Tags on screens; These symbols can also be defined as the default graphical representation of Tags.
In this section are described these possibilities and how to use them.

Image features

You must import all the images you want to use on your screens or reports through the Resources in the environment Displays. This creates an image repository for the application.
If you need to update an image with a new version, you can replace it, and it will be updated in all locations of the application in which it is being used. Be sure to keep the same resource name when you swap images.
You can use any image file to fill or paint an object when creating canvases in Draw> Draw .
You can import the following file types:

• . bmp

• . gif

• . ico

• . jpg

• . png

• . tiff

• . wdp

To manage resources:

1. Go to Edit> Displays> Resources.

2. Click Import Images.

3. Browse the directories to where the images you want to import are.

4. Select the image files and click Open.

5. On each line, type or select the information as needed.

To add an image to a Display:

1. Go to the Drawing environment (Draw) and click on the icon Insert Image Resource.

2. A new window will open. Click the button Import File.

3. The new image will become the fill of a new rectangle. Click Fill of the rectangle object to change image settings. The image will also be included in the image library in the same way as explained in the previous item.

4. You can change Stretch to None, Fill or UniformTofill. You can also view all the objects that are in the project and change between them using the Select Resource or just by clicking on the image in the top toolbar.

Image Removed

Image Added

Managing Local Symbols

The symbol library comes with a number of graphic images that you can use. You can also create symbols to add to the local project library. Symbols can be just a static chart or a chart including and setting a dynamic, and even linking to Tags.

To view symbols:

1. Follow one of the following options:

   • To see only the symbols used in this project, go to Draw > Symbols.

   • To see all available symbols, go to Draw > Drawing and click Open Symbol Library.

2. To save a symbol as an image file, select the line and click Save to Image.

Creating new symbols

You can use the drawing tools and COMBINE commands in the horizontal toolbar to draw your own symbols.
You can also bring symbols of the Images and click the command Ungroup horizontal toolbar in order to edit the components of the imported symbols.

You can also use the cursor Direct selection to edit internal elements without the need to ungroup.
To save the new symbol to the Local Symbols library, simply select the object or objects you want to be parts of the symbol, then right-click and select Make New Symbol.

To add a symbol to the library:

1. Go to Draw > Drawing, drawing, drawing.

2. Draw the object that you want to become a symbol.

3. Select the entire object and right-click.

4. Select Make New Symbol.

5. Enter the name of the symbol and folder (subdivision of the library) in which you want the symbol to be saved.

6. From there, you can press the vertical bar icon in DRAW to pick up symbols, and use them on any other screen.

Components in the Local Symbols library can have built-in dynamic properties and an easy way to map them to runtime tags in the application.

If you have properties and dynamics for tags being used in this symbol, the system automatically creates the symbol label parameters. After you make the new symbol, double-click it to check its configuration parameters.

The "local symbols" objects are composed of some standard symbols from the SymbolLibrary.tproj file, added with the product installation, and the symbols that you created for your specific project. If you change, delete, or insert a symbol in SymbolLibrary.Tproj, it will be accessible to all projects that are edited on this computer. The symbols that you are using in your project are saved within the project file, therefore completely independent of any external file.

Inserting symbols on a screen

To insert a Local Symbol on a screen:

1. Go to the DRAW environment, right-click anywhere on the screen and select Insert Symbol; alternatively you can click the icon Insert Symbol on the vertical toolbar.

2. A window appears with all the symbols available in the project. On the left side of the window is a list of Folders (groupings of symbols). On the right side are shown the symbols belonging to the selected Folder.

3. After selecting the Folder and symbol, click the symbol and then click on the screen to position the symbol, you can also drag and drop the symbols to the screen. If you double-click a symbol, the library window will close, allowing you to insert the selected object.

4. Image RemovedImage Added

5. Double-click the symbol to see its runtime properties and the tag map it used. Each tag used has a Label that can be used in scripts (code behind) to reference the corresponding tag. See the Symbol Setup window in the figure below. In Value is the tag to be used.
   
   

   

Symbol Parameters

When you insert a symbol from the Local Symbols library, it may contain some parameters, such as in the sectioner example above. In this case the parameters are LevelValue, MaxScale, and MinScale. To change the Tags linked to these parameters, simply edit the new tag names in the dialog box.

Editing and modifying symbols

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

Now click the black rectangle to see its Dynamics properties.

Note that the syntax was used #<PropertyName>:TagName.
This syntax will create parameters of exposed labels, which makes it easier to map labels linked to tags when using the symbol. In these examples, the symbol has the labels "Level", "MinScale" and "MaxScale". When you insert this symbol, you can set values for these parameters. After the ":"character, you have the default value for the default label.

Example: "#LevelValue: Client.SimulationAnalog", you will be creating a property called "LevelValue", which has "Client.SimulationAnalog" as the default value. You can use any name for the Label parameter.

In order to save the symbol, right-click on the symbol or screen and press Save to symbol library, or click the Save icon in the top toolbar. Double-click on the symbol to check its properties.

Inserting color animation for figures and symbols

If you want to insert animation by color change, without changing anything in the symbol, you can copy the symbol and overput a transparent image on top of the symbol image.

For example, the following are two bombs. You can create a simple animation that shows when the pump is ON or OFF.

To insert ANIMATION ON OFF follow these steps:

1. First make a copy of the object, select the symbol and click Ctrl + D to duplicate it (you can also select the symbol by holding down the CTRL key and dragging the object, or you can copy/paste).

2. 

   Then select the second pump and click the Union button on the horizontal toolbar.

3. 

   With this new pump, locate the OPACITY property in the left pane, select an opacity from 0.2 to 0.5, according to the desired visual effect, and select the color of the initial brush (red or green, for example).

4. Double-click the second pump and change the FillColor dynamic setting.

5. Select the two pumps and click the Align Horizontal Center button and align vertical center button.

6. If the pump with the opacity changes gets behind the other pump, click the Move Forward button to bring it forward.

7. You can now click the View Preview button

   

   at the top of the toolbar to see the animation of the new pump.

Automatic link between tags and symbols

You can configure a symbol to be the default representation of a kind of Tag. This way, every time you paste a tag into the Draw environment, a symbol will be automatically created on the screen corresponding to the inserted tag.

Mapping between native symbols and types

The tags of type Digital, Integer, Double, Decimal, Text, DateTime and TimeSpan have a default view that is the name of the tag and an inbound/outgoing text box. If you select multiple lines in Edit> Tags> Objects (click one line, press Shift, and click another line to mark a range), and right-click to copy those lines to the clipboard and paste to a screen, the system automatically creates an object for each of those copied tags.
If you want to change the properties of the created objects, for example, change the dynamics of textIO "TwoWay" for "OutputOnly", select all text box objects (by clicking your mouse on the screen; holding it down, drag- to select the area with the objects), and double-click on any selected object to open the editdialog of Dynamics, which in this case will show in the title that there are "Multiple selected objects".

Mapping a Symbol to a Type (Template)

Just as you can define symbols for the native default types of Action.NET, you can also set a symbol to be the display pattern of a user-defined type, that is from a Template. An object that is typed in this template will be represented on the screen by this symbol.

To map a symbol and template:

1. Go to Edit> Tags> Templates to create a new template. In the following figure, a template with the name Demo has been created.

1. Back in the environment Draw insert some objects that you want to be part of a symbol. In the example, a TextBlock and TextBox with the #Tag (Tag.Demo.Integer1) are used in their dynamic properties

TextBox Dynamic

• Now select the TextBox and TextBlock, and right-click

choose from the menu Make New Symbol; Fill in the Name and Folder fields with the template name "Demo". The parentheses () in the TextBox and TextBlock expression, define the scope, on what should be overridden when you map the symbol. The syntax #Label: When you paste the Tags, it is the placeholder that will show where in dynamic animations or expressions the tag name should be overridden. Label is any name for the parameter.

• Go to Edit> Tags and copy all tags with Type: Demo.

• Go back to the DRAW environment and paste the tags on the screen.

When you enter Tags of this type (template), the system will search for a Symbol object, with the same name as the template. If found in the symbol library, this symbol is created and linked to the tag that was pasted on the screen.

Mapping Tags and Symbols using Categories

When you want to map a symbol with a tag group, but you don't want to have this symbol map all Tags to the same type, the column can be used Category, in the tag definition, to connect the symbols that should be used as the preview pattern for a tag group. That is, only symbols with the same name of the tag types, whose objects have the same categories, will be considered matching.

Go to use this feature, follow the example:

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

• Go back to the DRAW environment and insert a symbol.

• In this environment choose the plug Symbols and in the category column click and select the desired category for each symbol.

• Go to Edit>Tags to define the appropriate categories for each tag group.

• Select all Tags, and copy, go to DRAW and paste on the screen. See that only Tags that have the same category that was defined for the symbol will have their corresponding symbols created, even though they all have the same type.