Skip to Content

Ensemble Graphics Toolkit: Animation Part 2

Last modified by Microchip on 2023/11/10 11:03
Contents

Introduction

In this training topic, you will learn how to construct an AnimationSequence class and introduce the AnimationDelay class to create an animation sequence.

Steps:

  • AnimationSequence Class

Prerequisites

You have prepared the Host PC with all the development software tools and Ensemble Graphics Toolkit source code as explained in:

You have installed and prepared the Eclipse IDE for C/C++ Developers as explained in:

You have performed the exercises in:

AnimationSequence Class

In this section, you will modify the timer.cpp source code that you entered in the training topic Ensemble Graphics Toolkit: Animation Part 1 to construct an animation sequence.

​In this training topic, you will use EgtProject and the settings you entered in the training topic: Ensemble Graphics Toolkit: Animation Part 1.

Modify the event.cpp source code by adding the following lines of code:

#include <egt/ui>
#include <iostream>
using namespace std;
using namespace egt;

int main(int argc, const char ** argv)
{
    Application app;
    TopWindow window;
    Button button(window, "Press Me");
    center(button);

   //One-shot timer
    Timer timer1(std::chrono::seconds(3));
    timer1.on_timeout([]()
    {
        cout << "One shot timer fired!" << endl;
    });
    timer1.start();

   //periodic timer
    Label CPUlabel("CPU:---", Rect(0, 0, 100, 50));
    window.add(bottom(CPUlabel));
    egt::experimental::CPUMonitorUsage tools;
    PeriodicTimer cputimer(std::chrono::seconds(1));
    cputimer.on_timeout([ & CPUlabel, & tools]() {
        cout << "periodic timer fired!" << endl;
        tools.update();
        ostringstream ss;
        ss << "CPU: " << static_cast < int > (tools.usage()) << "%";
        CPUlabel.text(ss.str());
    });
    cputimer.start();

   // Animation
    Label label("Ensemble Graphics Toolkit”, Rect(20, 100, 200, 50), AlignFlag::center);
    label.font(Font(35));
    window.add(label);

    PropertyAnimator animate1(window.width(), 200,
        std::chrono::seconds(5), easing_bounce);
    animate1.on_change([ & label](int value) {
        label.x(value);
    });
//    animate1.start();
   // Animation Sequence
    int min_value = 0 – label.width();
    PropertyAnimator animate2(200, min_value,
        std::chrono::seconds(5), easing_linear);
    animate2.on_change([ & label](int value)
    {
        label.x(value);
    });

    AnimationDelay delay(std::chrono::seconds(1));
    AnimationSequence sequence(true);
    sequence.add(animate1);
    sequence.add(delay);
    sequence.add(animate2);
    sequence.start();

    window.show();
   return app.run();
}
Save your program by selecting File > Save. You may also save with the command CTRL+S.

To build the project, hover over EgtProject, right-click, and select Build Project from the menu. Or you can click on the Build icon.

The Console window (bottom pane) will display the build progress.

Click on the Run button.

Observe the WVGA Display on the target:

The timer.cpp executable is running remotely on the target.

Observe the label “Ensemble Graphics Toolkit” at the top of the WVGA Display move (animate) along the animation sequence entered in the source code above.

EGT Display: the label "Ensemble Graphics Toolkit" is animated according to the source code

AnimationSequence class

From ~/egt/docs/html/annotated.html, click on the AnimationSequence class. All the functions, attributes, and constructors associated with the class are documented here.

The AnimationSequence class allows users to add and manage a series of animation objects and run them as a single animation. It also allows users to add one sequence into another to create complex animations.

AnimationDelay class

From ~/egt/docs/html/annotated.html, click on the AnimationDelay class. All the functions, attributes, and constructors associated with the class are documented here.

The AnimationDelay class allows users to insert simple delays into an animation sequence.

To stop the program, press the Stop button (upper left hand, just below the menu bar).

​Before you start another session, be sure to Stop the current session.

Back to Top

Summary

In this training topic, you learned how to construct an AnimationSequence class and use AnimationDelay class to create an animation sequence.

Back to Top

What’s Next?

There’s plenty more to learn. Here are some additional Ensemble Graphics Toolkit training resources to help you gain more knowledge and skills:

Back to Top