TouchGFX软件介绍 基本控件，交互设计与仿真（1）

devtools/2024/12/28 9:19:16/

一）STM32硬件
1）主要划分为4个主要部分:
• MCU/FLASH/RAM/Display
在这里插入图片描述
在这里插入图片描述
2）STM32 GUI 嵌入式图形
在这里插入图片描述
二）STM32软件
特性介绍
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三）概览
-----TouchGFX Designer
-----TouchGFX 基本概念
-----TouchGFX 基础控件，交互设计与仿真

3.1 TouchGFX Designer
1)界面1
在这里插入图片描述
2)界面2
在这里插入图片描述
3）界面3
在这里插入图片描述
4）创建工程
• 选择STM32H750B-DK硬件模板
• 选择空的UI模板
在这里插入图片描述
5） 添加图片
• 将图片拷贝到目录
• TouchGFX\assets\images
• TouchGFX Designer 界面添加
在这里插入图片描述
6）添加字体
• 将字体文件拷贝到目录
• TouchGFX\assets\fonts
• 重启TouchGFX Designer 生效
7）字体管理
• Group
• 添加文本
• 修改属性
• 添加多语言
在这里插入图片描述
在这里插入图片描述
8）工程配置
在这里插入图片描述

3.2.TouchGFX基本概念
3.2.1颜色
1）颜色格式
在这里插入图片描述
2）颜色深度
• 用于描述存储在帧缓冲区中的每种颜色的位数。
• 每像素位数表示这个数字，或者简称bpp。
• 使用的位越多，我们可以描述的颜色就越多。
TouchGFX 内置支持以下颜色深度：
• 32 bpp - 16777216 种颜色和相应的不透明度值
• 24 bpp - 16777216 色
• 16 bpp - 65536 色
• 6 bpp - 64 色
• 4 bpp - 16 灰度颜色
• 2 bpp - 4 种灰度颜色
• 1 bpp - 2 种灰度颜色
3）颜色格式
在这里插入图片描述
4）图片格式
在这里插入图片描述
5）文本格式
• 文本或更准确的字形也以特定颜色格式存储在内存中。
• TouchGFX 中可用的文本颜色格式是:
—字形格式类似于小图像，其中每个颜色条目都包含每个像素的不透明度级别。
----这使得能够在应用实际颜色、红色、绿色和蓝色分量，并且能够以蓝色版本和红色版本绘制例如存储的字形“A”。
—每个字形使用的位越多，它通常会显得越平滑、越好.
在这里插入图片描述
3.2.2帧缓冲区
1）帧缓冲区概念
• 图形引擎更新的一块内存，其中包含要在Display上显示的下一个图像。
• 每个条目都是关联颜色格式的颜色（像素）。
2）帧缓冲策略: 可以支持多种帧缓冲区策略
• 多于1个(常用2个)
• 1个
• 少于1个(部分缓冲)
3）策略影响性能
• 多于1个会带来更好的性能，成本会增加
• 小于1个(部分缓冲)
• 允许在低RAM平台上运行
在这里插入图片描述
4）计算帧缓冲的开销
在这里插入图片描述

3.2.3图形引擎
1） 主要功能:TouchGFX 图形引擎的主要职责是在嵌入式设备的Display上绘制图形。
2） 场景模式：
• 立即模式图形引擎提供了一个API，使应用程序能够直接将事物绘制到Display上.
—应用程序有责任确保在正确的时间调用正确的绘图操作。
• 保留模式图形引擎允许用户操作正在显示的组件的抽象模型.
—引擎负责在正确的时间将此组件模型转换为正确的图形绘制操作。
3） TouchGFX 遵循保留模式图形原则:
优点:
• 易于使用：保留的图形引擎易于使用。用户通过调用内部模型上的方法来处理屏幕上组件的配置，而不考虑实际的绘图操作。
• 性能： TouchGFX 分析场景模型并优化在屏幕上实现模型所需的绘图调用。这包括故意不绘制隐藏组件、仅绘制和传输组件的更改部分、管理帧缓冲区等等。
• 状态管理： TouchGFX 跟踪场景模型的哪个部分处于活动状态。 这反过来又使用户更容易优化场景模型内容。
缺点:
• 内存消耗：表示场景模型占用一些内存。
• TouchGFX通过分析场景模型并优化相应的渲染,可以达到高性能水平，通常每秒渲染60 帧。
• 在减少TouchGFX 的场景模型使用的内存量方面付出了巨大的努力。
• 在有的典型的应用程序中，此模型的内存量远低于1 Kbytes。
在这里插入图片描述

3.2.4 控件与容器
1）控件： TouchGFX中，控件是对可显示，可交互的事物的抽象定义。
2）容器：TouchGFX中，容器是一种组件，它能容纳子节点，比如控件或其它容器，容器可充当视窗，即子节点在此容器可视区域内的部分才能显示
3）Z-order：子节点的z-order值，取决于子节点加入容器的先后顺序。最后加入的子节点zorder值最大，即会显示在容器的最上层。每个界面中Screen是根容器，所有控件都被添加到根容器。

3.3 TouchGFX基础控件，交互设计与仿真
3.3.1 调试方法

  1. DebugPrinter
    • 输出调试信息到显示器
    gui/src/common/FrontendApplication.cpp
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. Simulator Only Code
    • touchgfx_printf
#include <touchgfx/Utils.hpp>
#ifdef SIMULATORtouchgfx_printf("console button click: %d", count);
#endif

在这里插入图片描述
模拟器运行的UI与板上UI一致,模拟器功能：
在这里插入图片描述

3.3.2 基础控件介绍
6组基础控件和 1组自定义控件
• Buttons
• Images
• Containers
• Shapes
• Progress indicators
• Misc
在这里插入图片描述
1） Buttons

  1. Button 能响应触控事件： Button 在release（释放）时，通过回调实现对触控事件的响应
    在这里插入图片描述
  2. Buttons的属性：
    在这里插入图片描述
  3. Button的 交互
    • Trigger: button clicked（点击按钮）
    • Action: Call new virtual function（调用新的虚函数）
    在这里插入图片描述
  4. 交互的动作响应
    • Button callback回调
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    • Action
    Screen1ViewBase.hpp 基类响应函数
    在这里插入图片描述
    Screen1View.cpp 子类响应函数
    在这里插入图片描述
    3.3.2.1 Interactions（相互作用）
    • 交互：一个交互是一种配置，包括一个触发事件和一个动作响应，当触发事件发生时，去执行配置的动作响应。
    –触发事件：交互的开始
    –动作响应：触发事件发生后去执行的响应
    1） Trigger（触发）， 一个空的Screen包含三个触发事件:
    • Hardware button is clicked
    • Screen transition begins
    • Screen transition ends
    Screen添加控件时，会同时添加与此控件关联的触发事件，例如， 添加一个Button控件时，会添加一个触发事件：Button is clicked。
    2）• Actions（动作）， 一个空的Screen包含五个动作响应:
    • Call new virtual function
    • Change screen
    • Execute C++ code
    • Set Language
    • Wait for
    Screen添加控件时，会同时添加与此控件关联的动作响应， 添加一个Button控件时会添加以下动作响应：
    • Move widget
    • Fade widget
    • Hide widget
    • Show widget
    3）链式交互， 一个交互的响应完成时，能触发另一个交互开始，产生链式交互：

在这里插入图片描述
在这里插入图片描述
3.3.2.2 Mixins（混入）
1）Draggable 拖放
• Draggable Mixins 可为控件增加可拖放的功能
• 使能Draggable Mixins 时，会改变控件的声明方式在这里插入图片描述
Button控件使能 Mixins Draggable时
touchgfx::Button button1;
touchgfx::Draggable< touchgfx::Button > button1;
2）ClickListener（点击监听器）
• ClickListener Mixins 可为控件增加触控响应功能
• 使能ClickListener Mixins 时，会改变控件的声明方式
在这里插入图片描述
Button控件使能 Mixin ClickListener时
touchgfx::Box box3;
touchgfx::ClickListener< touchgfx::Box > box3;
3) FadeAnimator(淡入淡出动画制作工具)
• FadeAnimator Mixins 通过修改透明度alpha属性，为控件增加淡出效果
• 可通过EasingEquation来指定淡出的速率
• 在一个交互的动作响应中，如果让某个控件淡出，并且时间不为零，则此控件会自动使能FadeAnimator Mixins
• 使能FadeAnimator Mixins 时，会改变控件的声明方式
• 使能FadeAnimator Mixin 后, 控件可使用startFadeAnimation 函数实现淡出效果. 此函数有三个参数：
– endAlpha: 动画结束时控件的alpha值
–duration: 动画持续的时间，以tick为单位
–alphaProgressionEquation: 改变alpha值时使用的EasingEquation
在这里插入图片描述
Box控件使能FadeAnimator Mixin时
touchgfx::Box box3;
touchgfx::FadeAnimator< touchgfx::Box > box3;
4) MoveAnimator(移动动画)
• MoveAnimator Mixins 为控件添加动画能力，控件能从当前位置移动到指定的结束位置。
• 可用EasingEquations来指定在X轴与Y轴方向上的移动方式
• 如果在交互中设置动作响应是移动某个控件，则此控件自动使能MoveAnimator Mixins功能
• 使能MoveAnimator Mixins 时，会改变控件的声明方式
在这里插入图片描述
Box控件使能MoveAnimator Mixins时
touchgfx::Box box3;
touchgfx::MoveAnimator< touchgfx::Box > box3;
• 使能MoveAnimator Mixins后，控件可使用startMoveAnimation 函数实现移动动画效果。此函数有五个参数如下：
–endX: 移动控件时终点的X轴坐标
–endY: 移动控件时终点的Y轴坐标
–duration: 移动持续时间，以tick为单位
–xProgressionEquation: X轴EasingEquation
–yProgressionEquation: Y轴EasingEquation

2） Button With Label

  1. 属性：
    在这里插入图片描述
    在这里插入图片描述
    3） Button With Icon
    在这里插入图片描述
    在这里插入图片描述

http://www.ppmy.cn/devtools/146069.html

相关文章

第3章 并行循环调度的准则

第3章 并行循环调度的准则

第3章 不同循环独立是前提 反例:全局变量 total total fuction(…) 此时total还需要进行同步… 首先&#xff0c;让我们来定义一下要考察的类型。在本章中&#xff0c;我们假设每个循环的 迭代都与其他循环是相互独立的&#xff0c;也就是说&#xff0c;一个迭代的执行&…
阅读更多...
Tomcat日志文件详解及catalina.out日志清理方法

Tomcat日志文件详解及catalina.out日志清理方法

目录 前言1. Tomcat日志文件详解 1.1 catalina.out1.2 localhost_access_log1.3 catalina..log1.4 host-manager..log 和 manager..log1.5 localhost..log 2. catalina.out文件管理与清理方法 2.1 为什么不能直接删除catalina.out文件2.2 正确清空catalina.out文件的方式2.3 自…
阅读更多...
element-ui表格多级表头固定列和合并单元格

element-ui表格多级表头固定列和合并单元格

多级表头固定列 代码示例-不能直接运行&#xff0c;仅供参考 <el-table ref"table" class"table":data"list"style"width: 100%":header-cell-style"headerCellStyle"v-loading"dataLoading":span-method&qu…
阅读更多...
docker-compose相关命令

docker-compose相关命令

背景 最近在使用docker进行模型环境的部署, 可以很快稳定的保持环境进行迁移, 为了更好的管理模型所需要的环境, docker-compose.yaml文件是不错的选择 相关命令 docker - compose up 功能&#xff1a;用于启动docker - compose.yml文件中定义的所有服务容器。它会读取配置文…
阅读更多...
第52天小迪安全（暴力破解）

第52天小迪安全（暴力破解）

目录 思维带图 前言&#xff1a; 学习 思路&#xff1a; mysql数据库默认root用户不允许外联 然后linux系统连的是ssh协议 windows系统连的是rdp协议验证码识别插件&#xff0c;识别率低&#xff0c;原因懒总结&#xff0c;需要自己输入密码的&#xff0c;都可以尝试暴力破…
阅读更多...
python中Windows系统使用 pywin32 来复制图像到剪贴板，并使用 Selenium 模拟 Ctrl+V 操作

python中Windows系统使用 pywin32 来复制图像到剪贴板，并使用 Selenium 模拟 Ctrl+V 操作

步骤 1&#xff1a;安装必要的库 首先&#xff0c;安装 pywin32 和 selenium&#xff1a; pip install pywin32 selenium 如果使用的是 macOS&#xff0c;可以安装 pyobjc&#xff1a; pip install pyobjc 步骤 2&#xff1a;使用 pywin32 复制图像到剪贴板 在 Windows 系统中…
阅读更多...
Mono里运行C#脚本7—MonoImageStorage结构解析

Mono里运行C#脚本7—MonoImageStorage结构解析

Mono里运行C#脚本7—MonoImageStorage结构解析 定义一个结构来保存EXE文件加载到内存的表示。 typedef struct { MonoRefCount ref; //引用计数，如果这个文件引用计数为0就可以删除。 /* key used for lookups. owned by this image storage. */ char *key; //HASH…
阅读更多...
Kafka数据迁移全解析：同集群和跨集群

Kafka数据迁移全解析：同集群和跨集群

文章目录 一、同集群迁移二、跨集群迁移 Kafka两种迁移场景&#xff0c;分别是同集群数据迁移、跨集群数据迁移。 一、同集群迁移 应用场景&#xff1a; broker 迁移 主要使用的场景是broker 上线,下线,或者扩容等.基于同一套zookeeper的操作。 实践&#xff1a; 将需要新添加…
阅读更多...
最新文章

Copyright @ 2022~2023