86HMI::ImageButton

[Control widgets]

Object Functions

Image button object. Users can design their own image and add it to the image file resource before calling it.

To use the ImageButton object, you need to add the required image file to the image file resource and select the image file you want to use from the ImageSource in the property grid.

Note:
Since the image files are not directly zoomed in or out on 86HMI. Users need to edit the image files beforehand to meet the required size for displaying on the HMI screen.

ImageButton Properties.

Identifier:

• ID: Unique number that identifies the object.
• Name: User-definable name for the object. It can be used with 86HMI API.

Content:

• Image: Button: Image file source selection, it can be set as the default image.
  For a description of the image source, see Image File Resource.

Geometry:

• X: Object X coordinate.
• Y: Object Y coordinate.
• Width: Object width. It cannot be adjusted by default.
• Height: Object height. It cannot be adjusted by default.

Options:

• PressedEffect: The effect of pressing the ImageButton object.
  1. Darken
  2. Shrink
  3. Both
• Opacity: ImageButton object opacity ratio.
• Enable: Select the default state of the object, enable or disable.
• Order: Object order. It can adjust the object order by up/down, which can be viewed on the Object List.

ImageButton Events

ImageButton object event conditions: Clicked, Pressing.

The following instructions can be added: Page Change, Set Language, Play Sound, and Custom Instruction.
For instructions on how to use the commands for an event, see Events Instruction Functions.

Note:
Custom Instruction allows the user to edit the events to be executed by the object or page using the editing code. This option is a professional advanced option, and the user should be familiar with the 86Duino program before editing.

API Functions

imageButtonClicked()

The following Event Functions are written between BEGIN_HMI_EVENT_PROC and END_HMI_EVENT_PROC.

Description

Determine ImageButton is clicked or not.

Syntax

bool imageButtonClicked(lv_obj_t* id);
bool imageButtonClicked(char* name);

Parameters

• [in] id
  Object ID.
• [in] name
  Object Name.

Return

Bool. Determine ImageButton is clicked or not.

Example

#include "myhmi.h"

void setup() {
	Hmi.begin();
  // put your setup code here, to run once:
}

void loop() {
  BEGIN_HMI_EVENT_PROC
  {
    if (Hmi.imageButtonClicked(p1ib1))
    {
       // do something.
    }
  }
  END_HMI_EVENT_PROC
}

imageButtonPressing()

The following Event Functions are written between BEGIN_HMI_EVENT_PROC and END_HMI_EVENT_PROC.

Description

Determine whether the ImageButton is pressing or not.

Syntax

bool imageButtonPressing(lv_obj_t* id);
bool imageButtonPressing(char* name);

Parameters

• [in] id
  Object ID.
• [in] name
  Object Name.

Return

Bool. Determine whether the ImageButton is pressing or not.

Example

#include "myhmi.h"

void setup() {
	Hmi.begin();
  // put your setup code here, to run once:
}

void loop() {
  BEGIN_HMI_EVENT_PROC
  {
    if (Hmi.imageButtonPressing(p1ib1))
    {
       // do something.
    }
  }
  END_HMI_EVENT_PROC
}

Please see the 86HMI Editor User Manual for more instructions on 86HMI widgets and API usage.