Image button (lv_imgbtn)¶

Overview¶

The Image button is very similar to the simple 'Button' object. The only difference is that it displays user-defined images in each state instead of drawing a rectangle.

You can set a left, right and center image, and the center image will be repeated to match the width of the object.

Parts and Styles¶

LV_PART_MAIN Refers to the image(s). If background style properties are used, a rectangle will be drawn behind the image button.

Usage¶

Image sources¶

To set the image in a state, use the lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_center, src_right).

The image sources work the same as described in the Image object except that "Symbols" are not supported by the Image button. Any of the sources can NULL.

The possible states are:

LV_IMGBTN_STATE_RELEASED
LV_IMGBTN_STATE_PRESSED
LV_IMGBTN_STATE_DISABLED
LV_IMGBTN_STATE_CHECKED_RELEASED
LV_IMGBTN_STATE_CHECKED_PRESSED
LV_IMGBTN_STATE_CHECKED_DISABLED

If you set sources only in LV_IMGBTN_STATE_RELEASED, these sources will be used in other states too. If you set e.g. LV_IMGBTN_STATE_PRESSED they will be used in pressed state instead of the released images.

States¶

Instead of the regular lv_obj_add/clear_state() functions the lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_...) functions should be used to manually set a state.

Events¶

LV_EVENT_VALUE_CHANGED Sent when the button is toggled.

Learn more about Events.

Keys¶

LV_KEY_RIGHT/UP Go to toggled state if LV_OBJ_FLAG_CHECKABLE is enabled.
LV_KEY_LEFT/DOWN Go to non-toggled state if LV_OBJ_FLAG_CHECKABLE is enabled.
LV_KEY_ENTER Clicks the button

Learn more about Keys.

Example¶

Simple Image button¶

#include "../../lv_examples.h"
#if LV_USE_IMGBTN && LV_BUILD_EXAMPLES

void lv_example_imgbtn_1(void)
{
    LV_IMG_DECLARE(imgbtn_left);
    LV_IMG_DECLARE(imgbtn_right);
    LV_IMG_DECLARE(imgbtn_mid);

    /*Create a transition animation on width transformation and recolor.*/
    static lv_style_prop_t tr_prop[] = {LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_IMG_RECOLOR_OPA, 0};
    static lv_style_transition_dsc_t tr;
    lv_style_transition_dsc_init(&tr, tr_prop, lv_anim_path_linear, 200, 0, NULL);

    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_text_color(&style_def, lv_color_white());
    lv_style_set_transition(&style_def, &tr);

    /*Darken the button when pressed and make it wider*/
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_img_recolor_opa(&style_pr, LV_OPA_30);
    lv_style_set_img_recolor(&style_pr, lv_color_black());
    lv_style_set_transform_width(&style_pr, 20);

    /*Create an image button*/
    lv_obj_t * imgbtn1 = lv_imgbtn_create(lv_scr_act());
    lv_imgbtn_set_src(imgbtn1, LV_IMGBTN_STATE_RELEASED, &imgbtn_left, &imgbtn_mid, &imgbtn_right);
    lv_obj_add_style(imgbtn1, &style_def, 0);
    lv_obj_add_style(imgbtn1, &style_pr, LV_STATE_PRESSED);

    lv_obj_align(imgbtn1, LV_ALIGN_CENTER, 0, 0);

    /*Create a label on the image button*/
    lv_obj_t * label = lv_label_create(imgbtn1);
    lv_label_set_text(label, "Button");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, -4);
}

#endif

from imagetools import get_png_info, open_png

# Register PNG image decoder
decoder = lv.img.decoder_create()
decoder.info_cb = get_png_info
decoder.open_cb = open_png

# Create an image from the png file
try:
    with open('../../assets/imgbtn_left.png','rb') as f:
        imgbtn_left_data = f.read()
except:
    print("Could not find imgbtn_left.png")
    sys.exit()

imgbtn_left_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_left_data),
  'data': imgbtn_left_data
})

try:
    with open('../../assets/imgbtn_mid.png','rb') as f:
        imgbtn_mid_data = f.read()
except:
    print("Could not find imgbtn_mid.png")
    sys.exit()

imgbtn_mid_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_mid_data),
  'data': imgbtn_mid_data
})

try:
    with open('../../assets/imgbtn_right.png','rb') as f:
        imgbtn_right_data = f.read()
except:
    print("Could not find imgbtn_right.png")
    sys.exit()

imgbtn_right_dsc = lv.img_dsc_t({
  'data_size': len(imgbtn_right_data),
  'data': imgbtn_right_data
})

# Create a transition animation on width transformation and recolor.
tr_prop = [lv.STYLE.TRANSFORM_WIDTH, lv.STYLE.IMG_RECOLOR_OPA, 0]
tr = lv.style_transition_dsc_t()
tr.init(tr_prop, lv.anim_t.path_linear, 200, 0, None)

style_def = lv.style_t()
style_def.init()
style_def.set_text_color(lv.color_white())
style_def.set_transition(tr)

# Darken the button when pressed and make it wider
style_pr = lv.style_t()
style_pr.init()
style_pr.set_img_recolor_opa(lv.OPA._30)
style_pr.set_img_recolor(lv.color_black())
style_pr.set_transform_width(20)

# Create an image button
imgbtn1 = lv.imgbtn(lv.scr_act())
imgbtn1.set_src(lv.imgbtn.STATE.RELEASED, imgbtn_left_dsc, imgbtn_mid_dsc, imgbtn_right_dsc)
imgbtn1.add_style(style_def, 0)
imgbtn1.add_style(style_pr, lv.STATE.PRESSED)

imgbtn1.align(lv.ALIGN.CENTER, 0, 0)

# Create a label on the image button
label = lv.label(imgbtn1)
label.set_text("Button")
label.align(lv.ALIGN.CENTER, 0, -4)

API¶

Enums

enum lv_imgbtn_state_t¶

Values:

enumerator LV_IMGBTN_STATE_RELEASED¶

enumerator LV_IMGBTN_STATE_PRESSED¶

enumerator LV_IMGBTN_STATE_DISABLED¶

enumerator LV_IMGBTN_STATE_CHECKED_RELEASED¶

enumerator LV_IMGBTN_STATE_CHECKED_PRESSED¶

enumerator LV_IMGBTN_STATE_CHECKED_DISABLED¶

enumerator _LV_IMGBTN_STATE_NUM¶

Functions

lv_obj_t *lv_imgbtn_create(lv_obj_t *parent)¶

Create an image button object

Parameters: parent -- pointer to an object, it will be the parent of the new image button
Returns: pointer to the created image button

void lv_imgbtn_set_src(lv_obj_t *imgbtn, lv_imgbtn_state_t state, const void *src_left, const void *src_mid, const void *src_right)¶

Set images for a state of the image button

Parameters

imgbtn -- pointer to an image button object
state -- for which state set the new image
src_left -- pointer to an image source for the left side of the button (a C array or path to a file)
src_mid -- pointer to an image source for the middle of the button (ideally 1px wide) (a C array or path to a file)
src_right -- pointer to an image source for the right side of the button (a C array or path to a file)

void lv_imgbtn_set_state(lv_obj_t *imgbtn, lv_imgbtn_state_t state)¶

Use this function instead of lv_obj_add/clear_state to set a state manually

Parameters

imgbtn -- pointer to an image button object
state -- the new state

const void *lv_imgbtn_get_src_left(lv_obj_t *imgbtn, lv_imgbtn_state_t state)¶

Get the left image in a given state

Parameters

imgbtn -- pointer to an image button object
state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the left image source (a C array or path to a file)

const void *lv_imgbtn_get_src_middle(lv_obj_t *imgbtn, lv_imgbtn_state_t state)¶

Get the middle image in a given state

Parameters

imgbtn -- pointer to an image button object
state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the middle image source (a C array or path to a file)

const void *lv_imgbtn_get_src_right(lv_obj_t *imgbtn, lv_imgbtn_state_t state)¶

Get the right image in a given state

Parameters

imgbtn -- pointer to an image button object
state -- the state where to get the image (from lv_btn_state_t) `

Returns

pointer to the left image source (a C array or path to a file)

Variables

const lv_obj_class_t lv_imgbtn_class¶

struct lv_imgbtn_t¶

Public Members

lv_obj_t obj¶

const void *img_src_mid[_LV_IMGBTN_STATE_NUM]¶

const void *img_src_left[_LV_IMGBTN_STATE_NUM]¶

const void *img_src_right[_LV_IMGBTN_STATE_NUM]¶

lv_img_cf_t act_cf¶