Realtek Visual Designer

概述

Realtek Visual Designer 可视化设计工具是一个用于为 Realtek 系列 IC 制作图形界面设计的工具,目前支持的 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) 上的不同按钮,触发右侧图片内容的切换。

https://foruda.gitee.com/images/1745737972534824178/c62da3af_10088396.png

示例1 用户界面效果

创建示例1

  1. 创建新的 RVD 项目

    • 打开 RVD 工具后,可看到此页面。

    • 点击黄色文件夹图标创建项目。

    https://foruda.gitee.com/images/1747378412350640924/277f6f75_10088396.png

    创建新的 RVD 项目

  2. 添加图片资源

    • 根据图片所示步骤添加图片资源。

    https://foruda.gitee.com/images/1747378313556720434/f4258ac9_10088396.png

    添加图片资源

    • 添加图片资源后,界面显示类似于下图。

    https://foruda.gitee.com/images/1747378404746671020/fc1601aa_10088396.png

    图片添加完成

  3. 添加三个单选按钮

    • RadioButton 控件拖动到中央画布。

    • 为单选按钮设置背景图片(BG Image),按下时显示高亮图片。

    https://foruda.gitee.com/images/1747378421712716016/725aa16e_10088396.png

    单选按钮设置

    • 调整三个单选按钮的位置和大小,使其在左侧对齐。

    • 右键单击单选按钮,将其大小设置为与背景图片一致。

    https://foruda.gitee.com/images/1747378123869707204/e4806247_10088396.png

    调整位置和大小

  4. 添加两个图片页面

    • TabView 控件拖动到画布。

    • 点击画布右侧的蓝色箭头创建第二个选项卡。

    • 选择 tab0tab1,分别为每个选项卡添加一张图片。

    https://foruda.gitee.com/images/1747378145157577091/8371fd7f_10088396.png

    添加新选项卡

  5. 添加单选按钮选择以切换图片

    • 配置单选按钮的选中事件。

    • Widget Tree 中选择 radiobutton0

    • Property 面板的黄色闪电 Event Setting 界面中,设置触发条件为 OnSelect,动作设置为跳转到 tab1

    • 类似地,设置 radiobutton1 跳转到 tab0radiobutton2 跳转到启动器。

    https://foruda.gitee.com/images/1747378997502705601/ad728298_10088396.png

    单选按钮选择事件

  6. 添加基于键盘的图片切换

    • 将两个 Peripheral Device –> Key 控件拖动到画布。

    • 配置按键点击事件。

    • Widget Tree 中选择 key0

    • Property 面板的黄色闪电 Event Setting 界面中,设置触发条件为 OnClick,动作设置为跳转到 tab1

    • 设置 key1 跳转到 tab0

    • Property 面板的 Property Setting 界面中,将 key0 的 ID 设置为 49,key1 的 ID 设置为 50(对应 PC 环境中的键盘按键 1 和 2)。

    https://foruda.gitee.com/images/1747379132608162798/d3df98b2_10088396.png

    按键点击事件

  7. 预览和导出

    • 点击顶部菜单中的 ExportSimulate 选项以预览效果。

    • 检查导出文件目录:<project_folder>\Export\root

示例2

  • 左上:显示两张具有混合效果(透明和黑色背景)的图片。

  • 左下:显示两种不同字体大小的文本。

  • 右侧:一张具有上下往复动画的图片。

https://foruda.gitee.com/images/1745739513678951688/bcb3b0f2_10088396.png

示例2 用户界面效果

创建示例2

  1. 创建新的 RVD 项目

    • 打开 RVD 工具后,可看到此页面。

    • 点击黄色文件夹图标创建项目。

    https://foruda.gitee.com/images/1747379190065350353/f0562096_10088396.png

    创建新的 RVD 项目

  2. 添加图片资源

    • 请参阅示例1。

  3. 添加四张图片

    • Widget 面板将 Image 控件拖动到画布。

    • Property 面板中设置 Image 属性为指定的图片资源。

    • 右键单击画布上的图片控件,将其大小设置为与图片资源一致。

    • 调整图片控件的布局。

  4. 设置图片导出格式

    • 默认情况下,图片转换使用 GlobalSettingColor Space 设置为 RGB565 )。

    • 若需为特定图片资源应用不同的转换(例如保留透明效果),需为该图片资源使用新的转换设置。

    • 前往 Setting ‣ Image Convert ‣ Create 创建新的转换设置。

    • 配置选项,如 Color SpaceCompressMix Alpha Channel

    https://foruda.gitee.com/images/1747379273900269382/dd482c1a_10088396.png

    设置图片导出格式

    • 关闭对话框后,在 Images 窗口中选择图片资源,并在 Image Convert Setting 部分应用新创建的转换设置。

    https://foruda.gitee.com/images/1747379389473127316/bb924260_10088396.png

    应用转换设置

  5. 处理 PNG 透明图片

    • 对于具有透明效果的 PNG 图片,建议使用以下两种设置。

    • 透明效果设置:

      • 对于非纯黑色背景层的图片。

      • 将图片转换格式的 Color Space 设置为 ARGB8565ARGB

      • 将图片控件的 Blending Mode 设置为 SrcOverMode

    https://foruda.gitee.com/images/1747379445252796715/d7d295af_10088396.png

    透明效果设置

    https://foruda.gitee.com/images/1747378376255549129/ce73da02_10088396.png

    混合模式设置

    • 预混合黑色背景效果设置:

      • 对于具有纯黑色背景层的图片(以优化文件大小和显示效率)。

      • 将图片转换格式的 Color Space 设置为 RGB565RGB

      • 勾选 Mix Alpha Channel

      • 将图片控件的 Blending Mode 设置为 BypassMode

    https://foruda.gitee.com/images/1747379511002344906/f2923d90_10088396.png

    黑色背景效果设置

    • image3 应用透明效果,对 image2 应用预混合黑色背景效果。

    • 下图中,效果1为预混合黑色背景效果,效果2为透明效果。

    https://foruda.gitee.com/images/1747378164677646804/e4251487_10088396.png

    两种图片效果

  6. 添加图片动画 (对 image1 应用上下往复运动):

    • 创建动画

      • Animation 菜单中,将类型设置为 AdvancedTranslate 并点击 Add

      • 这是一个关键帧动画,允许在多个时间点进行操作。

      • 设计动画,使图片在 30% 进度时移动到屏幕底部,在 100% 进度时返回顶部。

      • 设置 Key Times0;0.3;1 (动画开始、30% 进度、100% 进度)。

      • 设置 Values0,0;0,300;0,0 (三组 2D 平移:无水平移动,垂直向下移动 300 像素,然后返回)。

      • 设置 Duration 为动画循环持续时间(以毫秒为单位)。将 Repeat 设置为 0 表示无限循环。

    https://foruda.gitee.com/images/1747379593093999226/cf76bb23_10088396.png

    创建动画

    • 将动画应用于图片

      • 选择 image1 并转到 Property 面板。

      • 在黄色闪电 Event Setting 界面中,将触发条件设置为 OnLoad (当图片控件显示时触发)。

      • 点击 Add Event,将 Action 设置为 Animation,并选择新创建的动画(animate0)。

    https://foruda.gitee.com/images/1747379675460127538/5650fafb_10088396.png

    将动画应用于图片

  7. 添加两个文本框

    • Widget 面板将 Text 控件拖动到画布。

    • Property 面板的 Content ‣ Text 字段中设置文本内容。

    • Appearance ‣ Font 中配置字体。默认情况下未设置字体。

    https://foruda.gitee.com/images/1747378331412795283/48cd6c5f_10088396.png

    文本设置

    • 创建字体设置

      • 前往 Setting ‣ Font Convert ‣ Create 创建新的转换设置。

      • 配置字体文件、字体大小、抗锯齿级别和字符范围。

      • 对于 Text type 设置为 Random,指定 Code Page (例如,CP037 用于英文,CP936 用于中文)。

      • 对于 Text type 设置为 Range,指定 Unicode RangeCode Page 为可选,若设置,则同时生效。

      • 可用字体包括 PC 系统字体和用户添加的字体。

      https://foruda.gitee.com/images/1747378366891668382/4748d6ea_10088396.png

      字体设置

      • 如果字体较大且需要显示的字符较少,使用 Range 方法是一种有效的优化策略,可减小导出资源文件的大小。

      • 例如下图中的配置用于仅需显示数字和冒号的文本控件,Unicode 范围为 0x0030-0x003A0x003A-0x003B (起始 Unicode 到结束 Unicode + 1)。

      https://foruda.gitee.com/images/1747378388312263422/024273e4_10088396.png

      字体设置优化

    • 添加自定义字体

      • Fonts 部分,点击加号添加 TTF 字体文件。

      • 添加的字体将出现在字体设置的 Font 下拉菜单顶部。

      https://foruda.gitee.com/images/1747378282217091861/9d242fcc_10088396.png

      添加自定义字体

  8. 预览和导出

    • 点击顶部菜单中的 ExportSimulate 选项以预览效果。

    • 检查导出文件目录:<project_folder>\Export\root

烧录到 EVB

要查看 EVB 上的用户界面效果,需将 RVD 导出包烧录到设备。

  1. 为 EVB 预烧录 RVD 项目固件

    • 预下载操作只需执行一次。下载的固件能够解析并显示 RVD 导出的包。

    • 不同 EVB 和芯片对应不同的固件,可在相应的 SDK 中找到固件及固件工程。

  2. 烧录 RVD 导出包

    • 检查导出文件夹:<project_folder>\Export\root

    • 使用与 EVB 对应的图片打包工具打包根文件夹,通常需注意地址设置或闪存分区配置。

    • 参考打包工具的文档获取详细操作说明。图片打包工具通常可在与 EVB 对应的 SDK 中找到。

    • 烧录文件。

    • 重启 EVB 以查看屏幕显示效果。

    https://foruda.gitee.com/images/1745833726498330826/59e236a8_10088396.jpeg

    屏幕显示效果

功能面板

工具箱/控件

  • 非容器化控件

    • 可作为其他控件的父控件。

    • 父控件与子控件之间存在坐标跟随关系。

    • 当子控件超出父控件范围时仍可显示。

  • 容器化控件

    • 可作为其他控件的父控件。

    • 父控件与子控件之间存在坐标跟随关系。

    • 当子控件超出父控件范围时仍可显示。

    • 可从工具箱中将控件拖放到容器控件中。

本节列出了控件支持的属性,并用 YN 标记是否 IC 支持该属性。

非容器化控件

文本(Text)

仅用于文本显示,不支持用户输入。属性如下表所示。

文本(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

按钮(Button)

可点击的控件,具有文本和背景图片。属性如下表所示。

按钮(Button)控件属性

属性

描述

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

Text X

相对于按钮控件的水平坐标

Y

Y

Y

Text Y

相对于按钮控件的垂直坐标

Y

Y

Y

Display Mode

水平或垂直显示

Y

Y

Y

Font Font

字体设置请参考: 字体转换设置

Y

Y

Y

Text Color (RGB)

文本颜色设置,使用 RGB

Y

Y

Y

Transition

图像转换模式有以下选项:

normal: 无效果

fade: 淡入/淡出

scale: 缩放

fadeScale: 淡入/淡出和缩放

注意:只有在设置了默认和高亮背景图片时,变换模式才会生效,否则默认为 normal

N

Y

Y

BG Image (Default)

默认的背景图像

Y

Y

Y

BG Image (Highlight)

选定/高亮显示的背景图像

Y

Y

Y

BG Imge Rotation Angle

背景图像旋转角度,范围:0~360 度

Y

Y

Y

单选按钮(RadioButton)
  • 单选按钮是一个用户界面元素,允许用户从一组互斥选项中选择一个选项。

  • 属性如下表所示。

https://foruda.gitee.com/images/1745894565905113170/8ba3d87a_10088396.gif

单选按钮

单选按钮控件属性

属性

描述

Name

控件名称。

Group Name

将此按钮链接到一个组,组内同一时间只能选择一个按钮。

Size (Height)

控件高度。

Size (Width)

控件宽度。

X

相对于父控件的水平坐标。

Y

相对于父控件的垂直坐标。

BG Image X

背景图片的水平位置。

BG Image Y

背景图片的垂直位置。

BG Image (Default)

默认背景图片。

BG Image (Highlight)

选中/高亮背景图片。

Image Rotation Angle

背景图片旋转角度,范围:0~360 度。

Blend Mode

混合模式,决定 UI 元素的像素如何与底层或背景像素组合。

Opacity

透明度级别,范围 0~255。

图像(Image)

能够设置图像的控件。

图像(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

备注

  1. 在导出时,工具将转换导入的图像。可以在 菜单栏 ‣ 设置 ‣ 图像转换设置 中设置图像转换参数,详细请参考 图像转换设置;

  2. 如果导入的图像大小与控件的大小不匹配,工具不会对图像进行缩放或裁剪。

图片影片(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

视频效果的持续时间。

备注

  1. 导出时,工具将转换导入的图片。图片转换参数可在 Menu Bar ‣ Setting ‣ Image Convert Setting 中设置,请参阅 图像转换设置 获取详情;

  2. 如果导入的图片大小与控件大小不匹配,工具不会对图片进行缩放或裁剪。

滑动条(SeekBar)

滑动控件,可以响应用户滑动手势,并改变进度值。其属性如下表所示。

https://foruda.gitee.com/images/1710817870508689816/f43215ff_12407535.png

图像滑动条(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)

具有多个图像作为背景的滑动控件,用户滑动时可以切换到不同的图像,其属性如下表所示。

图像滑动条(ImageSeekBar)控件属性

属性

描述

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

包含要在此控件上显示的图像的文件夹

注意:

  1. 请按名称对图像进行排序;

  2. 当用户在控件上滑动时,控件将根据当前进度切换背景图像。

Y

Y

Y

Central X

弧的中心相对于父控件的水平坐标

Y

Y

Y

Central Y

弧的中心相对于父控件的垂直坐标

Y

Y

Y

Orientation

控件显示方向和手势响应方向的类型如下:

vertical/V: 垂直方向

arc: 曲线的方向

horizontal/H: 水平方向

Y

Y

Y

单图片滑动条(SingleImage SeekBar)

滑动控件,使用图片作为背景,并根据用户的滑动操作更改显示范围。其属性如下表所示。

https://foruda.gitee.com/images/1745910726644453215/24d73f89_10088396.gif

单图片滑动条

单图片滑动条控件属性

属性

描述

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)
  • 滚轮是一个根据向上或向下滑动手势滚动文本行的控件。

  • 中间行的文本以不同的颜色高亮显示。

  • 滚动具有惯性和对齐效果,提供流畅的用户体验。

https://foruda.gitee.com/images/1745914810308863014/d9025424_10088396.gif

滚轮

滚轮控件属性

属性

描述

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)
  • 图表是一个支持三种样式的控件:波形、柱状图和折线图。

  • 可以自定义图表的垂直范围和颜色。

https://foruda.gitee.com/images/1745917347774483906/2412b17b_10088396.png

图表

下拉框(ComboBox)
  • 下拉框是一个点击时展开的下拉控件。

  • 选择选项后,下拉框收起并显示所选选项。

  • 点击和选择选项时具有高亮效果。

https://foruda.gitee.com/images/1745918646533630134/034c1b3b_10088396.gif

组合框

日历(Calendar)
  • 日历是一个显示一个月日期的万年历控件。

  • 用户可以通过左右滑动切换月份,当前日期高亮显示。

https://foruda.gitee.com/images/1745921254906327275/87799f1b_10088396.gif

日历

按键(Key)
  • 按键是一个用于物理按钮的控件。

  • 在 PC 上,按键的 ID 映射到 QWERTY 键盘字符的 ASCII 值。

  • EVB 上,按键的 ID 映射基于 SDK 中的移植。

https://foruda.gitee.com/images/1746619930224908218/7fe6fcb1_10088396.gif

点击按键导航到选项卡

开关(Switch)

具有 已选中未选中 状态的开关控件,其属性如下表所示。

开关(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)

弧形控件,暂时不支持手势,其属性如下表所示。

圆弧(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

圆弧端点样式,支持以下选项:

圆形/平头/方形

https://foruda.gitee.com/images/1710817869829442326/90524d4c_12407535.png

N

Y

N

Degree (End)

圆弧的结束度数

N

Y

N

Degree (Start)

圆弧的开始度数

N

Y

N

Radius

圆弧的半径

N

Y

N

Stroke Width

圆弧的描边宽度

N

Y

N

容器控件

屏幕(Screen)

屏幕控件,对应于物理屏幕,是 GUI 项目的根控件,其属性如下表所示。

屏幕(Screen)控件属性

属性

描述

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)

选项卡视图控件作为父控件,支持上下左右滑动来在选项卡之间切换。选项卡视图控件具有以下属性,如下表所示。

https://foruda.gitee.com/images/1710817871000642675/ca6cda22_12407535.png

选项卡视图(TabView)和选项卡(Tab)

选项卡视图(TabView)属性

属性

描述

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

选项卡(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

Index(X-Axis)

选项卡视图中选项卡的水平索引

Y

Y

Y

Index(Y-Axis)

选项卡视图中选项卡的垂直索引

Y

Y

Y

备注

  1. 选项卡视图的宽度和高度不能被修改,会默认设置为屏幕的宽度和高度;

  2. 选项卡视图的水平和垂直坐标不能被修改,始终为 0;

  3. 选项卡视图只能作为屏幕控件的子控件使用;

  4. 选项卡视图的子控件只能是选项卡;

  5. 选项卡的宽度和高度不能被修改,会默认设置为选项卡视图的宽度和高度;

  6. 选项卡的水平和垂直坐标不能被修改,始终为 0。

页面(Page)

具有可滚动内容的容器控件。

页面(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

备注

  1. 页面只支持垂直滚动;

  2. 页面控件的宽度和高度只定义了对滑动手势响应的界面区域,是否允许滚动取决于是否将其添加到超出屏幕范围的子控件中。

窗口(Win)

在窗口的宽度和高度定义的区域内,可以响应各种手势,包括点击、长按、按下、释放和滑动,其属性如下表所示。

窗口(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 中渲染的图形界面。

https://foruda.gitee.com/images/1721627839639298235/033d3a5b_12407535.png

设计视图

选项卡视图 - 创建/删除/插入选项卡

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

https://foruda.gitee.com/images/1721627964036015694/3b5ee0d4_12407535.png

创建选项卡视图(TabView)

创建选项卡

可以通过点击设计视图周围的按钮来创建新的选项卡。

备注

  1. 如果 idx 为 0,则上下按钮可用;

  2. 如果 idy 为 0,则左右按钮可用。

删除选项卡

选择要删除的选项卡,在菜单栏上单击 编辑‣删除 或按键盘上的 Delete,然后再次确认是否要删除它。

https://foruda.gitee.com/images/1721628091462645405/beca8dd5_12407535.png

删除选项卡(Tab)确认

插入选项卡

目前,选项卡的插入只支持通过修改现有选项卡的坐标并创建新选项卡来实现。

例如,需要在坐标(1,0)和(2,0)的选项卡之间插入一个选项卡,步骤如下。

  1. 将选项卡(2,0)及其右侧的选项卡的 idx 加一,如下图所示;

  2. 切换到选项卡(1,0),点击 创建新的选项卡(2,0)。

https://foruda.gitee.com/images/1726815120686817698/cdf44743_12407535.png

选项卡(Tab)插入位置

https://foruda.gitee.com/images/1726815280073982051/68230d3d_12407535.png

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

https://foruda.gitee.com/images/1721628460504196478/3446e06e_12407535.png

插入选项卡(Tab)

选项卡视图概览图

请点击 icon 查看 选项卡视图概览图

备注

  1. 在概览图中,高亮显示的选项卡表示当前在设计视图中正在编辑的选项卡;

  2. 概览图使用选项卡的坐标进行标注。当在 IC 中进行模拟或渲染时,坐标为(0, 0)的选项卡显示在主页上,用户可以上下左右滑动以显示其他选项卡。

https://foruda.gitee.com/images/1721628617214746327/0711439d_12407535.png

选项卡视图(TabView)缩略图

https://foruda.gitee.com/images/1721628633709549622/a41c6011_12407535.png

选项卡视图(TabView)缩略图

设计视图的缩放

有三种方式可以对设计视图进行缩放。

  1. 按住 Ctrl 键,并滚动鼠标滚轮;

  2. 点击 -+ 按钮;

  3. 拖动滑动条。

https://foruda.gitee.com/images/1721628744851323697/d56f9725_12407535.png

设计视图缩放

属性视图

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

https://foruda.gitee.com/images/1726814067710788486/a6564f40_12407535.png

属性视图

控件树

控件树用于向用户展示当前布局中控件之间的父子关系和兄弟关系。我们遵循以下约定:

  1. 子控件位于父控件的上方,即当父控件和子控件重叠时,子控件会覆盖父控件;

  2. 兄弟控件的图层顺序与添加顺序相关,先添加的控件在底部,后添加的控件在顶部。

下图展示了主页选项卡和灯选项卡中的所有子控件,其中主页选项卡只有一个背景图片控件,而灯选项卡包含一个图片控件和多个开关控件。

https://foruda.gitee.com/images/1721628970571915820/15772594_12407535.png

主页(Home)选项卡

https://foruda.gitee.com/images/1721628988181629026/d9ff763a_12407535.png

灯(Lamp)选项卡

控件树支持以下操作:

  1. 选择控件:如果在控件树中选择一个控件,设计视图中对应的控件会聚焦,并在属性视图中显示其属性;

  2. 修改父子关系:在控件树中选择一个控件(除了选项卡/选项卡视图/屏幕),并将其拖放到目标控件项上,该控件将成为目标控件的子控件;

  3. 修改控件图层:在控件树中选择一个控件(除了选项卡/选项卡视图/屏幕),将其拖放到目标控件项的上方或下方,在设计视图中,该控件将在目标控件的上方或下方;

  4. 锁定控件:点击锁定按钮,锁定一个或多个控件。

    1. 如果点击屏幕的锁定按钮,所有屏幕的子控件将被锁定,用户将无法在设计视图中拖动或调整控件大小;

    2. 如果点击选项卡的锁定按钮,所有选项卡的子控件将被锁定,用户将无法在设计视图中拖动或调整控件大小。

https://foruda.gitee.com/images/1726816487543506275/da6ebe9d_12407535.png

未锁定

https://foruda.gitee.com/images/1726816816056161349/efcdd833_12407535.png

锁定

事件设置

触发事件简介

触发事件

名称

描述

支持的控件

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 图标。

https://foruda.gitee.com/images/1746534321715090170/409729a5_10088396.png

Text - OnTime - Set Time

https://foruda.gitee.com/images/1746534115101519614/2a71cc0b_10088396.png

00:00 格式

Text - OnPeripheral - Set Peripheral

  • 文本显示温度值。

  • 选择一个 Text 控件,点击属性面板中的黄色闪电图标,选择 OnPeripheral 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746536661568009147/585acc2b_10088396.png

Text - OnPeripheral - Set Peripheral

https://foruda.gitee.com/images/1746536593655244781/847265cf_10088396.png

温度值效果

Button - OnClick - Jump

  • 点击按钮导航到启动器。

  • 选择一个 Button 控件,点击属性面板中的黄色闪电图标,选择 OnClick 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746537843864983728/aeb22ac7_10088396.png

Button - OnClick - Jump

https://foruda.gitee.com/images/1746537471468564505/73316780_10088396.gif

导航到启动器

RadioButton - OnSelect - Jump

  • 点击单选按钮导航到特定选项卡或启动器。

  • 选择一个 RadioButton 控件,点击属性面板中的黄色闪电图标,选择 OnSelect 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746538686942083962/221748a3_10088396.png

RadioButton - OnSelect - Jump

https://foruda.gitee.com/images/1746538630891468492/dad921e7_10088396.gif

导航到选项卡或启动器

Image - OnTime - Set Time

  • 图片像手表指针一样旋转。

  • 选择一个 Image 控件,点击属性面板中的黄色闪电图标,选择 OnTime 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746541398866452997/e2383aac_10088396.png

Image - OnTime - Set Time

https://foruda.gitee.com/images/1746541349306828139/be90966b_10088396.gif

像手表指针一样旋转

Win - OnClick - Jump

  • 在窗口范围内点击以导航到特定选项卡。

  • 选择一个 Win 控件,点击属性面板中的黄色闪电图标,选择 OnClick 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746541398866452997/e2383aac_10088396.png

Win - OnClick - Jump

https://foruda.gitee.com/images/1746583144736863278/8534f639_10088396.gif

通过点击窗口导航到选项卡

ImageSeekBar - OnComplete - Jump

  • 将滑动条拖动到 100% 以导航到特定选项卡。

  • 选择一个 ImageSeekBar 控件,点击属性面板中的黄色闪电图标,选择 OnComplete 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746587643812005158/1bbdb703_10088396.png

ImageSeekBar - OnComplete - Jump

https://foruda.gitee.com/images/1746587570975949917/26ce7d0a_10088396.gif

通过滑动条到 100% 导航到选项卡

ImageSeekBar - OnValueChange - Set Text Property

  • 拖动滑动条,文本显示当前进度。

  • 选择一个 ImageSeekBar 控件,点击属性面板中的黄色闪电图标,选择 OnValueChange 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746596718815338059/ac4bd71f_10088396.png

ImageSeekBar - OnValueChange - Set Text Property

https://foruda.gitee.com/images/1746596678776826816/3fc7f1a9_10088396.gif

当前进度

Switch - OnOn - Animation

  • 打开开关以启动图片动画。

  • 选择一个 Switch 控件,点击属性面板中的黄色闪电图标,选择 OnOn 触发器,然后点击 Add Event 图标。

  • OnOff 设置与 OnOn 类似。

https://foruda.gitee.com/images/1746618191372066531/edcb2463_10088396.png

Switch - OnOn - Animation

https://foruda.gitee.com/images/1746618094829096897/d9c77001_10088396.gif

启动图片动画

Key - OnClick - Jump

  • 点击键盘上的按键以导航到特定选项卡。

  • 选择一个 Key 控件,点击属性面板中的黄色闪电图标,选择 OnClick 触发器,然后点击 Add Event 图标。

https://foruda.gitee.com/images/1746619969278276032/5298b16e_10088396.png

Key - OnClick - Jump

https://foruda.gitee.com/images/1746619930224908218/7fe6fcb1_10088396.gif

通过点击按键导航到选项卡

动画设置

  • RVD 中的动画通过随时间改变特定控件的属性来实现。

  • 动画包含循环次数、持续时间、目标参数等属性。

  • 以及值控制方法,如 from-tokey-frames,并支持插值选项。

  • from-to 方法涉及在单一持续时间内指定属性的起始值和结束值。

  • key-frames 在此基础上允许定义持续时间内基于百分比的进度节点序列,每个节点与特定的属性值相关联。

  • 事件如 OnClickOnLoadOnOffOnOn 可触发动画的开始或暂停。

动画类型简介

动画类型

类型

描述

支持的控件

Rotation

围绕指定轴或点旋转元素。

Image

Opacity

更改元素的透明度级别。

Image

AdvancedOpacity

以关键帧类型更改透明度级别。

Image

Translation

沿指定方向移动元素。

Image

AdvancedTranslate

以关键帧类型移动元素。

Image

Scale

调整元素大小,放大或缩小。

Image

Progress

动画显示进度指示器,常用于加载或完成条。

ProgressBar、SeekBar

动画示例

旋转

  • 图片围绕其中心以 2000 毫秒的循环无限旋转。

  • 选择 Animation 面板,选择 Rotation 类型,然后点击 Add 图标。

  • 角度单位为度。

  • 旋转的 Start Central XStart Central YEnd Central XEnd Central Y 均设为 150 像素,因为图片分辨率为 \(300px * 300px\),以实现围绕中心的旋转效果。

  • 持续时间单位为毫秒。

  • Repeat 0 表示无限循环。

https://foruda.gitee.com/images/1746625013725409821/5120844e_10088396.png

旋转设置

https://foruda.gitee.com/images/1746625315257430404/231e36ab_10088396.gif

围绕中心旋转

  • 配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

  • 选择 animate2 (即 Rotation 动画)作为 Animation

  • 选择 image0 (即图片本身)作为 Target Widget

https://foruda.gitee.com/images/1746626898865085480/4a10b3d2_10088396.png

设置图片的 OnLoad 用于旋转

透明度

  • 以 2000 毫秒的循环无限改变图片的透明度,从 255 透明度到 100 透明度。

  • 选择 Animation 面板,选择 Opacity 类型,然后点击 Add 图标。

  • 设置 Start ValueEnd Value 范围从 255100

  • 指定 Duration (以毫秒为单位)。

  • 设置 Repeat0 表示无限循环。

https://foruda.gitee.com/images/1746625850523787642/1602b1d2_10088396.png

透明度设置

https://foruda.gitee.com/images/1746626034581611764/af8a8a36_10088396.gif

更改透明度级别

  • 配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

  • 选择 animate1 (即 Opacity 动画)作为 Animation

  • 选择 image0 (即图片本身)作为 Target Widget

https://foruda.gitee.com/images/1746626159340482410/e8bee870_10088396.png

设置图片的 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 事件,以在其出现时立即触发动画播放。

https://foruda.gitee.com/images/1746628004131074559/b2312fba_10088396.png

高级平移设置

https://foruda.gitee.com/images/1746627400796126478/27364d84_10088396.gif

矩形路径

  • 计算模式为 Discrete 的效果。

https://foruda.gitee.com/images/1746628523731815603/e8632d15_10088396.gif

离散效果

高级透明度

  • 按顺序修改四张图片的透明度以实现跑马灯效果。

  • 图片 P:Values255;50;50Key Times0;0.25;1,表示开始时完全不透明,在 25% 进度时透明度变为 50,图片变暗。

  • 图片 R:Values50;255;50;50Key Times0;0.25;0.5;1,表示开始时透明度为 50,在 25% 进度时完全不透明,在 50% 进度时恢复透明度 50,并保持到结束。

  • 图片 N:Values50;255;50;50Key Times0;0.5;0.75;1,表示开始时透明度为 50,在 50% 进度时完全不透明,在 75% 进度时恢复透明度 50,并保持到结束。

  • 图片 D:Values50;255;50Key Times0;0.75;1,表示开始时透明度为 50,在 75% 进度时完全不透明,在结束时恢复透明度 50。

  • Calc ModeDiscrete,表示透明度值在指定的关键时间点立即更改,没有平滑插值。

  • 配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

https://foruda.gitee.com/images/1746687165856460117/17efb850_10088396.png

高级透明度设置

https://foruda.gitee.com/images/1746684786170372465/827aa5f3_10088396.gif

跑马灯效果

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

https://foruda.gitee.com/images/1746687410946462671/7ce203ac_10088396.gif

高级透明度线性效果

平移

  • 图片向右下角移动。

  • Start X0End X800Start Y0End Y480,表示图片从其原始位置 (0,0) 开始,相对于初始位置向右移动 800 像素,向下移动 480 像素,到达右下角。

  • 配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

https://foruda.gitee.com/images/1746687959723538000/85b82b79_10088396.png

平移设置

https://foruda.gitee.com/images/1746687915633385177/757fd07c_10088396.gif

右下角效果

缩放

  • 图片向其中心缩放。

  • Start Scale X1End Scale X0.10Start Scale Y1End Scale Y0.10,表示图片从原始大小(100% 比例)开始,均匀缩小到原始宽度和高度的 10%,从中心点对称缩放。

  • Start Central X400End Central X400Start Central Y240End Central Y240,表示图片的中心点在整个缩放过程中固定在坐标 (400, 240),这是 800x480 分辨率图片的中心。

  • 配置图片的 OnLoad 事件,以在其出现时立即触发动画播放。

https://foruda.gitee.com/images/1746688570327220104/3d53ca69_10088396.png

缩放设置

https://foruda.gitee.com/images/1746688538540976083/6035cc85_10088396.gif

缩放效果

进度

  • ImageSeekBar 的进度从 0% 增加到 100%

  • Start Value0.00 表示初始进度为 0%End Value1.00 表示在一个动画周期结束时进度达到 100%

https://foruda.gitee.com/images/1746689450841370398/8b4c10f8_10088396.png

进度设置

https://foruda.gitee.com/images/1746689390015636943/e654d618_10088396.gif

0 - 100% 效果

  • 配置 ImageSeekBarOnLoad 事件,以在其出现时立即触发动画播放。

https://foruda.gitee.com/images/1746689431861966468/858c665b_10088396.png

设置 ImageSeekBar 的 OnLoad

多重动画设置

  • 图片同时旋转、改变透明度,并从左上角移动到右下角。

https://foruda.gitee.com/images/1746690669445832106/ef75fb51_10088396.gif

多重动画效果

  • 配置 ImageOnLoad 事件,以在其出现时立即触发多重动画播放。

https://foruda.gitee.com/images/1746690703380172709/4942fe98_10088396.png

多重动画效果触发

资源管理

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

https://foruda.gitee.com/images/1727330892031779189/262d761a_12407535.jpeg

图片资源管理

https://foruda.gitee.com/images/1721629333990020010/27b6b02c_12407535.png

字库资源管理

图像资源管理

点击 image1 打开图像管理器,如下图所示。

https://foruda.gitee.com/images/1726815968480737363/e2f46e96_12407535.png

图片管理窗口

添加图像

通过以下步骤可以将图像添加到 GUI 项目中。

  1. 点击 image2,创建一个新的图像文件夹并输入文件夹名称。创建的文件夹位于 GUI 项目目录下的 Resource\image 文件夹中。

https://foruda.gitee.com/images/1721629445428238950/c3e216ca_12407535.png

创建图片文件夹

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

https://foruda.gitee.com/images/1721629572036008240/98958d66_12407535.png

选择图片文件夹

https://foruda.gitee.com/images/1725412988097005313/b591b7ca_12407535.png

选择图片

https://foruda.gitee.com/images/1721629616915297638/de3a62a7_12407535.png

添加图片

移除图像/图像文件夹

选择要移除的图像或图像文件夹,然后点击 image4

重命名图像文件夹

选择图像文件夹,双击并输入一个新名称。

预览图像

选择图像文件夹,右侧区域将显示该文件夹中的所有图像。

https://foruda.gitee.com/images/1727330892031779189/262d761a_12407535.jpeg

预览图片

刷新

如果用户在本地操作图像资源而不是通过工具进行操作,可以点击 image5 刷新。

备注

不推荐的做法。

字体资源管理

添加第三方字体

如果需要使用第三方字体(.ttf),请先点击 image6 导入资源,否则将使用本地安装的字体。

https://foruda.gitee.com/images/1710824483191984010/283b1f70_12407535.png

字库管理

移除第三方字体

选择要移除的字体,然后点击 image7

菜单栏

文件

起始页

如果要关闭当前项目并打开一个已存在的项目或新建一个项目,可以通过点击 文件 ‣ 起始页 来打开起始页。 点击 打开项目 或选择一个 .rtkprj 文件并双击打开已存在的项目,或者点击 创建项目 来创建新项目, 请参考 如何创建项目如何打开项目

https://foruda.gitee.com/images/1721629731453730155/b3e315a3_12407535.png

开始页面

保存

保存项目的所有 UI 更改,快捷键是 Ctrl + S

退出保存

当关闭项目时会弹出提示窗口,如下所示。请点击 确定 进行保存,否则更改将会丢失。

https://foruda.gitee.com/images/1721629849823263224/4adf7819_12407535.png

关闭并保存工程

编辑

复制/粘贴

  1. 点击 编辑 ‣ 复制 以复制所选控件,快捷键是 Ctrl + C

  2. 点击 编辑 ‣ 粘贴 以在设计视图中创建所选控件的副本,快捷键是 Ctrl + V

删除

点击 编辑 ‣ 删除 以删除所选控件,或按下键盘上的 Delete 键。

撤销/重做

撤销:撤销对控件所做的更改,快捷键是 Ctrl + Z 。 重做:重新对控件进行更改,快捷键是 Ctrl + Y

转换项目

转换项目窗口用于转换当前项目的 IC 类型和屏幕尺寸/分辨率。

https://foruda.gitee.com/images/1721630083752972113/2f32ba1a_12407535.png

转换工程

修改项目名称

修改项目名称窗口用于修改当前项目的名称。请在输入框中输入新名称。

https://foruda.gitee.com/images/1721630055522858677/e4245c27_12407535.png

工程名称

设置

图像转换设置

图像必须转换才能在 IC 上正确显示,因此用户需要设置正确的转换参数。所有可选参数如下图所示。

https://foruda.gitee.com/images/1721630165031575995/1be72944_12407535.png

图片转换

参数描述如下。

扫描模式

可用的选项如下表所示。

扫描模式可选项

扫描模式

描述

水平

水平扫描

垂直

垂直扫描

颜色空间

图像的颜色空间,可用的选项如下表所示。

颜色空间可选项

颜色空间

描述

RGB565

16 位 RGB 模式

位 4:0 表示蓝色;位 10:5 表示绿色;位 15:11 表示红色。

RTKARGB

16 位 ARGB 模式

位 4:0 表示蓝色;位 9:5 表示绿色;位 14:10 表示红色; 位 15 表示透明度。

RTKRGAB

16 位 RGAB 模式

位 4:0 表示蓝色;位 5 表示透明度;位 10:6 表示绿色;位 15:11 表示红色。

RGB

24 位 RGB 模式

位 7:0 表示蓝色;位 15:8 表示绿色;位 23:16 表示红色。

RGBA

32 位 RGBA 模式

位 7:0 表示蓝色;位 15:8 表示绿色;位 23:16 表示红色; 位 31:24 表示透明度。

BINARY

2-值(0 或 1)图像

压缩

如果勾选 压缩,请根据需要设置压缩参数。可选的压缩模式如下:

  1. 行程长度编码(Run-Length Encoding)

一种无损压缩算法。

如果选择 RLE 作为压缩模式,则需要设置 RLE 级别和 RLE 行程长度参数。

https://foruda.gitee.com/images/1726818028936954872/d4977120_12407535.png

RLE 阶数为 1

https://foruda.gitee.com/images/1726818316484821859/eeb87b7f_12407535.png

RLE 阶数为 2

RLE 阶数

RLE 级别

描述

Level1

1 级压缩

Level2

2 级压缩,基于 1 级压缩的次级压缩

RLE 行程长度

RLE 行程长度

描述

Byte_1

1 个字节,最大为 255

Byte_2

2 个字节,最大为 255

备注

RLE 行程长度:每个行程(Run)在压缩过程中允许的最大重复字符长度。

  1. FastLz:

    一种基于字典和滑动窗口的无损压缩算法,用于压缩具有大量重复值的数据。

  2. YUV_Sample_Blur:

    一种结合 YUV 采样和模糊处理的有损压缩算法。

    YUV 采样:保留图像的亮度信息,并只对色度信息进行采样。

    模糊处理:在 YUV 采样后丢弃每个字节的低位,以达到数据压缩的目的。

YUV 采样模式可选项

YUV 采样模式

描述

YUV444

采样 4 个像素数据到 4 个 Y、4 个 U 和 4 个 V,即每个 Y 对应一组 UV 分量,完全保留 YUV 数据。

YUV422

每 4 个像素数据采样为 4 个 Y、2 个 U 和 2 个 V,即每 2 个 Y 对应一组 UV 分量,数据大小为原始数据的 75%。

YUV411

每 4 个像素数据采样为 4 个 Y、1 个 U 和 1 个 V,即每 4 个 Y 对应一组 UV 分量,数据大小为原始数据的 50%。

YUV422

Y - 亮度; V - 色度

模糊处理模式

模糊处理模式

描述

Bit0

不丢弃低位的保存方式

Bit1

每个字节丢弃位 0(保留 [位 7:位 1])。

Bit2

每个字节丢弃 [位 1:位 0](保留 [位 7:位 2])。

Bit3

每个字节丢弃 [位 3:位 0](保留 [位 7:位 4])。

  1. YUV_Sample_Blur+FastLz

    该算法结合了 YUV_Sample_Blur 和 FastLz 算法。

字体转换设置

包括位图字体和矢量字体。支持 Realtek 系列 IC 的字体在下表中显示。

备注

至少需要创建一个字体转换设置,否则无法在属性视图中为文本类型控件选择字体。

字体类型

字体

8762D/8763E

8762G/8772G

TBD

Vector(矢量)

N

N

Y

Bitmap(位图)

Y

Y

Y

要使用位图字体,需要设置以下参数。

https://foruda.gitee.com/images/1721630232320631022/466a71af_12407535.png

位图字体的转换参数设置

下表列出了每个参数的描述。

支持的字体

参数

描述

Font Setting Name

用户定义的字体设置名称,请确保每次创建不同的字体设置名称。

Font Size

字体大小

Bold

是否为粗体

Italic

是否为斜体

Render Mode

渲染模式,用于表示在转换的 .bin 文件中像素的位数

Scan Mode

扫描模式,保存 .bin 时有两种扫描方式

  • H: 水平扫描

  • V: 垂直扫描

Index Method

索引方式,转换的 .bin 文件重新索引区域的索引方法

Code Page

字库代码页,支持多个代码页

Text Type

文本类型,有以下几种。

  • 范围:

    • 如果文本的 Unicode 范围可以预先确定,请选择此类型,并在范围文本框中输入范围。支持多个范围,请将每个范围单独设置在一行中。

    • 注意:只有范围内的字符将被转换并保存到 .bin 文件中,可以节省存储空间。

  • 随机:

    • 如果文本的 Unicode 范围无法预先确定,请选择此类型。

    • 注意:字库代码页的所有字符都将被转换并保存到 .bin 文件中。

有关矢量字体的参数,请参考下图。

https://foruda.gitee.com/images/1721630326763929958/7a1b4010_12407535.png

矢量字体参数设置

导出

如果您已经完成了 GUI 项目的设计,并且想将其烧录到 IC 中,请点击 导出,然后工具将执行以下操作:

  1. 图像转换;

  2. 字体转换;

  3. .xml.js 、图像和字体打包到输出的 .bin 文件中。

当上述操作完成后,会弹出一个消息框。

https://foruda.gitee.com/images/1721630355854380192/60bbc0af_12407535.png

导出 .bin

.bin 文件可以烧录进您的 IC 中。

模拟

在 UI 上模拟项目。

备注

当您第一次模拟项目时,请先点击 导出,然后再点击 模拟。如果您没有修改任何图像或字体设置,则无需再次点击 导出

https://foruda.gitee.com/images/1710828505193590425/a8c6e2c0_12407535.png

运行模拟器

快速入门教程

如何创建项目

https://foruda.gitee.com/images/1721630502223709854/341d9828_12407535.png

开始页面

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

https://foruda.gitee.com/images/1726818698027723674/8962d02e_12407535.png

(图形化界面)GUI 设计

备注

新创建的项目文件位于解决方案文件夹下的项目文件夹中。下图展示了一个示例。

https://foruda.gitee.com/images/1725505762180091944/39be3e5a_12407535.png

工程文件夹

当在设计视图上拖放一个控件,并点击 文件 ‣ 保存 或按下 Ctrl + S 时,将创建一个 .rtkui 文件。

https://foruda.gitee.com/images/1725505619255178068/e89d3b76_12407535.png

.rtkui 文件

如何编写 JavaScript 代码

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

如何打开项目

https://foruda.gitee.com/images/1721636293745281159/b5fbf3b0_12407535.png

打开工程

有两种打开项目的方式:

  1. 点击 打开项目,选择一个 .rtkprj 文件进行打开;

https://foruda.gitee.com/images/1724911708175163337/8513c36b_12407535.png

选择 .rtkprj 打开工程

  1. 最近项目 区域选择一个 .rtkprj 文件进行打开。

如果最近项目中有所需的项目,则会弹出一个消息窗口。

https://foruda.gitee.com/images/1721636512948372776/7f7820d5_12407535.png

消息窗口

如何打开/关闭项目

点击菜单栏上的 文件 ‣ 起始页

如何导出/打包项目

https://foruda.gitee.com/images/1721636632023023311/9f459245_12407535.png

导出

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

https://foruda.gitee.com/images/1721636703955653703/deacfb05_12407535.png

导出成功

如何进行模拟

https://foruda.gitee.com/images/1721636770252167619/8cfcafa3_12407535.png

模拟

点击菜单栏上的 模拟 按钮。

GUI 演示项目

RVisualDesigner-vx.x.x.x.zip 中包含一个 Demo 项目。

文件夹 454x454 包含分辨率为 454*454 的项目。

文件夹 480x480 包含分辨率为 480*480 的项目。

https://foruda.gitee.com/images/1721636869409777562/bc385a52_12407535.png

示例

请按以下步骤运行项目:

  1. 根据您的 IC 的屏幕尺寸/分辨率打开相应的项目;

  2. 点击菜单栏中的 编辑 ‣ 转换项目 ,检查 IC 类型。有关详细信息,请参考 转换项目 。如果当前项目的 IC 类型与您的 IC 不匹配,请选择目标 IC 类型,输入目标分辨率,然后点击 转换

https://foruda.gitee.com/images/1721636942634993243/11b1e212_12407535.png

转换工程

  1. 点击菜单栏中的 导出,等待导出结果弹出框的出现。

https://foruda.gitee.com/images/1721637000052375270/5e3f1873_12407535.png

导出的 .bin

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