Rotation effect (2) touchgfx of

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/ZenNaiHeQiao/article/details/86234076

Carousel "Carousel" effect
aim Carousel widget is to provide a beautiful carousel function, do not use a lot of MCU resources.
Carousel widget routine five visible element. However, if necessary, change.
Please note, Carousel widget uses ExtendedZoomAnimationImage.hpp. This widget can also be found in TouchGFX Open Widget Repository in. This file contains Carousel.hpp file and using the path gui / common / ExtendedZoomAnimationImage.hpp. If hpp file in another location, just include the path to change.

Material:
Links: https://pan.baidu.com/s/1rJUrUxOsWKR8XIP_24wGoQ
extraction code: 4quz
Step 1: Set background

Step two:
Check enum type Defines.hpp included

class Defines
{
public:
    enum MainMenuType
    {
        ANIMATING_BUTTONS_MENU = 0,
        CAROUSEL_MENU,
        NO_MENU
    };

    enum DemoID
    {
        GAME2048 = 0,
        GAME2D,
        CONTROLS,
        HOME_AUTOMATION,
        SETTINGS,
        NUMBER_OF_DEMO_SCREENS,
        NO_DEMO_SCREEN
    };
};

Increase public resources

Model.hpp

#include <gui/common/Defines.hpp>
...
public:
...
	Defines::DemoID getSelectedDemoScreen()
	{
		return selectedDemoScreen;
	}
	void setSelectedDemoScreen(Defines::DemoID demoId)
	{
		selectedDemoScreen = demoId;
	}
...
protected:
...
	Defines::DemoID selectedDemoScreen;  
	

MainMenuCarouselPresenter cited above function:

MainMenuCarouselPresenter.hpp

#include <gui/model/ModelListener.hpp>
...
public:
...
	void setSelectedDemoScreen(Defines::DemoID demoId);
	Defines::DemoID getSelectedDemoScreen();

MainMenuCarouselPresenter.cpp

...
Defines::DemoID MainMenuCarouselPresenter::getSelectedDemoScreen()
{
	return model->getSelectedDemoScreen();
}

void MainMenuCarouselPresenter::setSelectedDemoScreen(Defines::DemoID elementIndex)
{
	model->setSelectedDemoScreen(elementIndex);
}

MainMenuCarouselView.hpp

...
#include <touchgfx/widgets/TouchArea.hpp>
#include <texts/TextKeysAndLanguages.hpp>

#include <gui/common/Carousel.hpp>
#include <gui/common/Defines.hpp>
...
public:
...
	virtual void handleClickEvent(const ClickEvent& evt);   //和控件点击相关
	virtual void handleDragEvent(const DragEvent& evt);     //和控件的拖动相关
...
protected:
...
	enum State
	{
		ELEMENT_SELECTED,
		NO_STATE
	};

	State currentState;          //状态

	Carousel carousel;           //轮播组件定义

	Defines::DemoID demoIDs[Defines::NUMBER_OF_DEMO_SCREENS];  
	Defines::DemoID selectedDemoScreen;

	int pauses;                  //停顿
	void setupCarousel();        //建立组件函数
	Callback<MainMenuCarouselView, const Carousel&> carouselAnimationEnded;  //定义回调函数
	void carouselAnimationEndedhandler(const Carousel& c);       //回调函数        
	void setSelectedDemoScreen(Defines::DemoID demoId);         
	void gotoSelectedDemoScreen();


	int16_t dragDistance;
	bool dragInsideCarousel;
	bool dragInsideCenterButton;
	bool hasAnimatedDrag;

MainMenuCarouselView.cpp

#include <gui/mainmenucarousel_screen/MainMenuCarouselView.hpp>
#include <BitmapDatabase.hpp> //调用图片 


MainMenuCarouselView::MainMenuCarouselView():
currentState(NO_STATE),   
carouselAnimationEnded(this, &MainMenuCarouselView::carouselAnimationEndedhandler),
dragDistance(0),
dragInsideCarousel(false),
dragInsideCenterButton(false),
hasAnimatedDrag(false)
{

}


void MainMenuCarouselView::setupScreen()
{
	setupCarousel();
	add(carousel);
}

void MainMenuCarouselView::tearDownScreen()
{
    MainMenuCarouselViewBase::tearDownScreen();
}




void MainMenuCarouselView::handleClickEvent(const ClickEvent& evt)
{

	if (evt.getType() == ClickEvent::PRESSED)
	{
		dragDistance = 0;
		hasAnimatedDrag = false;
		dragInsideCarousel = carousel.getAbsoluteRect().intersect(evt.getX(), evt.getY());
		dragInsideCenterButton = Rect(carousel.getX() + ((carousel.getWidth() - 150) / 2), carousel.getY() + ((carousel.getHeight() - 150) / 2), 150, 150).intersect(evt.getX(), evt.getY());
	}
	else if (evt.getType() == ClickEvent::RELEASED)
	{
		if (dragInsideCarousel && !hasAnimatedDrag)
		{
			if (dragInsideCenterButton)
			{
				currentState = ELEMENT_SELECTED;
				pauses = 4;
				carousel.highlightSelectedElement();
			}
			else if (evt.getX() < carousel.getX() + carousel.getWidth() / 2)
			{
				carousel.selectedPrevious();
			}
			else
			{
				carousel.selectedNext();
			}
		}
	}

	View::handleClickEvent(evt);
}




void MainMenuCarouselView::handleDragEvent(const DragEvent& evt)
{

	View::handleDragEvent(evt);

	if (dragInsideCarousel)
	{
		dragDistance += evt.getDeltaX();

		if (abs(dragDistance) > 30)
		{
			dragDistance = 0;
			hasAnimatedDrag = true;
			if (abs(evt.getDeltaX()) > 0)
			{
				if (evt.getDeltaX() < 0)
				{
					carousel.selectedNext();
				}
				else
				{
					carousel.selectedPrevious();
				}
			}
		}
	}

}






//建立画面
void MainMenuCarouselView::setupCarousel()
{
	carousel.setPosition(162, 192, 470, 180);
	carousel.setCarouselAnimationEndedCallback(carouselAnimationEnded);  //回调函数 ，用于轮播动画结束

	// The y position difference between the images          
	uint16_t yDiff = 4;  //基准y值高度

	// 首先计算出图片的宽度
	uint16_t widthOfSmallElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID).getWidth();
	uint16_t widthOfMediumElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID).getWidth();
	uint16_t widthOfLargeElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID).getWidth();
	uint16_t widthOfInvisibleElements = widthOfSmallElements - 30;
	// 其次计算出图片的高度
	uint16_t heightOfSmallElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID).getHeight();
	uint16_t heightOfMediumElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID).getHeight();
	uint16_t heightOfLargeElements = Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID).getHeight();
	uint16_t heightOfInvisibleElements = heightOfSmallElements - 30;

	uint16_t offsetWidthForInvisibleEndElements = 20;
	uint16_t visibleWidthOfSmallElements = 50;
	uint16_t visibleWidthOfMediumElements = 80;
	carousel.setPositionOfCarouselElement(0, 0,
		(3 * yDiff), widthOfInvisibleElements, heightOfInvisibleElements);

	carousel.setPositionOfCarouselElement(1, offsetWidthForInvisibleEndElements,
		(2 * yDiff), widthOfSmallElements, heightOfSmallElements);

	carousel.setPositionOfCarouselElement(2, carousel.getXPositionOfVisibleElement(1) + visibleWidthOfSmallElements,
		yDiff + 4, widthOfMediumElements, heightOfMediumElements);

	carousel.setPositionOfCarouselElement(3, carousel.getXPositionOfVisibleElement(2) + visibleWidthOfMediumElements,
		0, widthOfLargeElements, heightOfLargeElements);

	carousel.setPositionOfCarouselElement(4, carousel.getXPositionOfVisibleElement(3) + widthOfLargeElements - widthOfMediumElements + visibleWidthOfMediumElements,
		yDiff + 4, widthOfMediumElements, heightOfMediumElements);

	carousel.setPositionOfCarouselElement(5, carousel.getXPositionOfVisibleElement(4) + widthOfMediumElements - widthOfSmallElements + visibleWidthOfSmallElements,
		(2 * yDiff), widthOfSmallElements, heightOfSmallElements);

	carousel.setPositionOfCarouselElement(6, carousel.getXPositionOfVisibleElement(5) + offsetWidthForInvisibleEndElements + 20,
		(3 * yDiff), widthOfInvisibleElements, heightOfInvisibleElements);

	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_2048_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_CONTROLS_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_GAME_2D_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_HOME_AUTOMATION_LARGE_ID));
	carousel.addElement(Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_SMALL_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_MEDIUM_ID), Bitmap(BITMAP_CAROUSEL_MENU_ICONS_SETTINGS_LARGE_ID));

	demoIDs[0] = Defines::GAME2048;  //ID 数组
	//headlines[0] = T_CAROUSEL_GAME_2048_HEADLINE;
	//texts[0] = T_CAROUSEL_GAME_2048_TEXT;

	demoIDs[1] = Defines::CONTROLS;
	//headlines[1] = T_CAROUSEL_CONTROLS_HEADLINE;
	//texts[1] = T_CAROUSEL_CONTROLS_TEXT;

	demoIDs[2] = Defines::GAME2D;
	//headlines[2] = T_CAROUSEL_GAME_2D_HEADLINE;
	//texts[2] = T_CAROUSEL_GAME_2D_TEXT;

	demoIDs[3] = Defines::HOME_AUTOMATION;
	//headlines[3] = T_CAROUSEL_HOME_AUTOMATION_HEADLINE;
	//texts[3] = T_CAROUSEL_HOME_AUTOMATION_TEXT;

	demoIDs[4] = Defines::SETTINGS;
	//headlines[4] = T_CAROUSEL_SETTINGS_HEADLINE;
	//texts[4] = T_CAROUSEL_SETTINGS_TEXT;

	// Set the carousel to the element that was selected last
	for (int i = 0; i < Defines::NUMBER_OF_DEMO_SCREENS; i++)
	{
		// Map demoId to position in carousel
		if (demoIDs[i] == presenter->getSelectedDemoScreen())
		{
			carousel.setSelectedElement(i);
		}
	}

}

//回调函数用于 页面跳转


void MainMenuCarouselView::carouselAnimationEndedhandler(const Carousel& c)
{

	if (currentState == ELEMENT_SELECTED)
	{
		if (pauses-- > 0)
		{
			//Pauses implemented by just re initiating some highlight requests
			carousel.highlightSelectedElement();
		}
		else
		{
			setSelectedDemoScreen(demoIDs[carousel.getSelectedElementIndex()]);
			gotoSelectedDemoScreen();
		}
	}
	else
	{
		// Carousel moved to previous or next element
        // pdateDemoText();
	}


}


void MainMenuCarouselView::setSelectedDemoScreen(Defines::DemoID demoId)
{

	selectedDemoScreen = demoId;

}

void MainMenuCarouselView::gotoSelectedDemoScreen()
{

	presenter->setSelectedDemoScreen(selectedDemoScreen);

	switch (selectedDemoScreen)
	{
	case Defines::GAME2048:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoGame2048ScreenNoTransition();
		break;
	case Defines::GAME2D:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoGame2DScreenNoTransition();
		break;
	case Defines::CONTROLS:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoControlsScreenNoTransition();
		break;
	case Defines::HOME_AUTOMATION:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoHomeAutomationScreenNoTransition();
		break;
	case Defines::SETTINGS:
		//static_cast<FrontendApplication*>(Application::getInstance())->gotoSettingsScreenNoTransition();
		break;
	case Defines::NUMBER_OF_DEMO_SCREENS:

	case Defines::NO_DEMO_SCREEN:
	default:
		break;
	}

}

Implementation:
carousel effect of control, and click Select.
Links: https://pan.baidu.com/s/1O8-EDeoFq4UT1VeQTGnuUg
extraction code: iozw