86HMI Editor User Manual

2024.08.15, 86HMI Editor 1.2.

1. Introduction

1.1 Description

86HMI Editor is a robust human-machine interface (HMI) tool designed for engineers and designers utilizing 86Duino IDE. Based on LVGL 7.11, it provides a straightforward and easy-to-use interface, making it simple to build and edit various HMI interfaces to satisfy your application needs. (For more LVGL information, please go to: https://docs.lvgl.io/7.11/index.html)

Through 86HMI Editor, you can easily design HMI interfaces for the 86Duino controlling system, including ImageButton, Label, Image, Chart, Switch, etc. This tool supports basic interface settings and provides rich component libraries to fulfill different application needs. Besides, 86HMI Editor is also equipped with a strong code generation feature that can initiate corresponding codes without manual coding. This makes the coding process more efficient with lower error risk.

Whether you are a beginner or an experienced HMI designer, 86HMI Editor is an ideal tool for designing an exquisite and functionally rich HMI interface for your control application needs.

This document will dive into how to utilize this powerful tool so you can master its various functions and features, including:

1. Introduction of Development Interface Feature Sections, including Material Theme Configurator, saving and retrieving custom graphics, sound effects, font file sources, switching language, etc.
2. Setting configuration and Introduction of each component, like the component display picture below.
3. Usage of auxiliary tools. Including a multi-option configurator that can pre-set the even bar of happened component events, etc.

2. Install and Start 86HMI

2.1  Install 86Duino IDE

Download 86Duino IDE from https://www.qec.tw/software/.

After downloading, please unzip the .zip file. Then, double-click 86duino.exe to start the program without installing additional software.

*Warning: If Windows warning notification pop up, please click Detail Information, and then click Continue.

After opening 86Duino Coding IDE 500, you will see the following page.

2.2  Start 86HMI

After starting 86Duino IDE, you can open the 86HMI tool by clicking the buttons below.

2.2.1  Select QEC Master

After starting, please select the corresponding QEC master device for configuration.

1. QEC-M-043T: Matching 4.3” LCD display.
   
2. QEC-M-070T: Matching 7” LCD display.
   
3. QEC-M-090T: Matching 9” LCD display.
   
4. QEC-M-150T: Matching 15” LCD display.
   

2.2.2  Board options

A. Screen rotation:

The HMI display orientation setting should match the actual usage direction of the customer’s HMI LCD. After editing the project in the workspace and uploading it to QEC, the HMI will be set according to the selected direction.

Later, when editing in HMI, the workplace screen orientation will also be changed to landscape or portrait according to the setting.

0° & 180°	90° & 270°

B. Default font:

The default CJK font (Chinese, Japanese, Korean) supports most national language fonts.
LVGL built-in font is the built-in font for LVGL that only supports English.

2.2.3  Entering the Editing Page

After selecting the corresponding board size, click “OK” to enter the workspace page.

You will see this page after successfully entering the 86HMI editing page.

2.2.4  Complete Editing

After editing, you must click the code generation button to transfer 86HMI into 86Duino IDE code, save the project file, and close the page. Users can utilize API through 86Duino Coding IDE or ArduBlock. The HMI API of a project generated via 86Duino IDE interface should have an original code file (.cpp) and a header file (.h).

When the 86HMI project has external resources, a reminder window will appear after the generation progress is completed. At this time, you can use the “Open exData” button to open the folder of the external resources and then copy the files to the external storage space.

Additional Information:
After 86HMI generates the program code, it will automatically generate the following code in the main program page (.ino). Missing one of them will cause 86HMI not to operate.

1. Include the header file of 86HMI.
   #include “myhmi.h”
2. Initialize the 86HMI functions.
   void setup() { Hmi.begin();}

3. User Interface

3.1  Feature Overview

86HMI editing interface main function descriptions in different page areas:

• Application Button:
  Project toolbar shortcut.
• Title:
  86Duino Coding IDE named project title.
• Window Function:
  Including minimize, maximize/ window mode, and close.
• Project Toolbar:
  New/ open/ save/ save as project, manage image/ sound/ fond resources, theme configuration, etc.
• WorkArea:
  The object presented in the workplace will be the same as the UI uploaded to the QEC master.
• WorkArea Zoom:
  Select the scale of your workarea.
• Toolbox:
  List of optional object functions.
• Property grid & Event grid:
  Object and Page Properties grid and Events grid.
• Page List:
  The list of the pages designed in 86HMI.
• Page Toolbar:
  Including add/ delete/ and copy pages.
• Object List:
  Show all the objects on the current page.

3.2  Function Descriptions

3.2.1  Application Button

The Application Program Button organizes the functions on Project Toolbar into a shortcut menu to avoid Project Toolbar from non-displaying caused by window size issues.

The list includes the following features:

• File: New project, open project, save project, save as…, Import Project.
• Resources: Resource Library Management.
• Theme Selection: Theme Management.
• Theme Config: Theme Configurator.
• LangID: Object Language Content Default Settings
• Code Generation: Generate Code. And save and close the project.
• Help: Open the QEC user manual page on the QEC official webpage after clicking.
• Quit: Close the 86HMI Editor program.

Import Project

The Import Project feature allows users to bring selected pages from other projects into the current project, making it easier to reuse design elements and functionality. This section outlines the capabilities and options available with this feature.

Key Features

• Automatic Resource Integration
  Images and sound effects associated with the imported pages are automatically integrated into the current project.
• Building UI Templates
  By importing pre-designed UI pages or parameter settings, users can significantly reduce development and design time for similar pages.
• Adapting for Different Screen Resolutions or Device-Specific Projects
  Projects can be transferred between devices with different resolutions, such as from QEC-M-070T to QEC-M-150T. It also supports transferring projects to devices with specific functionality (e.g., rotating elements).

Scaling Options

If a different screen configuration is detected during import, users can select from the following scaling options:

• Auto Adapt to Screen
  Automatically scales the imported pages to match the current project’s screen size, maintaining the original aspect ratio.
• Fixed Scaling
  Users can manually set the scaling percentage for imported elements and adjust their alignment as needed.

Note: Elements that cannot adjust their aspect ratio will not be affected by these settings for horizontal or vertical scaling.

Event Instructions Handling

Event instructions within imported pages are processed as follows:

• Page Change: Adjusts to the page ID in the imported project.
• Play Sound: Adjusts to the sound effect resource ID in the imported project.
• Custom Instruction: Imported as is, with no adjustments.
• Global Code: Not imported.

Note: After importing, page IDs may differ, which could cause changes in element IDs throughout the project. Therefore, if using ArduBlock, custom instructions, or APIs in the IDE, users must update references to match the new IDs of the imported pages.

3.2.2  Title

The title shows the 86HMI Editor version and the project name (which will synchronize with the 86Duino Coding IDE project name).

Additional Information:
Edited mark (*). When the 86HMI project has been edited, an “*” will be added after the project title and disappear when the project is saved.

3.2.3  Window Function

May minimize, maximize/window mode, and close 86HMI window.
With the maximized/ window mode image below:

• Already Maximized/ Window Mode
  

• Not in Maximize or window mode. You can drag the border and resize it.
  

3.2.4 Project Toolbar

New Project, Open Project, Save Project, and Save As…

Function Descriptions:

• New Project: Open a new project.
• Open Project: Open an existing project; the stored project path will be changed after being opened.
• Save Project: Save projects, and the project path will be automatically managed with 86Duino Coding IDE by default.
• Save As Project: Save the project alternatively. The path to the project will be changed after saving.

Additional Information:
Generally, when 86HMI is opened through 86Duino IDE project, its 86HMI project name will be synchronized with the project name created by 86Duino Coding IDE, and the path of the project will be automatically managed (the location is “data” in the 86Duino IDE project, with a file extension .hpj).

Resource Library Management

The resources include image, sound, and font resources, providing users the ability to manage corresponding resources.
Since the files in the resource library will eventually be used in QEC, it is not recommended to use files that are too large, such as background images exceed the screen size, entire song, etc.
Resources of external data storage require users to manually upload files through their PCs.
Users using self-designed or self-defined image, sound, and font files need to add those files to the resource library before using. The mechanism of adding the files to the resource library in advance will duplicate those files and facilitate HMI Editor Management, preventing files being edited in editing mode, checking and notifying total resource capacity (reflect in the total size section in the lower left corner).

The three buttons below correspond to the resource management functions of image, sound, and font files respectively.

Image File Resource

Support .png and .jpg image files.

To add new image resources: Click , then click “+” and then select the needed image files in the corresponding folders.

When completing uploads, the window preview and file information are on the right side.
Among it, users can modify the Description row to define the image file name for easy recognition.

Later, when using image properties, users can select pre-imported image files, which will appear in the drop-down menu of the resource list, as shown below.

To save QEC Master’s image process time, the image need to be edited to the size displayed on HMI before saving to the library.

The image files can also be used as wallpaper backgrounds, and if the sizes do not match with the sizes of the LCD working area, it will be displayed repeatedly. Therefore, to display your wallpaper in full size, you need to adjust the image to the same size as the selected LCD working area. With 4.3”/7”/9” QEC Masters having 800×480 sizes, the 15” QEC Masters have 1024×768 size.

Sound File Resource

Support .wav and .mp3 sound files.

To add new sound resources: Click , then click “+”, and then select the needed sound files in corresponding folders (e.g., warning sound, notification sound, etc.).

You can check whether the sound is correct or not in the preview mode on the right side.

Font File Resources

Support otf, ttf, and ttc font file, with the built-in font options below:

1. microhei: QEC builtin(CJK) – Support Chinese, Japanese, and many other language fonts.
2. Montserrat_n: LVGL builtin – LVGL built-in fonts only support English.

To add new font resources: Click , then click “+”, and then select the needed font files in corresponding folders.

After importing the needed font file, you can then select the font in “Font” under the Theme Configurator.

Additional Information:
The differences between Internal and External.
After users add self-defined image, sound, or font files in Internal, the file will first be stored in the project path under data\Resource\MyHMI\Image folder. The files will automatically be burned into the EMMC of the QEC Masters.

For users adding self-defined image, sound, or font files in External, the file will be stored in the project path under exData folder, and users need to manually copy the exData folder to an external hard drive, such as SD/USB. This function is to avoid insufficient capacity of QEC Master EMMC caused by too many or too large self-defined files.

Additional Information:
Delete Resources.
If you’d like to delete image or sound files in the library, please check whether the project is using the resources; if yes, this will lead to remove disable, and will need to change the component attribute of the resource file in use to other options to remove from the library.
Font files need to be removed from the theme configurator first to enable deleting font resources.

Theme Management

Currently, there are two themes and total of three colors provided for users, and the theme configurator can set four theme colors and six font configurations.

Among them, the following are the default themes and colors.

1. The Light color in the Material theme:
   
2. The Dark color in the Material theme:
   
3. The Black color in the Night theme:
   

In addition to the default theme and color, user can modify the color and fonts by clicking the “Theme Configurator”.

The theme configurator can set four theme colors and six font configurations.

1. Theme Colors Settings:
   
2. Font Settings:
   

Currently, all objects share four default theme colors and six default font settings, and users can change the default colors and settings based on their choice. After editing, users only need to select the corresponding configuration in the objects’ properties areas to apply the configuration.

Users can select different theme colors in ObjColor under Options in object properties.

Users can also select different font settings in TextFont under Options in object properties.

If you need to change the default theme color, you can select “Customize…” under Material in the theme configurator bar.

After selecting the “Customize…” in the theme configurator bar and clicking the “theme configurator”, you will be able to modify custom the theme color based on users’ needs.

For the color matching part, users can directly enter the color code of the graphic editing software in the color code field.

Additional Information:
The correspondence between colors and components in the Auxiliary color settings is related to the settings of the LVGL underlying program code. For detailed correspondence, please refer to the introduction of the LVGL official website and the source code of LVGL.
LVGL official website address: https://docs.lvgl.io/7.11/.

Object Language Content Default Settings

LangID is a feature that can quickly set 86HMI to multiple languages by switching LangID to individual text settings then achieve the language switching functions through API, ArduBlock building blocks, or event commands. After switching LangID, each object containing text attributes needs to be modified individually to the corresponding language.

We currently support 9 LangID for user setting.

The way to set up LangID is after adding a new functional object. Such as adding a Button or Label object, first select any set from LangID 1 to 9. Then, go to the Text field in the right-side properties setting window, enter the desired language text (you can use language text translated by translation software and paste it into the Text field). Next, choose any set from LangID 1 to 9 to set the language text, enter the desired language text for switching, and you can set up to 9 different language texts.

Utilize this function to switch font language.

Use under on the right side of the window, or use it with API and ArduBlock building blocks to execute instructions to switch LangID for language switching events.

Code Generation

After editing, you’ll need to click the code generation button to transfer 86HMI into 86Duino IDE code, save the project file, and close the page. Users can utilize API through 86Duino Coding IDE or ArduBlock. The HMI API of a project generated via 86Duino IDE interface should have an original code file (.cpp) and a header file (.h).

When the 86HMI project has external resources, a reminder window will appear after the generation progress is completed. At this time, you can use the “Open exData” button to open the folder of the external resources, and then copy the files to the external storage space.

Additional Information:
After 86HMI generates the program code, it will automatically generate the following program code in the main program page (.ino). Missing one of them will cause 86HMI to not operate.

3.2.5 Toolbox

The toolbox is located on the left side of the 86HMI window.
This area holds all the objects and separates them into categories for user selection.

For a detailed description of object usage and parameters, please refer to Ch.4. Object Function Setting.

Object Categories

Primitive widgets	Control widgets	Visualization widgets
Input widgets	Menu widgets

3.2.6 WorkArea

Objects are presented in this area, and this section describes the functions associated with the work area.

Add Object

There are many objects in the toolbox. Users can add them to the workarea by “dragging” or “double-clicking”.

Move Object Position (Shortcut: Arrow keys)

Left-click in the selection box to drag the position.

Zoom (Equal Scale Shortcut: Hold down the shift key)

Drag and drop the boxes around the selection box by left-clicking on the size.

Workarea Zoom Ratio

The display ratio of the workarea can be switched, which is friendly to screens of different sizes.

Object Toolbar

Editable object functions, including Copy, Paste, Delete, Object Sequence Adjustment, Undo or Redo.

• Copy (shortcut key: Ctrl+C): Copy the selected object.
• Paste (shortcut key: Ctrl+V): Paste the last copied object. The pasted object will be shifted to recognize that a new object has been pasted.
• Delete (Shortcut: Delete): Delete the selected object.

Note:
The ID number of the object is unique. The ID number of the object will be incremented by +1. If you delete the original edited object, the ID number of the new object will not be the same as that of the deleted one, e.g., if you delete p1b1 (Button) and add a new one, it will be p1b2, if you delete p1b2 and add a new one, it will be p1b3, and so on. Users can identify the control object by its ID number, so please pay attention to whether the ID number is correct or not.
In addition, if you use the Restore shortcut to restore a deleted object, the pipeline number will not change. It is the same as before the object was deleted.

• Move Up: Moves the selected object up one level.
• Move Down: Moves the selected object down one level.

• Redo (Shortcut Key: Ctrl+Shift+Z / Ctrl+Y): Cancel the recovered operation.
• Undo (Shortcut: Ctrl+Z): Returns the operation to the previous step.

Additional Information:
Undo and Redo Functions.

1. Text-related attributes in many objects support the LangID function. Since Text attributes in different LangIDs are stored separately, when undoing or redoing, there is a possibility that Text attributes in different LangIDs will be modified, and there will be no action in the editing area.
2. Undo/Redo will not consider the add/delete/modify command in the event as an action. However, when the Undo/Redo action affects an object and deletes it, it will record all the events in the object and restore the events when added in the reverse direction.
3. Undo/Redo only supports Page attribute set, but not adding, deleting, copying Page, and so on.
4. In 86HMI Editor, some counters limit the deletion function, including Page (Page Change command), Image resource (ImageSource attribute…etc.), Sound resource (Play Sound command), and Font resource (Theme Fonts).
   When the counter is reset to zero, it can be deleted, so deleting the Page/Source after deleting the object that affects these counters will cause the restored corresponding settings to go back to their default values. For example, the command [Add a Page Change: p2] in the Clicked event of Button p1b1 in Page1. At this time, Page 2 is in use, so it cannot be deleted. However, if you [Delete Button p1b1], the counter will be reset to zero, and then Page2 will be deleted. If you use the undo function and execute [Delete Button p1b1] in reverse, the Button p1b1 Page Change content can no longer be set to p2, and the setting will return to the default value (None). Similarly, when deleted, the Image resource will affect the ImageSource attribute in the Image-related object, and the Sound resource will affect the Play Sound command. As for the font resource, since the operation of the theme function is not in the scope of undo and redo, the font resource does not affect the undo and redo.

3.2.7 Page Management

Page is the main background of 86HMI. This section will explain the related functions of page management.

Page List

Switches the display of the Workarea to the Page selected in the Page List.

Page Toolbar

• Add Page: Creates a new blank Page.
• Delete Page: Deletes the selected Page (which contains all the components in the Page).

• Copy Page: Copy the selected Page (with all the components in that Page) to a new Page.

Note:
After deleting a Page and adding a new Page, the Page number will not be changed back to the original Page number, but will be incremented by +1. For example, after deleting Page2 and adding a new Page, the new Page will become Page3, and after regenerating the code in 86HMI Editor, the code of Page3 will be regenerated again, so you need to modify the code related to Page2 one by one. After editing the program code in 86Duino IDE, you need to modify the object IDs related to Page 2 one by one. Otherwise, the final program code will have an error message, and the object IDs will not be found.

3.2.8 Property grid & Event grid

This section describes configuring the page and object’s properties and events grid.

Property grid

List the attributes of the selected page or object, and you can modify the attributes to achieve customized effects, such as changing the coordinates, length, width, and so on.

A. Object Properties:

Includes ID, name, content, coordinate position, component color, object size, font and font size selection, and other attribute parameter settings.

For a detailed description of object usage and parameters, please refer to Ch.4. Object Function Setting.

B. Page Properties:

Includes ID, name, content, wallpaper, and timer parameter settings.

The Page properties grid is described below.

• Wallpaper: Page wallpaper. (For the image resource, please see the Image File Resource)
• TimerMode: The timer trigger method.
  
  
  • One Shot: how long TimerInterval (ms) will execute the event after entering this Page (only executed once).
  • Periodic: how many times TimerInterval (ms) repeats the event after entering this Page.
• TimerInterval (ms): the interval between timer triggers.
• TimerEnable: if or not the timer is enabled.

Event grid

Lists the events and commands for the selected page or object, currently only supported for pages and a few objects. This feature saves the user time in editing code by allowing the user to use predefined events to be executed by objects and pages.

• Event Menu: Select the events to be executed by the component and page.
• Add instruction: Add a new event instruction.
• Delete instruction: Delete the event instruction.
• Edit instruction: Edit the event instruction.
• Move Up: Move up the instructions order.
• Move Down: Move down the instructions order.

Additional Information:
The instructions have an order of execution. The higher-up in the list will be executed first, all the way to the last instruction.

A. Object Events:

Objects with event support: Button, ToggleButton, ImageButton, ImageToggleButton.

1. Button / ImageButton object event conditions: Clicked, Pressing.
   
2. ToggleButton / ImageToggleButton object event conditions: Checked, Unchecked.
   

B. Page Events:

Page event conditions: Enter, Leave, TimerEventTriggered.

You need to use this parameter with the properties of the page.

• Enter: Triggers an event for entering the current page.
• Leave: Trigger the event to leave the current Page.
• TimerEventTriggered: Trigger the event with the time set by current page timer.

Note:
The setting of Page Timer is related to the triggering mechanism of Events; if a user is not familiar with the operation of Events, it is easy to write a program that exceeds the expected behavior.
For example, users may unintentionally set two pages’ events to call each other Page Change command immediately after entering. After entering Page1, they immediately call Page Change command to enter Page2. After entering Page2, they immediately call Page Change command to enter Page1, and in this way, they can never leave the cycle of Page Change.

C. Events Instruction Functions

The following instructions can be added: Page Change, Set Language, Play Sound, and Custom Instruction.

Page Change usage:
After selecting the object with the event:

1. Select the corresponding event (Clicked for this example).
2. Click the bottom + to add instructions.
3. Select the instruction for Page Change.
4. Select the page to be switched (p1 for this example).

Set Language usage:
After selecting the object with the event:

1. Select the corresponding event (Clicked for this example).
2. Click the bottom + to add instructions.
3. Select the instruction for Set Language.
4. Select the LangID to be switched (LangID 2 for this example).

Play Sound usage:
After selecting the object with the event:

1. Select the corresponding event (Clicked for this example).
2. Click the bottom + to add instructions.
3. Select the instruction for Play Sound.
4. Select the Sound to be switched (Isnd0 for this example).

Additional Information:
Custom Instruction.
Custom Instruction allows the user to edit the events to be performed by the object or page using the editing code. This option is an advanced professional option that requires the user to be familiar with the 86Duino program before editing.

3.2.9 Object List

Object List area. This section describes how to use the Object List.

Each Page and Object has an independent ID. After editing with 86HMI, you need to use this ID as an index so that the program knows which Page or Object you are targeting.

The Object List shows all the objects on the current page, from the top to the bottom, and the options in the list are the same as the objects in the workarea. When editing a functional object, the object ID of the object will be listed in the lower-right window. If during the editing process, the input coordinate is out of the range of the workarea or is superimposed under other objects and cannot be seen, the user can use the list of objects in the workarea to locate the object ID that needs to be adjusted, and then adjust the position or order to make corrections.

The order in the object list is the layer order between objects. Users can use the up/down function of the toolbar to move the layer up/down to determine the order in which the objects are displayed.

As shown in the figure below, you can select a covered object in the object list and click the Layer Up button to move it up to be seen, and then the order of the objects in the object list will be changed synchronously.

4. Object Function Setting

This section describes how to set up and use all the objects in the Toolbox.

4.1 Primitives widgets

Primitives’ widgets have the following objects.

• Label
• Number
• Rectangle
• Circle
• Image
• QrCode

4.2 Control widgets

Control widgets have the following objects.

• Button
• ToggleButton
• ImageButton
• ImageToggleButton
• Switch
• Checkbox
• Slider
• ImageSlider
• ArcSlider

4.3 Visualization widgets

Visualization widgets have the following objects.

• Bar
• ImageBar
• ArcBar
• Gauge
• ImageGauge
• LED
• Table
• TextList
• Chart
• Oscilloscope

4.4 Input widgets

Input widgets have the following objects.

• TextInput
• NumberInput
• DateInput
• Spinbox

4.5 Menu widgets

Menu widgets have the following objects.

• DropDownList
• List
• Roller
• FileBrowser

5. Operation and Advanced Functions

5.1 Introduction

This chapter will introduce the basic operation and advanced functions of all 86HMI objects.
Use the Code Generation function in 86HMI Editor to generate HMI APIs (Application Programming Interface) to create HMIs without writing programs.
After code generation, the project will be saved and closed, and users can use 86Duino Coding IDE or ArduBlock to use the API. 86Duino Coding IDE, 86HMI Editor, and ArduBlock tools are related as shown in the following figure.

86HMI Editor will generate the main program, myhmi.cpp, myhmi.h and data folder under the project directory after code generation.

The data folder contains:

• 86HMI Editor project: _project.hpj
• ArduBlock project: _ardublock.abp
• The directories of two resources. The resources are: Resource, which is an internal resource provided to the IDE for uploading, and exData, which needs to be copied to an external space by the user.

First, the code and files generated by 86HMI are described as follows.

5.1.1 Main program (.ino)

The main program and the project name can be customized.
After 86HMI generates the program code, it will automatically generate the following program code in the main program page (.ino). Missing one of them will cause 86HMI to not operate.

1. Include the header file of 86HMI.
   include “myhmi.h”
2. Initialize the 86HMI functions.
   void setup() {
Hmi.begin();
}

5.1.2 Header file (myhmi.h)

The header file of 86HMI. It contains the main MyHMI class the user will use and declares all Pages, Objects, and Resource variables. A brief description is as follows.

5.1.3 Implementation file (myhmi.cpp)

The myhmi.cpp contains the implementation of MyHMI, initialization of Pages/Objects, data structure, and LVGL event_handler. The event instructions in 86HMI Editor will put the program and instructions into the event_handler.
In 86HMI Editor version 1.0.2.7, the global code is added, and it will be placed in the front of this file, so that you can add global variables, functions, etc. You can also use #include to use external libraries.

Note:
MyHMI stores the data in the user_data of the LVGL object, so be careful not to overwrite the user_data when you skip the API to manipulate the LVGL object directly.

5.1.4 Sample of event timeline

In the 86HMI environment, event processing and management is coordinated through a carefully designed timeline. This timeline allows you to set up and monitor event triggers and corresponding script execution, creating a dynamic and interactive user interface.

In practice, each event will correspond to a specific user action or system change, such as a button click, a sensor reading change, etc. For example, event1 is a button click or the like.

Event Handling Architecture

The 86HMI uses an event handling system based on the LVGL library. This system allows developers to set conditions to trigger events and bind specific scripts or behaviors to respond to these events.

• HMI Event Segment:
  Here, several conditions and scripts are defined about each other, e.g., “IF event1 THEN script1”. This way, the corresponding script will be executed when a specific event is triggered.
• Task Handling:
  hmi_task_handler() is a continuously running function that loops through the event blocks and updates the LVGL components to ensure the user interface reflects the latest data and state.

Event Block and Script Execution

When an event is triggered, it is assigned to an event block, and the corresponding script is executed. Each event has a clear start (triggering point) and end (script execution completion), making event processing organized and traceable.

5.2 API Functions

This section describes how the 86HMI components work with the API.
Initialization part is described as follows.

• Pre-configure the object Hmi for user’s use, or you can configure one by yourself.
• There is no initialization in the MyHMI builder.
• After calling begin() MyHMI will be initialized and limited to only one MyHMI object.
• Initialization includes LVGL, fonts, pictures, sounds, and widgetsInit() configures all HMI Pages/Objects.
• Finally, a Task is mounted and run. hmi_task_handler() does LVGL and various state updates.

Additional Information: Parameters

• The methods of Commands, States, and Events have three methods of overloading, and their parameters are lv_obj_t* id, which is directly used as ID, or char* name, which is used as Name. 2.
• For some methods that are customized objects, there will be more class parameters, and the type corresponding to the ID is not directly of the class, such as Oscilloscope.

5.2.1 Search Functions

• NAME_TO_ID()
• ID_TO_NAME()

5.2.2 General Functions

Page

About Page, please refer to Page Management.

• gotoPage()
• enablePageTimer()
• disablePageTimer()
• pageEnter()
• pageLeave()
• pageTimerEventTriggered()

LangID

About LangID, please refer to Object Language Content Default Settings.

• setLanguage()

Sound

About Sound file resource, please refer to Sound File Resource.

• playSound()
• setSoundVolume()
• stopSound()
• stopSounds()

MessageBox

• showMessageBox()
• setMessageBoxWidth()

AlarmBanner

• showAlarmBanner()
• deleteAlarmBanner()
• setAlarmBannerSpacing()
• setAlarmBannerPosition()

5.2.3 Object Functions

This section describes the API command function, status function and event function of each component.

In the event, it will capture the current HMI event, so that the Event block can determine whether the event occurs or not, and will execute the script if it is established.

Usually, it starts with BEGIN_HMI_EVENT_PROC and ends with END_HMI_EVENT_PROC, as shown below.

Object General Functions

Can be set on all objects.

• setEnable()

* Please refer to each object’s described webpage for the object’s functions.

Appendix

A-1 About LVGL

86Duino Coding IDE 500 utilize LVGL 7.11.0.

LVGL (Light and Versatile Graphics Library) is a free and open-source graphics library providing everything you need to create an embedded GUI with easy-to-use graphical elements, beautiful visual effects, and low memory footprint.

Key features:

• Powerful building blocks such as buttons, charts, lists, sliders, images etc.
• Advanced graphics with animations, anti-aliasing, opacity, smooth scrolling
• Various input devices such as touchpad, mouse, keyboard, encoder etc.
• Multi-language support with UTF-8 encoding
• Multi-display support, i.e. use more TFT, monochrome displays simultaneously
• Fully customizable graphic elements
• Hardware independent to use with any microcontroller or display
• Scalable to operate with little memory (64 kB Flash, 16 kB RAM)
• OS, External memory and GPU supported but not required
• Single frame buffer operation even with advanced graphical effects
• Written in C for maximal compatibility (C++ compatible)
• Simulator to start embedded GUI design on a PC without embedded hardware
• Binding to MicroPython
• Tutorials, examples, themes for rapid GUI design
• Documentation is available as online and offline
• Free and open-source under MIT license

For more information about LVGL, please visit the LVGL website: https://docs.lvgl.io/7.11/index.html.

A-2 Custom Instruction

In addition to using the HMI methods in the main program (.ino) these methods can also be used in custom instructions.

Custom Instruction allows the user to edit the events to be performed by the object or page using the editor code. This option is an advanced professional option that requires the user to be familiar with the 86Duino program before editing.

In 86HMI Editor, a search and quick input menu has been added to make editing more convenient. Global code is also added, which will be placed at the top of myhmi.cpp to add global variables, functions, etc. You can also use #include to use external libraries.

Note:
When using showMessageBox in Local Script, it will not be blocked in this method and will directly Return -1.

The text of the 86Duino reference is a modification of the Arduino reference and is licensed under a Creative Commons Attribution-ShareAlike 3.0 License. Code samples in the reference are released into the public domain.