Dynamic Animation for 3D Models

Introduction

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

In this technote, we will use an example to show you how to create a screen containing an animated 3D object.

Example

This example is very simple and involves using a 3D model offered by the Symbol Library from the Movicon.NExT editor and creating views that can be called using buttons. An object from the model will also be animated using the value of a boolean tag.

Tag creation

Let’s start by launching the Movicon.NExT development environment and creating, or loading, a project. Once this has been done, create a boolean tag to use for the 3D model’s animation. To do this:

• Open the I/O Data Server listed in the project tree in the Project Explorer window.
• Access the Tag List by selecting the corresponding I /O Data Server tab.
• Right-click within the workspace and select the Add New Folder option from the menu that appears. Once the folder has been added, change the name to Tags3D by entering it in its Name property.
• Select the Tags3D folder and right-click it to open its contextual menu. Select Add New Tag option from the menu that appears.
• Configure the tag by using its Properties Window in this way:
• 
  

  Name	State
  Model Type	Variable
  Data Type	Boolean

  
  
• Confirm the changes by clicking on the Accept Changes key on the toolbar of the tag’s Properties Window.

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

Screen creation

Now that we have defined the tag, let’s go ahead and create the Main screen:

• 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 Symbol Library tab next to the Properties window in the editor to open the Symbol Library offered by Movicon.NExT.
Go to the 3D Symbols folder and select to drag the Refinery object onto the screen. Once on screen, resize the object so that it covers the whole screen area.
Select the object and open its Properties window on the right. Enable the ‘Is Interactive’ and ‘Menu with Left Button’ option properties.
Double-check that the 3D object is selected, then right-click it and select the ‘Enable 3D Tooltip’ option from the ‘3D Editing’ sub-menu.
Once you have activated this option, enable the ‘Enable 3D Camera’ that shows immediately after as well.
Next, click the Edit 3D Camera Position option to display a popup to use for creating a list of views to be called at project runtime.
Enter View1 in the textbox next to the Name field at the top and press the + button to add it to the list. Press the OK button to confirm.
Change 3D model’s view angle by holding down the right mouse button and dragging the object, making sure that the Enable 3D Tooltip option is active and repeat the procedure to add views as shown beforehand.

Once you have finished compiling the list of views available, double-check that the Enable 3D Tooltip option is active, select a component from the Model and open the Animations tab at the bottom of the editor.
Select the Back Color from the animations made available and assign the Tags3D\State tag. Press the + button to add another row of the values available and change the value 1 color to green.

Double-check that the Main screen is open, click on the Toolbox tab on the editor’s right, next to the Properties window, to open the Toolbox library offered by Movicon.NExT.
Drag a Standard Metro Style button from the Buttons > Standard folder onto the screen.
Once placed on screen, left-click to select the button and open its properties window. Enter the View1 string in the Text property field.
With the button still selected, open the Commands tab at the bottom of the editor and select the 3D Camera command to insert it on the Commands List associated to the button. Configure the command in this way:

• 3D Control Name: ContentControl
• View Name: View1

Make a duplicate of the button you have just created by clicking it and using the CTRL+C and CTRL+V combo keys in sequence. Repeat the procedure described beforehand for each view that you have created and configure the new buttons appropriately by assigning them with the configured views.
After having opened the Main screen, drag a Smart Switch object from the Switches > FlatToggle Switches folder onto the screen.
Assign the Tags3D\State tag to the object you have just placed on screen by selecting it from the combobox or by clicking on the Tag property’s corresponding three dotted button to select it from the Tag List that appears.

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.
The 3D object can be interacted with at runtime by rotating it to view it at different angles all over. When clicking on the buttons associated to the views, the 3D object will automatically rotate according to how it was configured in design mode. When pressing the switch, the 3D model’s component will animate with the Back Color animation it was configured with.