[Technical Tips] Getting Started with 86HMI Editor and ArduBlock: Simple HMI Light Control Example

ICOP QEC EtherCAT Solutions provides an integrated development environment that allows engineers to quickly build automation applications combining EtherCAT communication, HMI interaction, and control logic. In this example, we demonstrate a simple EtherCAT digital output control scenario using the QEC-M-070T EtherCAT MDevice HMI controller together with the QEC-R11D0FK-N I/O module. When the user presses the control button on the HMI interface, the system sends a command through EtherCAT to the I/O module to switch the digital output, allowing an external indicator light to turn ON or OFF.
The development workflow combines several ICOP development tools. The EtherCAT network and devices are first scanned using 86EVA, the HMI interface is designed using 86HMI Editor, and the control logic is implemented using ArduBlock. By combining these tools, engineers can rapidly create a complete EtherCAT control application with minimal coding effort.

86Duino IDE

To compile and upload the control program to the QEC controller, the 86Duino IDE is required. The 86Duino IDE provides an Arduino-compatible development environment used to upload programs generated from ArduBlock or written using standard C/C++.
Readers can download the latest version of the 86Duino IDE from the QEC website: 86Duino Coding IDE
For users who are new to the platform, a step-by-step guide is also available to help you set up the development environment and get started with your first project: Getting started with the 86Duino

Hardware Setup

In this demonstration, the system is built using an EtherCAT HMI controller and the digital I/O module. The HMI panel provides the user interface, while the digital I/O module is responsible for handling the digital input and output signals.
The following hardware components are used in this example:

• QEC-M-070T – EtherCAT MDevice HMI solutions used for interface design and control logic execution
• QEC-R11D0FK-N – EtherCAT digital I/O module providing 16-ch digital output
• 24V power supply
• Ethernet cable (for EtherCAT communication)

Implementation Steps

The implementation process can be divided into three main steps. First, the EtherCAT devices are scanned and configured using EVA. Next, the HMI interface is designed using 86HMI Editor. Finally, the control logic is created using ArduBlock to complete the light control function.

Step 1 – 86EVA Configurator

1. Set up the development board and port to be used
   
2. Click the 86EVA Configuration Tool
   
3. Click to Connect to scan the device
   
4. Scanning Device Process and Results
   
5. Configure QEC-M-070T and QEC-R11D0FK-N Parameters
   
6. After completing the setup, click Code Generation
   
7. Scanning is complete
   

Step 2 – 86HMI Editor UI Design

1. Click the 86HMI Editor Tool
   
2. Select the board
   
3. Edit Text: Label > Text
   
4. Add control button: Switch
   
5. Add visualization tools: LED (Bright can be set to 0)
   
6. Upload to Generate Example Content
   

Step 3 – ArduBlock Programming

1. Click the ArduBlock Tool
   
2. ArduBlock Work Area
   
3. Add HMI Event Block: HMI.Visual > HMI Event Section
   
4. Add HMI Control Block: if Switch on & off
   
5. Add Digital Output Block: EtherCAT.Pins > Set digital output
   
6. Add HMI Visual Block: HMI.Visual > set LED bright
   
7. Set up the Block value as below
   
8. Upload to Generate Example Content
   

Demonstration Result

1. Upload the generated configuration example content to the QEC-M-070T
   
2. Results Presentation