In this section, several useful tools are introduced to make HMI development easier.

Click the Widget Inpsector, users can see the list of all the widgets used in the current page in the Design Panel.

Locked

This option is to lock the selected widget so that its properties are protected and cannot be altered. Once loced, the lock icon turns to gray.

Visible

Visible is to change the visibility of widgets. Sometimes, in HMI designs, widgets are overlap others. By changing the visiblity, users can see the widgets covered by others.

When the eye icon is seen, then the corresponding widget is visible.

Widget Name

Widget Name specifies the type of widget.

Widget Unique Name

The unique identifier of each widget. It can be specified by the users and must be unique.

Users can put designed widget or widget group into My Collections for future usage. The idea is for design-reuse. Some of the elements in HMI design are quite common accross the board. For example, a passowrd input page can be found in various HMI applications. User can design a passowrd input page and place this page in My Collections to be used in afterward projects.

In My Collections page, all the stored items are listed and shown.

How to use it:

1. Select all the widgets, and click the right mouse button for creating a Group. If only one widget is to added to My Collections, then please skip this step.

   

2. After creating a group, please right click Mouse to select Add to My Collections…

   

3. Select to create a new collection or add to an existing collection

   

4. Enter the collection’s name, description and then choose an icon for displaying this collection. After clicking Finish, this private collection is created. The collection’s name is shown as a tab whereas the name for shape definition is shown as the icon name.

   

   

5. Users can simply drag the icon to the Design Panel to use the private collections.

   Right clicking My Collections tab, users can import, export or edit the private collections.

   Right clicking the icon in My Collections, users can edit, delete this collection.

   

We can categorize ADE’s widgets in three groups:

1. Input Widgets:These widgets allows inputs from users or communication interfaces. Widgets such as various Buttons, Touch Area or RTC are in this category.
2. Output Widgets:These widgets present data in HMI or output data via communication interfaces. Widgets such as Gauge, Progress Bar or Image List are in this category.
3. Input&Output Widgets:These widgets have the attributes of both Input Widgets and Output Widgets. Widgets such as prograss bars with knobs are examples.

Any input value for HMI can be stored, modified by widget setting, or manipulated by a Blockly function. Thus, a place holder is required to store the input value. This place holder is called Registers. You can image registers as global variables in any high level programming language or X, Y, D, M registers in PLCs. Every register in HMI has a unique name and ID for identification. Registers has the data type attribute for ensuring the right data format is adopted.

Users who would like to learn more about Registers and how to use them, please take a look at our educational video:

• Educational Video

Registers

There are three types of registers in ADE:

1. System-Defined Registers:System-Defined Registers are pre-defined in ADE enabling users to perform system-level functions such as changing pages.
2. Product-Specific Registers:Different IOT products have a different set of I/O. As a result, the Product-Specific Registers are required to reflect the product difference. These registers are pre-defined, too.
3. User-Defined Registers:As the namme suggests, these registers are created by users. Users are allowed to delete these registers.

In Register Table, users can create User-Defined Registers:

When creating a new register, users are asked to enter the Name, Description, Type, and Initial Value before hand. When “Sent to host” is checked, any value change on this register, the value is sent via the pre-defined communication protocl. The “Validation” attribute allows users to modify the regiser’s value via a Blockly function. All the user-defined registers are deletable.

ADE automatically assign an ID to a newly-created register. Users can drag the register around in the Register Table to change the ID number.

When users want to store a value from an Input Widget, users can accomplish this simply by binding a register to this widget. On the other hand, when users to display a stored value, they can bind a register to an Output Widget for such purpose.

Users can learn how to bind and operate registers from the following example:

First, bind register num to + push button event and set the increasement amount. Once this push busson is pressed, the value of the bound register is increased by such amount.

Next, bind register num to – push button event and set the decrement amount. Once this push button is pressed, the value of the bound register is decreased by such amount.

Bind register num to Set 0 push button’s event and set the value of register num to zero once this push button is pressed.

To complete this HMI project, a Progress Bar and a Scrolling Label are then dragged and dropped into the design panel. These two widgets are also bound with register num. The maximum and minimum values of the progress bar is set to the desired values. The Scrolling Label is to show the value of register num.

From the above example, we learn that a register’s value can be altered by input widgets and can be shown by output widgets.

How to use registers

For how to use registers in ADE, please refer to Register Tabel Editor and Register Operation.

Registers can be manipulated by the built-in Blockly viusal programming langague:

In any ADE’s Blockly Editor, choose Register Tag, the following pop-up menu will show. The first block is the function to set register. Other blocks represent all the registers defined in ADE.

• Set Register: Set Register Block is to set the value of a register. First, users can select which register to be set. Following this block, a value block can be attached. The assigned value’s type must meet the type definition of the regsiter. If this register is bound with an output widget, the change of the register’s value will be reflected next time when the screen refreshes.
• Register Usage: Register blocks are be used in math, logic or string operation blocks.

In addition, registers can be used for triggering events. Any change of the register value triggers an execution of pre-specified program.

Users can use a system widget called Register Observer for monitoring any change of a register. If the value of a register is modified by an input widget, I/O pins or a Blockly function, the Register Observer is triggered. Then the bound behavior program, a Blockly program, is called and executes.

Click Register tab, all Register blocks and Register Setting block are shown.

For Register Setting block, users can choose which register to set and then assgin a value to this register.

How to use register, how to get the register’s content and use it in a math operation:

Control Panel

Control Panel includes System Menu and Tool Bar.

• System Menu: Please refer System Menu
• Tool Bar: Please refer Tool Bar

Widget Panel

Widget Panel includes Widget, My Collections, Clipart and Widget Inspector.

• Widgets: Please refer Widgets

  

• Private Collections: Please refer My Collections

  

• Clipart: this opens up for collecting artistic images for used as the background images of the HMI designs.

  

• Widget Inspector: Please refer Widget Inspector

  

Design Panel

This Panel is used for designing HMI and setting up the widgets’ attributes.

The software or the application to program the RDK is called ADE (Acorn Development Environment) developed by the manufacturer of RDK. ADE is the only tool that users ever need for designing man machine user interface or HMI. ADE offers excellent sets of widgets that enable users to develop HMI of fascinating visual effects. ADE is a no-code/low-code development platform that requires a very short and flat learning curve. By working with RDK product line and the ADE for HMI designs, users can significantly cut the development cycle time but create an HMI with aesthetics. In short, ADE coupled with RDK is a powerful HMI solution that can shorten customer’s time-to-market cycle with elevated UX.

The system requirement for running ADE is a PC with Window10 64-bit system. Once finishing HMI design in ADE, users only need a USB cable for downloading the HMI design to RDK panel. No other third-party tool chain, compiler, driver, loader is needed.

This document is intended to offer detailed description for the ADE functionalities. Please visit IOT’s website for viewing ADE Educational Videos. Users, armed with this document and our educational videos, will have a pleasant learning experience.

System Requirement

• OS : Windows 10 64bit

• CPU : Intel or AMD processor with 64-bit support

• Disk Storage : 4 GB of free disk space

• Monitor Resolution : 1920×1080

• Internet : Internet connection required for reference document