PowerVision allows users to:
- Animate Alpha
- Animate Color
- Animate Position
- Animate Rotation
- Animate Scale
Using animations in the design of a configuration can drastically enhance the user interface and overall user experience. We are going to walk through using animations to add some additional UI features to our configuration.
Animating Position for a PopOut Menu
First, we need to create a menu that we can program to pop out. For time’s sake, we have already created a PopOut menu for you.
Open the configuration we have been working on: PowerVision Essentials Training
Go to the Page Designer Tab and select the I/O Animations Page
From the training files (See 1.1 // First Things First), also open the Configuration: Section 5 (you should now have two PowerVision windows open)
Go the the Page Designer Tab
In the Main Layer, in the Menu folder, select the CW PopOut Menu Container
Right click and select Copy
Go to the configuration that you have been working on, PowerVision Essential Training
Go to the Page Designer Tab
Select the I/O Animations Page
Right click on the Design Canvas and select Paste
This should have placed the CW PopOut Menu onto the I/O Animations Page we have been working on.
Select the CW PopOut Menu
In the Container Widget Properties pane:
Change Include in Programming to: True (this enables us to access this container when we program it to animate)
X Position: -15
Y Position: -15
Your CW PopOut Menu should be covering the IO gauges that we created in the previous steps.
Let’s go ahead and assign touch actions to this PopOut Menu that will allow us to go to the pages we created, simulate data and navigate to a new page, System Overview. We will create the System Overview Page first.
Create System Overview Page
Go to the Page Designer Tab
Select the I/O Animations Page
Under the Design Canvas, right click on the tab: Default I/O Animations View
Select Duplicate View
Select this new tab and above the design canvas, rename the Current View: System Overview Page
We are going to copy and paste a container widget onto the new page so we need to ensure that we have all the J1939 parameters mapped.
Go to the Connections Tab
Under Communication Ports > CANPort1, Select Engine Device
To the right, make sure J1939/NMEA Parameter Mapping tab is selected
Click the + to add more parameters
A new window will appear, check the (Select All) box
Click OK
Open the configuration called Section 5 from the training files (See 1.1 // First Things First) which we just used
Go to the Page Designer Tab
In the Main Layer under the Main Page, select to expand the System Overview folder
Select the CW System Overview container
Right click and select Copy
Go back to the configuration we have been working on, PowerVision Essentials Training
In the new page view you created above, right click and paste the CW System Overview container in the System Overview Page
Assign Touch Actions to the Menu
Go back to the Default I/O Animations View
Double-click on the CW PopOut Menu container
The Edit CW PopOut Menu window will appear
Select the Basic Image
In the Image Widget Properties pane under Touch Action, change to Go to View: (This Layer).Basic Page Designer View
Click OK
Select the Graphics Image
In the Image Widget Properties pane under Touch Action, change to Go to View: (This Layer).Default Graphics View
Click OK
Select the I/O Image
In the Image Widget Properties pane under Touch Action, change to Go to View: (This Layer).Default I/O Animations View
Click OK
Select the System Overview Image
In the Image Widget Properties pane under Touch Action, change to Go to View: (This Layer).System Overview Page
Click OK
Animate the PopOut Menu
To animate this PopOut Menu container we will use an action built into PowerVision called AnimatePosition.
We will need to take note of the start position X,Y values and the end position X,Y values of the IW PopOut Menu.
For this example when the CW PopOut Menu is fully out the X Position = -15 and the Y Position = -15. When the CW PopOut Menu is hidden, the Y position stays the same at -15 and the X position will be -111. So let’s take note of these values:
IW PopOut Menu Hidden
- X Position: -111
- Y Position: -15
IW PopOut Menu Out
- X Position: -15
- Y Position: -15
Programming the PopOut Menu Using a State Machine
Now we are going to go program the animation functionality. We can do this multiple ways, but for this exercise, we will use a State Machine.
Click on the Programming Tab
In the Programming Items pane, click the +
Select New State Machine
Change the State Machine Name to: Animate Menu
Change the Group Name to: _Animations
Select the box, Initial State
To the right of the State Machine Diagram, change the Name from Initial State to: Menu Hidden
In the State Machine Diagram pane, click and drag a blue rectangle onto the diagram canvas (this creates another state)
Change the name of this New State to: Menu Out
Select the Menu Hidden state
To the right, in the On entering state execute these actions, click the +
Select Screen Application (Screen) > AnimatePosition
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > Process > (Empty)
Click OK
Select the Menu Out state
To the right, in the On entering state execute these actions, click the +
Select Screen Application (Screen) > AnimatePosition
Change the Data to:
Click OK
Click the + again
Select Screen Application (Screen) > Process > (Empty)
Click OK
Now we need to create transitions from one state to the other.
Click on the transition icon 
Hover your mouse over the Menu Hidden state
Click and Hold, drag your mouse to the Menu Out state (this creates a transition from the Menu Hidden state to the Menu Out state)
Click on this new transition:
Make sure the Auto Create box is checked
Change the Name to: Toggle Menu
Follow that same process to create a transition from the Menu Out state to the Menu Hidden state
Click on this new transition:
Make sure the Auto Create box is not checked
Next to Name, click <Disabled>
Select Toggle Menu from the list
Click OK
Now we need to go back to our Animation Page and assign a key press to fire the Toggle Menu Event.
Click on the Page Designer Tab
Select the bottom left most key and the Edit Key Behavior - Key 9 window will appear
For Key Down, Select Fire Event and choose Toggle Menu
Create and Load your configuration to test.
When accessing the Animation Page:
• the bottom left key will toggle the CW PopOut Menu
• while the CW PopOut Menu is out you should be able to touch the various menu items and see them navigate to appropriate page views
Let’s program a timer on the PopOut Menu so you can not only toggle (what we did in the previous steps) but also so the PopOut Menu will automatically hide after a certain amount of time.
Click on the Programming Tab
Select the Animate Menu State Machine we created in the previous steps
Select the Toggle Menu transition
In the Toggle Menu pane to the right, select the Timers Tab
Click the +
Click on the Name and change to: Menu Auto Hide
Make sure the timer is a One Shot timer (because this is a One Shot timer and not a Recurring Timer, we will have to fire an event to start this timer (It will not happen automatically)
Click on the duration and change to 6000 ms
Make sure the High Speed Timer box is not checked
Now we need to fire an event to start the timer that we just created.
Select the Menu Out state (Blue Rectangle)
To the right, in the On entering state execute these actions, click the +
Select Central Control Module (CCM) > Start Timer > Menu Auto Hide
Click OK
Create and Load your configuration to test.
When accessing the I/O Animations Page:
• the bottom left key will toggle the PopOut Menu
• when the PopOut Menu is shown, it will automatically hide after 6 seconds