Symbols and Images

Description

Our platform has wonderful features that help to improve productivity when you create graphical displays in an application. The drawing tools allow you to easily manage symbols, image files, import objects from a 5000 objects gallery, create your own symbols with dynamic properties, and map tags and templates to its default graphical user interface. 

There are three main repositories for reusable components: the Images, the Symbol Factory library, and the Local Symbols Gallery. Let us explore each one.

Images: Used to insert an external image file (like an icon, wallpaper, object, or a background image) from your computer to the project configuration. You can manage the imported images on Edit → Displays → Resources. After the image is imported, you no longer need the original file. Images can be used as color brushes for any drawing object, and they can even be used as "color" or the ColorFill dynamic attributes. 

Smart Symbols: These are the most frequently used symbols. They include the symbols you create in a project and a library of more than 500 symbols designed specifically for FactoryStudio. The symbols in this library can be synchronized with the library. When you change a symbol in this library, the change will be automatically applied to all displays using that symbol. Local Symbols can have dynamics properties that you can easily map to tags in displays; they can also be defined as the default graphical representation of tags. 

All our symbol objects are vector based, so they resize intelligently across all displays.

Also, since you can create displays for both .NET and HTML5, we are making sure you can use our Symbols in BOTH display types – you get the same experience regardless of your user display needs.

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

You can also make your own symbols with any data links you want built in. You can tie them to a datatype. For instance, if you want a pump object to appear every time you drag an integer datatype onto the screen, you can!

You can also make your own data types! 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!

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 Insert Image Resource.
• 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 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 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 Draw 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 → Tags → Objects, 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 Edit → Tags → Templates to create a new template.

Go to Edit → Tags → Objects and create tags with Demo type.

• In the Draw 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 Edit → Tags and copy all tags with Type:Demo.

• Paste the tags in the Draw 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 Run → Dictionaries → Categories and create new categories.

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

Go to Edit → 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. 

In this section...