【STM32F429】第14章 GUIX Studio设计窗口切换

最新教程下载：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429

第14章       GUIX Studio设计窗口切换

本章节为你们讲解GUIX Studio设计窗口切换。

14.1初学者重要提示

14.2 GUIX Studio建立三个窗口

14.3 窗口的Screen Flow界面介绍

14.4 窗口的Screen Flow界面设置

14.5 移植程序到硬件平台注意事项

14.6 实验例程设计框架

14.7 实验例程

14.8 总结

 

 

14.1 初学者重要提示

1.   务必看第11章学习GUIX Studio的使用方法和第12章学习GUIX Studio生成的代码移植到硬件平台的方法。
2.   Screen Flow配置是实现窗口切换的关键，也是本章节的重点。经过Screen Flow能够实现各类窗口切换效果。

14.2 GUIX Studio建立三个窗口

GUIX Studio的设置方法与第11章同样，咱们这里仅把控件的位置和大小作了调整。

14.2.1        第1步：建立窗口1及其子控件

建立的窗口1，添加Text Button控件和Prompt控件，而后选中建立的窗口1，再重点看下面截图中标记的三个地方：

1. 窗口名为window，此名字后面要在开发板程序建立时使用。
2. 设置窗口ID为GUIX_ID_WINDOW0。
3. 设置窗口1为启动窗口。

 

设置完了窗口部分，再看按钮控件的配置，鼠标左击选中按钮，重点看Properties View：

 

设置按钮ID为GUIX_ID_TextButton0，设置Screen Flow时要使用。而prompt控件设置显示内容为：The First Window便可，方便切换不一样窗口时区分。

14.2.2        第2步：建立窗口2及其子控件

按照以下方法建立窗口2：

 

建立后，添加Text Button控件和Prompt控件，而后选中建立的窗口2，一样重点看下面截图中标记的两个地方：

1. 窗口名为window_1，此名字后面要在开发板程序建立时使用。
2. 设置窗口ID为GUIX_ID_WINDOW1。

 

设置完了窗口部分，再看按钮控件的配置，鼠标左击选中按钮，重点看Properties View：

 

设置按钮ID为GUIX_ID_TextButton1，设置Screen Flow时要使用。而prompt控件设置显示内容为：The Second Window便可，方便切换不一样窗口时区分。

14.2.3        第3步：建立窗口3及其子控件

按照以下方法建立窗口3：

 

建立后，添加Text Button控件和Prompt控件，而后选中建立的窗口3，一样重点看下面截图中标记的两个地方：

1. 窗口名为window_2，此名字后面要在开发板程序建立时使用。
2. 设置窗口ID为GUIX_ID_WINDOW2。

 

设置完了窗口部分，再看按钮控件的配置，鼠标左击选中按钮，重点看Properties View：

 

设置按钮ID为GUIX_ID_TextButton2，设置Screen Flow时要使用。而prompt控件设置显示内容为：The Third Window便可，方便切换不一样窗口时区分。

14.3 窗口的Screen Flow界面介绍

建立完毕三个窗口后，开始本章节最重要的Screen Flow设置，窗口的切换主要是经过Screen Flow来配置的：

 

按照上图方式打开Screen Flow：

 

能够看到前面建立的窗口window，window_1和window_2都以矩形框的形式呈现，这三个方框能够随意调节位置，随意放缩大小。

14.3.1        支持的触发事件

这里鼠标左击选中窗口window，而后鼠标右击，弹出以下对话框：

 

再点击Add New Trigger按钮，弹出以下对话框：

 

一、System Event

系统事件，支持的系统事件以下：

 

二、Child Signal

子控件支持的事件以下：

 

这里的子控件就是前面建立窗口1时添加的Text Button子控件和Prompt子控件。默认都是支持三个事件，CLICKED点击事件，FOCUS_GAINED获取聚焦事件，FOCUS_LOST失去聚焦事件。

三、User Event

用户自定义事件。

 

14.3.2        事件动做处理

这里以建立的第1个窗口的Child Signal事件中Text Button点击事件为例进行说明：

 

保存后，就能够编辑此按钮按下事件的处理方式：

 

点击Edit Action(s)按钮，弹出以下对话框：

 

继续点击Add New Action按钮，弹出的对话框以下：

 

Animation：窗口切换的动画效果。

Attach：将目标窗口附件到它的父窗口上，若是未指定父窗口，则目标窗口将附加到根窗口。

Detach：将目标窗口与其父窗口分离。

Hide：隐藏目标窗口。

Screen Stack Pop：从内部窗口堆栈弹出一个窗口指针。

Screen Stack Push：将窗口指针推到内部窗口堆栈。

Screen Stack Reset：从内部窗口堆栈中删除全部窗口指针。

Show：显示目标窗口。

Toggle：将目标窗口附加到当前窗口的父窗口，而后将当前窗口与其父窗口分离。

Window Execute：以模态方式执行目标窗口。

Window Execute Stop：退出当前窗口的模态执行。

14.3.3        窗口切换的动画效果配置

这里咱们以Animation动画切换效果为例进行说明，选择Animation，点击保存：

 

保存后弹出以下对话框：

 

一、这里能够添加多个动做方式进来，当前咱们这里仅添加了Animation一种方式。

二、设置动做名字，随意设置，咱们这里使用默认。

三、设置Animation动做方式应用到的目标窗口或控件。

四、设置目标窗口切换后附加到那个窗口下（即便用那个窗口做为父窗口），或者设置为None的话，会被附加到root根窗口下。

五、设置目标窗口的动做前的起始位置，结束位置等：

•   StartX，StartY

起始坐标位置。

•   EndX，EndY

结束坐标位置。

•   Steps

从起始位置到结束位置须要的步数。

•   Tick Rate

滴答频率（注，未摸清准确做用，待后续继续测试）

•   Delay Before

动做前的延迟，延迟单位由GX_SYSTEM_TIMER_TICKS定义。

•   Start Alpha，End Alpha

启动前的Alpha值和启动后的Alpha值，0表示彻底透明，255表示彻底不透明。

六、用于设置窗口切换时，动态切换效果

当前支持的动画效果以下：

 

点击这个小按钮能够查看动画效果：

 

七、动画完成后的处理

•   Detach Target

表示将目标窗口与其父窗口分离。

•   Push Target to Screen Stack

将目标窗口指针压如到窗口堆栈中。

14.4 窗口的Screen Flow界面设置

了解了Screen Flow的基础配置后，将三个窗口都作配置。

14.4.1        第1步：设置窗口1

右击选择窗口window：

 

弹出窗口选择Child Signal中的按钮按下事件：

 

保存后选择Edit Action(s)：

 

点击Edit Action(s)后，弹出以下对话框，并选择Add New Action按钮，再选择Animation并保存。

 

最终配置以下：

 

咱们这里仅修改了Target目标窗口，其它地方的设置所有默认不动。这里选择window_1表示操做前面建立的window_1，实际运行效果是由窗口window切换到window_1。

14.4.2        第2步：设置窗口2

右击选择窗口window_1：

 

弹出窗口选择Child Signal中的按钮按下事件：

 

保存后选择Edit Action(s)：

 

点击Edit Action(s)后，弹出以下对话框，并选择Add New Action按钮，再选择Animation并保存。

 

最终配置以下：

 

咱们这里仅修改了Target目标窗口，其它地方的设置所有默认不动。这里选择window_2表示操做前面建立的window_2，实际运行效果是由窗口window_1切换到window_2。

14.4.3        第3步：设置窗口3

右击选择窗口window_2：

 

弹出窗口选择Child Signal中的按钮按下事件：

 

保存后选择Edit Action(s)：

 

点击Edit Action(s)后，弹出以下对话框，并选择Add New Action按钮，再选择Animation并保存。

 

最终配置以下：

 

咱们这里仅修改了Target目标窗口，其它地方的设置所有默认不动。这里选择window表示操做前面建立的window，实际运行效果就是由窗口window_2切换到window。

14.4.4        第4步：总体设置效果

三个窗口的Screen Flow配置好以后，能够看到以下效果：

 

三个窗口已经互联到一块儿，即咱们要实现的功能能够实现三个窗口之间来回切换。至此就彻底了窗口切换的实现。

14.5 移植程序到硬件平台注意事项

本教程第12章讲解了移植方法，本章重点注意建立的三个窗口都要单首创建，建立代码放在了MainTask.c文件的MainTask函数里面：

/*
*********************************************************************************************************
*    函 数 名: MainTask
*    功能说明: GUI主函数
*    形    参: 无
*    返 回 值: 无
*********************************************************************************************************
*/
void MainTask(void) 
{
    其它省略未写

    /* 建立窗口 */
    gx_studio_named_widget_create("window", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen);
    gx_studio_named_widget_create("window_1", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen);
    gx_studio_named_widget_create("window_2", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen);

}

 

特别注意，这里window，window_1和window_2就是前面建立三个窗口时所使用的名字。

14.6 实验例程设计框架

本章例程的重点是GUIX Studio窗口切换的实现：

 

14.7 实验例程

（注，若是是电阻屏，须要作触摸校准，校准方法看本教程附件章节A）

配套例子：

本章节配套了以下两个例子供你们移植参考：

•   V6-2013_GUIX Window Switch

GUIX Studio生成的代码在硬件平台实际运行的工程，含有GCC，IAR，MDK AC5和AC6四个版本工程。

•   V6-2014_GUIX Studio Window Switch

GUIX Studio工程模板，设计界面后，生成的文件可直接添加到MDK，IAR和GCC软件平台使用。

实验目的：

1. 本章主要学习GUIX Studio设计窗口切换

实验内容：

1. 共建立了以下几个任务，经过按下按键K1能够经过串口打印任务堆栈使用状况

App Task Start任务  ：启动任务，这里用做BSP驱动包处理。

App Task MspPro任务 ：消息处理，这里用做浮点数串口打印。

App Task UserIF任务 ：按键消息处理。

App Task GUI任务    ：GUI应用任务。

App Task STAT任务   ：统计任务。

App Task IDLE任务   ：空闲任务。

GUIX System Thread  ：GUI系统任务。

System Timer Thread任务：系统定时器任务。

实验效果：

一共建立了三个窗口来回切换：

 

GUIX Studio的界面设计以下：

 

串口打印任务执行状况：

IAR，MDK AC5和AC6工程能够串口打印任务执行状况：按开发板的按键K1能够打印，波特率 115200，数据位 8，奇偶校验位无，中止位 1：

 

Embedded Studio（GCC）平台的串口打印是经过其调试组件SEGGER RTT作的串口打印，速度也很是快，打印效果以下：

 

展现里面有乱码是由于Embedded Studio不支持中文。

14.8 总结

本章节主要为你们讲解了GUIX Studio设计窗口切换，涉及到的知识点比较多，须要你们多作测试，观察各类效果。