5.2. ui

Overview

5.2.1. ui 模块介绍

杰理UI提供了电池电量，图片，文字，数字，时间，按钮，表格控件，垂直列表，水平列表，以及自定义控制等。每个模块都有自己的唯一ID号例如BaseForm_15。位置坐标，颜色等信息。
提供了ui_demo工程便于单独开发ui界面。

5.2.2. ui 介绍

首先找到发布工程中提供的UI工程：ui_project0.ui_templateui_320x240_test
双击“step1-打开UI绘图工具.bat” 就能打开杰理的UI工程。
“step2-打开 UI 资源生成工具.bat” 是将ui工程中的内容转换为文件存到 project/res内最终放在路径 cpu\wl82\tools\ui_res 将文件下载进内存中
“打开多国语言表格.bat” 是记录对应语言的对应字体以及内容
“打开图片资源文件夹.bat” 是保存工程中需要用要的一些图片等

Note

图片格式为PNG
打开 UI 示例工程后先浏览 UI 示例工程,最左边为布局，旁边为控件列表中间为 UI 绘制

区域，右边为 ui 工程预览区。

5.2.3. ui 绘制

点击新建页面。
点击控件列表中的图层，将中间区域填充满通过拉伸选择框的方式。
点击布局也建区域填充满，这个时候中间控件列表就能进行选择放置
具体应用 UI 如何绘制各个模块如何使用请产考发布工程中的 UI 工程
模块使用注意事项(第一次使用杰理 UI 请边阅读边浏览 ui_test示例工程)
所有控件均采用点击鼠标左键后不松手然后拖拽到对应 ui 绘制界面只有当绘制了图层然

后绘制好布局才能激活各个控件的使用

5.2.4. 电池电量

左键点击电池电量不放将鼠标放置在中间绘制区域松手。
观察中间唯一ID号最下面有个电池图标列表可以自行选择电池图样
图片列表可以添加一个或者多个图片，高亮图片也可以添加一个或者多个图片（一遍情

况都是采用在图片列表添加图片通过 UI 进行切换图片显示）

5.2.5. 文字控件

文字控件主要分为两种 1)第一种表格文件文字这里要解释一下什么是表格文字就是显示“ 打开多国语言表格.bat” 中的文字内容，可以是任意语种。其次还需要特别注意一点！！！编码格式为 strpic

2)第二种为字库文字，这里需要自行选择对应的字库文件（字库文件有不同字体大小之分），还有对应语言字库之分具体请参考《各国语言代码页信息.pdf》，文件字库代码对应 fontinit.c 如需添加语种需要参考原有的添加即可。其次还需要特别注意一点！！！编码格式为 text

5.2.6. 时间控件

时间控件需要注意是否需要自动走时以及时间格式,一遍来说都是使用 RTC 走时，因此不需要配置自动走时，还有就是注意时间格式年为 Y，月为 M，日为 D，时分秒： hms 注意小写例如: 设置正常显示的时间就填写： h:m:s 即可。设置的时间的数字图片，没有设置会从字库选取。

5.2.7. 数字控件

数字控件主要用来显示数字信息。例如需要显示的一些变量数字。 4 位数字就是 %04d 依次类推。

5.2.8. 按键控件

通过该控件可以实现按键被按下的效果，即按下高亮，再次按下不亮。手机下拉菜单中的各种按钮类似。

5.2.9. 垂直列表和水平列表

需要注意滚动方式即可有 SCROLL 和 PAGE 模式两种使用默认 SCROLL 即可。在绘制时候点击鼠标右键可以旋转调试宽度等。表格控件下面每一个布局中可以复制 CSS 属性即颜色等参数信息。主要利于按键高亮显示（代码简单），具体参考提供的示例工程中的例子

5.2.10. slider（滑块控件，进度条控件）

该控件可以用于进度条显示，剩余时间显示等场景。该控件的进度小圆可以添加背景图片。 WL80,82 常用控件如上。

5.2.11. 生成的资源文件说明

ascii.res和F_ASCII.PIX为ascii字库和索引 F_GB2112.PIX和F_GB2312.TAB为常用中文字库。 F_UNICODE.PIX为F_GB2312.TAB的补充. JL.sty, menu.res, str.res为生成的资源文件。有关语言字库的库查看文档《字库使用说明》

5.2.12. 应用实例

示例演示：

example: 进入 apps/demo/demo_DevkitBoard/include/demo_config.h 中开启宏 USE_UI_TOUCH_DEMO 。