[00:00] Animations can be a useful way to visualize machinery that's moving or running with just a quick glance at a Perspective view. In this lesson, we'll explore how you can use the Advanced Stylesheet to create animations that will enhance your Perspective projects and inform end users. The winery I'm designing this project for would like some animated indicators that certain pieces of equipment are running. Let's start with a very basic animation for a piece of equipment that will be running continuously-- this pump. I'll enable my Advanced Stylesheet first and drop in some base styles for the entire project that we explored in previous lessons. These set color variables, a background color, and some cross-project styles for our cylindrical tank. Next, I want to create a domId called blinkyYellow and apply it to the pump component in the Perspective property editor. I'll select the pump in the view, find the Meta section in the property editor, click Add Meta Property, select properties> domId, give it our blinkyYellow name, and hit enter.

[01:10] Now, let's find the right selectors for the different parts of the pump so we can apply a simple animation to this single pump and indicate that it's running. We'll need to use the developer tools in the browser, so let's jump over to the project browser, click on views, right-click on our view name, and select launch URL. If I inspect the pump using the dev tools, it looks like these are the selectors for the body and the rotor of the pump (.pump_centrifugal_body and .pump_centrifugal_rotor). Let's go back to our stylesheet and apply two basic animations-- one to fade between two colors and one to rotate the rotor continuously. With this first part of the CSS, we're setting some basic styles and using keyframes to complete the fade from yellow to gold on the body of the pump. With this second animation, the keyframes use a transform to rotate the rotor. Let's save, close the view, and reopen it to see the result. In some cases, a basic animation is enough to accomplish your objectives, but let's go one step further and tie some animations to a user action.

[02:13] In this next example, I'd like to create Toast animations to show and hide messages on click of a radio button. For these animations, a Perspective style class is the bridge between the Python and the CSS. To bridge that gap, there are several steps we'll see in the demonstration. First, a message payload is sent upon some component event action like clicking a radio button. Next, a message handler attached to our toast label catches that payload. Then the message handler on the toast label resets the style class from a default setting to a new setting based on the information in the message received. Finally, changing the style class triggers the CSS animation, since the style class is the container for new styling or animation actions. To begin tying animation to action, let's set up our radio buttons the way we want them first. Here, I have multiple radio buttons from my component palette.

[03:10] I'll make sure they're selected and we can do some setup within the Perspective property editor. We'll only need two of them, so let's do a little pruning first. We can right-click on index two under radios and select delete to remove that third button. Now let's expand both index zero and index one under radios. For index zero, I'm going to change the text to Show Message, and then I'll change the value to showMessage in Camel Case. For index one, I'll change the text to Hide Message and the value to hideMessage in Camel Case. This allows the value and index to change at the top under Props based on which radio button is selected in the view. Let's go into preview mode to demonstrate. With our radio buttons in place, we can use some of the built-in Perspective tools to make some small, individualized changes.

[04:04] For example, let's use those tools to make this set of radio buttons stand out better. With that radio group selected, I'll go to the Perspective property editor and find orientation. I think this will look better in column format instead of row format, so let's make that change. I'll just expand that area so we can see it in that orientation. Let's change the radio buttons' text color for better visibility against our background. We can go to style, hit the book icon for the built-in styling options, and then select text from the menu. I'll change the text color to our standard orange color. Now I want to change the way the selected radio button will display when clicked. I'll find selectedIcon in the Perspective property editor, expand color, and click this box next to enabled to add my orange color there, too. Now we need to create an event action on the radio group. We'll set it up to send an information payload that will help us trigger toast messages to appear.

[05:05] In this payload, we'll send information about which option was selected in the view when you click on one of the radio buttons. Let's make sure our radio button group is selected, and then we'll go to our top menu tabs to find Component. We'll select Configure Events. This event configuration popup gives us the tools to set up a component event. We'll select onActionPerformed, then click the plus sign, and select script. Here, we're defining a messageType, packaging up a payload that includes which radio button option was selected, and then sending that information to be used by a message handler that we'll set up soon to receive that payload. A lightning bolt icon will appear next to the radio group in the project browser to indicate that there is an event action on this component. Let's set up the basic CSS we'll need in the Advanced Style sheet for our Toast label animation. Here, I have a domId called toast-msg-1 with some styling for the label component I'll be using for my toast message.

[06:08] Next, I have two user-created style classes, one that I'll use to show the toast message and one that I'll use to hide it. Below, there are percentage keyframes that I've tied to the animations for the user-created classes that will slide the toast message in and out. We already have two labels here in the view that are 200 pixels wide. Let's set up this first one to use the distinctive styling attached to the toast-msg-1 domId and the percentage keyframes animation. I'll select my label and add a domId of toast- msg-1 to it in the Perspective property editor. Let's change the meta name to slidingMessage. If you look in the project browser, you can see the change for that component. With that label still selected, I'll attach the user-created class show-message under style and make it the default class setting.

[07:06] Now we can change the text on our label. We have half of the equation so far. The click on one radio button or the other fires off the event action we set up on those buttons, and it will send the information about which option was selected. We need to set up a message handler on this label that will catch that payload and use it to switch between the show-message and hide-message user-created classes. That should allow us to slide the toast message in and out on click of the respective radio button. We'll make sure our label is selected and go to the top menu tabs once again. We'll choose Component again, but this time we'll select Configure Scripts. Let's go to Message Handlers and double-click on Add handler. Let's set the Message Type to msg-handler. This is the same message we specified in our event action before. Remember that we also defined the scope as the view in our event action.

[08:03] We'll select view instead of page as the Listen Scope in our message handler to match. Now we need a script for this message handler. This receives the option selected payload from our event action as an argument, assigns that value to a variable, and then does some conditional logic to assign the correct user-created style class to the component or handle any edge case that might occur. If you look in the project browser, a little message icon now appears next to the slidingMessage label to indicate that it has a message handler attached. Let's try it out in preview mode. There's another, simpler method you can use to animate a toast message that focuses on a combo of user-created style classes and interpolation keyframes with a transform/translate effect. This time, we'll create a different domId to set the base styles for our second toast label -- toast-msg-2.

[09:05] I also have message-in and message-out user-created style classes and keyframes set up that will set a different pace for our second Toast label's entrances and exits. For our second label, I'll make sure it's selected in the view and add my toast-msg-2 domId in the meta section of the Perspective property editor. This will give us a base set of styles to work with. Next, I'll change the meta name to slidingMessage2 and verify that the name changed within the project browser. Then, I'll attach the default user-created style class message-in under style. Last, I'll put in some placeholder text. Now, we need our scripting for the message handler on this component so it can receive the payload from our radio buttons and know which button was selected. The process will be similar to what we did for its toasty counterpart before. To create the message handler for the second toast label, let's make sure it's selected, go to the top menu, and select Component.

[10:10] We'll select Configure Scripts, then double click on Add handler under Message Handlers. Then we can specify the message type msg-handler and select view as the Listen Scope. This script uses the message-in and message-out user-created style classes and their associated interpolation keyframes. Once again, we're using conditional logic where we receive the payload telling our script which radio button was selected, and it changes the class on our toast label according to that input. Let's save everything and see what that looks like in preview mode. Our second toast wins the race! The Advanced Stylesheet and some creative CSS can help you level up your projects with informative, interesting animations.

[11:02] Through a combination of the built-in Perspective style tools and the Advanced Stylesheet, you can achieve a high level of customization via animations that enhance the user experience, make your projects more interactive, and help the end user be more responsive to events and real-time data.