Creating Dynamic Texts

Introduction

Hello and welcome to a new guide on how to best use Movicon.NExT™.

In this technote, we will show you how to animate text in Movicon.NExT.

Text animation

You can use an Animated Text object from the Text folder in the Toolbox library offered by Movicon.NExT, or you can use the Border Color animation.
This guide will use an example to give you a better idea of how this is done.

Example

This example is very simple: a screen will be created with a Display object associated with a tag, which will control the animation with its value, an Animated Text object and a Text Box object with Border Color animation.

Tag creation

After having launched the Movicon.NExT development environment and created, or loaded, a project, proceed with creating the tag which will be used to animate the objects. To do this:

• Open the I/O Data Server from the project tree in the Project Explorer window and select the Tag List tab.
• Right-click on the workspace and select the Add New Tag option from the menu that appears.
• Configure the tag using its Properties window in the following way:
• 
  

  Name	Var1
  Model Type	Variable
  Data Type	Int16

  
  
• Confirm the changes by clicking the Accept Changes icon on the toolbar at the top of the tag’s Properties window.

Once you have finished configuring the tag, save the project by clicking Save all icon on the Movicon.NExT editor’s toolbar.

Screen creation

Now create a screen if not already done so:

• Look for the Screens resource in the project's tree structure in the Project Explorer window and select it.
• Right-click it and select the New option from the menu which opens.
• A New Screen popup will appear through which you can set the screen's main properties. Configure the screen as follows:
• • Width: 1920
  • Height: 1080
  • Name: Main
• Click the OK button to confirm the configuration.

Once the screen has been created, you can then change the project's properties by inserting the screen as the project's Main screen which will show when the project starts up. To do this:

• Select the name of the project from the application's tree structure.
• Open the Properties window.
• Change the following project properties in this way:
• • Startup Page Type: Main Screen
  • Startup Screen Name: Main

Once you have finished configuring the project startup page, click on the Save All icon located on the toolbar at the top to save the project.

Double-check that the Main screen is open and then click on the Toolbox tab on the far right of the editor next to the Properties window.
Drag the Text Box and Animated Text objects from the Texts folder and the Display object from the Display folder onto screen.

Assign the Var1 tag to the Display and the Animated text objects by entering it in the Tag property field or by dragging it from the project and dropping it onto the objects.
Now select the Display object and open its Properties window to configure it in this way:

• Change the limits by setting the Minimum Value to 0 and the Maximum Value to 3.
• Enable the Spin option.
• Find the Spin Size property and select the Large option.
• Adapt the font size by setting the Font Size property to 48.

Next select the Dynamic Text object and open its Properties window to configure it in this way:

• Adapt the font size by setting the Font Size property to 48.
• Click on the three dotted button corresponding to Object Configuration option from the Dynamic Content property group to open the object’s Smart Property popup window.
• Once opened, click on the + key at the top to add 4 rows to the list, one for each value from 0 to 3.
• When added, insert the Value 0, Value 1, Value 2 and Value 3 in the Text fields respectively, and then select a different Execution Type from those available for each value.
• Add a time of 3000 milliseconds in the Animation Time field.
• Click OK to confirm the configuration.

After you have done this, Configure the Text object by first selecting it and opening its Properties window, then:

• Open the animations pane and select the Border Color animation.
• Once the Border Color animation has been added, assign the Var1 tag by inserting it in the Tag field.
• On the right, add four rows, one for each value, by clicking on the + key.
• Insert the Value 0, Value 1, Value 2 and Value 3 strings in the Text property of each row respectively.

Click on the Save All icon located on the toolbar at the top of Movicon.NExT editor to save the project.

Test Runtime

Test everything you have just created by clicking the Start Runtime icon to launch the project into runtime.
When you change the value of the Var1 tag at runtime using the spin provided by the Display object at runtime, the animation should activate, and the Text Box and Animated Text will animate as a consequence based on the values set in their configurations.