Ensemble Graphics Toolkit: Animation Part 1

Last modified by Microchip on 2024/01/08 15:31
Contents

Introduction

In this training, you will learn how to construct an Animation class and add animations to a label.

Steps:

  • PropertyAnimator 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:

PropertyAnimator Class

In this section, you will modify the timer.cpp source code that you entered in the Ensemble Graphics Toolkit: Timers training to construct an Animation class and add an animation to the “Ensemble Graphics Toolkit” Label.​

In this training, you will use EgtProject and the settings you entered in the Ensemble Graphics Toolkit: Timers training.

Modify the timer.cpp source code by adding the following lines of code as shown:

#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();

    window.show();
return app.run();
} 

Save your program by selecting File > Save. You may also save by pressing 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 “easing_bounce” curve for a duration of five seconds.

EGT Display: the label "Ensemble Graphics Toolkit" is animated

PropertyAnimatorType class

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

on_change

This function allows you to register a callback handler to be called when the value changes. 

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.

Summary

In this training, you learned how to construct an Animation class and add an animation to a label.

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