86HMI::ImageBar

[Visualization widgets]

Object Functions

ImageBar object. You can design your image for the Imagebar.

ImageBar 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: Bar Background: ImageBar background.
• Image: Bar Foreground: ImageBar foreground.
  (The custom image file of ImageBar consists of a background and a foreground, so two images are needed to complete the object. For a description of the image source, see Image File Resource.)
• Value: Initial value of the object.
• MaxValue: Maximum value can be positive or negative but must not be less than the minimum value.
• MinValue: Minimum value can be positive or negative but must not be bigger than the maximum value.

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:

• Type: ImageBar type, Horizontal or Vertical.
• Order: Object order. It can adjust the object order by up/down, which can be viewed on the Object List.

Note:
If ImageBar is to be presented horizontally or vertically, the horizontal and vertical bar need to be created separately and added to the image. When users want to use horizontal, they will select the horizontal image; if vertical, they will select the vertical image; it will not be automatically redirected because of the options in Type.

Additional Information:
When editing the foreground horizontally, show that its left and right widths should be aligned with the left and right sides of the canvas of the graphic editing software, or else the left and right sides will be left blank when imported for use background can be a little bit longer than the foreground, and will match with it automatically when it is imported. When it is vertical, it is to grab the top and bottom border of the foreground to be the start and end position; if you need scale, then you need to add scale markers when editing.

The display width of the Bar Foreground image is truncated from leftmost to rightmost in proportion to the value.

The truncated alignment of the foreground image is not affected by the length of the background image, which is simply a background.

To make this kind of asymmetric ImageBar, the foreground and background should be aligned with each other, and the width of the left and right extensions of the background should also be the same.

API Functions

setImageBarValue()

Description

Set ImageBar value.

Syntax

void setImageBarValue(lv_obj_t* id, double value);
void setImageBarValue(char* name, double value);

Parameters

• [in] id
  Object ID.
• [in] name
  Object Name.
• [in] value
  Set ImageBar value.

Return

None.

Example

#include "myhmi.h"

void setup() {
  Hmi.begin();
  // ...
  Hmi.setImageBarValue(p1ibar1, 100);
}

void loop() {
  // ...
}

getImageBarValue()

Description

Get ImageBar value.

Syntax

double getImageBarValue(lv_obj_t* id);
double getImageBarValue(char* name);

Parameters

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

Return

ImageBar value.

Example

#include "myhmi.h"

void setup() {
  Serial.begin(115200);
  while (!Serial);
  
  Hmi.begin();
  // ...
  Hmi.setImageBarValue(p1ibar1, 100);
  Serial.print("p1ibar1 value: ");
  Serial.println(Hmi.getImageBarValue(p1ibar1));
}

void loop() {
  // ...
}

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