864|6

6842

帖子

11

TA的资源

版主

【STM32H7S78-DK】手撸一个数字键盘 [复制链接]

本帖最后由 lugl4313820 于 2024-10-20 16:07 编辑

【前言】

touchgfx 是一个优秀的图形界面,在用户交互中,数字键盘非常重要,本篇是基于STM32H7S78的TouchGFX实现的一款数字键盘。

【开发工具】

TouchGFX Desiger 4.24.1

【开发步骤】

1、打开TouchGFX Desiger 新建一个基于STM32H7S78-DK的基础工程:

image.png   2、新建一个自定义容器,命名为Keyboard:

image.png   3、准备一张数字键盘的背景图片,将他放入工程目录:\KeyBoard\Appli\TouchGFX\assets\images之下。

image.png   4、添加一张图片,图片指向这张背图片:

image.png   5、添加一个box控件到1上面,并把透明度调到0。

image.png   6、复制这个box,分别放到对应的数字键盘之上。并按下图所示重命名box的名称:

image.png  

  7、添加一个textArear到Keyboard界面,并按下图重命名为textNum,用于存放输出结果:

image.png   8、钩选ClickListener,使能可以捕捉box的事件。

image.png  

9、在screen1的界面把这个keyboard添加进桌面。并同时添加两个box,用于捕捉按键,再添加两个textArea用于显示输入数据的结果。

image.png 10、添加OK按下后事件发送函数,实现与其他窗体的交互:

image.png    

11、生成工程后使用模拟器观察无误:

image.png  

【用户代码实现】

1、首先需要设定回调函数,以及将操作对象绑定到相应的控件上面。首先需要在keyboard.hpp文件中添加函数的声明,以及一些变量的声明,在KeyBoard.hpp上添加代码如下:

    virtual void ButtonClickHandle(const Box& box,const ClickEvent& evt);  //
		Callback<KeyBoard, const Box&, const ClickEvent&> ButtonCallBack;
		int key_value;
        uint8_t set_index;

2、在Keyboard.cpp中添加实现回调函数的注册代码:

KeyBoard::KeyBoard():
ButtonCallBack(this, &KeyBoard::ButtonClickHandle)
{

}

3、接下来我们来分析一下在这个回调函数里面我们需要做点什么,第一点,你需要判断是哪一个按键摁下,不同的按键有不同的事件处理机制,其次你还要将输入的键值显示在设定的input text上面,同时你还需要考虑怎么实现错误删除,以及清空等操作!其实现代码如下:


void KeyBoard::ButtonClickHandle(const Box& box,const ClickEvent& evt)
{
    static uint8_t index;
    static uint32_t num_value;
    touchgfx::ClickEvent::ClickEventType type = evt.getType();
	if(type == touchgfx::ClickEvent::PRESSED)      //这里是判断事件类型,EVENT_CLICK属于点击事件
      {

            if(&box == &num1)
            {
                key_value = 1;
            }else if(&box == &num2){
                key_value = 2;
            }else if(&box == &num3){
                key_value = 3;
            }else if(&box == &num4){
                key_value = 4;
            }else if(&box == &num5){
                key_value = 5;
            }else if(&box == &num6){
                key_value = 6;
            }else if(&box == &num7){
                key_value = 7;
            }else if(&box == &num8){
                key_value = 8;
            }else if(&box == &num9){
                key_value = 9;
            }else if(&box == &num0){
                key_value = 0;
            }else if(&box == &num_del){
                key_value = -1;
            }else if(&box == &num_ok){
                key_value = -2;
            }else if(&box == &num_cancel){
                key_value = -3;
            }else if(&box == &num_dot){
                key_value = -5;
            }

            if(key_value >= 0){
                if(index<5){
                    num_value =  num_value*10 + key_value;
                    Unicode::snprintf(textNumBuffer, TEXTNUM_SIZE, "%d",num_value);
                    textNum.invalidate();
                }
            }else if(key_value == -1)
            {
                num_value = num_value/10;
                Unicode::snprintf(textNumBuffer, TEXTNUM_SIZE, "%d",num_value);
                textNum.invalidate();
            }else if(key_value == -3)
            {
                num_value = 0;
                Unicode::snprintf(textNumBuffer, TEXTNUM_SIZE, "%d",num_value);
                textNum.invalidate();
            }else if(key_value == -2)
            {
                emitKeyValueTransforCallback(num_value);
            }

      }

}

4、在初始时注册box的按下回调函数,代码如下:

void KeyBoard::initialize()
{
    KeyBoardBase::initialize();
    num0.setClickAction(ButtonCallBack);
    num1.setClickAction(ButtonCallBack);
    num2.setClickAction(ButtonCallBack);
    num3.setClickAction(ButtonCallBack);
    num4.setClickAction(ButtonCallBack);
    num5.setClickAction(ButtonCallBack);
    num6.setClickAction(ButtonCallBack);
    num7.setClickAction(ButtonCallBack);
    num8.setClickAction(ButtonCallBack);
    num9.setClickAction(ButtonCallBack);
    num_del.setClickAction(ButtonCallBack);
    num_ok.setClickAction(ButtonCallBack);
    num_cancel.setClickAction(ButtonCallBack);
    num_dot.setClickAction(ButtonCallBack);
}

5、同样,在screenView.hpp中先定义虚拟函数与回调函数:

    virtual void ButtonClickHandle(const Box& box,const ClickEvent& evt);
    Callback<KeyBoard, const Box&, const ClickEvent&> ButtonCallBack;
    virtual void setValue(uint32_t value);

6、在screen1View.cpp的类中注册回调函数:

SettingScreenView::SettingScreenView():
        ButtonCallBack(this, &SettingScreenView::ButtonClickHandle)
{

}

7、把box的按键事在屏幕载入时注册好:

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
    box2.setClickAction(ButtonCallBack);
    box3.setClickAction(ButtonCallBack);
}

8、添加按键回调函数的实现:

void SettingScreenView::ButtonClickHandle(const Box& box,const ClickEvent& evt) {
    touchgfx::ClickEvent::ClickEventType type = evt.getType();
    if (type == touchgfx::ClickEvent::PRESSED)
    {
        if(&box == &box2)
        {
            keyBoard1.set_index = 1;
            keyBoard1.moveTo(0,0);
        }else if(&box == &box3)
        {
            keyBoard1.set_index = 2;
            keyBoard1.moveTo(0,0);
        }
    }
}

9、在TouchGFX Designer中注册一个接收KeyBoard的函数:

image.png   10、在回调中,把返回的数据更新到指定的textArear中

void SettingScreenView::setValue(uint32_t value)
{
    if(keyBoard1.set_index == 1)
    {
        Unicode::snprintf(textArea1Buffer, 10, "%d", value);
        keyBoard1.moveTo(0,500);
        textArea1.invalidate();
    }
    else if(keyBoard1.set_index == 2)
    {
        Unicode::snprintf(textArea2Buffer, 10, "%d", value);
        keyBoard1.moveTo(0,500);
        textArea2.invalidate();
    }

}

【实现效果】

在摸拟器中运行,结果如下:

image.png   视频效果如下:

摸拟器运行

附工程源码如下:

STM32H7S78-DK TouchGFX数字键盘-嵌入式开发相关资料下载-EEWORLD下载中心

 

此帖出自stm32/stm8论坛

最新回复

touchGFX    使用需要的资源多吗?STM32F207/407能不能用?   详情 回复 发表于 2024-10-23 12:24

回复
举报

6636

帖子

0

TA的资源

五彩晶圆(高级)

咋样,计算上有没有bug

此帖出自stm32/stm8论坛

点评

只做了界面,计算还没有弄,只是记录了一下数据交互。  详情 回复 发表于 2024-10-20 16:05

回复

6842

帖子

11

TA的资源

版主

Jacktang 发表于 2024-10-20 08:58 咋样,计算上有没有bug

只做了界面,计算还没有弄,只是记录了一下数据交互。

此帖出自stm32/stm8论坛

回复

632

帖子

0

TA的资源

纯净的硅(高级)

好厉害啊

此帖出自stm32/stm8论坛

点评

感谢大佬的肯定,touchGFX的界面设计还是非常有想法的。  详情 回复 发表于 2024-10-23 07:09

回复

6842

帖子

11

TA的资源

版主

感谢大佬的肯定,touchGFX的界面设计还是非常有想法的。

此帖出自stm32/stm8论坛

回复

104

帖子

0

TA的资源

一粒金砂(中级)

touchGFX    使用需要的资源多吗?STM32F207/407能不能用?

此帖出自stm32/stm8论坛

点评

都可以吧,资源小的不能驱动大屏。  详情 回复 发表于 2024-10-23 14:36

回复

6842

帖子

11

TA的资源

版主

inkinessray 发表于 2024-10-23 12:24 touchGFX    使用需要的资源多吗?STM32F207/407能不能用?

都可以吧,资源小的不能驱动大屏。

此帖出自stm32/stm8论坛

回复
您需要登录后才可以回帖 登录 | 注册

随便看看
查找数据手册?

EEWorld Datasheet 技术支持

相关文章 更多>>
关闭
站长推荐上一条 1/10 下一条

 
EEWorld订阅号

 
EEWorld服务号

 
汽车开发圈

About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

站点相关: 国产芯 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

北京市海淀区中关村大街18号B座15层1530室 电话:(010)82350740 邮编:100190

电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2024 EEWORLD.com.cn, Inc. All rights reserved
快速回复 返回顶部 返回列表