Overview

RTKIOT Visual Designer is a tool to make graphical interface design for Realtek series ICs, its currently supported ICs are shown in the table below.

No

Supported ICs

1

RTL8762D

2

RTL8762G

3

RTL8763E

4

RTL8772G

5

TBD

RTKIOT Visual Designer supports:

  • Drag and 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 graphical interface.

  • Simulate the GUI project on PC.

This document mainly consists of:

  • Indroduction to Function Panels

  • Indroduction to Resource Management

  • Indroduction to the Menu Bar

  • Quick start to tutorials

  • GUI demo project

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

Function Panels

Toolkit/Widgets

  • Non-containerized widget

    • Can be used as the parent of other widget.

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

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

  • Container widget

    • Can be used as the parent of other widget.

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

    • Visible when child widget is out of range of 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 mark 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.

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

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

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

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

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

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

Note:

  1. When exporting, 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, 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.

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

Y

Y

Y

Color(Highlight) (RGBA)

Background color of partially completed part of 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 user swipes. The properties are shown in the table below.

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

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.

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

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.

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.

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, corresponds to the physical screen, is the root widget of a GUI project. The properties are shown in the table below.

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 Tab widget as 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.

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


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

Notes:

  1. TabView width and height could not be modified, defaulting to Screen’s width and height.

  2. TabView horizontal and vertical coordinate could not be modified, is always 0.

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

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

  5. Tab’s width and height could not be modified, defaulting to TabView’s width and height.

  6. Tab’s horizontal and vertical coordinate could not be modified and is always 0.

Page

Container widget with scrollable content.

Notes:

  1. Page only supports vertical scrolling.

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

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

Y

Y

Y

Win

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

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

Y

Y

Y

Hidden

Indicate 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 properterties to design a graphical interface that can be rendered in the Realtek ICs.

TabView - Create/Delete/Insert Tab

Drag and drop 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 Tab

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

Notes:

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

  2. If idy is 0, 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 you want to delete it.

Insert Tab

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

For example, Tab need to be inserted between Tabs with coordinates (1, 0) and (2, 0), the steps are as follow.

  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 new Tab (2, 0).



Tabview Overview Chart

Please click icon to show TabView Overview Chart.

Notes:

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

  2. The Overview Chart label each Tab with its coordinates. When simulate 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.


Zoom of Design View

There are 3 ways to zoom the Design View.

  1. Press Ctrl key and wheel mouse.

  2. Click “-” and “+” button.

  3. Drag the slider bar.

Property View

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

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 add first at 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 a number of Switch widgets.


Widget Tree supports the following operations.

  1. Select widget: If you select a widget 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.

    • If click the lock button of screen, all the screen’s child widgets will be locked, then user could not drag or resize the widgets on Design View.

    • If clik the lock button of Tab, all the tab’s child widgets will be locked, then user could not drag or resize the widgets on Design View.


Resource Mangement

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

Image Resource Management

Click icon to bring up the Image Management view.

Add Images

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

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

  1. Select the created image folder and click icon to select images (multiple selection is 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.



Remove Images/Image Folder

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

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.

Refresh

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

Note: Not recommended.

Font Resource Management

Add Third-Party Font

If need use a third-party font (.ttf), please click icon to import the resource first, otherwise the locally installed font will be used.

Remove Third-Party Font

Select the font to be removed and click icon.

Quick Start To Tutorials

How to Create Project

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.

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.

After you drag and drop a widget on Design View, and click “File - Save” or press Ctrl + S, the .rtkui file will be created.

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

There are two ways to open project.

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

  1. Select a .rtkprj in Recent Project area. If the project listed on Recent Project area, a message window pops up.

How to Open/Close Project

Click “File -> Start Page” on Menu Bar.

How to Export/Pack Project


Click “Export” on Menu Bar, the output are shown in the figure below.

How to 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 project with resolution 454*454.

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

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 Menu Bar, please refer to “Convert Project” for details. If current IC type of the project does not match your IC, please select target IC type, enter the target resolution and click “Convert”.

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

Program the output .bin into your IC.