1@page ugraphics ugraphics
2
3**[更正文档](https://gitee.com/alios-things/ugraphics/edit/master/README.md)**      **[贡献说明](https://help.aliyun.com/document_detail/302301.html)**
4
5# 概述
6ugraphics组件是基于SDL2封装的接口，支持JPEG/PNG图像解码绘制、点/线/框图像等绘制、图像旋转、RGB格式转换、中英文字符绘制等功能，方便用户进行基础的图像应用开发。
7
8## 版权信息
9> Apache 2.0 License
10
11## 目录结构
12```tree
13├── include
14│   ├── ugraphics.h                 # 对外头文件
15│   ├── format
16│   │    └── to_rgb565.h            # rgb格式转换头文件
17│   └── rotate
18│        └── rotate.h               # rotate旋转头文件
19├── package.yaml                    # 编译配置文件
20├── src
21│   ├── ugraphics.c                 # 图像操作函数代码
22│   ├── format
23│   │    └── to_rgb565.c            # rgb格式转换函数代码
24│   ├── jpegdec
25│   │    └── jpegdec.c              # 基于libjpeg实现的图像解码实现
26│   └── rotate
27│        └── rotate.c               # 图像旋转函数代码
28└── example
29    ├── image                       # 测试用例图片资源文件
30    └── ugraphics_example.c         # 测试用例
31```
32
33## 依赖组件
34
35* SDL2
36* littlefs
37
38# 常用配置
39```yaml
40def_config:                              # 组件的可配置项
41  AOS_COMP_JPEG: 0                       # 使能jpeg decoder函数接口
42  CONFIG_UGRAPHICS_FORMAT: 0             # 使能format函数接口
43  CONFIG_UGRAPHICS_ROTATE: 0             # 使能rotate旋转函数接口
44```
45
46> 配置是否支持JPEG解码、图像格式转换、图像旋转，默认是关闭的
47
48# API说明
49- 参考 [ugraphics_aos_api](https://g.alicdn.com/alios-things-3.3/doc/group__ugraphics__aos__api.html)
50
51# 使用示例
52
53组件使用示例相关的代码下载、编译和固件烧录均依赖AliOS Things配套的开发工具，所以首先需要参考[《AliOS Things集成开发环境使用说明之搭建开发环境》](https://help.aliyun.com/document_detail/302378.html)，下载安装。
54待开发环境搭建完成后，可以按照以下步骤进行示例的测试。
55
56## 步骤1 创建或打开工程
57
58**打开已有工程**
59
60如果用于测试的案例工程已存在，可参考[《AliOS Things集成开发环境使用说明之打开工程》](https://help.aliyun.com/document_detail/302381.html)打开已有工程。
61
62**创建新的工程**
63
64组件的示例代码可以通过编译链接到AliOS Things的任意案例（solution）来运行，这里选择helloworld_demo案例。helloworld_demo案例相关的源代码下载可参考[《AliOS Things集成开发环境使用说明之创建工程》](https://help.aliyun.com/document_detail/302379.html)。
65
66## 步骤2 添加组件
67
68案例下载完成后，需要在helloworld_demo组件的package.yaml中添加对组件的依赖：
69
70```yaml
71
72depends:
73  - ugraphics: master            # helloworld_demo 中引入ugraphics组件
74  - ili9341: master              # helloworld_demo 中引入ili9341屏幕驱动
75
76def_config:
77    CLI_IOBOX_ENABLE: 1        # 可选：使能文件系统测试命令，例如ls, ll, mkdir, touch, echo等
78
79```
80
81## 步骤3 下载组件
82
83在已安装了  的开发环境工具栏中，选择Terminal -> New Terminal启动终端，并且默认工作路径为当前工程的workspace，此时在终端命令行中输入：
84
85```shell
86
87aos install ugraphics
88
89```
90
91上述命令执行成功后，组件源码则被下载到了./components/ugraphics路径中。
92
93## 步骤4 添加示例
94
95在ugraphics组件的package.yaml中添加[example示例代码](https://gitee.com/alios-things/ugraphics/tree/master/example)：
96
97```yaml
98source_file:
99  - "example/ugraphics_example.c" # add ugraphics_example.c
100
101build_config:
102 prebuild_script: cp_resources.py  #编译时cp_resources.py会对资源文件进行拷贝，系统自动打包资源文件到littlefs文件系统中
103
104```
105
106**LCD连线**
107使用本测试示例时，请先连接SPI LCD屏幕。
108
109LCD购买链接[https://item.taobao.com/item.htm?spm=a1z09.2.0.0.768d2e8d9D3S7s&id=38842179442&_u=m1tg6s6048c2](https://item.taobao.com/item.htm?spm=a1z09.2.0.0.768d2e8d9D3S7s&id=38842179442&_u=m1tg6s6048c2)
110
111请选择购买2.4寸屏。
112
113HaaS100开发板请务必使用V1.1以上的版本，HaaS100扩展口：
114
115<div align=left display=flex>
116    <img src="https://img-blog.csdnimg.cn/img_convert/b18b27ec7957e010d0380e76ebb33e98.png" style="max-width:800px;" />
117</div>
118
119LCD与HaaS100接线对应pin脚：
120
121<div align=left display=flex>
122    <img src="https://img-blog.csdnimg.cn/img_convert/5b2c8c014991f028978f5743ba22d193.png" style="max-width:800px;" />
123</div>
124
125
126## 步骤5 编译固件
127
128在示例代码已经添加至组件的配置文件，并且helloworld_demo已添加了对该组件的依赖后，就可以编译helloworld_demo案例来生成固件了，具体编译方法可参考[《AliOS Things集成开发环境使用说明之编译固件》](https://help.aliyun.com/document_detail/302384.html)。
129
130## 步骤6 烧录固件
131
132**文件系统烧录**
133本组件例子中使用到到图片存放在代码中hardware/chip/haas1000/prebuild/data/目录下ugraphics_image目录，除烧录helloworld_demo image外，需烧录littlefs文件系统，请将hardware/chip/haas1000/package.yaml文件中以下代码段的注释打开：
134
135```yaml
136  program_data_files:
137    - filename: release/write_flash_tool/ota_bin/littlefs.bin
138      address: 0xB32000
139```
140
141上述步骤执行后，可参考[《AliOS Things集成开发环境使用说明之烧录固件》](https://help.aliyun.com/document_detail/302383.html)来烧录固件。
142
143## 步骤7 打开串口
144
145固件烧录完成后，可以通过串口查看示例的运行结果，打开串口的具体方法可参考[《AliOS Things集成开发环境使用说明之查看日志》](https://help.aliyun.com/document_detail/302382.html)。
146
147当串口终端打开成功后，可在串口中输入help来查看已添加的测试命令。
148
149## 步骤8 测试示例
150
151测试步骤：
152```shell
153$ ugraphics init # 初始化ugraphics
154$ ugraphics draw {rect|jpg|png|line|string...} # 绘制图像
155```
156
157测试步骤：
158```sh
159$ ugraphics init # 初始化ugraphics
160$ ugraphics draw {rect|jpg|png|line|string...} # 绘制图像
161
162### CLI命令行输入：
163```shell
164ugraphics init # 资源初始化
165```
166
167> CLI关键日志：
168```shell
169ugraphics init ok!
170```
171
172**CLI命令行输入：**
173```shell
174ugraphics draw rect # 绘制矩形框
175```
176
177> CLI关键日志：
178```shell
179ugraphics draw rectangle ok!
180```
181
182**CLI命令行输入：**
183```shell
184ugraphics draw jpg # 绘制jpeg图片
185```
186
187> CLI关键日志：
188```shell
189ugraphics draw jpg image ok!
190```
191
192**CLI命令行输入：**
193```shell
194ugraphics draw png # 绘制png图片
195```
196
197> CLI关键日志：
198```shell
199ugraphics draw png image ok!
200```
201
202**CLI命令行输入：**
203```shell
204ugraphics draw line # 绘制线条
205```
206
207> CLI关键日志：
208```shell
209ugraphics draw line ok!
210```
211
212**CLI命令行输入：**
213```shell
214ugraphics draw string # 绘制字符串
215```
216
217> CLI关键日志：
218```shell
219ugraphics draw string ok!
220```
221
222**CLI命令行输入：**
223```shell
224ugraphics fill rect # 填充矩形框
225```
226
227> CLI关键日志：
228```shell
229ugraphics fill rectangle ok!
230```
231
232**CLI命令行输入：**
233```shell
234ugraphics clear # 清屏
235```
236
237> CLI关键日志：
238```shell
239ugraphics clear screen ok!
240```
241
242**CLI命令行输入：**
243```shell
244ugraphics quit # 释放资源
245```
246
247> CLI关键日志：
248```shell
249ugraphics quit ok!
250```
251
252# 注意事项
253NA
254
255# FAQ
256NA
257
258
259