8.4 KiB
UI Elements
功能说明
UIFlow提供了几种可编辑的UI元素，可以用它们去绘制一些图案或是显示文本
-
Title 显示一个标题栏
-
Label 显示一个文本框
-
Rect 显示一个矩形
-
Circle 显示一个圆形
-
image 显示一张图片
添加与删除
添加元素
删除元素
编辑元素
方法一：在往屏幕中添加元素后，单击元素，在弹出的属性框中，可以设定初始参数（坐标，颜色，长宽等）
方法二：在往屏幕中添加元素后，点击UI选项，使用对应的程序Block，可以在程序中对元素进行操作
Unicode
UIFlow固件中集成了Unicode中的一些常用字符库，因此你可以在编辑文字直接输入进行使用。
以下为UIFlow定制字库中不同字符对应的地址。
| 开始地址 | 结束地址 | 描述 | 字符参考 |
|---|---|---|---|
| 0x3040 | 0x30FF | 平假名和片假名 | / |
| 0x0400 | 0x04FF | 俄文（西里尔字母） | / |
| 0x0020 | 0x007F | 基本拉丁字母 | / |
| 0x2100 | 0x214F | 字母式符号 | 点击查看详情 |
| 0x2150 | 0x218F | 数字形式 | 点击查看详情 |
| 0x2190 | 0x21FF | 箭头 | 点击查看详情 |
| 0x2200 | 0x23f0 | 数学运算符 杂项工业符号 |
点击查看详情 |
| 0x2460 | 0x24FF | 带圈或括号的字母数字 | 点击查看详情 |
| 0x2500 | 0x257F | 制表符 | 点击查看详情 |
| 0x2580 | 0x259F | 方块元素 | 点击查看详情 |
| 0x2600 | 0x27BF | 杂项符号 | 点击查看详情 |
| 0xFF00 | 0xFFEF | 半角及全角形式 | 点击查看详情 |
| 0x25A0 | 0x25FF | 几何图形 | 点击查看详情 |
| 0x2000 | 0x206F | 常用标点 | 点击查看详情 |
| 0x0370 | 0x03FF | 希腊字母和古埃及语(科普特语) | 点击查看详情 |
| 0x0080 | 0x00FF | 拉丁文补充1 | 点击查看详情 |
| 0xFF00 | 0xFFEF | 半角及全角形式 | 点击查看详情 |
| 中文GB2312 + 常用日文汉字 共计7857字 | |||
Emoji
功能说明
UIFlow提供可以快速绘制图案的像素点编辑Block，通过拼凑像素点的形式可以绘制各种各样的图案
-
Set emoji map in 设置方阵像素点，勾选方阵中的小方格对应显示对应的像素点
-
Set line x row x in 设置单个像素点，选择行与列，对应显示对应的单个像素点
使用方法
将Emoji Block添加到程序中，勾选小方格激活像素点
Graphic
功能说明
除了几种可以直接使用的几何图形，还可以使用Graphic绘制一些复杂的图形
-
LCD clear 清除屏幕内容
-
LCD fill 设置屏幕底色
-
LCD print x,y 在屏幕指定位置打印文本
-
Font 设置文本的字体
-
LCD pixel 在屏幕指定位置绘制一个像素点
-
line 绘制直线
-
rect 绘制矩形
-
triangle 绘制三角形
-
circle 绘制圆
-
ellipse 绘制椭圆形
-
arc 绘制弧
-
polygon 绘制多边形
注意
M5GO的屏幕分辨率为320X240
使用案例
使用Graphic功能，绘制一个三角形,并修改颜色为红色
Displaying images
功能说明
添加一些本地图片，到屏幕上显示（添加要求：大小为25K以下，格式为jpg或bmp）
-
Show 显示图片
-
Hide 隐藏图片
-
Set x y 设置图片所在的x,y坐标
-
Set x 设置图片所在的x坐标
-
Set y 设置图片所在的y坐标
-
Set image 设置图片为image0
添加图片
首先用APIKey建立起设备与UIFlow的连接，点击页面右上角的云保存按钮，点击image选项，点击Add image从本地添加图片，等待图片上传完成
显示图片
拖动一个image元素到屏幕上，单击元素，在弹出的属性框中选择显示的图片
图片操作
除了在属性框中对image进行编辑以外，可以添加UI选项中的image Block在程序中进行操作
SCREEN
功能说明
对屏幕显示进行操作如调节亮度，改变背景色，旋转屏幕等。
设置屏幕背景颜色
设置屏幕的背景颜色，可以与UI模拟器一同使用
-
Set Screen backgroundColor 设置屏幕背景颜色
-
Set screen rotate mode 设置屏幕旋转角度,默认值为1，如果修改为其他值，屏幕将逆时针旋转
-
Set screen brightness 设置屏幕亮度