Mixins
A Mixin is a class that extends the functionality of a widget to, for example, be able to animate movement or a change in their alpha value. The Move Animator and Fade Animator mixins are the basis of TouchGFX Designer Interactions being able to generate code that animates movement and alpha change. These mixins can be added to a widget either through TouchGFX Designer or manually in User Code.
Move Animator
The Move Animator mixin makes the widget capable of animating a movement from its current position to a specified end position. The movement in both the X and Y direction can be described by supplying EasingEquations.
In TouchGFX Designer, the mixin can be applied by enabling it in the properties for the given widget in the "Mixins" section, as shown in the image below.
The Move Animator mixin will automatically be applied to a widget if an Interaction that moves the widget has been created.
Move Animator mixin enabled in TouchGFX Designer
Enabling the Move Animator mixin changes the declaration signature of the generated widget as seen below, where a Box has had the Move Animator mixin enabled.
touchgfx::MoveAnimator< touchgfx::Box > box;
Using Move Animator in User Code
When a widget has had the Move Animator mixin applied to it, the widget now has the capability of animating its movement from one position to another. In this section a demonstration of how to use this new functionality is shown.
After enabling the Move Animator mixin in TouchGFX Designer on a Box widget, the method startMoveAnimation becomes available for use.
This methods takes five arguments in the following order
- endX: the X position relative to its parent that the widget should move to.
- endY: the Y position relative to its parent that the widget should move to.
- duration: the time in ticks the movement in the X and Y axis should take.
- xProgressionEquation: the EasingEquation that should be used for the movement in the X axis.
- yProgressionEquation: the EasingEquation that should be used for the movement in the Y axis.
Below an example of a movement to the coordinates X: 0, X: 0 over a duration of 40 ticks, using a linear EasingEquation in both X and Y axis.
box.startMoveAnimation(0, 0, 40, EasingEquations::linearEaseNone, EasingEquations::linearEaseNone);
Further reading
Callback Implementation in User Code
When a Move Animator mixin has completed an animation, a callback is emitted. In this section a demonstration of how to implement this callback is shown.
After enabling the Move Animator mixin in TouchGFX Designer on a Box widget, the next step is to add declarations for a callback and a function to handle the event in the Screen header class file that inherits from the base class where the Box widget is located.
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for move animation ended on a Box
void boxMoveAnimationEndedHandler(const touchgfx::MoveAnimator<Box>& comp);
protected:
// Declaring callback type of MoveAnimator<Box>
Callback <Screen1View, const touchgfx::MoveAnimator<Box>&> boxMoveAnimationEndedCallback;
};
Then the callback declaration and function to handle the event need to be bound to the view object.
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxMoveAnimationEndedCallback(this, &Screen1View::boxMoveAnimationEndedHandler) { }
Next step is to tell the Box widget which callback to use when its move animation has ended, this is done in setupScreen() to ensure that the callback is set every time the screen is entered.
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setMoveAnimationEndedAction(boxMoveAnimationEndedCallback);
}
Last step is to implement the function, boxMoveAnimationEndedHandler, that handles the callback. For good practice we check that the Box which move animation has ended is actually the 'box'
Screen1View.cpp
void Screen1View::boxMoveAnimationEndedHandler(const touchgfx::MoveAnimator<touchgfx::Box>& b)
{
if (&b == &box)
{
//Implement what should happen when move animation on 'box' has ended here.
}
}
API reference
Further reading
Fade Animator
The Fade Animator mixin makes the widget capable of animating its alpha value to fade from its current alpha value to a specified end alpha value. The rate of fading can be described by supplying an EasingEquation.
Note
In TouchGFX Designer, the mixin can be applied by enabling it in the properties for the given widget in the "Mixins" section, as shown in the image below.
The Fade Animator mixin will also automatically be applied to a widget if an Interaction that fades the widget over a duration larger than zero has been added.
Fade Animator mixin enabled in TouchGFX Designer
Enabling the Fade Animator mixin changes the declaration signature of the generated widget as seen below, where a Box has had the Fade Animator mixin enabled.
touchgfx::FadeAnimator< touchgfx::Box > box;
Using Fade Animator in User Code
When a widget has had the Fade Animator mixin applied to it, the widget now has the capability of animating its alpha value from one setting to another. In this section a demonstration of how to use this new functionality is shown.
After enabling the Fade Animator mixin in TouchGFX Designer on a Box widget, the method startFadeAnimation becomes available for use.
This method takes three arguments in the following order:
- endAlpha: the alpha value the widget should be when animation is completed.
- duration: the time in ticks the animation to the new alpha value setting should take.
- alphaProgressionEquation: the EasingEquation that should be used for the rate of change to the alpha value.
Below an example of an alpha value change to 0 over a duration of 40 ticks, using a linear EasingEquation.
box.startFadeAnimation(0, 40, EasingEquations::linearEaseNone);
The linearEaseNone easing equation is the default, so you don't have to
supply that as argument. See the list of available easing equations in the link below.
Further reading
Callback Implementation in User Code
When a Fade Animator mixin has completed an animation, a callback is emitted. In this section a demonstration of how to implement this callback is shown.
After enabling the Fade Animator mixin in TouchGFX Designer on a Box widget, the next step is to add declarations for a callback and a function to handle the event in the Screen header class file that inherits from the base class where the Box widget is located.
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for fade animation ended on a Box
void boxFadeAnimationEndedHandler(const touchgfx::FadeAnimator<Box>& comp);
protected:
// Declaring callback type of FadeAnimator<Box>
Callback <Screen1View, const touchgfx::FadeAnimator<Box>&> boxFadeAnimationEndedCallback;
};
Then the callback declaration and function to handle the event need to be bound to the view object.
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxFadeAnimationEndedCallback(this, &Screen1View::boxFadeAnimationEndedHandler) { }
Next step is to tell the Box widget which callback to use when its move animation has ended, this is done in setupScreen() to ensure that the callback is set every time the screen is entered.
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setFadeAnimationEndedAction(boxFadeAnimationEndedCallback);
}
Last step is to implement the function, boxFadeAnimationEndedHandler, that handles the callback. For good practice we check that the Box which fade animation has ended is actually the 'box'
Screen1View.cpp
void Screen1View::boxFadeAnimationEndedHandler(const touchgfx::FadeAnimator<touchgfx::Box>& b)
{
if (&b == &box)
{
//Implement what should happen when fade animation on 'box' has ended here.
}
}
API reference
Further reading
ClickListener
The Click Listener mixin makes the widget capable of responding to touch input by extending the widget with a callback.
In TouchGFX Designer, the mixin can be applied by enabling it in the properties for the given widget in the "Mixins" section, as shown in the image below.
Click Listener mixin enabled in TouchGFX Designer
Enabling the Click Listener mixin changes the declaration signature of the generated widget as seen below, where a Box has had the Click Listener mixin enabled.
touchgfx::ClickListener< touchgfx::Box > box;
Callback Implementation in User Code
When a Click Listener mixin receives a touch event, a callback is emitted. In this section a demonstration of how to implement this callback is shown.
After enabling the Click Listener mixin in TouchGFX Designer on a Box widget, the next step is to add declarations for a callback and a function to handle the event in the Screen header class file that inherits from the base class where the Box widget is located.
The callback should declare three things: which class type to bind to, which widget the callback originates from and the type of event that occurs. In this example it is Screen1View, const Box& and const ClickEvent&
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for Box
void boxClickHandler(const Box& b, const ClickEvent& e);
protected:
// Declaring callback type of box and clickEvent
Callback<Screen1View, const Box&, const ClickEvent&> boxClickedCallback;
};
Then the callback declaration and function to handle the event need to be bound to the view object.
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxClickedCallback(this, &Screen1View::boxClickHandler) { }
Next step is to tell the Box widget which callback to use when it is touched, this is done in setupScreen() to ensure that the callback is set every time the screen is entered.
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setClickAction(boxClickedCallback);
}
Last step is to implement the function, boxClickHandler, that handles the callback. For good practice we check that the Box which initiated the callback is actually the 'box'
Screen1View.cpp
void Screen1View::boxClickHandler(const Box& b, const ClickEvent& evt)
{
if (&b == &box)
{
//Implement what should happen when 'box' is touched/clicked here.
}
}
API reference
Further reading
Draggable
The Draggable mixin makes the widget capable of being dragged around via touch input.
In TouchGFX Designer, the mixin can be applied by enabling it in the properties for the given widget in the "Mixins" section, as shown in the image below.
Draggable mixin enabled in TouchGFX Designer
Enabling the Draggable mixin changes the declaration signature of the generated widget as seen below, where a Box has had the Click Listener mixin enabled.
touchgfx::Draggable< touchgfx::Box > box;