Function Wizard Example 6: Customizing the Function Code

The Function Wizard allows you to customize the code it automatically generates for your Master Controller widget.

By following the steps in the following example, you can create a 2D Point widget with the Function Wizard and tweak its code to make several drawings point towards its position.

  1. Create an empty scene.

  2. In the Node View, add a Field-Chart node to your scene and connect it to your scene’s main composite. This will serve as a spatial reference for this tutorial’s purposes.

  3. In the scene’s default Drawing layer, using the Brush or Pencil tool, draw an arrow pointing from the centre of the scene’s field chart towards the right.

  4. In the Node View or the Timeline view, copy and paste your drawing layer three times so as to have four arrow drawings in your scene.

  5. In the Advanced Animation toolbar, select the Translate tool. Then, select each drawing layer and reposition them in a rectangular formation, like so:

  6. In the Node View or the Timeline view, select all four drawing layers.

  7. In the Master Controller toolbar, click on the Function Wizard button.

    The Function Wizard dialog appears.

  8. In the Controller Type drop-down, select Point2dWidget.
  9. In the Operation drop-down, select Set Value.

  10. In the Attribute drop-down, select Offset.

    NOTE Although this Master Controller’s purpose is to make the arrows rotate, the Function Wizard will only allow you to select an attribute of the 2D (vector) type. This is because when the 2D point widget is manipulated, it provides its position on the X and Y coordinates as a 2D (vector) type value. We will make the Master Controller control the arrow’s rotation angle by customizing the script later.

  11. In the Label field, type in a name for your Master Controller that will indicate its purpose. In this example, the Master Controller will make all arrows point towards the 2D point widget, so it was named LookAt.

  12. In the minimum and maximum fields for each axis, enter the following values:
    • XMin: -12
    • YMin: -12
    • XMax: 12
    • YMax: 12

  13. Although the code for the Master Controller you are about to create can be customized directly using the text field at the bottom of the dialogue, we will create this Master Controller using the default code for it for now, and edit its code in its properties so as to be able to test each change one by one. Hence, at this point, simply click OK to generate the Master Controller with the default function for a 2D Point widget.

  14. A dialog box will appear prompting you to select a composite to attach the Master Controller to. In the Composite drop-down, select Top/Composite, then click OK.

    A Master Controller node will be created, and its 2D Point widget will appear in the Camera view.

  15. In the Node view, locate the Master Controller that was just created by the Function Wizard, and click on its layer properties button.

  16. Although no modification needs to be done to the code in the UI Data tab, you can take a look at it at this step. You will notice that the parameters you entered in the Function Wizard are all stored in this tab in JSON format. The actual code executed by the Master Controller, which is stored in the UI Script tab, refers to this data. Hence, you can easily make changes to the parameters of your Master Controller by updating the data in the UI Data tab, if needed.

  17. Open the UI Script tab. This tab contains the code that is executed each time the 2D Point widget is manipulated. It is the same code that was displayed in the text field in the Function Wizard, before you clicked OK to generate this Master Controller.

  18. In the Camera view toolbar, click on the Hide All Controls button. This is necessary because when you make changes to the UI Script code of a Master Controller, these changes will not be reflected in its behavior until you hide the Master Controller’s controls, then display them again.

  19. In the UI Script tab, remove the two lines that update the target node’s offset. These lines both start with node.setTextAttr. Then, add the bolded lines below to log basic information as you move the 2D Point widget:

    function onPoint2dValueChanged(params, point2dVal) { MessageLog.trace("START"); var targetAttr = params.targetAttrs[0]; MessageLog.trace("Attribute Name:" + targetAttr); for(var i=0; i<params.targetNodes.length; ++i) { var targetNode = params.targetNodes[i]; MessageLog.trace("-----------------------------"); MessageLog.trace("Node Index:" + i); MessageLog.trace("Node Identifier:" + targetNode); } MessageLog.trace("END"); }
  20. Add the Message Log view to your workspace. To do this, click on the Add View button in the top-right corner of the view in the top-right area of your workspace, and select Message Log.

  21. In the Node View, select the Master Controller node. Then, in the Camera view toolbar, click on Show Controls. This is to test if the changes you just made to the code contain any syntax error. If your code can run without issues, the Master Controller widget will reappear in the Camera view, and the Message Log will log a header for the type of widget being displayed, followed by “Done.”

  22. Using the Transform tool, move the 2D point widget around in the Camera view to test if information is logged as you manipulate it.

  23. Using the node.getTextAttr() method, add code to isolate and output the position of each target node on the X and Y axes.

    function onPoint2dValueChanged(params, point2dVal) { MessageLog.trace("START"); var targetAttr = params.targetAttrs[0]; for(var i=0; i<params.targetNodes.length; ++i) { var targetNode = params.targetNodes[i]; var pos_x = node.getTextAttr(targetNode, frame.current(), "OFFSET.X"); var pos_y = node.getTextAttr(targetNode, frame.current(), "OFFSET.Y"); MessageLog.trace("Node Index:" + i); MessageLog.trace("pos_x:" + pos_x); MessageLog.trace("pos_y:" + pos_y); } MessageLog.trace("END"); } include(fileMapper.toNativePath(specialFolders.resource+"/scripts/utilities/ui/functionWizard/mcs/mcPoint2dFunction.js"))

  24. Add the bolded lines below so as to calculate the angle at which to rotate each arrow using the difference between the position of each arrow relative to the position of the 2D Point widget:

    function onPoint2dValueChanged(params, point2dVal) { MessageLog.trace("START"); var targetAttr = params.targetAttrs[0]; for(var i=0; i<params.targetNodes.length; ++i) { var targetNode = params.targetNodes[i]; var pos_x = node.getTextAttr(targetNode, frame.current(), "OFFSET.X"); var pos_y = node.getTextAttr(targetNode, frame.current(), "OFFSET.Y"); var deltaX = point2dVal.x - pos_x; var deltaY = point2dVal.y - pos_y; var angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI; MessageLog.trace("Node Index:" + i); MessageLog.trace("deltaX:" + deltaX); MessageLog.trace("deltaY:" + deltaY); MessageLog.trace("angle:" + angle); } MessageLog.trace("END"); } include(fileMapper.toNativePath(specialFolders.resource+"/scripts/utilities/ui/functionWizard/mcs/mcPoint2dFunction.js"))

    NOTE The Math module, the atan2() function and the PI property are built into the Harmony scripting interface as they are part of the ECMAScript language.

  25. Now that the script has all the information required to perform its task, we can add the node.setTextAttr() method to change the rotation angle of each arrow to make them point towards the 2D Point widget. We can also clean up the logging commands used until now to make sure each addition to the code worked as intended.

    function onPoint2dValueChanged(params, point2dVal) { var targetAttr = params.targetAttrs[0]; for(var i=0; i<params.targetNodes.length; ++i) { var targetNode = params.targetNodes[i]; var pos_x = node.getTextAttr(targetNode, frame.current(), "OFFSET.X"); var pos_y = node.getTextAttr(targetNode, frame.current(), "OFFSET.Y"); var deltaX = point2dVal.x - pos_x; var deltaY = point2dVal.y - pos_y; var angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI; node.setTextAttr(targetNode, "ROTATION.ANGLEZ", frame.current(), angle); } } include(fileMapper.toNativePath(specialFolders.resource+"/scripts/utilities/ui/functionWizard/mcs/mcPoint2dFunction.js"))
    TIPS

    The following are tips to help troubleshoot issues when changing the code of a Master Controller:

    • When a script encounters an problem, it usually stops executing without reporting errors by default. Hence, it’s a good idea to add logging throughout each step of your script and to keep an eye on the Message Log view as you test it.

    • After performing changes to the code of a Master Controller, hide and display its controls to test that it’s still able to load. If you don’t see a header message and an end message such as the ones in the example below when displaying the controls of a Master Controller, it is likely that the code for your Master Controller contains a syntax error.

    • Always make sure that your widget function is fully executed, until the end. A good way to verify this is to log a message such as “START” at the beginning of your function and “END” at the end of your function. That way, if your script doesn’t behave as expected, you can assess whether or not your function was called, and whether it was executed until the very end.

    • To activate the Script Debugger, the magic comment //!debug can be added at the beginning of your script, as shown below:

    • The Script Debugger can be used to inspect variables, callstacks, and errors. However, because the Script Debugger will appear every time your code is executed, and your code is executed with every manipulation of the widget, it may be preferable to use logging to troubleshoot your code when possible.