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.
Keys¶
LV_KEY_RIGHT/UP
Go to toggled state ifLV_OBJ_FLAG_CHECKABLE
is enabled.LV_KEY_LEFT/DOWN
Go to non-toggled state ifLV_OBJ_FLAG_CHECKABLE
is enabled.LV_KEY_ENTER
Clicks the button
Learn more about Keys.
Example¶
Simple Image button¶
C code
GitHub#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¶
-
enumerator LV_IMGBTN_STATE_RELEASED¶
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
-
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¶
-
const void *img_src_mid[_LV_IMGBTN_STATE_NUM]¶