<< Click to Display Table of Contents >> Navigation:  Project > Screens > User-defined library > Example: How to create new graphical object

In this example, we will create a group graphic object (Ellipse + Polygon), configure it so that when the tag value changes, the fill color of the ellipse changes, and also when you click on the ellipse, a pop-up window appears with information about the state and description of the object. And then we will add the configured object to the User-defined library. We export the object along with its settings in order to use it in other projects.

 

Let's create a pump object consisting of two simple objects: an Ellipse and a Polygon:

 

 

 

Let's group these objects:

 

 

Let's add 3 tags to our project:

 

 

We want the color of the ellipse to be bound to a tag with the following name: Pump{number}State, where {number} is the number of the graphic object instance.

We want a popup window to appear with status information and a description when the user clicks on an object.

So let's create a pop-up window (screen):

 

 

Let's add graphic objects to the screen:

 

 

where objects named PumpState and PumpDescription will display information about the state of the pump and its description:

 

 

For the ellipse object, we will create user-defined properties - number and description. To do this, double-click on the Ellipse object. (or select the Object Properties menu item from the context menu) in the Screen window. The Object Properties window appears:

 

 

Click "Collection" properties "User-defined" and add our properties:

 

 

 

Then close this window and the Object Properties window by clicking "OK" to confirm these changes. Then open the Ellipse properties window and open the Fill Color tab:

 

 

 

In order to bind a tag to this property, click "..." and write down Pump{number}State, where {number} is our custom property:

 

 

Click "OK" and close the tag selection window. Because the custom property "number" is set to 1, the Fill Color property will be bound to the Pump1State tag. Leave the remaining parameters as default (Tag value = 0 (false) : red fill color; Tag value != 0 (true) : green fill color)

 

 

Click "OK" to close the object properties window. Let's check the functionality. Run the simulation and change the value of the Pump1State tag from false to true:

 

 

In order to trigger the popup window, let's create a script:

 

 

Let's add this script to the Ellipse object scripts:

 

 

The script text looks like this:

 

 

After you have recorded the script, be sure to launch it by clicking the button on the toolbar:

 

Now when you click on the ellipse, you will see a pop-up window (depending on the tag value).

 

 

You can create another pump instance and change the number user-defined property to 2 or 3 to bind the pumps to the Pump2State and Pump3State tags. You can also change the description property for each pump ellipse:

Attention! It might be better to use Polygon to store user-defined properties and mouse click action because it is above Ellipse. Or, alternatively, you can use a transparent Button over the entire group object and use its OnClick action.

 

Now we can add this graphic object to our library. First you need to create a library: open the "Add Graphic Object" window, select "User-defined" and right-click on "New Library":

 

 

Give the library a name, for example "Pumps". Let's add an object to the library:

 

 

Now let’s export the library: open the Add graphic object window and find our library, right-click on it and select the “Export library plus” menu item. A file dialog box will appear, enter the name of the library and click "Save". This library will be saved with the object as well as the saved script that we created in this project and the popup. Now, if you want to use this object with this popup and script, just import it into another project.

 

Important! In the new project you need to create the same tag names.

 

You can download the example project here.