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

接上篇

4）Toggle Button （切换按钮）

• 与普通button一致

• Toggle button 状态--- getState()

5） Radio Button（单选按钮）

• 属性

5）Repeat Button （重复按钮）

• Repeat Button按下时，能立即触发执行其回调函数

• Repeat Button按下不松开，在延时时间后，会按配置的间隔重复触发回调

• Trigger and Action

6）Flex Button （柔性按钮）

• 属性 Flex Button 可配置由以下四个元素组成:

-- BoxWithBorder

--Icon

--Text

--Image

3. Images(图像)

1.Image控件用来显示图像文件内容, 图像文件需先导入工程再使用

属性:

2.Scalable Image控件可以显示缩放后的图像

• 通过修改宽度/高度属性来缩放图像

3.Tiled Image控件可对图像重复扩展来显示

• 当Tiled Image控件宽度或高度大于图像时，图像就会在水平和垂直方向进行重复填满控件区域

4. Animated Image控件通过切换一组图片来显示动画效果

属性:

5.Texture Mapper控件可对图像任意缩放和旋转后进行显示

Origo & Camera

• Origo 图像的转换围绕Origo进行

• X Origo 和Y Origo 的坐标与Texture Mapper的宽度和高度相关

• Z Origo 坐标与Camera Distance 相关

• Camera Distance 会改变图像旋转时显示的透视量

4. Containers (容器)

1. Container 是TouchGFX 中的一个组件，可以包含子节点, 也可以将Container 生成为CachableContainer(可装卸集装箱)
   
2. Scrollable Container 是允许其内容垂直和水平滚动的容器
   
3. Swipe Container 是Container 的一种特殊化，它由多个页面组成，可以通过在它
   们之间滑动来访问. Swipe Container 中的页面可以包含其他控件，类似于Container.
   
4. List Layout(列表布局)
   • List Layout 控件是一个容器，它会在给定的方向上自动将其子项排列在列表中
   • 从List Layout中添加或删除控件，会重新排列子控件
   
5. Modal Window(模式窗口)
   • Modal Window 是Container 类型的控件，能显示一个窗口并阻止触摸事件传递到view和其他控件
   • Modal Window 由背景图片和Box控件组成，其中Box控件充当遮盖底层视图和控件的阴影，并可调节透明度
   • Modal Window 会填充整个屏幕，且应当作为最后一个添加的控件，这样可以一直处于所有控件的最上层
   
6. Scroll List 是一个可滚动菜单，由多个条目及控件组成 , 每个条目的内容滚动进view时动态更新:
   
7. Scroll Wheel(滚轮)
   Scroll Wheel是一个包含多个项目的可滚动菜单，项目在滚动时动态更新，被选中的项目移动到焦点处,使能代码与Scroll Wheel的交互做出反应，不同的项目的交互可调用不同的回调.
   
8. Slide Menu (滑动菜单)
   Slide Menu是一种特殊Container，包含一个内部Container，一个图像以及可选的Button, Slide Menu可以弹出或隐藏
   
   5)Shapes(形状)
9. Box 方形的图形控件. 颜色，透明度.

2. Box With Border (带边框的盒子)

边框, 颜色，宽度

3. Line

基于cavas控件，可在任意点之间画线,属性:

• 起始坐标

• 线宽

• Cap style

4. Circle

属性 • 圆心 • 半径 • 起始角度 • 线宽

5. Shape 多个点绘制的图形

支持缩放，旋转.属性: • 旋转角度• 水平，垂直方向缩放 • 添加顶点

6. Progress indicators(进度指标)

1. Box progress
   • 使用box控件作为进度指示
   • Box属性：颜色，透明度，方向
   
2. Image Progress
   • 使用tiled image作为进度指示
   • 属性 Anchor
   
3. Text Progress
   • 使用文字作为进度指示
4. Line Progress 使用line控件作为进度指示,起始位置可使用任意坐标
   • 属性: Cap style
   
5. Circle Progress 使用圆形作为进度指示
   • 属性: 圆心，半径
   

7. Custom containers(自定义容器)
   Custom container 可包含其它已有控件，并组合现有控件的视觉外观与行为, Custom container 也可包含其他Custom containers.

1. Custom Triggers
   Custom Containers 可创建Custom Triggers
   • 通过Custom Container属性页添加添加Custom Triggers,Name: 用于交互系统及生成的代码中进行索引,Description: 用于描述, Type: 回调函数接受一个type类型的参数.
   
2. Custom Actions
   Screens 和Custom Containers 可创建CustomActions
   通过Screen或Custom Container 的属性页添加添加Custom Actions.
   • Name:用于交互系统及生成的代码中进行索引
   • Description: 用于描述
   • Type: 创建Action时可传递一个type类型的参数
   

8. Miscellaneous(各种各样)

1. Slider 滑块使用3个图像以垂直或水平方向显示滑块。 可以拖动滑块的指示器图像来修改内部整数值。
   
   
2. Text Area文本区域在屏幕上显示文本。TouchGFX Designer可以配置为文本的大小、颜色、自定义字体、动态文本、多国语言等。
   
3. 通配符（Wildcard）的概念
   • 以格式<*>表示通配符
   • Wildcard Buffer
   • Unicode::snprintf(textAreaBuffer, TEXTAREA_SIZE, "%d",newValue)
   在TouchGFX Designer中添加通配符
   

void SomeView::updateTxt(int newValue)
{
	Unicode::snprintf(txtBuffer, 10, "%d", newValue);
	txt.invalidate();
}

4.如何动态显示中文

--添加中文字体,将字体复制到assets/fonts目录下，重启designer软件。

--Designer中创建中文字体,在Wildcard characters 输入要显示的几个常用字符， 也可在Wildcard Ranges输入字符Unicode的范围（0x00-0xe000）

-- 创建textArea，并添加通配符。

--工具进行中文转Unicode

--添加应用代码

void Screen1View::handleTickEvent()
{
	tickcount++;
	Unicode::UnicodeChar tmp[8] = { 0x4ECA, 0x5929, 0x0033,0x0037, 0x002e, 0x0036, 0x2103, 0x00 }; //显示今天37.6℃
	Unicode::strncpy(textArea1Buffer, tmp, 10);
	textArea1.invalidate();
}

5. Analog Clock模拟时钟可以显示经典的模拟手表。
   • 时钟使用背景图像作为钟面。
   • 时针、分针和秒针均使用图像并围绕可配置的中心旋转。
   
6. Digital Clock数字时钟允许应用程序使用数字文本显示时间。
   • 常用函数
   • initializeTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)
   • initializeTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)
   • setTime24Hour(uint8_t hour, uint8_t minute, uint8_t second)
   setTime12Hour(uint8_t hour, uint8_t minute, uint8_t second, bool am)
   
7. Dynamic Graph(动态图)
   TouchGFX 4.15及其以后版本支持动态图表。
   • 动态图表可以通过Graph Elements, Grid Lines and Labels定义其外观
   Wrap and Clear
   
   Wrap and Overwrite
   
   Scroll
   
   性能对比：
   "Wrap And Clear"是一种快速执行的行为，它只绘制添加的最新数据点。
   "Wrap And Overwrite"是一种快速执行的行为，它只绘制添加的最新数据点。
   "滚动"是一种计算量要求很高的行为，因为每次添加一个数据点时，也需要
   重新绘制所有先前可见的数据点。
8. Static Graph(静态图)
   TouchGFX 4.19及其以后版本支持静态图表。静态图表可以通过Graph Elements, Grid Lines and Labels定义其外观.
   
   9.Gauge(仪表)
   是一个小部件，能够绘制给定范围内给定值的指针或弧度。
   • TouchGFX 4.16及其以后版本支持仪表控件。
   • 仪表控件可以让开发者轻松创建/定制个性化仪表.
   
   
   10.Video(视频)
   TouchGFX 4.18 开始支持Video控件。 TouchGFX Desginer中Video控件介绍
   • 可以显示MJPEG video
   • 可以通过start, stop, repeat, goto-frame API与之交互
   • 不是"Video-player" ,不包括按钮
   • 添加视频的方法：
   在Designer中包含一个MJPEG 文件，它会像图片一样被烧录（主要用于原型制作）
   自己放置MJPEG 文件并为视频小部件提供起始地址,可以在运行时修改.
   
   支持硬件解码和软件解码(通过LibJPEG)
   • 所有STM32均支持软件解码（G0除外）
   • 带有JPEG编解码器的STM32支持硬件解码(例如STM32F769、STM32H7B3)
   支持不同的video缓冲策略
   • 无video 缓冲: Video直接发送给帧缓冲区.
   • 单个video 缓冲: 解压影响GUI线程
   • 双video buffers: 解压对GUI线程没有影响。