Checkbox (lv_checkbox)

Overview

The Checkbox object is created from a "tick box" and a label. When the Checkbox is clicked the tick box is toggled.

Parts and Styles

• LV_PART_MAIN The is the background of the Checkbox and it uses the text and all the typical background style properties. pad_column adjusts the spacing between the tickbox and the label

• LV_PART_INDICATOR The "tick box" is a square that uses all the typical background style properties. By default, its size is equal to the height of the main part's font. Padding properties make the tick box larger in the respective directions.

The Checkbox is added to the default group (if it is set).

Usage

Text

The text can be modified with the lv_checkbox_set_text(cb, "New text") function and will be dynamically allocated.

To set a static text, use lv_checkbox_set_static_text(cb, txt). This way, only a pointer to txt will be stored. The text then shouldn't be deallocated while the checkbox exists.

Check, uncheck, disable

You can manually check, un-check, and disable the Checkbox by using the common state add/clear function:

lv_obj_add_state(cb, LV_STATE_CHECKED);   /*Make the checkbox checked*/
lv_obj_remove_state(cb, LV_STATE_CHECKED); /*Make the checkbox unchecked*/
lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED); /*Make the checkbox checked and disabled*/

To get whether the checkbox is checked or not use: lv_obj_has_state(cb, LV_STATE_CHECKED).

Events

• LV_EVENT_VALUE_CHANGED Sent when the checkbox is toggled.

• LV_EVENT_DRAW_PART_BEGIN and LV_EVENT_DRAW_PART_END are sent for the following types:

  • LV_CHECKBOX_DRAW_PART_BOX The tickbox of the checkbox

    • part: LV_PART_INDICATOR

    • draw_area: the area of the tickbox

    • rect_dsc

See the events of the Base object too.

Learn more about Events.

Keys

The following Keys are processed by the 'Buttons': - LV_KEY_RIGHT/UP Go to toggled state if toggling is enabled - LV_KEY_LEFT/DOWN Go to non-toggled state if toggling is enabled - LV_KEY_ENTER Clicks the checkbox and toggles it

Note that, as usual, the state of LV_KEY_ENTER is translated to LV_EVENT_PRESSED/PRESSING/RELEASED etc.

Learn more about Keys.

Example

Simple Checkboxes

C code  

 View on GitHub

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

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        LV_UNUSED(obj);
        const char * txt = lv_checkbox_get_text(obj);
        const char * state = lv_obj_get_state(obj) & LV_STATE_CHECKED ? "Checked" : "Unchecked";
        LV_UNUSED(txt);
        LV_UNUSED(state);
        LV_LOG_USER("%s: %s", txt, state);
    }
}

void lv_example_checkbox_1(void)
{
    lv_obj_set_flex_flow(lv_screen_active(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_screen_active(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * cb;
    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Apple");
    lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Banana");
    lv_obj_add_state(cb, LV_STATE_CHECKED);
    lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_checkbox_set_text(cb, "Lemon");
    lv_obj_add_state(cb, LV_STATE_DISABLED);
    lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

    cb = lv_checkbox_create(lv_screen_active());
    lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_checkbox_set_text(cb, "Melon\nand a new line");
    lv_obj_add_event(cb, event_handler, LV_EVENT_ALL, NULL);

    lv_obj_update_layout(cb);
}

#endif

MicroPython code  

 View on GitHub MicroPython Simulator

def event_handler(e):
    code = e.get_code()
    obj = e.get_target_obj()
    if code == lv.EVENT.VALUE_CHANGED:
        txt = obj.get_text()
        if obj.get_state() & lv.STATE.CHECKED:
            state = "Checked"
        else:
            state = "Unchecked"
        print(txt + ":" + state)


lv.screen_active().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.screen_active().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.START, lv.FLEX_ALIGN.CENTER)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Apple")
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Banana")
cb.add_state(lv.STATE.CHECKED)
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.set_text("Lemon")
cb.add_state(lv.STATE.DISABLED)
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb = lv.checkbox(lv.screen_active())
cb.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
cb.set_text("Melon")
cb.add_event(event_handler, lv.EVENT.ALL, None)

cb.update_layout()

---

Checkboxes as radio buttons

C code  

 View on GitHub

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

static lv_style_t style_radio;
static lv_style_t style_radio_chk;
static uint32_t active_index_1 = 0;
static uint32_t active_index_2 = 0;

static void radio_event_handler(lv_event_t * e)
{
    uint32_t * active_id = lv_event_get_user_data(e);
    lv_obj_t * cont = lv_event_get_current_target(e);
    lv_obj_t * act_cb = lv_event_get_target(e);
    lv_obj_t * old_cb = lv_obj_get_child(cont, *active_id);

    /*Do nothing if the container was clicked*/
    if(act_cb == cont) return;

    lv_obj_remove_state(old_cb, LV_STATE_CHECKED);   /*Uncheck the previous radio button*/
    lv_obj_add_state(act_cb, LV_STATE_CHECKED);     /*Uncheck the current radio button*/

    *active_id = lv_obj_get_index(act_cb);

    LV_LOG_USER("Selected radio buttons: %d, %d", (int)active_index_1, (int)active_index_2);
}


static void radiobutton_create(lv_obj_t * parent, const char * txt)
{
    lv_obj_t * obj = lv_checkbox_create(parent);
    lv_checkbox_set_text(obj, txt);
    lv_obj_add_flag(obj, LV_OBJ_FLAG_EVENT_BUBBLE);
    lv_obj_add_style(obj, &style_radio, LV_PART_INDICATOR);
    lv_obj_add_style(obj, &style_radio_chk, LV_PART_INDICATOR | LV_STATE_CHECKED);
}

/**
 * Checkboxes as radio buttons
 */
void lv_example_checkbox_2(void)
{
    /* The idea is to enable `LV_OBJ_FLAG_EVENT_BUBBLE` on checkboxes and process the
     * `LV_EVENT_CLICKED` on the container.
     * A variable is passed as event user data where the index of the active
     * radiobutton is saved */


    lv_style_init(&style_radio);
    lv_style_set_radius(&style_radio, LV_RADIUS_CIRCLE);

    lv_style_init(&style_radio_chk);
    lv_style_set_bg_image_src(&style_radio_chk, NULL);

    uint32_t i;
    char buf[32];

    lv_obj_t * cont1 = lv_obj_create(lv_screen_active());
    lv_obj_set_flex_flow(cont1, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_size(cont1, lv_pct(40), lv_pct(80));
    lv_obj_add_event(cont1, radio_event_handler, LV_EVENT_CLICKED, &active_index_1);

    for(i = 0; i < 5; i++) {
        lv_snprintf(buf, sizeof(buf), "A %d", (int)i + 1);
        radiobutton_create(cont1, buf);

    }
    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont1, 0), LV_STATE_CHECKED);

    lv_obj_t * cont2 = lv_obj_create(lv_screen_active());
    lv_obj_set_flex_flow(cont2, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_size(cont2, lv_pct(40), lv_pct(80));
    lv_obj_set_x(cont2, lv_pct(50));
    lv_obj_add_event(cont2, radio_event_handler, LV_EVENT_CLICKED, &active_index_2);

    for(i = 0; i < 3; i++) {
        lv_snprintf(buf, sizeof(buf), "B %d", (int)i + 1);
        radiobutton_create(cont2, buf);
    }

    /*Make the first checkbox checked*/
    lv_obj_add_state(lv_obj_get_child(cont2, 0), LV_STATE_CHECKED);
}


#endif

MicroPython code  

 View on GitHub MicroPython Simulator

import time

class LV_Example_Checkbox_2:
    def __init__(self):
        #
        # Checkboxes as radio buttons
        #
        # The idea is to enable `LV_OBJ_FLAG_EVENT_BUBBLE` on checkboxes and process the
        #`LV.EVENT.CLICKED` on the container.
        # Since user_data cannot be used to pass parameters in MicroPython I use an instance variable to
        # keep the index of the active button

        self.active_index_1 = 0
        self.active_index_2 = 0
        self.style_radio = lv.style_t()
        self.style_radio.init()
        self.style_radio.set_radius(lv.RADIUS_CIRCLE)

        self.style_radio_chk = lv.style_t()
        self.style_radio_chk.init()
        self.style_radio_chk.init()
        self.style_radio_chk.set_bg_image_src(None)

        self.cont1 = lv.obj(lv.screen_active())
        self.cont1.set_flex_flow(lv.FLEX_FLOW.COLUMN)
        self.cont1.set_size(lv.pct(40), lv.pct(80))
        self.cont1.add_event(self.radio_event_handler, lv.EVENT.CLICKED, None)

        for i in range(5):
            txt = "A {:d}".format(i+1)
            self.radiobutton_create(self.cont1,txt)

        # Make the first checkbox checked
        #lv_obj_add_state(lv_obj_get_child(self.cont1, 0), LV_STATE_CHECKED);
        self.cont1.get_child(0).add_state(lv.STATE.CHECKED)

        self.cont2 = lv.obj(lv.screen_active())
        self.cont2.set_flex_flow(lv.FLEX_FLOW.COLUMN)
        self.cont2.set_size(lv.pct(40), lv.pct(80))
        self.cont2.set_x(lv.pct(50))
        self.cont2.add_event(self.radio_event_handler, lv.EVENT.CLICKED, None)

        for i in range(3):
            txt = "B {:d}".format(i+1)
            self.radiobutton_create(self.cont2,txt)

        # Make the first checkbox checked*/
        self.cont2.get_child(0).add_state(lv.STATE.CHECKED)


    def radio_event_handler(self,e):
        cont = e.get_current_target_obj()
        act_cb = e.get_target_obj()
        if cont == self.cont1:
            active_id = self.active_index_1
        else:
            active_id = self.active_index_2
        old_cb = cont.get_child(active_id)

        # Do nothing if the container was clicked
        if act_cb == cont:
            return

        old_cb.remove_state(lv.STATE.CHECKED)          # Uncheck the previous radio button
        act_cb.add_state(lv.STATE.CHECKED)            # Uncheck the current radio button

        if cont == self.cont1:
            self.active_index_1 = act_cb.get_index()
            # print("active index 1: ", self.active_index_1)
        else:
            self.active_index_2 = act_cb.get_index()
            # print("active index 2: ", self.active_index_2)

        print("Selected radio buttons: {:d}, {:d}".format(self.active_index_1, self.active_index_2))

    def radiobutton_create(self,parent, txt):
        obj = lv.checkbox(parent)
        obj.set_text(txt)
        obj.add_flag(lv.obj.FLAG.EVENT_BUBBLE)
        obj.add_style(self.style_radio, lv.PART.INDICATOR)
        obj.add_style(self.style_radio_chk, lv.PART.INDICATOR | lv.STATE.CHECKED)

lv_example_checkbox_2 = LV_Example_Checkbox_2()

---

API

lv_checkbox.h