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

This example demonstrates how to quickly implement stepper motor control using the 86Duino platform — covering HMI button design with 86HMI Editor and drag-and-drop programming with ArduBlock.

86Duino IDE

要編譯並將控制程式上傳至 QEC 控制器，必須使用 86Duino IDE。86Duino IDE 提供了一個與 Arduino 相容的開發環境，可用於上傳由 ArduBlock 生成的程式，或使用標準 C/C++ 編寫的程式。
讀者可從 QEC 網站下載 86Duino IDE 的最新版本： 86Duino Coding IDE
對於初次使用本平台的用戶，我們也提供了一份逐步指南，協助您設定開發環境並開始進行第一個專案： 86Duino 入門指南

硬體設定

The hardware setup uses the QEC-M-070T as the EtherCAT MDevice controller and the QEC-R11MP3S-N as the SubDevice stepper motor driver:

• QEC-M-070T – 用於介面設計與控制邏輯執行的 EtherCAT MDevice HMI 解決方案
• QEC-R11MP3S-N – EtherCAT motion control with 3-axis Stepper Motor Controller
• 24V 電源供應器
• 乙太網路線（用於 EtherCAT 通訊）

實施步驟

The implementation process can be divided into three main steps.

1. First, use 86EVA to scan and configure the EtherCAT devices. This step ensures that all connected EtherCAT slaves are correctly detected and properly configured.
2. Next, design the HMI interface using 86HMI Editor. The interface can include buttons, text, and other visual elements required for motion control.
3. Finally, create the control logic using ArduBlock. By combining the EtherCAT configuration and HMI interface, the function can be completed and operated through the HMI.

步驟 1 – 86EVA 配置工具

1. Set up the development board and port to be used in tool option
   
2. 點擊 86EVA 設定工具
   
3. 點擊以連線，並掃描該裝置
   
4. Scanning Device
   
5. Configure QEC-M-070T and QEC-R11MP3S-N devices in 86EVA network
   
6. Set up the QEC-M-070T Parameters (As shown in the illustration)
   
7. Set up the QEC-R11MP3S-N M1 in the servo mapping
   
8. Set up the servo 1 parameters (As shown in the illustration)
   
9. Back to 86EVA to click Code Generation
   
10. Scanning is complete and click OK to confirm
    

步驟 2 – 86HMI 編輯器使用者介面設計

1. 點擊 86HMI 編輯器工具
   
2. Select the board and Click OK
   
3. Edit Text: Label > Text (Type the text inside the field)
   
4. Add control button: Button (p1b1) > Edit the button text (Type the text inside the field)
   
5. Add control button: Button (p1b2) > Edit the button text (Type the text inside the field)
   
6. 上傳以產生範例內容
   

步驟 3 – ArduBlock 程式設計

1. 點擊 ArduBlock 工具
   
2. ArduBlock 工作區
   
3. EtheCAT Motion Setup: EtherCAT.Motion > servo setup
   
4. Setting the parameter (As shown in the illustration)
   
5. Add HMI Visual Block: HMI.Visual > HMI Event Section
   
6. Add Control Button: HMI.Control > if Button is clicked
   
7. EtheCAT Motion Setup: add move to block
   
8. Add Condition Block: while block
   
9. EtheCAT Motion Setup: add is moving
   
10. Right-click to clone the whole control block (As shown in the illustration)
    
11. Set up the parameters, and upload to Generate Example Content
    
12. Save draft (Please select the folder where you want to save it)
    
13. Upload and compile the sketch
    

示範結果

1. 結果呈現