Dynamic Texts

Introduction

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

In this technote we are going to show you how to animate text using the Animated Text object from the Toolbox library.

Text Animation

The most convenient way to animate text in Movicon.NExT is to use the Animated Text object from the Toolbox library or the Border Color Animation from those listed under Animations offered by Movicon.NExT.
We will now show you how to create animated text as previously described.

Example

In the example we are going to create a screen with a Display object, which will be assigned to a tag whose value will command the animation, an Animated Text object, and a Text Box object with Border Color Animation.
We will also use the powerful features of the String Resource to associate String ID to the objects instead of text.

Tag Creation

First, start the Movicon.NExT platform up in design mode and create, or load, a project.
Then, create a tag to be used to animate the objects in this way:

• Open the I/O Data Server located in the project tree within the Project Explorer window.
• Double-click the Tags List to open it within the workspace.
• Right-click within the workspace and select the Add New Tag option from the menu that shows.
• Configure the tag by using its properties window in the following way:
• 
  

  Name	Var1
  Model Type	Variable
  Data Type	Int16

  
  
• Confirm the changes by clicking on the Accept Changes (tick icon) on the tag’s properties window toolbar.

Once you have finished configuring the tags, save the project by clicking on the Save All button in the Movicon.NExT editor toolbar.

Screen Creation

Next create a screen:

• Go to the project tree in the Project Explorer window and select the Screen module.
• Right-click it and select the New option from the menu that appears.
• A popup will show allowing you to configure the screen’s general properties. Configure the screen as follows:
• • Width: 1920
  • Height: 1080
  • Name: Main
• Click the OK button to confirm.

Now that you have created the screen, change the project’s properties by inserting the screen we have just created as the project’s startup screen. To do this:

• Select the name of the project from the project tree.
• Open its Properties window.
• Change the following properties:
• • Startup Page Type: Main Screen
  • Startup Screen Name: Main

Once you have finished, click on the Save button on the toolbar to save the project.

Check that the Main screen is open, click on the Toolbox tab on the far right next to the properties window to open the Toolbox library offered by Movicon.NExT.
Go to the Texts folder, select the Text box and Animated Text object, then drag and drop them onto the screen. Then go to the Displays folder and do the same with the Display object.

Assign the Var1 tag to the Display and Animated Text objects by entering it in their Tag properties or by dragging it from the project tree and dropping it on each one of the objects.

We shall next configure the Display object. First, select it and then open its properties window:

• Go to the Limits property group and set the Minimum Value to 0 and the Maximum Value to 3.
• Enable the Spin Enabled option.
• Set the Spin Size to Large.
• Set the Font Size appropriately to 48 for example.

Now let’s proceed with configuring the Animated Text object. First select it then open its properties window:

• Adapt the Font Size as pleased by setting it to 48 for example.
• Click on the three dots corresponding to the Object Configuration property.
• In the popup that shows, click the + key at the top to add 4 rows to the list, one for each value from 0 to 3.
• Once the rows have been added, insert V0, V1, V2 and V3 in the Text field respectively and select an execution type from those available for each value.
• Add a time in milliseconds, such as 3000, in the Animation Time field.
• Click OK to confirm.

Let’s go to the Text Box object. Select it and change its font size as done with the previous object, then:

• Open the animation panel and select the Border Color animation.
• Once you have added the animation, assign the Var1 tag by inserting it in the Tag field.
• On the right, add 4 rows, one for each value, by clicking the + key.
• Insert the V0, V1, V2 and V3 strings in each row respectively in the Text field.

Save the project by clicking on the Save All icon on the Movicon.NExT editor’s toolbar.

Texts table configuration

We shall now go on to configure the texts table.
Select and double-click the Texts Resource on the project tree to open it.
Add two languages, for example English (United States) and Italian in this way:

• Right-click on the Texts Resource workspace and select the Add New Language option from the menu that opens.
• A popup will display showing which languages you can choose from. Select the English (United States) language and click OK to confirm.
• Repeat the same procedure for the Italian language.

Now add the String ID:

• Right-click on the Texts table workspace and select the Add New String option from the menu that appears.
• Double-click on the New Text ID field and change the string by inserting V0.
• Insert the Value 0 in the English (United States) column and Valore 0 in the Italian column.

Repeat this procedure to insert the V1, V2 and V3 string IDs.

Change Language buttons configuration

Open the Main screen and then open the Toolbox library again. Go to the Buttons folder and then the Standard folder and drag and drop a Standard Metro Style button on the screen.
With the button selected, open it properties window and enter the ENG string in the Text property field.
Still with the ENG button selected, click on the Commands tab at the bottom of the editor.
Open the commands panel and select to add the Languages command to the button’s associated command list.
Configure the command in the tab’s far right by selecting the en-US option in the Language (Culture Name) property field.

Make a duplicate of the ENG button by using the copy and paste operations with the Ctrl+C and Ctrl+V keys. Move the new button by dragging it to new position within the screen so that it does not overlap the other one.
With the new button selected, open its properties window. Go to the Text property and change the string from ENG to ITA.
With the ITA button still selected, click on the Commands tab at the bottom of the editor.
Open the Commands panel, configure the command on the tab’s far right by selecting the it-IT option in the Language (Culture Name) property.

Save the project by clicking on the Save All icon on the Movicon.NExT editor’s Toolbar and start runtime to try out what we have created.

Test

While the application is running, change the Var1 tag value by using the spin button provided by the Display object. This should activate the animation of the Test Animation and Text Box objects.
When changing the language by using the two ENG and ITA buttons, the Text Animation and Text box object will be automatically translated.