【TouchGFX 设计】(3) 简易波形显示--基于C++

supermiao123 发表于 2019-4-9 20:32

<div class='showpostmsg'> 这次测评准备再深入一点，光界面设置的话发挥不了TouchGFX的能力，还是要编程的。最先开始先继续上篇的，上篇计划做一个通过上下左右按键可以使小红圈上下左右移动，但是由于要编程，放弃了这个想法，改为直接上下左右按键控制小红圈去指定位置，这个操作TouchGFX界面可以直接完成。这次把上次没完成的继续完善一下吧。首先，在\TouchGFX\simulator\msvs\路径下打开Application.sln 。在Screen1ViewBase.cpp中修改下面的函数
unsigned int t={300,100};

void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
if (&src == &buttonWithLabel_L)
{
   //Interaction4
   //When buttonWithLabel_L clicked move circle1
   //Move circle1 to x:280, y:100 with LinearIn easing in 1000 ms (60 Ticks)
   circle1.clearMoveAnimationEndedAction();
if(t>10)t-=10;
   circle1.startMoveAnimation(t, t, 1, EasingEquations::linearEaseIn, EasingEquations::linearEaseIn);
}
else if (&src == &buttonWithLabel_R)
{
   //Interaction3
   //When buttonWithLabel_R clicked move circle1
   //Move circle1 to x:320, y:100 with LinearIn easing in 1000 ms (60 Ticks)
   circle1.clearMoveAnimationEndedAction();
if(t<470)t+=10;
   circle1.startMoveAnimation(t, t, 1, EasingEquations::linearEaseIn, EasingEquations::linearEaseIn);
}
else if (&src == &buttonWithLabel_U)
{
   //Interaction2
   //When buttonWithLabel_U clicked move circle1
   //Move circle1 to x:300, y:80 with LinearIn easing in 1000 ms (60 Ticks)
   circle1.clearMoveAnimationEndedAction();
if(t>10)t-=10;
   circle1.startMoveAnimation(t, t, 1, EasingEquations::linearEaseIn, EasingEquations::linearEaseIn);
}
else if (&src == &buttonWithLabel_D)
{
   //Interaction1
   //When buttonWithLabel_D clicked call virtual function
   //Call ButtonUCallFunc
   circle1.clearMoveAnimationEndedAction();
if(t<260)t+=10;
   circle1.startMoveAnimation(t, t, 1, EasingEquations::linearEaseIn, EasingEquations::linearEaseIn);
}
}

代码很简单，根据按键指令来控制圈圈移动。
效果如下图，视频见附件。

现在的控制可以在指定范围内连续移动，也算是做好了一个简单的应用。
由于一直想做一个可以显示波形的应用，这次就实现一下吧，应用的功能暂时就定为根据按键可以显示指定的波形。

第一步，先做个界面，放LOGO，放按键，三个按键分别显示SIN,SQR,TRI，功能是点击显示正弦，方波，和三角波。
界面做完了就生成代码。
路径上面讲过了。
在<gui/screen1_screen/Screen1ViewBase.hpp>中包含#include <touchgfx/widgets/PixelDataWidget.hpp>头文件
这里利用PixelDataWidget这个控件来显示波形。
class Screen1ViewBase : public touchgfx::View<Screen1Presenter>
{
public:
Screen1ViewBase();
virtual ~Screen1ViewBase() {}

virtual void setupScreen();

protected:
FrontendApplication& application() {
   return *static_cast<FrontendApplication*>(Application::getInstance());
}

/*
* Member Declarations
*/
touchgfx::Box box1;
touchgfx::BoxWithBorder boxWithBorder_WAV;
touchgfx::Image image;
touchgfx::ButtonWithLabel buttonWithLabel_SIN;
touchgfx::ButtonWithLabel buttonWithLabel_SQR;
touchgfx::ButtonWithLabel buttonWithLabel_TRI;

private:

/*
* Callback Handler Declarations
*/
void buttonCallbackHandler(const touchgfx::AbstractButton& src);

/*
* Callback Declarations
*/
touchgfx::Callback<Screen1ViewBase, const touchgfx::AbstractButton&> buttonCallback;
touchgfx::PixelDataWidget pixelDataWidget;

};

在上面的类中添加touchgfx::PixelDataWidget pixelDataWidget;
在Screen1ViewBase.cpp中包含
#include "math.h"
定义控件宽度和高度
#define PIXEL_W 200
#define PIXEL_H 150

还有按键标志位unsigned char button_flag=0;

Screen1ViewBase::Screen1ViewBase() :函数内容如下，添加控件相关属性。
Screen1ViewBase::Screen1ViewBase() :
buttonCallback(this, &Screen1ViewBase::buttonCallbackHandler)
{
box1.setPosition(0, 0, 480, 272);
box1.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));

boxWithBorder_WAV.setPosition(189, 52, 200, 150);
boxWithBorder_WAV.setColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
boxWithBorder_WAV.setBorderColor(touchgfx::Color::getColorFrom24BitRGB(36, 141, 176));
boxWithBorder_WAV.setBorderSize(10);

image.setXY(0, 0);
image.setBitmap(Bitmap(BITMAP_STLOGO_ID));

buttonWithLabel_SIN.setXY(404, 22);
buttonWithLabel_SIN.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID));
buttonWithLabel_SIN.setLabelText(TypedText(T_SINGLEUSEID1));
buttonWithLabel_SIN.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_SIN.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_SIN.setAction(buttonCallback);

buttonWithLabel_SQR.setXY(404, 97);
buttonWithLabel_SQR.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID));
buttonWithLabel_SQR.setLabelText(TypedText(T_SINGLEUSEID2));
buttonWithLabel_SQR.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_SQR.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_SQR.setAction(buttonCallback);

buttonWithLabel_TRI.setXY(404, 178);
buttonWithLabel_TRI.setBitmaps(Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID), Bitmap(BITMAP_BLUE_BUTTONS_ROUND_ICON_BUTTON_ID));
buttonWithLabel_TRI.setLabelText(TypedText(T_SINGLEUSEID3));
buttonWithLabel_TRI.setLabelColor(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_TRI.setLabelColorPressed(touchgfx::Color::getColorFrom24BitRGB(255, 255, 255));
buttonWithLabel_TRI.setAction(buttonCallback);

pixelDataWidget.setPosition(189, 52, PIXEL_W, PIXEL_H);
pixelDataWidget.setPixelData((uint8_t*)HAL::getInstance()->getAnimationStorage());
pixelDataWidget.setBitmapFormat(Bitmap::ARGB8888);

unsigned char *pixe_data=(uint8_t*)HAL::getInstance()->getAnimationStorage();
for(int j=0;j<PIXEL_H;j++)
for(int i=0;i<PIXEL_W;i++)
{
pixe_data = 255;
         pixe_data = 255;
         pixe_data = 255;
         pixe_data = 255;
}

add(box1);
add(boxWithBorder_WAV);
add(image);
add(buttonWithLabel_SIN);
add(buttonWithLabel_SQR);
add(buttonWithLabel_TRI);
add(pixelDataWidget);
}
最后在按键回调函数中编写相关代码。
void Screen1ViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
unsigned int sindata={0};
if (&src == &buttonWithLabel_SIN)
{
for(int t=0;t<PIXEL_W;t++)
sindata=(unsigned int)(sinf(3.14159f*2*t/PIXEL_W)*(PIXEL_H/2)+(PIXEL_H/2));
   //Interaction1
   //When buttonWithLabel_SIN clicked change color of boxWithBorder_WAV
   //Set RGB color R:217, G:127, B:127 on boxWithBorder_WAV
   boxWithBorder_WAV.setColor(touchgfx::Color::getColorFrom24BitRGB(217,127,127));
   boxWithBorder_WAV.invalidate();

}
else if (&src == &buttonWithLabel_SQR)
{
   //Interaction2
   //When buttonWithLabel_SQR clicked change color of boxWithBorder_WAV
   //Set RGB color R:115, G:108, B:108 on boxWithBorder_WAV
for(int t=0;t<PIXEL_W/3;t++)
{
sindata=10;
sindata=140;
sindata=10;

}

   boxWithBorder_WAV.setColor(touchgfx::Color::getColorFrom24BitRGB(115,108,108));
   boxWithBorder_WAV.invalidate();
button_flag=2;
}
else if (&src == &buttonWithLabel_TRI)
{
   //Interaction3
   //When buttonWithLabel_TRI clicked change color of boxWithBorder_WAV
   //Set RGB color R:201, G:201, B:42 on boxWithBorder_WAV
for(int t=0;t<PIXEL_W/3;t++)
{
sindata=(unsigned int)(t*2.24);
sindata=PIXEL_H-(unsigned int)(t*2.24);
sindata=(unsigned int)(t*2.24);

}
   boxWithBorder_WAV.setColor(touchgfx::Color::getColorFrom24BitRGB(201,201,42));
   boxWithBorder_WAV.invalidate();
button_flag=3;
}
unsigned char *pixe_data=(uint8_t*)HAL::getInstance()->getAnimationStorage();

for(int j=0;j<PIXEL_H;j++)
for(int i=0;i<PIXEL_W;i++)
{

if(sindata==j)
{
pixe_data = 0;
pixe_data = 0;
pixe_data = 0;
pixe_data = 255;
}
else
{
pixe_data = 255;
pixe_data = 255;
pixe_data = 255;
pixe_data = 255;
}
}
if(button_flag==2)
{
for(int i=0;i<130;i++)
{
pixe_data = 0;
pixe_data = 0;
pixe_data = 0;
pixe_data = 255;

pixe_data = 0;
pixe_data = 0;
pixe_data = 0;
pixe_data = 255;
}
}
button_flag=1;
pixelDataWidget.invalidate();
}

最后编译，运行。

再之后要下到板子上，这就要用到另一个工具了。

打开后找到工程目录里的gcc路径下，输入make flash ，软件就开始自动编译生成下载估计到硬件里了。

最后看下运行效果，图片如下图，视频见附件。

此内容由EEWORLD论坛网友supermiao123原创，如需转载或用于商业用途需征得作者同意并注明出处

</div><script> var loginstr = '<div class="locked">查看本帖全部内容，请<a href="javascript:;" style="color:#e60000" class="loginf">登录</a>或者<a href="https://bbs.eeworld.com.cn/member.php?mod=register_eeworld.php&action=wechat" style="color:#e60000" target="_blank">注册</a></div>';

if(parseInt(discuz_uid)==0){
(function($){
var postHeight = getTextHeight(400);
$(".showpostmsg").html($(".showpostmsg").html());
$(".showpostmsg").after(loginstr);
$(".showpostmsg").css({height:postHeight,overflow:"hidden"});
})(jQuery);
} </script><script type="text/javascript">(function(d,c){var a=d.createElement("script"),m=d.getElementsByTagName("script"),eewurl="//counter.eeworld.com.cn/pv/count/";a.src=eewurl+c;m.parentNode.insertBefore(a,m)})(document,523)</script>

懒猫爱飞 发表于 2019-4-10 08:37

棒棒的，再往前进一步，慢慢就把示波器做出来了{:1_103:}

ddllxxrr 发表于 2019-4-10 09:01

三哥的C++功底不错啊

supermiao123 发表于 2019-4-10 09:34

懒猫爱飞发表于 2019-4-10 08:37
棒棒的，再往前进一步，慢慢就把示波器做出来了

:loveliness:谢谢，争取能做个出来

supermiao123 发表于 2019-4-10 09:34

ddllxxrr 发表于 2019-4-10 09:01
三哥的C++功底不错啊

过奖了，都是抄例程的:congratulate:

倾心思梦 发表于 2019-4-10 10:50

谢谢分享！先学习

wangyipeng97 发表于 2021-4-19 17:09

<p>能出几期其他接口的touchgfx的移植教程吗，比如FMC接口和SPI接口，串口<img height="50" src="https://bbs.eeworld.com.cn/static/editor/plugins/hkemoji/sticker/facebook/time.gif" width="55" /></p>

页: [1]

电子工程世界-论坛's Archiver

【TouchGFX 设计】(3) 简易波形显示--基于C++