How can I access all 3 callbacks of the flexbutton widget? (or any button)

[dave23]

My code needs to react to button press, button down and button released. But only one of these callbacks can be selected in touchgfx designer...

[Alexandre RENOUX · Accepted solution]

Hello,

Indeed, you cannot access 3 callbacks of a button in general using Designer. For that, you need to implement it yourself.

I don't really understand the point of 3 callbacks when a button has only 2 states : pressed and released. Press and button down is not supposed to be the same ?

I tried a rough implementation of a button that triggers a callback in the screen view with the current state (PRESSED or RELEASED). For that I based myself on the Designer implementation of a Flex button, creating my own widget based on a combination of ImageButtonStyle.hpp, ClickButtonTrigger.hpp and AbstractContainer.hpp.

Here is the code of the widget as well as the screen view

customButtonContainer.hpp

#ifndef CUSTOMBUTTONCONTAINER_HPP
#define CUSTOMBUTTONCONTAINER_HPP
 
#include <touchgfx/containers/Container.hpp>
#include <touchgfx/widgets/Image.hpp>
 
namespace touchgfx
{
/**
 * @class CustomButtonTrigger CustomButtonTrigger.hpp
 */
class CustomButtonContainer : public Container
{
public:
 
    /**
     * @fn CustomButtonContainer::CustomButtonContainer()
     *
     * @brief Default constructor.
     */
    CustomButtonContainer() : pressed(false), alpha(255), up(), down(), action(0)
    {
        setTouchable(true);
        buttonImage.setXY(0, 0);
        add(buttonImage);
    }
 
    /**
     * @fn virtual CustomButtonContainer::~CustomButtonContainer()
     *
     * @brief Destructor.
     */
    virtual ~CustomButtonContainer() {}
 
    /**
     * @fn virtual void CustomButtonContainer::setBitmaps(const Bitmap& bmpReleased, const Bitmap& bmpPressed)
     *
     * @brief Sets the bitmaps.
     *
     * @param bmpReleased The bitmap released.
     * @param bmpPressed  The bitmap pressed.
     */
    virtual void setBitmaps(const Bitmap& bmpReleased, const Bitmap& bmpPressed)
    {
        up = bmpReleased;
        down = bmpPressed;
        setWidth(down.getWidth());
        setHeight(down.getHeight());
 
        handlePressedUpdated();
    }
 
    /**
     * @fn void CustomButtonContainer::setBitmapXY(uint16_t x, uint16_t y)
     *
     * @brief Sets bitmap xy.
     *
     * @param x An uint16_t to process.
     * @param y An uint16_t to process.
     */
    void setBitmapXY(uint16_t x, uint16_t y)
    {
        buttonImage.setXY(x, y);
    }
 
    /**
     * @fn Bitmap CustomButtonContainer::getCurrentlyDisplayedBitmap() const
     *
     * @brief Gets currently displayed bitmap.
     *
     * @return The currently displayed bitmap.
     */
    Bitmap getCurrentlyDisplayedBitmap() const
    {
        return (pressed ? down : up);
    }
 
    /**
     * @fn void CustomButtonContainer::setPressed(bool isPressed)
     *
     * @brief Sets the pressed state.
     *
     * @param isPressed True if is pressed, false if not.
     */
    void setPressed(bool isPressed)
    {
        pressed = isPressed;
        handlePressedUpdated();
    }
 
    /**
     * @fn bool CustomButtonContainer::getPressed()
     *
     * @brief Gets the pressed state.
     *
     * @return True if it succeeds, false if it fails.
     */
    bool getPressed()
    {
        return pressed;
    }
 
    /**
     * @fn void CustomButtonContainer::setAlpha(uint8_t newAlpha)
     *
     * @brief Sets an alpha value.
     *
     * @param newAlpha The new alpha.
     */
    void setAlpha(uint8_t newAlpha)
    {
        alpha = newAlpha;
        handleAlphaUpdated();
    }
 
    /**
     * @fn uint8_t CustomButtonContainer::getAlpha() const
     *
     * @brief Gets the alpha.
     *
     * @return The alpha value.
     */
    uint8_t getAlpha() const
    {
        return alpha;
    }
 
    /**
     * @fn void CustomButtonContainer::setAction(GenericCallback< const CustomButtonContainer&, bool& >& callback)
     *
     * @brief Sets an action callback.
     *
     * @param callback The callback.
     */
    void setAction(GenericCallback< const CustomButtonContainer&, bool& >& callback)
    {
        action = &callback;
    }
 
    /**
     * @fn virtual void CustomButtonContainer::handleClickEvent(const ClickEvent& event)
     *
     * @brief Handles the click event described by event.
     *
     * @param event The event.
     */
    virtual void handleClickEvent(const ClickEvent& event)
    {
        bool wasPressed = getPressed();
        bool newPressedValue = (event.getType() == ClickEvent::PRESSED);
        if ((newPressedValue && !wasPressed) || (!newPressedValue && wasPressed))
        {
            setPressed(newPressedValue);
            invalidate();
            if (action->isValid())
            {
                action->execute(*this, pressed);
            }
        }
    }
 
    
protected:
    bool pressed;        ///< True if pressed
    uint8_t alpha;       ///< The current alpha value. 255 denotes solid, 0 denotes completely transparent.
    Image buttonImage; ///< The button image
    Bitmap  up;        ///< The image to display when button is released.
    Bitmap  down;      ///< The image to display when button is pressed.
 
    GenericCallback< const CustomButtonContainer&, bool&>* action;  ///< The action
 
    /**
     * @fn virtual void CustomButtonContainer::handlePressedUpdated()
     *
     * @brief Handles the pressed updated.
     */
    virtual void handlePressedUpdated() 
    {
        buttonImage.setBitmap(pressed ? down : up);
    }
 
    /**
     * @fn virtual void CustomButtonContainer::handleAlphaUpdated()
     *
     * @brief Handles the alpha updated.
     */
    virtual void handleAlphaUpdated()
    {
        buttonImage.setAlpha(alpha);
    }
};
 
 
} // namespace touchgfx
 
#endif // CUSTOMBUTTONCONTAINER_HPP

Screen1View.hpp

#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP
 
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <gui/common/customButtonContainer.hpp>
 
class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
protected:
    touchgfx::CustomButtonContainer customButton;
 
    Callback<Screen1View, const CustomButtonContainer&, bool&> buttonEventCallback;
 
    void handleButtonEvent(const CustomButtonContainer& element, bool& buttonState);
};
 
#endif // SCREEN1VIEW_HPP

Screen1View.cpp

#include <gui/screen1_screen/Screen1View.hpp>
#include "BitmapDatabase.hpp"
 
Screen1View::Screen1View():
    buttonEventCallback(this, &Screen1View::handleButtonEvent)
{
    customButton.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_MEDIUM_ID), Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_MEDIUM_PRESSED_ID));
    customButton.setBitmapXY(0, 0);
    customButton.setPosition(285, 200, 230, 60);
 
    add(customButton);
 
    customButton.setAction(buttonEventCallback);
}
 
void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
}
 
void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}
 
void Screen1View::handleButtonEvent(const CustomButtonContainer& element, bool& buttonState)
{
    if(buttonState)
    {
        touchgfx_printf("pressed\n");
    }
    else
    {
        touchgfx_printf("released\n");
    }
}

You can try with this code first, but make sure the designer knows the bitmaps you're using for the button.

Just to be clear, it is only a rough example and not an official solution

Hope it will help

/Alexandre

[dave23]

Hi Alexandre

Thanks for your reply. This gives me a good idea on how to make my own solution. I have one question though, why is the initialization code and the add() function for the custom button inside buttonEventCallback()? Shouldn't it be in setupScreen()?

I don't really understand the point of 3 callbacks when a button has only 2 states : pressed and released. Press and button down is not supposed to be the same ?

The graphics library I was working with previously is using 4 callbacks. It detects the two states plus the transitions from one state to the other. It basically calls "button_pressed" once on the first frame where the button is touched, then all subsequent frames it calls "button_down" until you release the button where it calls "button_released" for a single frame and then calls "button_up". Of course you can code it yourself using just the 2 states but I found it convenient to have the library do it automatically and I thought maybe touchGFX had this feature too.

[Alexandre RENOUX]

Hi Dave,

Indeed, the initialization code should be in setupScreen() as this function is called everytime you enter this view. My project was really simple, therefore putting it in the constructor does not make any difference as I have only one screen. But just like you said, it is good practice to write the initialization code in setupScreen() instead.

Ok I understand the idea between 3 or 4 callbacks now. TouchGFX does not have this feature. This has to be implemented by the developer.

/Alexandre

[dave23]

Thanks for these precisions. I must admit, my C++ is kinda rusty and I thought at first that buttonEventCallback() was declared as a function of the class Screen1View, but now that I read the code carefully, I see that the callback function is initialized as a part of the constructor and the the code is actually in the constructor function and not in the callback function.

[PCu1]

Hi Alexandre,

In my project I will have a button Matrix.

It is more a C++ question but do I have to write a handle Event for each button?

It is possible to get the button ID in callback to avoid this?

MainView::MainView(): buttonEventCallback1_1(this, &MainView::handleButtonEvent1_1), buttonEventCallback1_2(this, &MainView::handleButtonEvent1_2)
{
 
}
 
 
void MainView::setupScreen()
{
	button1_1.setBitmaps(Bitmap(BITMAP_I_48X48_ICON05_ID),
			Bitmap(BITMAP_I_48X48_ICON05_GREY_ID));
	button1_1.setBitmapXY(0, 0);
	button1_1.setPosition(30, 300, 48, 48);
 
 
	add(button1_1);
	button1_1.setAction(buttonEventCallback1_1);
 
 
 
	button1_2.setBitmaps(Bitmap(BITMAP_I_48X48_ICON09_ID),
			Bitmap(BITMAP_I_48X48_ICON09_GREY_ID));
	button1_2.setBitmapXY(0, 0);
	button1_2.setPosition(200, 300, 48, 48);
	add(button1_2);
	button1_2.setAction(buttonEventCallback1_2);
}
 
void MainView::tearDownScreen()
{
}
 
void MainView::handleButtonEvent1_1(const CustomButtonContainer& element, bool& buttonState)
{
	if(buttonState)
    {
        touchgfx_printf("1_1 pressed\n");
        presenter->sendstate(1 << 0);
    }
    else
    {
        touchgfx_printf("1_1 released\n");
        presenter->sendstate(0);
    }
}
 
void MainView::handleButtonEvent1_2(const CustomButtonContainer& element, bool& buttonState)
{
    if(buttonState)
    {
        touchgfx_printf("1_2 pressed\n");
        presenter->sendstate(1 << 1);
    }
    else
    {
        touchgfx_printf("1_2 released\n");
        presenter->sendstate(0);
    }
}

Pierre

[Alexandre RENOUX]

Hi Pierre,

You create all the buttons you want and then you call the setAction() function for every button and put the same eventCallback. Then you just have to differentiate the different elements with if cases or switch cases in the EventHandler.

button1_1.setAction(buttonEventCallback);
button1_2.setAction(buttonEventCallback);
button1_3.setAction(buttonEventCallback);
button1_4.setAction(buttonEventCallback);
button1_5.setAction(buttonEventCallback);

void MainView::handleButtonEvent(const CustomButtonContainer& element, bool& buttonState)
{
	if(&element == &button1_1)
    {
        touchgfx_printf("1_1 pressed\n");
    }
    else if(&element == &button1_2)
    {
        touchgfx_printf("1_2 pressed\n");
    }
}

\Alexandre

[PCu1]

Thank you Alexandre, it works 😉 .

[VPana.1]

Hi  Alexandre,

I am actually new to the TouchGFX environment. In my application, i need a button having both states (pressed and released.)

I have gone through the above posts and i've implemented the same in my application.

Able to create the button but functionality of pressed and released states are not working.

Below are code snippets:

//CustomButtonContainer.hpp
#ifndef CUSTOMBUTTONCONTAINER_HPP
#define CUSTOMBUTTONCONTAINER_HPP
 
#include <gui_generated/containers/CustomButtonContainerBase.hpp>
#include <touchgfx/containers/Container.hpp>
#include <touchgfx/widgets/Image.hpp>
 
namespace touchgfx
{
class CustomButtonContainer : public CustomButtonContainerBase
{
public:
    //CustomButtonContainer();
 
    virtual ~CustomButtonContainer() {}
 
    virtual void initialize();
    /**
         * @fn CustomButtonContainer::CustomButtonContainer()
         *
         * @brief Default constructor.
         */
    CustomButtonContainer() : pressed(false), alpha(255), up(), down(), action(0)
    {
        setTouchable(true);
        buttonImage.setXY(0, 0);
        add(buttonImage);
    }
 
 
	    /**
     * @fn virtual void CustomButtonContainer::setBitmaps(const Bitmap& bmpReleased, const Bitmap& bmpPressed)
     *
     * @brief Sets the bitmaps.
     *
     * @param bmpReleased The bitmap released.
     * @param bmpPressed  The bitmap pressed.
     */
    virtual void setBitmaps(const Bitmap& bmpReleased, const Bitmap& bmpPressed)
    {
        up = bmpReleased;
        down = bmpPressed;
        setWidth(down.getWidth());
        setHeight(down.getHeight());
 
        handlePressedUpdated();
    }
 
    /**
     * @fn void CustomButtonContainer::setBitmapXY(uint16_t x, uint16_t y)
     *
     * @brief Sets bitmap xy.
     *
     * @param x An uint16_t to process.
     * @param y An uint16_t to process.
     */
    void setBitmapXY(uint16_t x, uint16_t y)
    {
        buttonImage.setXY(x, y);
    }
 
    /**
     * @fn Bitmap CustomButtonContainer::getCurrentlyDisplayedBitmap() const
     *
     * @brief Gets currently displayed bitmap.
     *
     * @return The currently displayed bitmap.
     */
    Bitmap getCurrentlyDisplayedBitmap() const
    {
        return (pressed ? down : up);
    }
 
    /**
     * @fn void CustomButtonContainer::setPressed(bool isPressed)
     *
     * @brief Sets the pressed state.
     *
     * @param isPressed True if is pressed, false if not.
     */
    void setPressed(bool isPressed)
    {
        pressed = isPressed;
        handlePressedUpdated();
    }
 
    /**
     * @fn bool CustomButtonContainer::getPressed()
     *
     * @brief Gets the pressed state.
     *
     * @return True if it succeeds, false if it fails.
     */
    bool getPressed()
    {
        return pressed;
    }
 
    /**
     * @fn void CustomButtonContainer::setAlpha(uint8_t newAlpha)
     *
     * @brief Sets an alpha value.
     *
     * @param newAlpha The new alpha.
     */
    void setAlpha(uint8_t newAlpha)
    {
        alpha = newAlpha;
        handleAlphaUpdated();
    }
 
    /**
     * @fn uint8_t CustomButtonContainer::getAlpha() const
     *
     * @brief Gets the alpha.
     *
     * @return The alpha value.
     */
    uint8_t getAlpha() const
    {
        return alpha;
    }
 
    /**
     * @fn void CustomButtonContainer::setAction(GenericCallback< const CustomButtonContainer&, bool& >& 
callback)
     *
     * @brief Sets an action callback.
     *
     * @param callback The callback.
     */
    void setAction(GenericCallback< const CustomButtonContainer&, bool& >& callback)
    {
        action = &callback;
    }
 
    /**
     * @fn virtual void CustomButtonContainer::handleClickEvent(const ClickEvent& event)
     *
     * @brief Handles the click event described by event.
     *
     * @param event The event.
     */
    virtual void handleClickEvent(const ClickEvent& event)
    {
        bool wasPressed = getPressed();
        bool newPressedValue = (event.getType() == ClickEvent::PRESSED);
 
        if ((newPressedValue && !wasPressed) || (!newPressedValue && wasPressed))
        {
            setPressed(newPressedValue);
            invalidate();
            if (action->isValid())
            {
                action->execute(*this, pressed);
            }
        }
    }
protected:
 bool pressed;        ///< True if pressed
    uint8_t alpha;       ///< The current alpha value. 255 denotes solid, 0 denotes completely transparent.
    Image buttonImage; ///< The button image
    Bitmap  up;        ///< The image to display when button is released.
    Bitmap  down;      ///< The image to display when button is pressed.
 
    GenericCallback< const CustomButtonContainer&, bool&>* action;  ///< The action
 
    /**
     * @fn virtual void CustomButtonContainer::handlePressedUpdated()
     *
     * @brief Handles the pressed updated.
     */
    virtual void handlePressedUpdated() 
    {
        buttonImage.setBitmap(pressed ? down : up);
    }
 
    /**
     * @fn virtual void CustomButtonContainer::handleAlphaUpdated()
     *
     * @brief Handles the alpha updated.
     */
    virtual void handleAlphaUpdated()
    {
        buttonImage.setAlpha(alpha);
    }
  };
}
#endif // CUSTOMBUTTONCONTAINER_HPP
//---------------------------------------------------------------------------------------------
#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP
 
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
#include <gui_generated/containers/CustomButtonContainerBase.hpp>
#include <gui/containers/CustomButtonContainer.hpp>
 
class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
protected:
   touchgfx::CustomButtonContainer button2;
   
   Callback<Screen1View, const CustomButtonContainer&, bool&> buttonEventCallback;
 
   void handleButtonEvent(const CustomButtonContainer& element, bool& buttonState);
};
 
#endif // SCREEN1VIEW_HPP
 
//----------------------------------------------------------------------------------------
 
Screen1View::Screen1View():buttonEventCallback(this, &Screen1View::handleButtonEvent)
{
	button2.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID),Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
    button2.setBitmapXY(0, 0);
    button2.setPosition(165, 100, 230, 60);
 
    add(button2);
	button2.setAction(buttonEventCallback);
	touchgfx_printf("Button Created\r\n");
	
}
 
void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
	
//	button2.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_ID),Bitmap(BITMAP_BLUE_BUTTONS_ROUND_EDGE_SMALL_PRESSED_ID));
//    button2.setBitmapXY(0, 0);
//    button2.setPosition(165, 100, 230, 60);
//
//    add(button2);
//	button2.setAction(buttonEventCallback);
//	touchgfx_printf("Button Created\r\n");
}
 
void Screen1View::tearDownScreen()
{
    Screen1ViewBase::tearDownScreen();
}
 
void Screen1View::handleButtonEvent(const CustomButtonContainer& element, bool& buttonState)
{
    if(&element == &button2)
    {
    	//HAL_GPIO_WritePin(LED1_GPIO_Port, LED1_Pin, GPIO_PIN_SET);
    	touchgfx_printf("Button Pressed\r\n");
    }
    else
    {
    	//HAL_GPIO_WritePin(LED1_GPIO_Port, LED1_Pin, GPIO_PIN_RESET);
    	touchgfx_printf("Button Released\r\n");
    }
}
 

Could you please help me

[Alexandre RENOUX]

Hello VPana.1,

Please refer to the enclosed project (working on 4.15)

/Alexandre