Realtek Visual Designer

Overview

Realtek Visual Designer is a tool to create graphical interface designs for Realtek series ICs; its currently supported ICs are shown in the table below.

Supported ICs

No	Supported ICs
1	RTL8762D
2	RTL8762G
3	RTL8763E
4	RTL8772G
5	RTL8773E
6	TBD

Realtek Visual Designer supports:

• Drag the widgets from the toolbox and drop them in the Design View.

• Drag and drop the widget to change its position in the Design View, or modify the position and appearance of the widget via the Property View.

• Export the user-designed GUI project to .bin, and the .bin can be programmed into the IC to display the graphical interface.

• Simulate the GUI project on a PC.

This document mainly consists of:

• Examples

• Event Setting

• Animation Setting

• Function Panels

• Resource Management

• Menu Bar

• Quick Start to Tutorials

• GUI Demo Project

To simplify the document, Tool is used below to refer to the Realtek Visual Designer.

Examples

Example1

• Layout: The left side features three radio buttons, and the right side displays an image.

• Functionality: Pressing different buttons on the Evaluation Board (EVB) triggers the switching of the image content on the right.

Example1 UI Effect

Creating the Example1

1. Create a New RVD Project

   • After opening the RVD tool, you can see this page.

   • Click the yellow folder icon to create a project.

   

   Create a New RVD Project

2. Add Image Resources

   • Add image resources based on the steps shown in the image.

   

   Add Image Resources

   • After adding the image resources, the interface displays similarly to the figure below.

   

   Add Images Done

3. Add Three Radio Buttons:

   • Drag the RadioButton widget to the central canvas.

   • Set the background image (BG Image) for the radio buttons, with the highlighted image displayed when pressed.

   

   Radio Buttons Setting

   • Adjust the position and size of the three radio buttons, aligning them on the left.

   • Right-click a radio button to set its size to match the background image.

   

   Adjust the Position and Size

4. Add Two Image Pages:

   • Drag the TabView widget to the canvas.

   • Click the blue arrow on the right side of the canvas to create a second tab.

   • Select tab0 and tab1, and add an image to each tab.

   

   Add New Tab

5. Add Radio Button Selection to Switch Images:

   • Configure the radio buttons’ selection events.

   • In the Widget Tree, select radiobutton0.

   • In the Property panel’s yellow lightning Event Setting interface, set the trigger to OnSelect and the action to jump to tab1.

   • Similarly, set radiobutton1 to jump to tab0 and radiobutton2 to jump to the launcher.

   

   Radio Button Selection Events

6. Add Keyboard-Based Image Switching:

   • Drag two Peripheral Device Key widgets to the canvas.

   • Configure the key click events.

   • In the Widget Tree, select key0.

   • In the Property panel’s yellow lightning Event Setting interface, set the trigger to OnClick and the action to jump to tab1.

   • Set key1 to jump to tab0.

   • In the Property panel’s Property Setting interface, set key0’s ID to 49 and key1’s ID to 50 (corresponding to keyboard keys 1 and 2 in the PC environment).

   

   Key Click Events

7. Preview and Export:

   • Click the Export and Simulate options in the top menu to preview the effect.

   • Check the exported files in the directory: <project_folder>\Export\root.

Example2

• Left Upper: Displays two images with mixed effects (transparent and black background).

• Left Lower: Shows text in two different font sizes.

• Right: Features an image with an up-and-down reciprocating animation.

Example2 UI Effect

Creating the Example2

1. Create a New RVD Project

   • After opening the RVD tool, you can see this page.

   • Click the yellow folder icon to create a project.

   

   Create a New RVD Project

2. Add Image Resources

   • Please refer to Example1.

3. Add Four Images:

   • Drag the Image widget from the Widget panel to the canvas.

   • Set the Image property in the Property panel to the specified image resource.

   • Right-click the image widget on the canvas to set its size to match the image resource.

   • Adjust the layout of the image widgets.

4. Set Image Export Format:

   • By default, image conversion uses GlobalSetting (with Color Space set to RGB565).

   • To apply a different conversion for specific image resources (e.g., to retain transparency effects), a new conversion setting must be used for that image resource.

   • Go to Setting ‣ Image Convert ‣ Create to create a new conversion setting.

   • Configure options such as Color Space, Compress, and Mix Alpha Channel.

   

   Set Image Export Format

   • Close the dialog, then in the Images window, select the image resource and apply the newly created conversion setting in the Image Convert Setting section.

   

   Apply the Conversion Setting

5. Handle PNG Transparent Images:

   • For PNG images with transparency effects, it is recommended to use the following two settings.

   • Transparent Effect Setting:

     • For images with non-pure black background layers.

     • Set the image conversion format’s Color Space to ARGB8565 or ARGB.

     • Set the image widget’s Blending Mode to SrcOverMode.

   

   Transparent Effect Setting

   

   Blending Mode Setting

   • Pre-mixed Black Background Effect Setting:

     • For images with pure black background layers (to optimize file size and display efficiency).

     • Set the image conversion format’s Color Space to RGB565 or RGB.

     • Check Mix Alpha Channel.

     • Set the image widget’s Blending Mode to BypassMode.

   

   Black Background Effect Setting

   • Apply transparent effect to image3 and pre-mixed black background to image2.

   • In the figure below, Effect 1 is the pre-mixed black background effect, and Effect 2 is the transparent effect.

   

   Two Image Effects

6. Add Image Animation (for image1 with up-and-down reciprocating motion):

   • Create an Animation:

     • In the Animation menu, set the type to AdvancedTranslate and click Add.

     • This is a keyframe animation allowing operations at multiple time points.

     • Design the animation to move the image to the bottom of the screen at 30% progress and return to the top at 100% progress.

     • Set Key Times to 0;0.3;1 (animation start, 30% progress, 100% progress).

     • Set Values to 0,0;0,300;0,0 (three sets of 2D translations: no horizontal movement, vertical movement of 300 pixels down, then back up).

     • Set Duration to the animation cycle duration (in milliseconds). Set Repeat to 0 for infinite looping.

   

   Create an Animation

   • Apply Animation to Image:

     • Select image1 and go to the Property panel.

     • In the yellow lightning Event Setting interface, set the trigger to OnLoad (triggered when the image widget is displayed).

     • Click Add Event, set the Action to Animation, and select the newly created animation (animate0).

   

   Apply Animation to Image

7. Add Two Text Boxes:

   • Drag the Text widget from the Widget panel to the canvas.

   • Set the text content in the Property panel’s Content ‣ Text field.

   • Configure the font in Appearance ‣ Font. By default, no font is set.

   

   Text Setting

   • Create a Font Setting:

     • Go to Setting ‣ Font Convert ‣ Create to create a new conversion setting.

     • Configure the font file, font size, anti-aliasing level, and character range.

     • For Text type set to Random, specify the Code Page (e.g., CP037 for English, CP936 for Chinese).

     • For Text type set to Range, specify the Unicode Range. Code Page is optional and, if set, combines with the range.

     • Available fonts include PC system fonts and user-added fonts.

     

     Font Setting

     • If your font size is large and the number of characters to display is small, using the Range method is an effective optimization strategy for reducing the size of exported resource files.

     • For example, the configuration in the figure below is used for a text widget that only needs to display digits and a colon, with Unicode ranges of 0x0030-0x003A and 0x003A-0x003B (Start Unicode to End Unicode + 1).

     

     Font Setting Optimization

   • Add a Custom Font:

     • In the Fonts section, click the plus sign to add a TTF font file.

     • The added font appears at the top of the Font dropdown in the font settings.

     

     Add a Custom Font

8. Preview and Export:

   • Click the Export and Simulate options in the top menu to preview the effect.

   • Check the exported files in the directory: <project_folder>\Export\root.

Flashing to EVB

To view the UI effects on the EVB, the RVD export pack need to be flashed.

1. Pre-Flashing the RVD Project firmware for EVB

   • The pre-download operation needs to be performed once. The downloaded firmware can parse and display the RVD exported package.

   • Different EVBs and chips correspond to different firmware, which can be found in the corresponding SDK along with the firmware projects.

2. Flashing the RVD Exported Package

   • Check the exported folder: <project_folder>\Export\root.

   • To package the root folder using the image packaging tool corresponding to the EVB, you generally need to pay attention to the address settings or flash partition configuration.

   • Refer to the packaging tool’s documentation for detailed operational instructions. The image packaging tool can typically be found in the SDK corresponding to the EVB.

   • Flash the file.

   • Restart the EVB to view the screen display effect.

Screen Display Effect

Function Panels

Toolkit/Widgets

• Non-containerized widget

  • Can be used as the parent of other widgets.

  • There is a coordinate-following relationship between parent and child widgets.

  • Visible when the child widget is out of range of the parent widget.

• Container widget

  • Can be used as the parent of other widgets.

  • There is a coordinate-following relationship between parent and child widgets.

  • Visible when the child widget is out of range of the parent widget.

  • Can drag and drop a widget from the toolbox into the container widget.

This section lists the properties supported by the widget in tables and marks with Y or N to indicate whether the IC supports them or not.

Non-containerized Widget

Text

Used only for text display and does not support user input. The properties are shown in the table below.

Text Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
Text	Display text.	Y	Y	Y
Display Mode	Long text (text content beyond the widget’s range) display mode with the following supported types. truncate: Truncated display mode; verticalscroll: Vertical scrolling display mode; horizontalscroll: Horizontal scrolling display mode.	Y	Y	Y
Font	Font setting, please refer to Font Convert Setting.	Y	Y	Y
Font Color (RGBA)	Font color setting, use RGBA.	Y	Y	Y

Button

Clickable widget with text and background image. The properties are shown in the table below.

Button Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
Text	Displayed text.	Y	Y	Y
Text X	Horizontal coordinate relative to the Button widget.	Y	Y	Y
Text Y	Vertical coordinate relative to the Button widget.	Y	Y	Y
Display Mode	Horizontal or Vertical display.	Y	Y	Y
Font	Font setting, please refer to Font Convert Setting.	Y	Y	Y
Text Color (RGB)	Text color setting, use RGB.	Y	Y	Y
Transition	Image transition mode with the following options: normal: No effect fade: Fade-in/out scale: Scaling fadeScale: Fade-in/out and scaling Note: Set the transition mode is effective only if set the default and highlight background image, otherwise all normal.	N	Y	Y
BG Image (Default)	Default background image.	Y	Y	Y
BG Image (Highlight)	Selected/Highlight background image.	Y	Y	Y
BG Image Rotation Angle	Background image rotation angle, range: 0~360 degree.	Y	Y	Y

RadioButton

• A radio button is a UI element that allows users to select one option from a group of mutually exclusive choices.

• The properties are shown in the table below.

RadioButton

RadioButton Widget Properties

Property	Description
Name	Widget name.
Group Name	links this button to a group where only one can be selected at a time.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
BG Image X	Horizontal Position of the background image.
BG Image Y	Vertical Position of the background image.
BG Image (Default)	Default background image.
BG Image (Highlight)	Selected/Highlight background image.
Image Rotation Angle	Background image rotation angle, range: 0~360 degree.
Blend Mode	Blending mode determines how the pixels of a UI element combine with the pixels of the underlying layers or background.
Opacity	Transparency level 0~255

Image

A widget to display a image.

Image Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
Image	Image Path Note: The image must be pre-imported into the project. Please refer to Resource Management for details.
Image Rotation Angle	Image rotation angle.
Image Scale X	Image horizontal scaling degree, is a multiplier/percentage. For example, set scale x 0.5 means that the actual display width of the image is half of the original image width.
Image Scale Y	Image vertical scaling degree, is a multiplier/percentage.
Blend Mode	how the pixels of a UI element combine with the pixels of the underlying layers or background.
Opacity	Transparency level 0~255

Note

1. During export, the tool will convert the imported images. You can set the image conversion parameters via Menu Bar ‣ Settings ‣ Image Conversion Settings. For more details, please refer to Image Convert Setting;

2. If the size of the imported image does not match the size of the component, the tool will not scale or crop the image.

ImageMovie

• ImageMovie achieves a video playback effect by sequentially displaying a series of image frames.

• This requires setting up a folder containing the image frame sequence, with frames sorted and displayed based on their filenames.

ImageMovie Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
Image Directory	Image Directory Path Note: The image must be pre-imported into the project. Please refer to Image Resource Management for details.
Image Rotation Angle	Image rotation angle.
Image Scale X	Image horizontal scaling degree, is a multiplier/percentage. For example, set scale x 0.5 means that the actual display width of the image is half of the original image width.
Image Scale Y	Image vertical scaling degree, is a multiplier/percentage.
Blend Mode	how the pixels of a UI element combine with the pixels of the underlying layers or background.
Opacity	Transparency level 0~255
Duration	Duration of the video effect

Note

1. When exporting, the tool will convert the imported images. And the image conversion parameters can be set in Menu Bar ‣ Setting ‣ Image Convert Setting, please refer to Image Convert Setting for details;

2. If the size of the imported image does not match the size of the widget, the tool doesn’t scale or crop the image.

SeekBar

Sliding widget that can respond to user swipe gesture with the widget and change the progress value. The properties are shown in the table below.

SeekBar

SeekBar Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
Color(Highlight) (RGBA)	Background color of partially completed part of the progress bar.	N	Y	N
Color (RGBA)	Background color of the whole progress bar.	N	Y	N
Orientation	Widget display orientation and gesture response orientation with the following types: vertical/V: Vertical orientation arc: Direction of a curve horizontal/H: Horizontal orientation	Y	Y	Y

Image SeekBar

Sliding widget with multi-images as background, and switch to different images as the user swipes. The properties are shown in the table below.

Image SeekBar Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
Degree (Start)	Start degree (Invalid if orientation is arc).	Y	Y	Y
Degree (End)	End degree (Invalid if orientation is arc).	Y	Y	Y
Image Directory	Folder that contains only the images to be displayed on this widget. Notes: Please sort the images by name; When the user swipes on the widget, the widget will switch the background image according to the current progress.	Y	Y	Y
Central X	Horizontal coordinate of the center of the arc relative to the parent widget.	Y	Y	Y
Central Y	Vertical coordinate of the center of the arc relative to the parent widget.	Y	Y	Y
Orientation	Widget display orientation and gesture response orientation with the following types: vertical/V: Vertical orientation arc: Direction of a curve horizontal/H: Horizontal orientation	Y	Y	Y

SingleImage SeekBar

Sliding widget with a image as background, and change the display scope as the user swipes. The properties are shown in the table below.

SingleImage

SingleImage SeekBar Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
BG Image	The image file.
Orientation	Widget display orientation and gesture response orientation with the following types: vertical/V: Vertical orientation arc: Direction of a curve horizontal/H: Horizontal orientation
Blend Mode	how the pixels of a UI element combine with the pixels of the underlying layers or background.
Opacity	Transparency level 0~255

ThumbSeekBar

• ThumbSeekBar is a widget where a thumb image follows the touch point during sliding to indicate progress.

• When the progress reaches 100%, the thumb image switches to a highlighted image for display.

• The properties are shown in the table below.

ThumbSeekBar Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
Thumb X	Thumb image offset.
Thumb Y	Thumb image offset.
Background	The background image file
Thumb	The Thumb image file
Thumb(highlight)	The highlighted thumb image will be displayed when the progress reaches 100%.
Orientation	Widget display orientation and gesture response orientation with the following types: vertical/V: Vertical orientation arc: Direction of a curve horizontal/H: Horizontal orientation
Blend Mode	how the pixels of a UI element combine with the pixels of the underlying layers or background.
Opacity	Transparency level 0~255

SideBar

• SideBar is a widget that can slide in from any of the four sides of the screen.

• It allows you to specify the proportion of the screen it occupies after sliding in.

SideBar Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
Orientation	Slide in from which side of the screen.
Scope	The proportion of the screen it occupies.

Roller

• Roller is a widget that scrolls through rows of text based on upward or downward swipe gestures.

• The text in the middle row is highlighted in a distinct color.

• The scrolling features inertia and alignment effects for a smooth user experience.

Roller

Roller Widget Properties

Property	Description
Name	Widget name.
Size (Height)	Widget height.
Size (Width)	Widget width.
X	Horizontal coordinate relative to the parent widget.
Y	Vertical coordinate relative to the parent widget.
Row Count	Row count
Row Space	Height of one row
Font	Font setting, please refer to Font Convert Setting.
Font Color (RGBA)	Font color setting, use RGBA.
Highlight Font Color	Middle row’s Font color setting, use RGBA.
Content alignment	Text layout
Loop scrolling	If loop while scrolling.
Items	Texts for each row

Chart

• Chart is a widget that supports three styles: waveform, bar, and line.

• It allows customization of the chart’s vertical range and color.

Chart

ComboBox

• ComboBox is a dropdown widget that expands when clicked.

• Upon selecting an option, the dropdown collapses, displaying the chosen option.

• Both clicking and selecting options feature a highlight effect.

ComboBox

Calendar

• Calendar is a perpetual calendar widget that displays the dates of a month.

• Users can swipe left or right to switch between months, with the current date highlighted.

Calendar

Menu

• Menu is a multi-level menu container widget where each menu is mutually exclusive in display.

• By navigating through the menu, users can switch between them.

Navigating Through Menus

• Setting RadioButton OnSelect event for navigating.

Setting RadioButton OnSelect

• Each image nested in a menu.

Widget Tree for Menu

Key

• Key is a widget for physical button.

• On PC, Key’s ID maps to QWERTY keyboard character’s ASCII value.

• On EVB, Key’s ID mapping is based on porting in SDK.

Clicking Key to Navigate to Tab

Switch

Switch widget with Checked and Unchecked states. The properties are shown in the table below.

Switch Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
BG Image (Checked)	Checked state background image.	Y	Y	Y
BG Image (Default)	Unchecked state background image.	Y	Y	Y

Arc

Arc widget, no gesture support yet. The properties are shown in the table below.

Arc Widget Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	N
Size (Height)	Widget height.	Y	Y	N
Size (Width)	Widget width.	Y	Y	N
X	Horizontal coordinate relative to the parent widget.	Y	Y	N
Y	Vertical coordinate relative to the parent widget.	Y	Y	N
Central X	Horizontal coordinate of the center of the arc relative to the parent widget.	N	Y	N
Central Y	Vertical coordinate of the center of the arc relative to the parent widget.	N	Y	N
BG Color	Arc background color.	N	Y	N
Cap Mode	Arc cap mode, the following options are supported: round/butt/square.	N	Y	N
Degree (End)	End degree of arc.	N	Y	N
Degree (Start)	Start degree of arc.	N	Y	N
Radius	Radius of arc.	N	Y	N
Stroke Width	Width of arc stroke.	N	Y	N

Container Widget

Screen

Screen widget, corresponding to the physical screen, is the root widget of a GUI project. The properties are shown in the table below.

Screen Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate, always 0.	Y	Y	Y
Y	Vertical coordinate, always 0.	Y	Y	Y

Note

Only ‘Name’ property can be modified.

TabView and Tab

With the Tab widget as a child widget, it supports up/down/left/right swiping to switch among Tabs. The properties of TabView and Tab are shown in the table below.

TabView and Tabs

TabView Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget, always 0.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget, always 0.	Y	Y	Y
Transition	Tab transition mode with the following supported types: normal: No effect fade: Fade-in/out scale: Scaling fadeScale: Fade-in/out and scaling	N	Y	Y

Tab Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to TabView widget, always 0.	Y	Y	Y
Y	Vertical coordinate relative to TabView widget, always 0.	Y	Y	Y
Index(X-Axis)	Horizontal index of Tabs in TabView.	Y	Y	Y
Index(Y-Axis)	Vertical index of Tabs in TabView.	Y	Y	Y

Note

1. TabView width and height cannot be modified, defaulting to the Screen’s width and height;

2. TabView horizontal and vertical coordinates cannot be modified, always being 0;

3. TabView can only be used as a child of the Screen widget;

4. TabView’s child widgets can only be Tabs;

5. Tab’s width and height cannot be modified, defaulting to TabView’s width and height;

6. Tab’s horizontal and vertical coordinates cannot be modified and are always 0.

Page

Container widget with scrollable content.

Page Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y

Note

1. Page only supports vertical scrolling;

2. The width and height of the Page widget only define the area of the interface that can respond to a swipe gesture. Whether scrolling is allowed depends on whether or not the child widget added to it is outside the scope of the screen.

Win

Within the area defined by Win width and height, it can respond to various gestures, including click, long click, press, press release, and swipe. The properties are shown in the table below.

Win Properties

Property	Description	8762D/8763E	8762G/8772G	TBD
Name	Widget name.	Y	Y	Y
Size (Height)	Widget height.	Y	Y	Y
Size (Width)	Widget width.	Y	Y	Y
X	Horizontal coordinate relative to the parent widget.	Y	Y	Y
Y	Vertical coordinate relative to the parent widget.	Y	Y	Y
Hidden	Indicates whether Win and its child widget need to be hidden.	Y	Y	Y

Design View/Canvas

Users can drag and drop widgets from the Toolbox panel into the Design View, adjust the widgets’ layout, and set properties to design a graphical interface that can be rendered in the Realtek ICs.

Design View

TabView - Create/Delete/Insert Tab

Drag and drop the TabView widget from the Toolbox into the Design View, then a TabView that contains only a home tab (coordinates (0,0)) is created, as shown in the figure below.

Create TabView

Create Tab

New tabs can be created by clicking the buttons around the Design View.

Note

1. If idx is 0, the up and down button is enabled;

2. If idy is 0, the left and right button is enabled.

Delete Tab

Select the tab to be deleted, click Edit ‣ Delete on the menu bar or press the Delete key on the keyboard. Then double-check if the deletion is intended.

Delete Tab Double-Check

Insert Tab

Currently, tab insertion is only supported by modifying the coordinates of an existing tab and creating a new one.

For example, if a tab needs to be inserted between tabs with coordinates (1, 0) and (2, 0), the steps are as follows.

1. Increase the idx of Tab (2, 0) and the tabs to its right by 1, as shown in the figure below;

2. Switch to Tab (1, 0) and click to create the new Tab (2, 0).

Tab Insertion Position

Modify Existing Tab Index X and Y

Insert Tab

TabView Overview Window

Please click to show the TabView Overview Window.

Note

1. The highlighted Tab in the Overview Chart indicates the Tab that is currently being edited in Design View;

2. The Overview Chart labels each Tab with its coordinates. When simulated or rendered in ICs, the Tab with coordinates (0,0) is displayed on the Home page, and users can swipe up/down/left/right to display other Tabs.

TabView Overview Chart

TabView Overview Chart

Zoom of Design View

There are 3 ways to zoom in the Design View.

1. Press the Ctrl key and wheel mouse;

2. Click the - and + buttons;

3. Drag the slider bar.

Zoom of Design View

Property View

Selecting a widget in the Widget Tree or Design View exposes all of the widget’s property values, which users can modify as needed.

Property View

Widget Tree

The Widget Tree is used to present to the users the parent/child/sibling relationship of the currently laid out widgets. And we have the following convention here.

1. The child widget layer is on top of the parent widget layer, i.e., when the parent and child widget overlap, the child widget will cover the parent widget;

2. The layer of sibling widgets is related to the order in which the widgets are added, with widgets added first at the bottom and widgets added later at the top.

The figure shows all the child widgets of the Home tab and Lamp tab, where the Home tab has only one Image child widget for setting the background, and the Lamp tab contains an Image widget and several Switch widgets.

Home Tab

Lamp Tab

Widget Tree supports the following operations.

1. Select widget: If a widget is selected on the Widget Tree, the corresponding widget in the Design View focuses and its properties are shown on Property View;

2. Modify the parent-child relationship: Select a widget on the Widget Tree (except Tab/TabView/Screen) and drag-and-drop it on the target widget item. Then the widget will be a child widget of the target widget;

3. Modify widget layers: Select a widget on the Widget Tree (except Tab/TabView/Screen) and drag-and-drop it to the upper or lower edge of the target widget item. Then on the Design View, the widget will be placed over or under the target widget;

4. Lock widgets: Click the button and lock the widget/widgets.

   1. If the lock button of the screen is clicked, all the screen’s child widgets will be locked, and the user could not drag or resize the widgets on Design View;

   2. If the lock button of the Tab is clicked, all the tab’s child widgets will be locked, and the user could not drag or resize the widgets on Design View.

Un-Locked

Locked

Event Setting

Trigger Events Brief

Trigger Events

Name	Description	Supported Controls
OnClick	Triggered when a widget is clicked.	Button, Win, Key
OnSelect	Triggered when an option or item is selected.	RadioButton
OnLoad	Triggered when a widget or page is loaded.	Image, SeekBar set, Win
OnValueChange	Triggered when a widget’s value or state changes.	ThumbSeekBar, ImageSeekBar, SingleImageSeekBar
OnOn	Triggered when a widget is turned on or activated.	Switch
OnOff	Triggered when a widget is turned off or deactivated.	Switch
OnTime	Triggered by real time or data.	Image(type: hour, minute, second), Text
OnPeripheral	Triggered by a peripheral device.	Text, Chart, Arc
OnComplete	Triggered when an action or process is completed.	ThumbSeekBar, ImageSeekBar, SingleImageSeekBar

Action Brief

Action

Name	Description	Supported Trigger Events
Animation	Start or pause a animation.	OnClick, OnLoad, OnOff, OnOn
Set Time	A widget displays real time or date.	OnTime
Set Peripheral	A widget displays peripheral’s data.	OnPeripheral
Jump	Navigate to a display effect(Tab, Menu, App, launcher).	OnClick, OnSelect, OnComplete
Set Text Property	Update a Text’s content.	OnValueChange

Event Setting Example

Text - OnTime - Set Time

• The Text shows real time in 00:00 format.

• Select a Text widget, click the yellow lightning icon in Property panel, Choose OnTime Trigger, and click Add Event icon.

Text - OnTime - Set Time

00:00 Format

Text - OnPeripheral - Set Peripheral

• The Text shows Temperture value.

• Select a Text widget, click the yellow lightning icon in Property panel, Choose OnPeripheral Trigger, and click Add Event icon.

Text - OnPeripheral - Set Peripheral

Temperture Value Effect

Button - OnClick - Jump

• Click the Button to navigate to the Launcher

• Select a Button widget, click the yellow lightning icon in Property panel, Choose OnClick Trigger, and click Add Event icon.

Button - OnClick - Jump

Navigate to Launcher

RadioButton - OnSelect - Jump

• Click the RadioButton to navigate to the specific Tab or Launcher

• Select a RadioButton widget, click the yellow lightning icon in Property panel, Choose OnSelect Trigger, and click Add Event icon.

RadioButton - OnSelect - Jump

Navigate to Tab or Launcher

Image - OnTime - Set Time

• Image rotates as a watch’s hand.

• Select a Image widget, click the yellow lightning icon in Property panel, Choose OnTime Trigger, and click Add Event icon.

Image - OnTime - Set Time

Rotating as Watch’s Hands

Win - OnClick - Jump

• Click in Win’s scope to navigate to the specific Tab.

• Select a Win widget, click the yellow lightning icon in Property panel, Choose OnClick Trigger, and click Add Event icon.

Win - OnClick - Jump

Navigate to Tab by Clicking Win

ImageSeekBar - OnComplete - Jump

• Drag SeekBar to 100% to navigate to the specific Tab.

• Select a ImageSeekBar widget, click the yellow lightning icon in Property panel, Choose OnComplete Trigger, and click Add Event icon.

ImageSeekBar - OnComplete - Jump

Navigate to Tab by SeekBar to 100%

ImageSeekBar - OnValueChange - Set Text Property

• Drag SeekBar, and text show the current progress.

• Select a ImageSeekBar widget, click the yellow lightning icon in Property panel, Choose OnValueChange Trigger, and click Add Event icon.

ImageSeekBar - OnValueChange - Set Text Property

Current Progress

Switch - OnOn - Animation

• Turn on a Switch to start a image animation.

• Select a Switch widget, click the yellow lightning icon in Property panel, Choose OnOn Trigger, and click Add Event icon.

• Onoff setting is similar to OnOn’s.

Switch - OnOn - Animation

Start a Image Animation

Key - OnClick - Jump

• Click the Key on the keyboard to navigate to the specific Tab.

• Select a Key widget, click the yellow lightning icon in Property panel, Choose OnClick Trigger, and click Add Event icon.

Key - OnClick - Jump

Navigate to Tab by Clicking Key

Animation Setting

• Animations in RVD work by changing a specific widget’s properties over time.

• They come with attributes like loop count, duration, target parameters

• And value control methods such as from-to or key-frames, along with interpolation options.

• The from-to method involves specifying the start and end values of a property within a single duration.

• Key-frames build on this by allowing you to define a sequence of percentage-based progress nodes within that duration, with each node tied to a specific property value.

• Events as OnClick OnLoad OnOff OnOn are able to trigger animation start or pause.

Animation Type Brief

Animation Types

Type	Description	Supported Controls
Rotation	Rotates the element around a specified axis or point.	Image
Opacity	Changes the transparency level of the element.	Image
AdvancedOpacity	Changes the transparency level in Key-frames type.	Image
Translation	Moves the element along a specified direction.	Image
AdvancedTranslate	Moves the element in Key-frames type.	Image
Scale	Resizes the element, either enlarging or shrinking it.	Image
Progress	Animates a progress indicator, often used for loading or completion bars.	ProgressBar, SeekBar

Animation Example

Rotation

• The Image rotating around it’s center in a 2000ms loop infinitely.

• Select the Animation panel, Choose Rotation Type, and click Add icon.

• Angle unit is degree.

• Rotating Start Central X, Start Central Y, End Central X, End Central Y are all 150px, as the image resolution is \(300px * 300px\), for a around it’s center effect.

• Duration uint is millisecond.

• Repeat 0 means indefinite.

Rotation Setting

Rotating around It’s Center

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

• Choose animate2 which is the Rotation as Animation.

• Choose image0 which is the Image itself as Target Widget.

Setting Image’s OnLoad for Rotation

Opacity

• Changes the transparency level of the image in a 2000ms loop infinitely from 255 opacity to 100 opacity.

• Select the Animation panel, Choose Opacity Type, and click Add icon.

• Set Start Value and End Value to range from 255 to 100.

• Specify Duration in milliseconds.

• Set Repeat to 0 for indefinite looping.

Opacity Setting

Changes the Transparency Level

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

• Choose animate1 which is the Opacity as Animation.

• Choose image0 which is the Image itself as Target Widget.

Setting Image’s OnLoad for Opacity

AdvancedTranslate

• Moves the image along a rectangle path.

• Path is relative 2D coordinate: 0,0;0,150;400,150;400,0;0,0, means down 150, then right 400, then up 150, then left 400.

• Key Times are 0;0.2;0.5;0.7;1, means at these progress node within a duration, reaching the corresponding coordinate.

• Coordinate unit is pixel.

• Repeat 0 means indefinite.

• Calc Mode is Linear means linear moving.

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

AdvancedTranslate Setting

Rectangle Path

• Calc Mode Discrete effect.

Discrete Effect

AdvancedOpacity

• Modify the transparency of four images in sequence to achieve a marquee effect.

• Image P: Values are 255;50;50, Key Times are 0;0.25;1, meaning it starts fully opaque, at 25% progress the transparency becomes 50, and the image darkens.

• Image R: Values are 50;255;50;50, Key Times are 0;0.25;0.5;1, meaning it starts with transparency 50, becomes fully opaque at 25% progress, returns to transparency 50 at 50% progress, and remains at transparency 50 until the end.

• Image N: Values are 50;255;50;50, Key Times are 0;0.5;0.75;1, meaning it starts with transparency 50, becomes fully opaque at 50% progress, returns to transparency 50 at 75% progress, and remains at transparency 50 until the end.

• Image D: Values are 50;255;50, Key Times are 0;0.75;1, meaning it starts with transparency 50, becomes fully opaque at 75% progress, and returns to transparency 50 at the end.

• Calc Mode is Discrete means the transparency values change instantly at the specified key times without smooth interpolation between them.

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

AdvancedOpacity Setting

Marquee Effect

• Calc Mode is Linear means the transparency values change smoothly and linearly between the specified key times, creating a gradual transition effect.

AdvancedOpacity Linear Effect

Translation

• The Image moves to the right-down corner.

• Start X 0, End X 800, Start Y 0, End Y 480, meaning the image starts at its original position (0,0) relative to its initial location and moves 800 pixels to the right and 480 pixels down to the bottom-right corner relative to its original position.

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

Translation Setting

Right-Down Effect

Scale

• The Image scales toward its center.

• Start Scale X 1, End Scale X 0.10, Start Scale Y 1, End Scale Y 0.10, meaning the image begins at its original size (100% scale) and uniformly shrinks to 10% of its original width and height, scaling down symmetrically from its center point.

• Start Central X 400, End Central X 400, Start Central Y 240, End Central Y 240, meaning the image’s center point remains fixed at coordinates (400, 240), which is the center of the 800x480 resolution image, throughout the scaling process.

• Configure the OnLoad event of Image to trigger the animation playback immediately upon its appearance.

Scale Setting

Scale Effect

Progress

• The progress of this ImageSeekBar increases from 0% to 100%.

• Start Value 0.00 means the initial progress is 0%, and End Value 1.00 means the progress reaches 100% at the end of one animation cycle.

Progress Setting

0 - 100% Effect

• Configure the OnLoad event of ImageSeekBar to trigger the animation playback immediately upon its appearance.

Setting ImageSeekBar’s OnLoad

Multiple Animation Settings

• The image simultaneously rotates, changes transparency, and moves from the top-left corner to the bottom-right corner.

Multiple Animation Effect

• Configure the OnLoad event of Image to trigger the multiple animation playback immediately upon its appearance.

Multiple Animation Effect Trigger

Resource Management

Only pre-imported image and font files can be referenced by the GUI project. This chapter focuses on how to manage image and font resources. The image and font explorer is located directly below the design view, as shown in the figure below.

Image Resource Management

Font Resource Management

Image Resource Management

Click to bring up the Image Management view.

Image Resource Management Window

Add Images

Images can be added to the GUI project by following the process below.

1. Click to create a new image folder and enter the folder name. The created folder is located in the Resource\image folder under the GUI project directory.

Create Image Folder

2. Select the created image folder and click to select images (multiple selections are possible) to add them to the folder. As shown in the figure below, the images are copied to the Resource\image\home folder after the addition is completed.

Select Image Folder

Select Images

Add Image(s)

Remove Images/Image Folder

Select the image or image folder to be removed and click .

Rename Image Folder

Select the image folder, double-click, and enter a new name.

Preview Images

Select the image folder and all images in this folder will be displayed in the right area.

Preview Images

Refresh

If the user locally operates the image resources, not via Tool, click to refresh.

Note

Not recommended.

Font Resource Management

Add Third-Party Font

If a third-party font (.ttf) is needed, click to import the resource first; otherwise, the locally installed font will be used.

Font Management

Remove Third-Party Font

Select the font to be removed and click .

Menu Bar

File

Start Page

To close the current project and open an existing project or create a new project, open the Start Page by clicking File ‣ Start Page. Click Open Project or select a .rtkprj and double-click to open the existing project, or click Create Project to create a new project. Please refer to How to Create Project and How to Open Project.

Start Page

Save

Save all the UI changes of the project, the shortcut is Ctrl + S .

Exit Save

A prompt window will pop up when closing the project, as shown below. Please click Yes to save, or the changes will be abandoned.

Close and Save Project

Edit

Copy/Paste

1. Click Edit ‣ Copy to copy the selected widget, the shortcut is Ctrl + C.

2. Click Edit ‣ Paste to create a copy of the selected widget on the Design View, the shortcut is Ctrl + V.

Delete

Click Edit ‣ Delete to delete the selected widget, or press the Delete key on the keyboard.

Undo/Redo

Undo: Undo the change made to the widget, the shortcut is Ctrl + Z. Redo: Do the change to the widget again, the shortcut is Ctrl + Y.

Convert Project

The Convert Project window is used to convert the IC type and screen size/resolution for the current project.

Convert Project

Project Name Modification

The Project Name window is used to modify the current project name. Please enter the new name in the input box.

Project Name

Setting

Image Convert Setting

The images must be converted to be displayed correctly on the IC, so users need to set the correct convert parameters. All the optional parameters are shown in the figure below.

Image Convert

The parameters are described as follows.

Scan Mode

The available options are shown in the table.

Scan Mode Options

Scan Mode	Description
Horizontal	Horizontal scan.
Vertical	Vertical scan.

Color Space

Color space of Image, the available options are shown in the table below.

Color Space Options

Color Space	Description
RGB565	16 bit RGB mode Bit 4:0 represents blue; Bit 10:5 represents green; Bit 15:11 represents red.
RTKARGB	16 bit ARGB mode Bit 4:0 represents blue; Bit 9:5 represents green; Bit 14:10 represents red; Bit 15 represents alpha.
RTKRGAB	16 bit RGAB mode Bit 4:0 represents blue; Bit 5 represents alpha; Bit 10:6 represents green; Bit 15:11 represents red.
RGB	24 bit RGB mode Bit 7:0 represents blue; Bit 15:8 represents green; Bit 23:16 represents red.
RGBA	32 bit RGBA mode Bit 7:0 represents blue; Bit 15:8 represents green; Bit 23:16 represents red; Bit 31:24 represents alpha.
BINARY	2-value (0 or 1) image.

Compress

If checked Compress, please set the compression parameter as needed. The optional Compress Mode is as follows:

1. RLE

Run-Length Encoding, a lossless compression algorithm.

If selecting RLE as the Compress Mode, RLE Level and RLE Run Length parameters are mandatory to set.

RLE Level - Level 1

RLE Level - Level 2

RLE Level

RLE Level	Description
Level 1	1-level compress.
Level 2	2-level compress, secondary compress based on the 1-level compress.

RLE Run Length

RLE Run Length	Description
Byte_1	1 byte, Maximum 255.
Byte_2	2 bytes, Maximum 255.

Note

RLE Run Length: Maximum length of duplicate characters allowed per stroke (Run) during compression.

2. FastLz

   A dictionary-and-sliding-window based lossless compression algorithm for compressing data with a large number of repetitive values.

3. YUV_Sample_Blur

   A lossy compression algorithm combining YUV sampling and blurring.

   YUV Sample: Keep the luminance information of the image and only sample the chrominance information.

   Blur: Discard the lower bit of each byte after YUV sampling to achieve the purpose of data compression.

YUV Sample Mode

YUV Sample Mode	Description
YUV444	4 pixel data are sampled to 4 Y, 4 U and 4 V, i.e., each Y corresponds to a set of UV components, fully preserving the YUV data.
YUV422	Every 4 pixel data are sampled to 4 Y, 2 U and 2 V, i.e., every 2 Y corresponds to a set of UV components, data size is 75% of the original.
YUV411	Every 4 pixel data are sampled to 4 Y, 1 U and 1 V, i.e., every 4 Y corresponds to a set of UV components, data size is 50% of the original.
YUV422	Y - luminance; V - chrominance.

Blur Mode

Blur Mode	Description
Bit0	Saving without discarding lower bit.
Bit1	Each byte discards bit0 (preserve [bit7:bit1]).
Bit2	Each byte discards [bit1:bit0] (preserve [bit7:bit2]).
Bit4	Each byte discards [bit3:bit0] (preserve [bit7:bit4]).

4. YUV_Sample_Blur+FastLz

The algorithm combines YUV_Sample_Blur and FastLz.

Font Convert Setting

Include Bitmap Fonts and Vector Fonts. Fonts supported by Realtek series ICs are shown in the table below.

Note

A Font Convert Setting should be created, otherwise selecting a font for the text-type widget in the Property View is not possible.

Supported Fonts Type

Font	8762D/8763E	8762G/8772G	TBD
Vector	N	N	Y
Bitmap	Y	Y	Y

To use Bitmap Fonts, set the following parameters.

Convert Settings of Bitmap Fonts

The following table lists the description of each parameter.

Font Convert Parameters

Parameters	Description
Font Setting Name	User-defined font setting name. Please make sure that you create a different font setting name each time.
Font Size	Font size.
Bold	Bold or not.
Italic	Italic or not.
Render Mode	Bit number used to represent a pixel in the converted .bin file.
Scan Mode	There are two ways to scan when saving .bin. H: Horizontal scanning V: Vertical scanning
Index Method	Index method of the converted .bin’s re-indexing area.
Code Page	Support multiple code pages.
Text Type	The types are as follows. Range: If the text’s Unicode range can be pre-determined, please select this type and enter the range in the Range TextBox. Multiple ranges are supported, please set each range on a separate line. Note: Only the characters within the ranges will be converted and saved to .bin file, which can save storage space. Random: If the text’s Unicode range cannot be pre-determined, please select this type. Note: All characters of Code Page will be converted and saved to .bin file.

Vector Font parameters are shown in the figure below.

Vector Font Parameters

Export

If you have finished designing the GUI project and want to program it to the IC, please click Export, then the Tool performs the following actions:

1. Image convert

2. Font convert

3. Pack the .xml, .js, images and fonts into the output .bin.

When the above actions are done, a message box pops up.

Output .bin

The .bin can be programmed into your IC.

Simulate

Simulate the project on UI.

Note

When simulating the project for the first time, please click Export before clicking Simulate. Then, there is no need to click Export again if no image or font setting is modified.

Running Simulator

Quick Start to Tutorials

How to Create Project

Start Page

Double click and run RVisualDesigner.exe, and then configure the project step by step (1~4) and click Create Project (5). After creation, the GUI design window pops up. The left side is the component area, the center is the design area, and the right side is the widget property setting area.

GUI Design

Note

The newly created project file is located in the project folder under the Solution Folder. There is an example as shown in the figure below.

Project Folder

After dragging and dropping a widget on Design View, and clicking File ‣ Save or pressing Ctrl + S, the .rtkui file will be created.

.rtkui File

How to Write Javascript Code

After the project is created, the xxx.js file is created. The xxx.js file is empty, please code here to implement the widgets’ event callback.

How to Open Project

Open Project

There are two ways to open a project.

1. Click Open Project and select a .rtkprj file.

Open Project via Selecting .rtkprj

2. Select a .rtkprj in the Recent Project area.

If the project is listed in the Recent Project area, a message window pops up.

Message Box

How to Open/Close Project

Click File ‣ Start Page on Menu Bar.

How to Export/Pack Project

Export

Click Export on Menu Bar. The output is shown in the figure below.

Export OK

How to Simulate

Simulate

Click on the Simulate button in the menu bar.

GUI Demo Project

There is a Demo in RVisualDesigner-vx.x.x.x.zip.

The folder - 454x454 contains a project with resolution 454*454.

The folder - 480x480 contains a project with resolution 480*480.

Demo

Please follow the steps to demo the project.

1. Open the project according to the screen size/resolution of your IC;

2. Check the IC type by clicking Edit ‣ Convert Project on the Menu Bar. Please refer to Convert Project for details. If the current IC type of the project does not match your IC, please select the target IC type, enter the target resolution, and click Convert.

Convert Project

3. Click Export on the Menu Bar and wait until the export ok/fail message box pops up.

Output .bin

Program the output .bin into your IC.