/**
 * Create object to see how they change from the anti aliasing
 * Modify LV_ANTIALIAS and LV_FONT_ANTIALIAS to see what is changing
 */
void lv_tutorial_antialiasing(void)
{
    lv_obj_t *label;

    static lv_style_t style1;
    lv_style_copy(&style1, &lv_style_btn_rel);
    style1.body.radius = 20;
    style1.body.border.width = 8;

    lv_obj_t *btn1;
    btn1 = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_set_pos(btn1, 10, 10);
    lv_obj_set_size(btn1, 160, 80);
    lv_btn_set_style(btn1, LV_BTN_STYLE_REL, &style1);

    label = lv_label_create(btn1, NULL);
    lv_label_set_text(label, "Button");


    lv_img_create_file("red_flower", img_red_flower);       /*Create a file in the RAM FS*/

    /*Crate an image which is NOT automatically upscaled to compensate the anti aliasing*/
    lv_obj_t *img_normal = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_file(img_normal, "U:/red_flower");
    lv_img_set_upscale(img_normal, false);
    lv_obj_align(img_normal, btn1, LV_ALIGN_OUT_RIGHT_TOP, 10, 0);

    /*Crate an image which is automatically upscaled to compensate the anti aliasing*/
    lv_obj_t *img_scaled = lv_img_create(lv_scr_act(), img_normal);  /*Crate an image object*/
    lv_img_set_upscale(img_scaled, true);
    lv_obj_align(img_scaled, img_normal, LV_ALIGN_OUT_RIGHT_TOP, 10, 0);


}
Beispiel #2
0
/**
 * Create a demo application
 */
void demo_create(void)
{
#if LV_DEMO_WALLPAPER
    lv_obj_t *wp = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(wp, &img_bubble_pattern);
    lv_obj_set_width(wp, LV_HOR_RES * 4);
    lv_obj_set_protect(wp, LV_PROTECT_POS);
#endif

    static lv_style_t style_tv_btn_bg;
    lv_style_copy(&style_tv_btn_bg, &lv_style_plain);
    style_tv_btn_bg.body.main_color = LV_COLOR_HEX(0x487fb7);
    style_tv_btn_bg.body.grad_color = LV_COLOR_HEX(0x487fb7);
    style_tv_btn_bg.body.padding.ver = 0;

    static lv_style_t style_tv_btn_rel;
    lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
    style_tv_btn_rel.body.empty = 1;
    style_tv_btn_rel.body.border.width = 0;

    static lv_style_t style_tv_btn_pr;
    lv_style_copy(&style_tv_btn_pr, &lv_style_btn_pr);
    style_tv_btn_pr.body.radius = 0;
    style_tv_btn_pr.body.opa = LV_OPA_50;
    style_tv_btn_pr.body.main_color = LV_COLOR_WHITE;
    style_tv_btn_pr.body.grad_color = LV_COLOR_WHITE;
    style_tv_btn_pr.body.border.width = 0;
    style_tv_btn_pr.text.color = LV_COLOR_GRAY;

    lv_obj_t *tv = lv_tabview_create(lv_scr_act(), NULL);

#if LV_DEMO_WALLPAPER
    lv_obj_set_parent(wp, ((lv_tabview_ext_t *) tv->ext_attr)->content);
    lv_obj_set_pos(wp, 0, -5);
#endif

    lv_obj_t *tab1 = lv_tabview_add_tab(tv, "Write");
    lv_obj_t *tab2 = lv_tabview_add_tab(tv, "List");
    lv_obj_t *tab3 = lv_tabview_add_tab(tv, "Chart");

#if LV_DEMO_WALLPAPER == 0
    /*Blue bg instead of wallpaper*/
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BG, &style_tv_btn_bg);
#endif
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_BG, &style_tv_btn_bg);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_INDIC, &lv_style_plain);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_PR, &style_tv_btn_pr);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_REL, &style_tv_btn_rel);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_PR, &style_tv_btn_pr);

    write_create(tab1);
    list_create(tab2);
    chart_create(tab3);

#if LV_DEMO_SLIDE_SHOW
	lv_task_create(tab_switcher, 3000, LV_TASK_PRIO_MID, tv);
#endif
}
Beispiel #3
0
/**
 * Create message boxes to test their functionalities
 */
void lv_test_mbox_1(void)
{
    /* Default object */
    lv_obj_t *mbox1 = lv_mbox_create(lv_scr_act(), NULL);
    lv_obj_set_pos(mbox1, 10, 10);

    /*Add buttons and modify text*/
    static const char * btns2[] = {"Ok", "Cancel", ""};
    lv_obj_t *mbox2 = lv_mbox_create(lv_scr_act(), NULL);
    lv_mbox_add_btns(mbox2, btns2, NULL);
    lv_mbox_set_text(mbox2, "Message");
    lv_obj_set_width(mbox2, LV_HOR_RES / 2);
    lv_obj_align(mbox2, mbox1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);

    /*Add styles*/
    static lv_style_t bg;
    static lv_style_t btn_bg;
    lv_style_copy(&bg, &lv_style_pretty);
    lv_style_copy(&btn_bg, &lv_style_pretty);
    bg.body.padding.hor = 20;
    bg.body.padding.ver = 20;
    bg.body.padding.inner = 20;
    bg.body.main_color = LV_COLOR_BLACK;
    bg.body.grad_color = LV_COLOR_MARRON;
    bg.text.color = LV_COLOR_WHITE;

    btn_bg.body.padding.hor = 10;
    btn_bg.body.padding.ver = 5;
    btn_bg.body.padding.inner = 40;
    btn_bg.body.empty = 1;
    btn_bg.body.border.color = LV_COLOR_WHITE;
    btn_bg.text.color = LV_COLOR_WHITE;

    static lv_style_t btn_rel;
    lv_style_copy(&btn_rel, &lv_style_btn_rel);
    btn_rel.body.empty = 1;
    btn_rel.body.border.color = LV_COLOR_WHITE;

    lv_obj_t *mbox3 = lv_mbox_create(lv_scr_act(), mbox2);
    lv_mbox_set_style(mbox3, LV_MBOX_STYLE_BTN_REL, &btn_rel);
    lv_mbox_set_style(mbox3, LV_MBOX_STYLE_BTN_BG,  &btn_bg);
    lv_mbox_set_style(mbox3, LV_MBOX_STYLE_BG, &bg);
    lv_obj_align(mbox3, mbox1, LV_ALIGN_OUT_RIGHT_TOP, 10, 0);
    lv_mbox_set_action(mbox3, mbox_action);

    /*Copy with styles and set button width*/
    lv_obj_t *mbox4 = lv_mbox_create(lv_scr_act(), mbox3);
    lv_mbox_set_text(mbox4, "A quite long message text which is\n"
                            "manually broken into multiple lines");

    static const char * btns3[] = {"Ok", "Cancel", "Third", ""};
    lv_mbox_add_btns(mbox4, btns3, mbox_action);
    lv_obj_align(mbox4, mbox3, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);
}
Beispiel #4
0
/**
 * Create images from variable and file
 */
void lv_tutorial_image(void)
{
    /*************************
     * IMAGE FROM SOURCE CODE
     *************************/

    lv_obj_t *img_src = lv_img_create(lv_scr_act(), NULL);  /*Crate an image object*/
    lv_img_set_src(img_src, &red_flower);  /*Set the created file as image (a red fl  ower)*/
    lv_obj_set_pos(img_src, 10, 10);      /*Set the positions*/
    lv_obj_set_drag(img_src, true);

#if PC_FILES && USE_LV_FILESYSTEM
    /**************************
     * IMAGE FROM BINARY FILE
     **************************/

    /* Add a simple drive to open images from PC*/
    lv_fs_drv_t pcfs_drv;                         /*A driver descriptor*/
    memset(&pcfs_drv, 0, sizeof(lv_fs_drv_t));    /*Initialization*/

    pcfs_drv.file_size = sizeof(pc_file_t);       /*Set up fields...*/
    pcfs_drv.letter = 'P';
    pcfs_drv.open = pcfs_open;
    pcfs_drv.close = pcfs_close;
    pcfs_drv.read = pcfs_read;
    pcfs_drv.seek = pcfs_seek;
    pcfs_drv.tell = pcfs_tell;
    lv_fs_add_drv(&pcfs_drv);


    lv_obj_t *img_bin = lv_img_create(lv_scr_act(), NULL);  /*Create an image object*/
    /* Set the image's file according to the current color depth
     * a blue flower picture*/
#if LV_COLOR_DEPTH == 8
    lv_img_set_src(img_bin, "P:/lv_examples/lv_tutorial/6_images/blue_flower_8.bin");
#elif LV_COLOR_DEPTH == 16
    lv_img_set_src(img_bin, "P:/lv_examples/lv_tutorial/6_images/blue_flower_16.bin");
#elif LV_COLOR_DEPTH == 24
    lv_img_set_src(img_bin, "P:/lv_examples/lv_tutorial/6_images/blue_flower_24.bin");
#endif

    lv_obj_align(img_bin, img_src, LV_ALIGN_OUT_RIGHT_TOP, 20, 0);     /*Align next to the source image*/
    lv_obj_set_drag(img_bin, true);
#endif

    lv_obj_t * img_symbol = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img_symbol, SYMBOL_OK);
    lv_obj_set_drag(img_symbol, true);
    lv_obj_align(img_symbol, img_src, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 20);     /*Align next to the source image*/
}
Beispiel #5
0
static void ssd1306_task(void *pvParameters)
{
    printf("%s: Started user interface task\n", __FUNCTION__);
    vTaskDelay(SECOND);
    ssd1306_set_whole_display_lighting(&dev, false);

    //Set a style for the obj
    lv_style_copy(&style, &lv_style_transp);
    style.text.font = &lv_font_dejavu_10;   /*Unicode and symbol fonts already assigned by the library*/
    style.text.color.full = 1;
    style.text.opa = 255;

    style.body.main_color.full = 0;
    style.body.grad_color.full = 0;
    style.body.shadow.color.full = 0;
    style.body.border.color.full = 0;
    style.body.empty = 1;

    style.image.color.full = 1;
    style.image.intense = 255;
    style.image.opa = 255;

    style.line.color.full = 1;
    style.line.opa = 255;
    style.line.width = 1;
    style.line.rounded = false;

    //Create main screen obj
    lv_obj_t * scr = lv_obj_create(NULL, NULL);
    lv_scr_load(scr);
    lv_obj_set_style(scr, &style);

    //Create a simple label
    label = lv_label_create(lv_scr_act(), NULL);
    lv_obj_set_style(label, &style);

    lv_obj_align(label, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 0, 0);
    lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);
    lv_label_set_align(label, LV_LABEL_ALIGN_CENTER);
    lv_label_set_text(label, "lvgl work with esp-open-rtos");
    lv_obj_set_width(label, LV_HOR_RES);

    while (1) {
        /*draw system call */
        lv_task_handler();
        vTaskDelay(1);
    }
}
Beispiel #6
0
/**
 * Open a terminal
 * @return pointer to the terminal window
 */
lv_obj_t * terminal_create(void)
{
    static lv_style_t style_bg;
    lv_style_copy(&style_bg, &lv_style_pretty);
    style_bg.body.main_color = LV_COLOR_MAKE(0x30, 0x30, 0x30);
    style_bg.body.grad_color = LV_COLOR_MAKE(0x30, 0x30, 0x30);
    style_bg.body.border.color = LV_COLOR_WHITE;
    style_bg.text.color = LV_COLOR_MAKE(0xE0, 0xE0, 0xE0);

    win = lv_win_create(lv_scr_act(), NULL);
    lv_win_set_style(win, LV_WIN_STYLE_BG, &style_bg);
    lv_obj_set_size(win, TERMINAL_WIDTH, TERMINAL_HEIGHT);
    lv_win_set_sb_mode(win, LV_SB_MODE_AUTO);
    lv_win_add_btn(win, SYMBOL_CLOSE, win_close_action);

    /*Make the window's content responsive*/
    lv_win_set_layout(win, LV_LAYOUT_PRETTY);

    /*Create a label for the text of the terminal*/
    label = lv_label_create(win, NULL);
    lv_label_set_long_mode(label, LV_LABEL_LONG_BREAK);
    lv_obj_set_width(label, lv_win_get_width(win));
    lv_label_set_static_text(label, txt_log);               /*Use the text array directly*/

    /*Create a clear button*/
    clr_btn = lv_btn_create(win, NULL);
    lv_cont_set_fit(clr_btn, true, true);
    lv_btn_set_action(clr_btn, LV_BTN_ACTION_CLICK, clr_click_action);
    lv_obj_t * btn_label = lv_label_create(clr_btn, NULL);
    lv_label_set_text(btn_label, "Clear");

    return win;
}
Beispiel #7
0
/**
 * Create windows to test their functionalities
 */
void lv_test_win_1(void)
{

    lv_obj_t *win1 = lv_win_create(lv_scr_act(), NULL);
    lv_obj_set_size(win1, LV_HOR_RES / 2 - LV_DPI / 20, LV_VER_RES / 2 - LV_DPI / 20);

    lv_obj_t *win2 = lv_win_create(lv_scr_act(), win1);
    lv_obj_align(win2, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 0);
    lv_win_set_title(win2, "Random title");
    lv_win_add_btn(win2, SYMBOL_CLOSE, NULL);
    lv_win_add_btn(win2, SYMBOL_OK, NULL);
    lv_win_add_btn(win2, SYMBOL_EDIT, NULL);

    lv_obj_t *label = lv_label_create(win2, NULL);
    lv_obj_set_pos(label, 10, 10);
    lv_label_set_text(label, "Long\n\n\ntext\n\n\nto\n\n\nsee\n\n\nthe\n\n\nscrollbars");


    static lv_style_t header;
    lv_style_copy(&header, &lv_style_plain);
    header.body.main_color = LV_COLOR_RED;
    header.body.grad_color = LV_COLOR_MARRON;
    header.body.padding.inner = 0;
    header.text.color = LV_COLOR_WHITE;

    lv_obj_t *win3 = lv_win_create(lv_scr_act(), win2);
    lv_obj_align(win3, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
    lv_win_set_style(win3, LV_WIN_STYLE_HEADER, &header);
    lv_win_set_style(win3, LV_WIN_STYLE_BTN_REL, &lv_style_transp);
    lv_win_set_style(win3, LV_WIN_STYLE_CONTENT_BG, &lv_style_plain_color);
    lv_win_set_style(win3, LV_WIN_STYLE_CONTENT_SCRL, &lv_style_plain);
    lv_win_set_style(win3, LV_WIN_STYLE_BG, &lv_style_plain_color);
    lv_win_set_btn_size(win3, LV_DPI / 3);

    label = lv_label_create(win3, NULL);
    lv_obj_set_pos(label, 10, 10);
    lv_label_set_text(label, "Styled window\n\nThe content background has\ndifferent color");

    lv_obj_t *win4 = lv_win_create(lv_scr_act(), win3);
    lv_obj_align(win4, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
}
Beispiel #8
0
/**
 * Concat two font and create label with Unicode characters
 * LV_TXT_UTF8 has to be enabled
 */
void lv_tutorial_fonts(void)
{
    /*Add the cyrillic character set to the ASCII*/
    lv_font_add(&font_ubuntu_40_cyrillic, &font_ubuntu_40_ascii);

    /*Create a style and use the new font*/
    static lv_style_t style1;
    lv_style_copy(&style1, &lv_style_plain);
    style1.text.font = &font_ubuntu_40_ascii;

    /*Create a label and set new text*/
    lv_obj_t *label = lv_label_create(lv_scr_act(), NULL);
    lv_obj_set_pos(label, 10, 10);
    lv_label_set_style(label, &style1);
    lv_label_set_text(label, "Hello\nпривет");      /*Use ASCII and Cyrillic letters together*/
}
Beispiel #9
0
/**
 * Create lists to test their functionalities
 */
void lv_test_list_1(void)
{
    /* Default object. It will be an empty list*/
    list1 = lv_list_create(lv_scr_act(), NULL);
    lv_obj_set_pos(list1, 10, 10);

    list2 = lv_list_create(lv_scr_act(), NULL);
    lv_obj_align(list2, list1, LV_ALIGN_OUT_RIGHT_TOP, 20, 0);
    lv_list_add(list2, SYMBOL_FILE, "File", NULL);
    lv_list_add(list2, SYMBOL_DIRECTORY, "Directory", NULL);
    lv_list_add(list2, &img_flower_icon, "Image icon", NULL);
    lv_obj_set_width(list2, 100);

    list3 = lv_list_create(lv_scr_act(), list2);
    lv_obj_align(list3, list2, LV_ALIGN_OUT_RIGHT_TOP, 20, 0);
    lv_list_add(list3, NULL, "No icon", NULL);
    lv_list_add(list3, SYMBOL_CLOSE, "", NULL);
    lv_list_add(list3, SYMBOL_UP, "Up", NULL);
    lv_list_add(list3, SYMBOL_DOWN, "Down", NULL);

    static lv_style_t sb;
    static lv_style_t bg;
    lv_style_copy(&sb, &lv_style_pretty_color);
    lv_style_copy(&bg, &lv_style_pretty_color);
    sb.body.padding.hor = -10;
    sb.body.padding.inner = 10;

    bg.body.padding.hor = 20;

    list4 = lv_list_create(lv_scr_act(), list3);
    lv_list_set_style(list4, LV_LIST_STYLE_BG, &bg);
    lv_list_set_style(list4, LV_LIST_STYLE_SB, &sb);
    lv_obj_align(list4, list3, LV_ALIGN_OUT_RIGHT_TOP, 20, 0);
    lv_obj_set_width(list4, 200);

    /*Add list up/down buttons*/
    lv_obj_t *btn_up = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_align(btn_up, list1, LV_ALIGN_OUT_BOTTOM_LEFT, 0, 10);
    lv_btn_set_action(btn_up, LV_BTN_ACTION_CLICK, list_move);
    lv_obj_set_free_num(btn_up, 0);
    lv_obj_t *label = lv_label_create(btn_up, NULL);
    lv_label_set_text(label, SYMBOL_UP);

    lv_obj_t *btn_down = lv_btn_create(lv_scr_act(), btn_up);
    lv_obj_align(btn_down, btn_up, LV_ALIGN_OUT_RIGHT_MID, 10, 0);
    lv_obj_set_free_num(btn_down, 1);
    label = lv_label_create(btn_down, NULL);
    lv_label_set_text(label, SYMBOL_DOWN);

}
Beispiel #10
0
/**
 * Create tab views to test their functionalities
 */
void lv_test_tabview_1(void)
{
    /* Default object. It will be an empty tab view*/
    lv_obj_t *tv1 = lv_tabview_create(lv_scr_act(), NULL);
    lv_tabview_add_tab(tv1, "First");
    lv_tabview_add_tab(tv1, "Second");
    lv_obj_set_size(tv1, LV_HOR_RES / 2 - 10, LV_VER_RES / 2 - 10);

    /*Copy the first tabview and add some texts*/
    lv_obj_t *tv2 = lv_tabview_create(lv_scr_act(), tv1);
    lv_obj_align(tv2, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 0);

    lv_obj_t *tab = lv_tabview_get_tab(tv2, 0);
    lv_obj_t *label = lv_label_create(tab, NULL);
    lv_label_set_text(label, "This is\n\n\nA long text\n\n\ntext\n\n\non the\n\n\nsecond\n\n\ntab\n\n\nto see\n\n\nthe scrolling");

    tab = lv_tabview_get_tab(tv2, 1);
    label = lv_label_create(tab, NULL);
    lv_label_set_text(label, "This is the second tab");


    /*Create styles*/
    static lv_style_t bg;
    static lv_style_t sb;
    static lv_style_t btns_bg;
    static lv_style_t tab_bg;
    static lv_style_t rel;
    static lv_style_t pr;
    static lv_style_t tgl_rel;
    static lv_style_t tgl_pr;
    static lv_style_t indic;

    lv_style_copy(&btns_bg, &lv_style_plain_color);
    lv_style_copy(&tab_bg, &lv_style_pretty_color);
    lv_style_copy(&bg, &lv_style_pretty_color);
    lv_style_copy(&sb, &lv_style_pretty);
    lv_style_copy(&btns_bg, &lv_style_transp_fit);
    lv_style_copy(&rel, &lv_style_plain);
    lv_style_copy(&pr, &lv_style_plain);
    lv_style_copy(&tgl_rel, &lv_style_plain);
    lv_style_copy(&tgl_pr, &lv_style_plain);
    lv_style_copy(&indic, &lv_style_plain);

    rel.body.main_color = LV_COLOR_SILVER;
    pr.body.main_color = LV_COLOR_GRAY;
    tgl_rel.body.main_color = LV_COLOR_RED;
    tgl_pr.body.main_color = LV_COLOR_MARRON;
    indic.body.main_color = LV_COLOR_ORANGE;
    indic.body.grad_color = LV_COLOR_ORANGE;
    indic.body.padding.inner = LV_DPI / 16;
    tab_bg.body.main_color = LV_COLOR_SILVER;
    tab_bg.body.grad_color = LV_COLOR_GREEN;
    tab_bg.text.color = LV_COLOR_YELLOW;

    /*Apply the styles*/
    lv_obj_t *tv3 = lv_tabview_create(lv_scr_act(), tv2);
    lv_obj_align(tv3, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BG, &bg);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BTN_BG, &btns_bg);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BTN_REL, &rel);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BTN_PR, &pr);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BTN_TGL_REL, &tgl_rel);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_BTN_TGL_PR, &tgl_pr);
    lv_tabview_set_style(tv3, LV_TABVIEW_STYLE_INDIC, &indic);

    tab = lv_tabview_get_tab(tv3, 0);
    lv_page_set_style(tab, LV_PAGE_STYLE_BG, &tab_bg);
    lv_page_set_style(tab, LV_PAGE_STYLE_SB, &sb);
    label = lv_label_create(tab, NULL);
    lv_label_set_text(label, "This is\n\n\nA long text\n\n\ntext\n\n\non the\n\n\nsecond\n\n\ntab\n\n\nto see\n\n\nthe scrolling");

    tab = lv_tabview_get_tab(tv3, 1);
    label = lv_label_create(tab, NULL);
    lv_label_set_text(label, "This is the second tab");

    /*Copy the styles tab view*/
    lv_obj_t *tv4 = lv_tabview_create(lv_scr_act(), tv3);
    lv_obj_align(tv4, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
}
Beispiel #11
0
/**
 * Create buttons to test their functionalities
 */
void lv_test_btn_1(void)
{
    /* Create a button which looks well */
    lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL);

    /* Create a default button manually set to toggled state*/
    lv_obj_t * btn2 = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_align(btn2, btn1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_btn_set_state(btn2, LV_BTN_STATE_TGL_REL);

    /* Create a button which can be toggled */
    lv_obj_t * btn3 = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_align(btn3, btn2, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_btn_set_toggle(btn3, true);

    /* Test actions:
     * Press: increase width, Release: decrease width, Long press: delete */
    lv_obj_t * btn4 = lv_btn_create(lv_scr_act(), NULL);
    lv_obj_align(btn4, btn1, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
    lv_btn_set_action(btn4, LV_BTN_ACTION_PR, width_inc);
    lv_btn_set_action(btn4, LV_BTN_ACTION_CLICK, width_dec);
    lv_btn_set_action(btn4,  LV_BTN_ACTION_LONG_PR, lv_obj_del);

    /* Test styles and copy. Same as 'btn4' but different styles */
    static lv_style_t style_rel;
    lv_style_copy(&style_rel, &lv_style_pretty);
    style_rel.body.main_color = LV_COLOR_ORANGE;
    style_rel.body.grad_color = LV_COLOR_BLACK;
    style_rel.body.border.color = LV_COLOR_RED;
    style_rel.body.shadow.color = LV_COLOR_MARRON;
    style_rel.body.shadow.width = 10;

    static lv_style_t style_pr;
    lv_style_copy(&style_pr,  &lv_style_pretty);
    style_pr.body.empty = 1;
    style_pr.body.border.color = LV_COLOR_RED;
    style_pr.body.border.width = 4;

    /*Skip 'tpr' because it will be let the same*/

    static lv_style_t style_tpr;
    lv_style_copy(&style_tpr, &lv_style_pretty);
    style_tpr.body.empty = 1;
    style_tpr.body.border.color = LV_COLOR_RED;
    style_tpr.body.border.width = 4;

    static lv_style_t style_ina;
    lv_style_copy(&style_ina, &lv_style_pretty);
    style_ina.body.main_color = LV_COLOR_SILVER;
    style_ina.body.grad_color = LV_COLOR_GRAY;
    style_ina.body.border.color = LV_COLOR_RED;

    /*Create styled button*/
    lv_obj_t * btn5 = lv_btn_create(lv_scr_act(), btn4);
    lv_obj_align(btn5, btn4, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_btn_set_style(btn5, LV_BTN_STYLE_REL, &style_rel);
    lv_btn_set_style(btn5, LV_BTN_STYLE_PR, &style_pr);
    lv_btn_set_style(btn5, LV_BTN_STYLE_TGL_PR, &style_tpr);
    lv_btn_set_style(btn5, LV_BTN_STYLE_INA, &style_ina);
    lv_btn_set_toggle(btn5, true);

    /* Test style copy and inactive state*/
    lv_obj_t * btn6 = lv_btn_create(lv_scr_act(), btn5);
    lv_obj_align(btn6, btn5, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_btn_set_state(btn6, LV_BTN_STATE_INA);

    /*Test horizontal fit and default layout (CENTER)*/
    lv_obj_t * btn7 = lv_btn_create(lv_scr_act(), NULL);
    lv_btn_set_fit(btn7, true, false);
    lv_obj_t *label = lv_label_create(btn7, NULL);
    lv_label_set_text(label, "A quite long text");
    label = lv_label_create(btn7, NULL);
    lv_label_set_text(label, "Short text");
    lv_obj_align(btn7, btn4, LV_ALIGN_OUT_RIGHT_TOP, 20, 0);

}