Overview

You will learn: how to add the Pro playback controls to your add-in to start and stop your animation, and also how to use a combobox to enter a camera roll values which will be used in the creation of new keyframes in a 3D animation.

With the ArcGIS Pro SDK for .NET, you can extend ArcGIS Pro with your own unique tools and workflows. Using Microsoft Visual Studio and the Pro SDK, developers can build Pro add-ins and configurations that provide users with custom functionality specific to their organization or industry.

The Pro SDK provides a Map Exploration API which allows you to create keyframes which can store values using the camera class. This lab will walk you through creation of a fly-through animation which will allow you to pause playback, and insert new keyframes with roll values which bank/tilt the camera, providing for a more interesting animation and demonstrating control through the SDK.

Steps

Create a new animation and keyframes using a sample dataset

  1. Take some time to review the ArcGIS Pro documentation on animating the camera and on the Keyframe List. Then, proceed through the following steps and use this information in the creation of a new fly-through animation with some basic keyframes:
    • Start ArcGIS Pro, and when the start page appears, select the previously-installed Pro sample project: C:\Data\Interacting with Maps\Interacting with Maps.aprx.

    • Once the project opens, open the Catalog pane (View > Catalog Pane), and on the pane open the Maps folder, and then open the Portland 3D City scene. In the TOC, in the 3D Layers section, right-click on the Buildings layer and select Zoom to Layer. This is where you will begin to build a series of animation keyframes which will be used by your add-in.

    • Next, click the View tab, and in the Animation group, select Add. The Animation Timeline pane should appear with a button displaying Create first keyframe. Click this button to create your first keyframe. Each keyframe you create will store the current map view. Zoom into the scene closer to the buildings and change your perspective (use the 3D navigator if needed) and then use the + button to add around 5 additional keyframes with different views simulating a fly-through around the buildings. By default, each keyframe you add should have a 3-second gap.

    • Next, in the Keyframe Gallery in the Animation Timeline, click on your first keyframe and then press the Autoplay forward button below the timeline to try out the fly-through with the keyframes you created.

    • Finally, save your project with your new keyframes, and close ArcGIS Pro. You are now ready to build your add-in, which will use the fly-through animation you just created.

Create a new ArcGIS Pro Add-In Visual Studio Project

  1. Start Visual Studio.

  2. Choose File > New > Project and then from the ArcGIS templates group, select ArcGIS Pro Module Add-in. Name the add-in project CameraProperties.

Add Ribbon controls to your add-in

  1. Right click the project and choose Add > New Item and then from the ArcGIS Pro Add-ins group select ArcGIS Pro Button from the list of item templates. When prompted, name the new class file CreateKeyframe.cs and press Add to close the dialog box. The Button template provides the contents of the class file, as well as corresponding code in the Config.daml file for the Pro UI.

  2. Right click the project and choose Add > New Item and then from the ArcGIS Pro Add-ins group select ArcGIS Pro ComboBox from the list of item templates. When prompted, name the new class file RollValCombobox.cs and press Add to close the dialog box. The ComboBox template also provides the contents of the class file, as well as corresponding code in the Config.daml file for the Pro UI.

Update code in Config.daml and Module1.cs files

  1. Open the Config.daml file and replace the contents of the groups and controls sections with the following code:

      <groups>
        <group id="CameraProperties_Group1" caption="Keyframe Tools Sample" appearsOnAddInTab="true">
          <button refID="esri_mapping_animationPlaybackControl" />
          <comboBox refID="CameraProperties_RollValCombobox" size="middle" />
          <button refID="CameraProperties_CreateKeyframe" size="middle" />
        </group>
      </groups>
    
      <controls>
        <button id="CameraProperties_CreateKeyframe" caption="Create Keyframe with roll value" className="CreateKeyframe" loadOnClick="true" smallImage="Images\GenericButtonBlue16.png" largeImage="Images\GenericButtonBlue32.png">
          <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
        </button>
        <comboBox id="CameraProperties_RollValCombobox" caption="Enter roll value:" className="RollValCombobox" itemWidth="140" extendedCaption="Extended Caption" isEditable="true" isReadOnly="false" resizable="true">
          <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
        </comboBox>
      </controls>
    
  2. Open the Module1.cs file and paste the following code below the Overrides region:

        #region Business Logic
    
        public RollValCombobox RollValueCombobox { get; set; }
    
        public void CreateNewKeyFrame()
        {
            QueuedTask.Run(() =>
            {
                var currentmapview = MapView.Active;
                var currentcamera = currentmapview.Camera;
                var newCamera = currentcamera;
    
                var viewAnimation = currentmapview.Animation;
                var currentAnimationTime = viewAnimation.CurrentTime;
                var mapAnimation = currentmapview.Map.Animation;
                var cameraTrack = mapAnimation.Tracks.OfType<CameraTrack>().First();
    
                // Check the entered roll value and if valid, create a keyframe using it.
                var rollValue = RollValueCombobox.Text;
                if (Double.TryParse(rollValue, out double dblRollValue))
                {
                    newCamera.Roll = dblRollValue;
                    cameraTrack.CreateKeyframe(newCamera, currentAnimationTime, AnimationTransition.Linear);
                }
                else
                {
                    ArcGIS.Desktop.Framework.Dialogs.MessageBox.Show("Roll value can't be used, please re-enter a valid number.");
                    RollValueCombobox.Text = "";
                }
            });
        }
    
        #endregion
    

Update button and combobox code

  1. Open the CreateKeyframe.cs file and go to the OnClick method and add the following code: Module1.Current.CreateNewKeyFrame(); Your code, located below the using statements, should look like the following:

    namespace CameraProperties
    {
        internal class CreateKeyframe : Button
        {
            protected override void OnClick()
            {
                Module1.Current.CreateNewKeyFrame();
            }
        }
    }
    
  2. Open the RollValCombobox.cs file and replace UpdateCombo() with the following code: Module1.Current.RollValueCombobox = this; Your code for the constructor should look like the following:

        public RollValCombobox()
        {
            Module1.Current.RollValueCombobox = this;
        }
    

Build and test your code

  1. Your code is complete. Build your project and debug any issues. Run your project using the Start button, this will launch ArcGIS Pro. Open the Interacting with Maps project which you updated with your new animation in Step 1.

  2. Open the Animation Timeline pane if not already open, make sure you have created at least 5 keyframes and then select the first keyframe in the Keyframe Gallery, which sets playback to the beginning of the animation. Next, go to the Add-In tab, and find your add-in’s new Keyframe Tools Sample group, which should contain the animation playback controls, a combobox and a button.

  3. Press the play button on the playback controls which begins the fly-through animation. As you get to a location between your existing keyframes, pause the animation with the playback control. You will now create a new keyframe. Add a numeric value for the degrees of roll into your add-in’s combobox (e.g., 45). A positive value will roll/tilt the camera to the right, and a negative value rolls to the left.

  4. After typing in the value, press the button below it to create the keyframe. You should see the new keyframe created and added to the Timeline and Keyframe Gallery between your existing keyframes. Press play and along the timeline, create another new keyframe, this time with a negative roll value (e.g., -45)

  5. Play through your animation again, and you should see your new keyframes applied with the camera roll property and visualization. You can also open the Animation Properties pane and view the camera properties as the change during playback.

Congratulations, you're done!

Check out and compare with our completed solution project.

Challenge

Review the online documentation

Read more information about working with map view cameras and animation with the SDK in the ProConcepts Map Exploration document, and try some of the snippets.

Try a community sample

Download and try the CameraNavigation and CustomAnimation community samples, as well as other Map Exploration samples on GitHub.