Realtek Visual Designer
概述
Realtek Visual Designer 可视化设计工具是一个用于为 Realtek 系列 IC 制作图形界面设计的工具,目前支持的 IC 列表如下表所示。
序号 |
支持的 IC |
---|---|
1 |
RTL8762D |
2 |
RTL8762G |
3 |
RTL8763E |
4 |
RTL8772G |
5 |
RTL8773E |
6 |
TBD |
Realtek Visual Designer 可视化设计工具支持以下功能:
从工具箱中拖拽控件并将其放置在设计视图中;
拖放控件以在设计视图中更改其位置,或通过属性视图修改控件的位置和外观;
导出用户设计的 GUI 项目为
.bin
文件,将.bin
文件烧录到 IC 上以显示图形界面;在 PC 上模拟 GUI 项目。
本文档主要包括以下内容:
为了简化文档,下文中使用 工具 来指代 Realtek Visual Designer 可视化设计工具。
示例
示例1
布局:左侧包含三个单选按钮,右侧显示一张图片。
功能:通过按下评估板 (EVB) 上的不同按钮,触发右侧图片内容的切换。

示例1 用户界面效果
创建示例1
-
创建新的 RVD 项目
打开 RVD 工具后,可看到此页面。
点击黄色文件夹图标创建项目。
创建新的 RVD 项目
-
添加图片资源
根据图片所示步骤添加图片资源。
添加图片资源
添加图片资源后,界面显示类似于下图。
图片添加完成
-
添加三个单选按钮:
将 RadioButton 控件拖动到中央画布。
为单选按钮设置背景图片(BG Image),按下时显示高亮图片。
单选按钮设置
调整三个单选按钮的位置和大小,使其在左侧对齐。
右键单击单选按钮,将其大小设置为与背景图片一致。
调整位置和大小
-
添加两个图片页面:
将 TabView 控件拖动到画布。
点击画布右侧的蓝色箭头创建第二个选项卡。
选择 tab0 和 tab1,分别为每个选项卡添加一张图片。
添加新选项卡
-
添加单选按钮选择以切换图片:
配置单选按钮的选中事件。
在 radiobutton0。
中选择在 Event Setting 界面中,设置触发条件为 OnSelect,动作设置为跳转到 tab1。
面板的黄色闪电类似地,设置 radiobutton1 跳转到 tab0,radiobutton2 跳转到启动器。
单选按钮选择事件
-
添加基于键盘的图片切换:
将两个 Peripheral Device –> Key 控件拖动到画布。
配置按键点击事件。
在 key0。
中选择在 Event Setting 界面中,设置触发条件为 OnClick,动作设置为跳转到 tab1。
面板的黄色闪电设置 key1 跳转到 tab0。
在 key0 的 ID 设置为 49,key1 的 ID 设置为 50(对应 PC 环境中的键盘按键 1 和 2)。
面板的 界面中,将
按键点击事件
-
预览和导出:
点击顶部菜单中的 Export 和 Simulate 选项以预览效果。
检查导出文件目录:
<project_folder>\Export\root
。
示例2
左上:显示两张具有混合效果(透明和黑色背景)的图片。
左下:显示两种不同字体大小的文本。
右侧:一张具有上下往复动画的图片。

示例2 用户界面效果
创建示例2
-
创建新的 RVD 项目
打开 RVD 工具后,可看到此页面。
点击黄色文件夹图标创建项目。
创建新的 RVD 项目
-
添加图片资源
请参阅示例1。
-
添加四张图片:
从 Image 控件拖动到画布。
面板将在 Image 属性为指定的图片资源。
面板中设置右键单击画布上的图片控件,将其大小设置为与图片资源一致。
调整图片控件的布局。
-
设置图片导出格式:
默认情况下,图片转换使用 GlobalSetting ( Color Space 设置为 RGB565 )。
若需为特定图片资源应用不同的转换(例如保留透明效果),需为该图片资源使用新的转换设置。
前往
创建新的转换设置。配置选项,如 Color Space、Compress 和 Mix Alpha Channel。
设置图片导出格式
关闭对话框后,在 Images 窗口中选择图片资源,并在 部分应用新创建的转换设置。
应用转换设置
-
处理 PNG 透明图片:
对于具有透明效果的 PNG 图片,建议使用以下两种设置。
-
透明效果设置:
对于非纯黑色背景层的图片。
将图片转换格式的 Color Space 设置为 ARGB8565 或 ARGB。
将图片控件的 Blending Mode 设置为 SrcOverMode。
透明效果设置
混合模式设置
-
预混合黑色背景效果设置:
对于具有纯黑色背景层的图片(以优化文件大小和显示效率)。
将图片转换格式的 Color Space 设置为 RGB565 或 RGB。
勾选 Mix Alpha Channel。
将图片控件的 Blending Mode 设置为 BypassMode。
黑色背景效果设置
对 image3 应用透明效果,对 image2 应用预混合黑色背景效果。
下图中,效果1为预混合黑色背景效果,效果2为透明效果。
两种图片效果
-
添加图片动画 (对 image1 应用上下往复运动):
-
创建动画:
在 AdvancedTranslate 并点击 Add。
菜单中,将类型设置为这是一个关键帧动画,允许在多个时间点进行操作。
设计动画,使图片在 30% 进度时移动到屏幕底部,在 100% 进度时返回顶部。
设置 Key Times 为 0;0.3;1 (动画开始、30% 进度、100% 进度)。
设置 Values 为 0,0;0,300;0,0 (三组 2D 平移:无水平移动,垂直向下移动 300 像素,然后返回)。
设置 Duration 为动画循环持续时间(以毫秒为单位)。将 Repeat 设置为 0 表示无限循环。
创建动画
-
将动画应用于图片:
选择 image1 并转到 面板。
在黄色闪电 Event Setting 界面中,将触发条件设置为 OnLoad (当图片控件显示时触发)。
点击 Add Event,将 Action 设置为 Animation,并选择新创建的动画(animate0)。
将动画应用于图片
-
-
添加两个文本框:
从 Text 控件拖动到画布。
面板将在
面板的 字段中设置文本内容。在
中配置字体。默认情况下未设置字体。
文本设置
-
创建字体设置:
前往
创建新的转换设置。配置字体文件、字体大小、抗锯齿级别和字符范围。
对于 Text type 设置为 Random,指定 Code Page (例如,CP037 用于英文,CP936 用于中文)。
对于 Text type 设置为 Range,指定 Unicode Range。Code Page 为可选,若设置,则同时生效。
可用字体包括 PC 系统字体和用户添加的字体。
字体设置
如果字体较大且需要显示的字符较少,使用 Range 方法是一种有效的优化策略,可减小导出资源文件的大小。
例如下图中的配置用于仅需显示数字和冒号的文本控件,Unicode 范围为 0x0030-0x003A 和 0x003A-0x003B (起始 Unicode 到结束 Unicode + 1)。
字体设置优化
-
添加自定义字体:
在
部分,点击加号添加 TTF 字体文件。添加的字体将出现在字体设置的 Font 下拉菜单顶部。
添加自定义字体
-
预览和导出:
点击顶部菜单中的
和 选项以预览效果。检查导出文件目录:
<project_folder>\Export\root
。
烧录到 EVB
要查看 EVB 上的用户界面效果,需将 RVD 导出包烧录到设备。
-
为 EVB 预烧录 RVD 项目固件
预下载操作只需执行一次。下载的固件能够解析并显示 RVD 导出的包。
不同 EVB 和芯片对应不同的固件,可在相应的 SDK 中找到固件及固件工程。
-
烧录 RVD 导出包
检查导出文件夹:
<project_folder>\Export\root
。使用与 EVB 对应的图片打包工具打包根文件夹,通常需注意地址设置或闪存分区配置。
参考打包工具的文档获取详细操作说明。图片打包工具通常可在与 EVB 对应的 SDK 中找到。
烧录文件。
重启 EVB 以查看屏幕显示效果。
屏幕显示效果
功能面板
工具箱/控件
-
非容器化控件
可作为其他控件的父控件。
父控件与子控件之间存在坐标跟随关系。
当子控件超出父控件范围时仍可显示。
-
容器化控件
可作为其他控件的父控件。
父控件与子控件之间存在坐标跟随关系。
当子控件超出父控件范围时仍可显示。
可从工具箱中将控件拖放到容器控件中。
本节列出了控件支持的属性,并用 Y 或 N 标记是否 IC 支持该属性。
非容器化控件
文本(Text)
仅用于文本显示,不支持用户输入。属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Text |
显示文本 |
Y |
Y |
Y |
Display Mode |
长文本(超出控件范围的文本内容)的显示模式可使用以下支持的类型: 截断显示模式(truncate):截断文本显示模式 垂直滚动显示模式(verticalscroll):垂直滚动文本显示模式 水平滚动显示模式(horizontalscroll):水平滚动文本显示模式 |
Y |
Y |
Y |
Font Font |
字体设置请参考: 字体转换设置 |
Y |
Y |
Y |
Font Color (RGBA) |
字体颜色设置,使用 RGBA |
Y |
Y |
Y |
图像(Image)
能够设置图像的控件。
属性 |
描述 |
---|---|
Name |
控件名称 |
Size (Height) |
控件高度 |
Size (Width) |
控件宽度 |
X |
相对于父控件的水平坐标 |
Y |
相对于父控件的垂直坐标 |
Image |
图像路径。注意:图像必须预先导入到项目中。详细请参考 资源管理 |
Image Rotation Angle |
图像旋转角度 |
Image Scale X |
图像水平缩放程度,是一个倍数/百分比。例如,设置比例 x 为 0.5 表示图像的实际显示宽度是原始图像宽度的一半 |
Image Scale Y |
图像垂直缩放程度,是一个倍数/百分比 |
Blend Mode |
图像混合模式 图片和背景的混合模式 |
Opacity |
图像不透明度 0~255 |
备注
在导出时,工具将转换导入的图像。可以在 图像转换设置;
中设置图像转换参数,详细请参考如果导入的图像大小与控件的大小不匹配,工具不会对图像进行缩放或裁剪。
图片影片(ImageMovie)
图片影片通过按顺序显示一系列图片帧来实现视频播放效果。
需要设置一个包含图片帧序列的文件夹,帧根据文件名排序并显示。
属性 |
描述 |
---|---|
Name |
控件名称。 |
Size (Height) |
控件高度。 |
Size (Width) |
控件宽度。 |
X |
相对于父控件的水平坐标。 |
Y |
相对于父控件的垂直坐标。 |
Image Directory |
图片目录路径。注意:图片必须预先导入项目。请参阅 图像转换设置 获取详情 |
Image Rotation Angle |
图片旋转角度。 |
Image Scale X |
图片水平缩放程度,为倍数/百分比。例如,设置缩放 X 为 0.5 表示图片实际显示宽度为原始图片宽度的一半。 |
Image Scale Y |
图片垂直缩放程度,为倍数/百分比。 |
Blend Mode |
UI 元素的像素如何与底层或背景像素组合。 |
Opacity |
透明度级别,范围 0~255。 |
Duration |
视频效果的持续时间。 |
备注
导出时,工具将转换导入的图片。图片转换参数可在 图像转换设置 获取详情;
中设置,请参阅如果导入的图片大小与控件大小不匹配,工具不会对图片进行缩放或裁剪。
滑动条(SeekBar)
滑动控件,可以响应用户滑动手势,并改变进度值。其属性如下表所示。

图像滑动条(SeekBar)
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Color(Highlight) (RGBA) |
进度条完成部分的背景色 |
N |
Y |
N |
Color (RGBA) |
整个进度条的背景色 |
N |
Y |
N |
Orientation |
控件显示方向和手势响应方向的类型如下: vertical/V: 垂直方向 arc: 曲线的方向 horizontal/H: 水平方向 |
Y |
Y |
Y |
图像滑动条(Image SeekBar)
具有多个图像作为背景的滑动控件,用户滑动时可以切换到不同的图像,其属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Degree (Start) |
起始角度(如果方向是曲线则无效) |
Y |
Y |
Y |
Degree (End) |
结束角度(如果方向是曲线则无效) |
Y |
Y |
Y |
Image Directory |
包含要在此控件上显示的图像的文件夹 注意:
|
Y |
Y |
Y |
Central X |
弧的中心相对于父控件的水平坐标 |
Y |
Y |
Y |
Central Y |
弧的中心相对于父控件的垂直坐标 |
Y |
Y |
Y |
Orientation |
控件显示方向和手势响应方向的类型如下: vertical/V: 垂直方向 arc: 曲线的方向 horizontal/H: 水平方向 |
Y |
Y |
Y |
单图片滑动条(SingleImage SeekBar)
滑动控件,使用图片作为背景,并根据用户的滑动操作更改显示范围。其属性如下表所示。

单图片滑动条
属性 |
描述 |
---|---|
Name |
控件名称。 |
Size (Height) |
控件高度。 |
Size (Width) |
控件宽度。 |
X |
相对于父控件的水平坐标。 |
Y |
相对于父控件的垂直坐标。 |
BG Image |
图片文件。 |
Orientation |
控件显示方向及手势响应方向,支持以下类型:vertical/V:垂直方向;arc:曲线方向;horizontal/H:水平方向。 |
Blend Mode |
UI 元素的像素如何与底层或背景像素组合。 |
Opacity |
透明度级别,范围 0~255。 |
拇指滑动条(ThumbSeekBar)
拇指滑动条是一个控件,滑动时拇指图片跟随触摸点移动以指示进度。
当进度达到 100% 时,拇指图片切换为高亮图片进行显示。
属性如下表所示。
属性 |
描述 |
---|---|
Name |
控件名称。 |
Size (Height) |
控件高度。 |
Size (Width) |
控件宽度。 |
X |
相对于父控件的水平坐标。 |
Y |
相对于父控件的垂直坐标。 |
Thumb X |
拇指图片的水平偏移。 |
Thumb Y |
拇指图片的垂直偏移。 |
Background |
背景图片文件。 |
Thumb |
拇指图片文件。 |
Thumb(highlight) |
进度达到 100% 时显示的高亮拇指图片。 |
Orientation |
控件显示方向及手势响应方向,支持以下类型:vertical/V:垂直方向;arc:曲线方向;horizontal/H:水平方向。 |
Blend Mode |
UI 元素的像素如何与底层或背景像素组合。 |
Opacity |
透明度级别,范围 0~255。 |
滚轮(Roller)
滚轮是一个根据向上或向下滑动手势滚动文本行的控件。
中间行的文本以不同的颜色高亮显示。
滚动具有惯性和对齐效果,提供流畅的用户体验。

滚轮
属性 |
描述 |
---|---|
Name |
控件名称。 |
Size (Height) |
控件高度。 |
Size (Width) |
控件宽度。 |
X |
相对于父控件的水平坐标。 |
Y |
相对于父控件的垂直坐标。 |
Row Count |
行数。 |
Row Space |
单行高度。 |
Font |
字体设置,请参阅 字体转换设置。 |
Font Color (RGBA) |
字体颜色设置,使用 RGBA 格式。 |
Highlight Font Color |
中间行的字体颜色设置,使用 RGBA 格式。 |
Content alignment |
文本布局。 |
Loop scrolling |
是否在滚动时循环。 |
Items |
每行的文本内容。 |
图表(Chart)
图表是一个支持三种样式的控件:波形、柱状图和折线图。
可以自定义图表的垂直范围和颜色。

图表
下拉框(ComboBox)
下拉框是一个点击时展开的下拉控件。
选择选项后,下拉框收起并显示所选选项。
点击和选择选项时具有高亮效果。

组合框
日历(Calendar)
日历是一个显示一个月日期的万年历控件。
用户可以通过左右滑动切换月份,当前日期高亮显示。

日历
按键(Key)
按键是一个用于物理按钮的控件。
在 PC 上,按键的 ID 映射到 QWERTY 键盘字符的 ASCII 值。
在 EVB 上,按键的 ID 映射基于 SDK 中的移植。

点击按键导航到选项卡
开关(Switch)
具有 已选中 和 未选中 状态的开关控件,其属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
BG Image (Checked) |
已选中状态的背景图像 |
Y |
Y |
Y |
BG Image (Default) |
未选中状态的背景图像 |
Y |
Y |
Y |
圆弧(Arc)
弧形控件,暂时不支持手势,其属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
N |
Size (Height) |
控件高度 |
Y |
Y |
N |
Size (Width) |
控件宽度 |
Y |
Y |
N |
X |
相对于父控件的水平坐标 |
Y |
Y |
N |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
N |
Central X |
圆弧的中心相对于父控件的水平坐标 |
N |
Y |
N |
Central Y |
圆弧的中心相对于父控件的垂直坐标 |
N |
Y |
N |
BG Color |
圆弧背景颜色 |
N |
Y |
N |
Cap Mode |
圆弧端点样式,支持以下选项: 圆形/平头/方形 ![]() |
N |
Y |
N |
Degree (End) |
圆弧的结束度数 |
N |
Y |
N |
Degree (Start) |
圆弧的开始度数 |
N |
Y |
N |
Radius |
圆弧的半径 |
N |
Y |
N |
Stroke Width |
圆弧的描边宽度 |
N |
Y |
N |
容器控件
屏幕(Screen)
屏幕控件,对应于物理屏幕,是 GUI 项目的根控件,其属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
备注
只能修改 Name 属性。
选项卡视图(TabView)和选项卡(Tab)
选项卡视图控件作为父控件,支持上下左右滑动来在选项卡之间切换。选项卡视图控件具有以下属性,如下表所示。

选项卡视图(TabView)和选项卡(Tab)
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Transition |
选项卡切换模式支持以下类型: normal: 无特效 fade: 淡入/淡出 scale: 缩放 fadeScale: 淡入/淡出和缩放 |
N |
Y |
Y |
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Index(X-Axis) |
选项卡视图中选项卡的水平索引 |
Y |
Y |
Y |
Index(Y-Axis) |
选项卡视图中选项卡的垂直索引 |
Y |
Y |
Y |
备注
选项卡视图的宽度和高度不能被修改,会默认设置为屏幕的宽度和高度;
选项卡视图的水平和垂直坐标不能被修改,始终为 0;
选项卡视图只能作为屏幕控件的子控件使用;
选项卡视图的子控件只能是选项卡;
选项卡的宽度和高度不能被修改,会默认设置为选项卡视图的宽度和高度;
选项卡的水平和垂直坐标不能被修改,始终为 0。
页面(Page)
具有可滚动内容的容器控件。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
备注
页面只支持垂直滚动;
页面控件的宽度和高度只定义了对滑动手势响应的界面区域,是否允许滚动取决于是否将其添加到超出屏幕范围的子控件中。
窗口(Win)
在窗口的宽度和高度定义的区域内,可以响应各种手势,包括点击、长按、按下、释放和滑动,其属性如下表所示。
属性 |
描述 |
8762D/8763E |
8762G/8772G |
TBD |
---|---|---|---|---|
Name |
控件名称 |
Y |
Y |
Y |
Size (Height) |
控件高度 |
Y |
Y |
Y |
Size (Width) |
控件宽度 |
Y |
Y |
Y |
X |
相对于父控件的水平坐标 |
Y |
Y |
Y |
Y |
相对于父控件的垂直坐标 |
Y |
Y |
Y |
Hidden |
表示是否隐藏窗口及其子控件 |
Y |
Y |
Y |
设计视图/画布
用户可以从工具箱面板中拖放控件到设计视图中,调整控件的布局并设置属性,以设计一个可以在瑞昱 IC 中渲染的图形界面。

设计视图
选项卡视图 - 创建/删除/插入选项卡
从工具箱中拖放选项卡视图控件到设计视图中,创建出一个只包含一个主页选项卡(坐标(0,0))的选项卡视图,如下图所示。

创建选项卡视图(TabView)
创建选项卡
可以通过点击设计视图周围的按钮来创建新的选项卡。
备注
如果 idx 为 0,则上下按钮可用;
如果 idy 为 0,则左右按钮可用。
删除选项卡
选择要删除的选项卡,在菜单栏上单击
或按键盘上的 Delete,然后再次确认是否要删除它。
删除选项卡(Tab)确认
插入选项卡
目前,选项卡的插入只支持通过修改现有选项卡的坐标并创建新选项卡来实现。
例如,需要在坐标(1,0)和(2,0)的选项卡之间插入一个选项卡,步骤如下。
将选项卡(2,0)及其右侧的选项卡的 idx 加一,如下图所示;
切换到选项卡(1,0),点击 创建新的选项卡(2,0)。

选项卡(Tab)插入位置

修改选项卡(Tab)坐标点 X 和 Y

插入选项卡(Tab)
选项卡视图概览图
请点击 查看 选项卡视图概览图。
备注
在概览图中,高亮显示的选项卡表示当前在设计视图中正在编辑的选项卡;
概览图使用选项卡的坐标进行标注。当在 IC 中进行模拟或渲染时,坐标为(0, 0)的选项卡显示在主页上,用户可以上下左右滑动以显示其他选项卡。

选项卡视图(TabView)缩略图

选项卡视图(TabView)缩略图
设计视图的缩放
有三种方式可以对设计视图进行缩放。
按住 Ctrl 键,并滚动鼠标滚轮;
点击 - 和 + 按钮;
拖动滑动条。

设计视图缩放
属性视图
在控件树或设计视图中选择一个控件,可以显示出所有控件的属性值,用户可以根据需要进行修改。

属性视图
控件树
控件树用于向用户展示当前布局中控件之间的父子关系和兄弟关系。我们遵循以下约定:
子控件位于父控件的上方,即当父控件和子控件重叠时,子控件会覆盖父控件;
兄弟控件的图层顺序与添加顺序相关,先添加的控件在底部,后添加的控件在顶部。
下图展示了主页选项卡和灯选项卡中的所有子控件,其中主页选项卡只有一个背景图片控件,而灯选项卡包含一个图片控件和多个开关控件。

主页(Home)选项卡

灯(Lamp)选项卡
控件树支持以下操作:
选择控件:如果在控件树中选择一个控件,设计视图中对应的控件会聚焦,并在属性视图中显示其属性;
修改父子关系:在控件树中选择一个控件(除了选项卡/选项卡视图/屏幕),并将其拖放到目标控件项上,该控件将成为目标控件的子控件;
修改控件图层:在控件树中选择一个控件(除了选项卡/选项卡视图/屏幕),将其拖放到目标控件项的上方或下方,在设计视图中,该控件将在目标控件的上方或下方;
-
锁定控件:点击锁定按钮,锁定一个或多个控件。
如果点击屏幕的锁定按钮,所有屏幕的子控件将被锁定,用户将无法在设计视图中拖动或调整控件大小;
如果点击选项卡的锁定按钮,所有选项卡的子控件将被锁定,用户将无法在设计视图中拖动或调整控件大小。

未锁定

锁定
事件设置
触发事件简介
名称 |
描述 |
支持的控件 |
---|---|---|
OnClick |
当控件被点击时触发。 |
Button、Win、Key |
OnSelect |
当选择一个选项或项目时触发。 |
RadioButton |
OnLoad |
当控件或页面加载时触发。 |
Image、SeekBar 系列、Win |
OnValueChange |
当控件的值或状态发生变化时触发。 |
ThumbSeekBar、ImageSeekBar、SingleImageSeekBar |
OnOn |
当控件被打开或激活时触发。 |
Switch |
OnOff |
当控件被关闭或停用时触发。 |
Switch |
OnTime |
由实时时间或数据触发。 |
Image(类型:hour、minute、second)、Text |
OnPeripheral |
由外设触发。 |
Text、Chart、Arc |
OnComplete |
当一个动作或过程完成时触发。 |
ThumbSeekBar、ImageSeekBar、SingleImageSeekBar |
动作简介
名称 |
描述 |
支持的触发事件 |
---|---|---|
Animation |
启动或暂停动画。 |
OnClick、OnLoad、OnOff、OnOn |
Set Time |
控件显示实时时间或日期。 |
OnTime |
Set Peripheral |
控件显示外设的数据。 |
OnPeripheral |
Jump |
导航到显示效果(Tab、Menu、App、launcher)。 |
OnClick、OnSelect、OnComplete |
Set Text Property |
更新文本的内容。 |
OnValueChange |
事件设置示例
Text - OnTime - Set Time
文本以 00:00 格式显示实时时间。
选择一个 Text 控件,点击属性面板中的黄色闪电图标,选择 OnTime 触发器,然后点击 Add Event 图标。

Text - OnTime - Set Time

00:00 格式
Text - OnPeripheral - Set Peripheral
文本显示温度值。
选择一个 Text 控件,点击属性面板中的黄色闪电图标,选择 OnPeripheral 触发器,然后点击 Add Event 图标。

Text - OnPeripheral - Set Peripheral

温度值效果
Image - OnTime - Set Time
图片像手表指针一样旋转。
选择一个 Image 控件,点击属性面板中的黄色闪电图标,选择 OnTime 触发器,然后点击 Add Event 图标。

Image - OnTime - Set Time

像手表指针一样旋转
Win - OnClick - Jump
在窗口范围内点击以导航到特定选项卡。
选择一个 Win 控件,点击属性面板中的黄色闪电图标,选择 OnClick 触发器,然后点击 Add Event 图标。

Win - OnClick - Jump

通过点击窗口导航到选项卡
ImageSeekBar - OnComplete - Jump
将滑动条拖动到 100% 以导航到特定选项卡。
选择一个 ImageSeekBar 控件,点击属性面板中的黄色闪电图标,选择 OnComplete 触发器,然后点击 Add Event 图标。

ImageSeekBar - OnComplete - Jump

通过滑动条到 100% 导航到选项卡
ImageSeekBar - OnValueChange - Set Text Property
拖动滑动条,文本显示当前进度。
选择一个 ImageSeekBar 控件,点击属性面板中的黄色闪电图标,选择 OnValueChange 触发器,然后点击 Add Event 图标。

ImageSeekBar - OnValueChange - Set Text Property

当前进度
Switch - OnOn - Animation
打开开关以启动图片动画。
选择一个 Switch 控件,点击属性面板中的黄色闪电图标,选择 OnOn 触发器,然后点击 Add Event 图标。
OnOff 设置与 OnOn 类似。

Switch - OnOn - Animation

启动图片动画
Key - OnClick - Jump
点击键盘上的按键以导航到特定选项卡。
选择一个 Key 控件,点击属性面板中的黄色闪电图标,选择 OnClick 触发器,然后点击 Add Event 图标。

Key - OnClick - Jump

通过点击按键导航到选项卡
动画设置
RVD 中的动画通过随时间改变特定控件的属性来实现。
动画包含循环次数、持续时间、目标参数等属性。
以及值控制方法,如 from-to 或 key-frames,并支持插值选项。
from-to 方法涉及在单一持续时间内指定属性的起始值和结束值。
key-frames 在此基础上允许定义持续时间内基于百分比的进度节点序列,每个节点与特定的属性值相关联。
事件如 OnClick、OnLoad、OnOff、OnOn 可触发动画的开始或暂停。
动画类型简介
类型 |
描述 |
支持的控件 |
---|---|---|
Rotation |
围绕指定轴或点旋转元素。 |
Image |
Opacity |
更改元素的透明度级别。 |
Image |
AdvancedOpacity |
以关键帧类型更改透明度级别。 |
Image |
Translation |
沿指定方向移动元素。 |
Image |
AdvancedTranslate |
以关键帧类型移动元素。 |
Image |
Scale |
调整元素大小,放大或缩小。 |
Image |
Progress |
动画显示进度指示器,常用于加载或完成条。 |
ProgressBar、SeekBar |
动画示例
旋转
图片围绕其中心以 2000 毫秒的循环无限旋转。
选择 Rotation 类型,然后点击 Add 图标。
面板,选择角度单位为度。
旋转的 Start Central X、Start Central Y、End Central X、End Central Y 均设为 150 像素,因为图片分辨率为 \(300px * 300px\),以实现围绕中心的旋转效果。
持续时间单位为毫秒。
Repeat 0 表示无限循环。

旋转设置

围绕中心旋转
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。
选择 animate2 (即 Rotation 动画)作为 Animation。
选择 image0 (即图片本身)作为 Target Widget。

设置图片的 OnLoad 用于旋转
透明度
以 2000 毫秒的循环无限改变图片的透明度,从 255 透明度到 100 透明度。
选择 Opacity 类型,然后点击 Add 图标。
面板,选择设置 Start Value 和 End Value 范围从 255 到 100。
指定 Duration (以毫秒为单位)。
设置 Repeat 为 0 表示无限循环。

透明度设置

更改透明度级别
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。
选择 animate1 (即 Opacity 动画)作为 Animation。
选择 image0 (即图片本身)作为 Target Widget。

设置图片的 OnLoad 用于透明度
高级平移
图片沿矩形路径移动。
路径为相对 2D 坐标:0,0;0,150;400,150;400,0;0,0,表示向下 150 像素,向右 400 像素,向上 150 像素,向左 400 像素。
关键时间为 0;0.2;0.5;0.7;1,表示在持续时间内的这些进度节点到达对应的坐标。
坐标单位为像素。
Repeat 0 表示无限循环。
计算模式为 Linear,表示线性移动。
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

高级平移设置

矩形路径
计算模式为 Discrete 的效果。

离散效果
高级透明度
按顺序修改四张图片的透明度以实现跑马灯效果。
图片 P:Values 为 255;50;50,Key Times 为 0;0.25;1,表示开始时完全不透明,在 25% 进度时透明度变为 50,图片变暗。
图片 R:Values 为 50;255;50;50,Key Times 为 0;0.25;0.5;1,表示开始时透明度为 50,在 25% 进度时完全不透明,在 50% 进度时恢复透明度 50,并保持到结束。
图片 N:Values 为 50;255;50;50,Key Times 为 0;0.5;0.75;1,表示开始时透明度为 50,在 50% 进度时完全不透明,在 75% 进度时恢复透明度 50,并保持到结束。
图片 D:Values 为 50;255;50,Key Times 为 0;0.75;1,表示开始时透明度为 50,在 75% 进度时完全不透明,在结束时恢复透明度 50。
Calc Mode 为 Discrete,表示透明度值在指定的关键时间点立即更改,没有平滑插值。
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

高级透明度设置

跑马灯效果
Calc Mode 为 Linear,表示透明度值在指定的关键时间点之间平滑线性变化,产生渐进过渡效果。

高级透明度线性效果
平移
图片向右下角移动。
Start X 为 0,End X 为 800,Start Y 为 0,End Y 为 480,表示图片从其原始位置 (0,0) 开始,相对于初始位置向右移动 800 像素,向下移动 480 像素,到达右下角。
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

平移设置

右下角效果
缩放
图片向其中心缩放。
Start Scale X 为 1,End Scale X 为 0.10,Start Scale Y 为 1,End Scale Y 为 0.10,表示图片从原始大小(100% 比例)开始,均匀缩小到原始宽度和高度的 10%,从中心点对称缩放。
Start Central X 为 400,End Central X 为 400,Start Central Y 为 240,End Central Y 为 240,表示图片的中心点在整个缩放过程中固定在坐标 (400, 240),这是 800x480 分辨率图片的中心。
配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

缩放设置

缩放效果
进度
ImageSeekBar 的进度从 0% 增加到 100%。
Start Value 为 0.00 表示初始进度为 0%,End Value 为 1.00 表示在一个动画周期结束时进度达到 100%。

进度设置

0 - 100% 效果
配置 ImageSeekBar 的 OnLoad 事件,以在其出现时立即触发动画播放。

设置 ImageSeekBar 的 OnLoad
多重动画设置
图片同时旋转、改变透明度,并从左上角移动到右下角。

多重动画效果
配置 Image 的 OnLoad 事件,以在其出现时立即触发多重动画播放。

多重动画效果触发
资源管理
只有预导入的图像和字体文件可以被 GUI 项目引用。本章重点介绍如何管理图像和字体资源。 图像和字体资源管理器位于设计视图正下方,如下图所示。

图片资源管理

字库资源管理
图像资源管理
点击 打开图像管理器,如下图所示。

图片管理窗口
添加图像
通过以下步骤可以将图像添加到 GUI 项目中。
点击
,创建一个新的图像文件夹并输入文件夹名称。创建的文件夹位于 GUI 项目目录下的
Resource\image
文件夹中。

创建图片文件夹
选择创建的图像文件夹,然后点击
选择图像(支持多选),将它们添加到文件夹中。添加完成后,图像会被复制到
Resource\image\home
文件夹中。

选择图片文件夹

选择图片

添加图片
移除图像/图像文件夹
选择要移除的图像或图像文件夹,然后点击 。
重命名图像文件夹
选择图像文件夹,双击并输入一个新名称。
预览图像
选择图像文件夹,右侧区域将显示该文件夹中的所有图像。

预览图片
刷新
如果用户在本地操作图像资源而不是通过工具进行操作,可以点击 刷新。
备注
不推荐的做法。
字体资源管理
添加第三方字体
如果需要使用第三方字体(.ttf
),请先点击 导入资源,否则将使用本地安装的字体。

字库管理
移除第三方字体
选择要移除的字体,然后点击 。
快速入门教程
如何创建项目

开始页面
双击运行 RVisualDesigner.exe
,然后按照步骤(1~4)配置项目,点击 创建项目 (5)。
创建项目后, GUI 设计窗口将弹出。左侧是组件区域,中间是设计区域,右侧是部件属性设置区域。

(图形化界面)GUI 设计
备注
新创建的项目文件位于解决方案文件夹下的项目文件夹中。下图展示了一个示例。

工程文件夹
当在设计视图上拖放一个控件,并点击 .rtkui
文件。

.rtkui
文件
如何编写 JavaScript 代码
项目创建完成后,会生成一个 xxx.js
文件,打开该文件,在其中编写 JavaScript 代码以实现控件的事件回调函数。
如何打开项目

打开工程
有两种打开项目的方式:
点击 打开项目,选择一个
.rtkprj
文件进行打开;

选择 .rtkprj
打开工程
在 最近项目 区域选择一个
.rtkprj
文件进行打开。
如果最近项目中有所需的项目,则会弹出一个消息窗口。

消息窗口
如何打开/关闭项目
点击菜单栏上的
。如何导出/打包项目

导出
点击菜单栏中的 导出,导出结果会显示在下图中。

导出成功
如何进行模拟

模拟
点击菜单栏上的 模拟 按钮。
GUI 演示项目
RVisualDesigner-vx.x.x.x.zip
中包含一个 Demo 项目。
文件夹 454x454 包含分辨率为 454*454 的项目。
文件夹 480x480 包含分辨率为 480*480 的项目。

示例
请按以下步骤运行项目:
根据您的 IC 的屏幕尺寸/分辨率打开相应的项目;
点击菜单栏中的 转换项目 。如果当前项目的 IC 类型与您的 IC 不匹配,请选择目标 IC 类型,输入目标分辨率,然后点击 转换 。
,检查 IC 类型。有关详细信息,请参考

转换工程
点击菜单栏中的 导出,等待导出结果弹出框的出现。

导出的 .bin
将导出的 .bin
文件烧录到您的 IC 中。