PDF《-- 如何使用 MHGC 设计图形界面》

1 MPLAB? Harmony

3 之基础篇(07) -- 如何使用 MHGC 设计图形界面 Microchip Technology Inc.

MCU32 产品部

一、 简介 在上一遍文章中,介绍了利用 Harmony

3 创建图形工程的完整流程,本文章将介 绍如何使用 MHGC(Microchip Harmony Graphic Composer)设计图形界面,包含创 建页面,控件使用,设置背景和图片颜色,和创建按钮的事件响应.

二、 MHGC 介绍 MHGC 主界面如下图. 主要窗口如下: Screens:包含当前工程所有的页面.

2 Tree View:包含当前页面下的所有的层. Schemes:包含当前工程所有的可以使用风格. Widget Tool Box:包含了所有可以使用的控件. Properties Editor:允许用户调整页面,层和显示对象的参数. 在MHGC 中主要的图元(图形元件)如下: ? Screen/页面 C 每个页面包含了

1 至3个层, 层与层之间可以做 alpha 混合, E70 LCC 方案只支持

1 个层. ? Layer/层C层相当于容器,上可以放置各种不同的控件. ? Widget/控件 C 如按钮,文本框等基础图元. ? String/字符串 C 字符的集合,比如按钮的文本等. ? Scheme/风格 C 颜色的集合,比如按钮的风格包含文本颜色,背景颜色等.

三、 准备工作 注:以下 MHC 配置里没有特别标注出来的地方,说明使用的是默认选项.

(一) 打开之前的 E70-LCC_GFX-0-BASIC 项目 点击 MPLAB X IDE 的主菜单 File -> Open Project…,在弹出的对话框中选择工程 E70-LCC_GFX-0-BASIC 所在的路径,再点击 Open Project 按钮. 右键工程,选择 Set as Main Project 来设置主工程.如果已经是主工程则不需要 再设置.

3 4

(二) 启动 MHC 在MPLAB X IDE 里点击 Tools -> Embeded -> MPLAB Harmony

3 Configurator 来启动 MHC. 在弹出的对话框中确认本工程用到 MPLAB Harmony Project Path 位于哪个目录, 如果工程从其他电脑拷贝而来,应该选择第二个选项,然后点击 launch 按钮. 确认 gfx 勾选,点击 launch 按钮.

5 点击 Open 按钮. 成功打开如下图所示.

6 点击主菜单 tools-> Graphic Composer 来启动 MHGC.该工程已经创建过 MHGC 项目了, 在弹出的 Welcome Dialog 中选择第三个选项来加载已有的 MHGC 项目. MHGC 加载项目后如下图.

四、 设计图形界面详细步骤 本图形界面实现的功能,以及相应的学习内容如下: ? 两个页面,一个页面名为 screen1,另外一个页面名为 screen2.其中 screen1 为主页面(primary screen) .程序运行时默认显示的页面就是主页面. 学习内容:页面的创建和设置,以及页面和层的关系. ? 主页面带有一个按钮,通过点击按钮实现页面切换. 学习内容:控件的创建和设置,以及层和空间的关系. ? 页面 screen1 带有一个 Image 控件,用于显示图片. 学习内容:创建图片资源和创建 Image 控件.

7 ? 页面和按钮设置不同的背景颜色和字体颜色. 学习内容:图元的属性设置,以及风格的使用.

(一) 创建页面和设置背景颜色 在screens 窗口中,点击 Create New Screen 按钮来创建页面. 在弹出的对话框中可以设置 screen 的名称,点击"Create"按钮. 页面 screen2 创建后,MHGC 自动切换到该页面,相应的 Tree View 和Screen Designer 窗口也切换到该页面,在该页面下,默认创建了一个名为 Layer0 的层. 在Schemes 窗口,点击"Create New Scheme"按钮来创建一个风格. 设置名称和背景颜色,之后点击 OK,完成创建风格.

8 风格创建完成如下图. 在Tree view 中选中 Layer0,Layer0 的属性信息会在 Properties Editor 中显示出来, 修改 Scheme 为之前创建的风格 scheme_lay. Screen designer 中显示页面的背景如下.