Overview

RTKIOT 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

TBD
RTKIOT 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:

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

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

Image

Image 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

Image

Image Path

Note: The image must be pre-imported into the project. Please refer to Image Resource Management for details.

Y

Y

Y

Image Rotation Angle

Image rotation angle.

Y

Y

Y

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.

Y

Y

Y

Image Scale Y

Image vertical scaling degree, is a multiplier/percentage.

Y

Y

Y

Widget that can set image. The properties are shown in the table below.

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.

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

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:

  1. Please sort the images by name;

  2. 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

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 control.

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.

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

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.

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

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.

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

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.

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

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.

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

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).

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

Tab Insertion Position

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

Modify Existing Tab Index X and Y

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

Insert Tab

TabView Overview Window

Please click icon 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.

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

TabView Overview Chart

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

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.

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

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.

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

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.

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

Home Tab

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

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.

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

Un-Locked

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

Locked

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.

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

Image Resource Management

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

Font Resource Management

Image Resource Management

Click image1 to bring up the Image Management view.

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

Image Resource Management Window

Add Images

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

  1. Click image2 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.

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

Create Image Folder

  1. Select the created image folder and click image3 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.

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

Select Image Folder

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

Select Images

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

Add Image(s)

Remove Images/Image Folder

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

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.

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

Preview Images

Refresh

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

Note

Not recommended.

Font Resource Management

Add Third-Party Font

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

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

Font Management

Remove Third-Party Font

Select the font to be removed and click image7.

Quick Start to Tutorials

How to Create Project

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

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.

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

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.

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

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.

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

.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

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

Open Project

There are two ways to open a project.

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

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

Open Project via Selecting .rtkprj

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

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

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

Message Box

How to Open/Close Project

Click File ‣ Start Page on Menu Bar.

How to Export/Pack Project

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

Export

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

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

Export OK

How to Simulate

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

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.

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

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.

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

Convert Project

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

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

Output .bin

Program the output .bin into your IC.