One button is missing in page

chandumanem · March 13, 2021, 5:36pm

Description

Hi
i am creating buttons inside page.
when i run the code the first button is not showing.
the first button is hiding back to the ADD DEVICES
in below attached screen shot AUGUST is hiding back of ADD DEVICES

What MCU/Processor/Board and compiler are you using?

ARM

What LVGL version are you using?

V7.11

What do you want to achieve?

How to show page with buttons from below the ADD DEVICES

What have you tried so far?

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

void supported_devices(void)
{
        lv_style_init(&style_button);
        lv_style_set_bg_color(&style_button,LV_STATE_DEFAULT, LV_COLOR_WHITE);
        lv_style_set_bg_opa(&style_button,LV_STATE_DEFAULT, LV_OPA_TRANSP);
        lv_style_set_radius(&style_button,LV_STATE_DEFAULT,30);

        lv_style_init(&style_page);
        lv_style_set_bg_color(&style_page,LV_STATE_DEFAULT, LV_COLOR_WHITE);
        lv_style_set_bg_opa(&style_page,LV_STATE_DEFAULT, LV_OPA_TRANSP);
        lv_style_set_border_width(&style_page,LV_STATE_DEFAULT,0);

        lv_style_init(&lv_style_text);
        lv_style_set_text_font(&lv_style_text, LV_STATE_DEFAULT, &roboto_regular_25);
        lv_style_set_text_color(&lv_style_text, LV_STATE_DEFAULT, LV_COLOR_WHITE);
        //title
        lv_obj_t*title=lv_label_create(lv_scr_act(),NULL);
        lv_label_set_text(title,"ADD DEVICES");
        lv_obj_add_style(title,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_obj_align(title,NULL,LV_ALIGN_IN_TOP_MID,0,20);

        //PAGE
        lv_obj_t * page = lv_page_create(lv_scr_act(), NULL);
        lv_obj_set_size(page, 480, 780);
        lv_obj_add_style(page,LV_OBJ_PART_MAIN,&style_page);
        lv_obj_align(page, title, LV_ALIGN_OUT_BOTTOM_MID, 0, 40);
        //AUGUST
        lv_obj_t * august=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(august, august_event_handler);
        lv_obj_set_size(august,400,60);
        lv_obj_add_style(august,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(august,title, LV_ALIGN_CENTER, 0, 20);

        lv_obj_t*label_august = lv_label_create(august, NULL);
        lv_obj_add_style(label_august,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_august, "AUGUST");
        //BUTTERFLYMX
        lv_obj_t * butterflymx=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(butterflymx, butterflymx_event_handler);
        lv_obj_set_size(butterflymx,400,60);
        lv_obj_add_style(butterflymx,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(butterflymx,august, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_butterflymx = lv_label_create(butterflymx, NULL);
        lv_obj_add_style(label_butterflymx,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_butterflymx, "BUTTERFLYMX");
        //ECOBEE
        lv_obj_t * ecobee=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(ecobee, ecobee_event_handler);
        lv_obj_set_size(ecobee,400,60);
        lv_obj_add_style(ecobee,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(ecobee,butterflymx, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_ecobee = lv_label_create(ecobee, NULL);
        lv_obj_add_style(label_ecobee,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_ecobee, "ECOBEE");
        //GENIE
        lv_obj_t * genie=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(genie, genie_event_handler);
        lv_obj_set_size(genie,400,60);
        lv_obj_add_style(genie,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(genie,ecobee, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_genie = lv_label_create(genie, NULL);
        lv_obj_add_style(label_genie,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_genie, "GENIE");
        //GOOGLE NEST
        lv_obj_t * google_nest=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(google_nest, nest_event_handler);
        lv_obj_set_size(google_nest,400,60);
        lv_obj_add_style(google_nest,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(google_nest,genie, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_googlenest = lv_label_create(google_nest, NULL);
        lv_obj_add_style(label_googlenest,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_googlenest, "GOOGLE NEST");
        //HONEY WELL
        lv_obj_t * honey_well=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(honey_well, honeywell_event_handler);
        lv_obj_set_size(honey_well,400,60);
        lv_obj_add_style(honey_well,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(honey_well,google_nest, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_honey_well = lv_label_create(honey_well, NULL);
        lv_obj_add_style(label_honey_well,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_honey_well, "HONEY WELL");
        //IOTGIZMO
        lv_obj_t * iotgizmo=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(iotgizmo, iotgizmo_event_handler);
        lv_obj_set_size(iotgizmo,400,60);
        lv_obj_add_style(iotgizmo,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(iotgizmo,honey_well, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_iotgizmo = lv_label_create(iotgizmo, NULL);
        lv_obj_add_style(label_iotgizmo,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_iotgizmo, "IOTGIZMO");
        //KWIKSET
        lv_obj_t * kwikset=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(kwikset, kwikset_event_handler);
        lv_obj_set_size(kwikset,400,60);
        lv_obj_add_style(kwikset,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(kwikset,iotgizmo, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_kwikset = lv_label_create(kwikset, NULL);
        lv_obj_add_style(label_kwikset,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_kwikset, "KWIKSET");
        //LIFX
        lv_obj_t * lifx=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(lifx, lifx_event_handler);
        lv_obj_set_size(lifx,400,60);
        lv_obj_add_style(lifx,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(lifx,kwikset, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_lifx = lv_label_create(lifx, NULL);
        lv_obj_add_style(label_lifx,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_lifx, "LIFX");
        //PHILIPS HUE BULB/BRIDGE
        lv_obj_t * philips=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(philips, philips_event_handler);
        lv_obj_set_size(philips,400,60);
        lv_obj_add_style(philips,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(philips,lifx, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_philips = lv_label_create(philips, NULL);
        lv_obj_add_style(label_philips,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_philips, "PHILIPS HUE BULB/BRIDGE");
        //RING
        lv_obj_t * ring=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(ring, ring_event_handler);
        lv_obj_set_size(ring,400,60);
        lv_obj_add_style(ring,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(ring,philips, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_ring = lv_label_create(ring, NULL);
        lv_obj_add_style(label_ring,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_ring, "RING");
        //SCHELAGE ENCODE
        lv_obj_t * schelage=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(schelage, schelage_event_handler);
        lv_obj_set_size(schelage,400,60);
        lv_obj_add_style(schelage,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(schelage,ring, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_schelage = lv_label_create(schelage, NULL);
        lv_obj_add_style(label_schelage,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_schelage, "SCHELAGE ENCODE");
        //SMARTTHINGS
        lv_obj_t * smartthings=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(smartthings, smartthings_event_handler);
        lv_obj_set_size(smartthings,400,60);
        lv_obj_add_style(smartthings,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(smartthings,schelage, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_smartthings = lv_label_create(smartthings, NULL);
        lv_obj_add_style(label_smartthings,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_smartthings, "SMARTTHINGS");
        //SONOS MUSIC
        lv_obj_t * sonos=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(sonos, sonos_event_handler);
        lv_obj_set_size(sonos,400,60);
        lv_obj_add_style(sonos,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(sonos,smartthings, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_sonos = lv_label_create(sonos, NULL);
        lv_obj_add_style(label_sonos,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_sonos, "SONOS MUSIC");
        //TP-LINK KASA
        lv_obj_t * kasa=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(kasa, kasa_event_handler);
        lv_obj_set_size(kasa,400,60);
        lv_obj_add_style(kasa,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(kasa,sonos, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_kasa = lv_label_create(kasa, NULL);
        lv_obj_add_style(label_kasa,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_kasa, "TP-LINK KASA");
        //WEMO
        lv_obj_t * wemo=lv_btn_create(page,NULL);
        lv_obj_set_event_cb(wemo, wemo_event_handler);
        lv_obj_set_size(wemo,400,60);
        lv_obj_add_style(wemo,LV_OBJ_PART_MAIN,&style_button);
        lv_obj_align(wemo,kasa, LV_ALIGN_CENTER, 0, 80);

        lv_obj_t*label_wemo = lv_label_create(wemo, NULL);
        lv_obj_add_style(label_wemo,LV_OBJ_PART_MAIN,&lv_style_text);
        lv_label_set_text(label_wemo, "WEMO");
}

Screenshot and/or video

robekras · March 14, 2021, 10:57am

I not sure what exactely is your problem.
Maybe your question is a little imprecise.

You have very much buttons on the ‘page’.
This means your virtual page is larger than what can be shown to the physical size of the page.
For that reason you have a scroll bar at the right.

Maybe your question would be, ‘how can I set the scroll bar position to position 0 on startup’.
This can be done with the following line:

lv_obj_set_y (lv_page_get_scrl (page), 0);

With this line, the scroll bar is set to the very beginning of the page, and August is at the top.

I don’t know what your resolution is. If it is a 800 x 480 (I guess so),
you also should set the ‘page’ size to the following:

lv_obj_set_size (page, 480, 700);

You have set it to 780. But that is too much. In this case the ‘page’ is larger than your display, and the last button cannot be shown if you scroll down.

chandumanem · March 20, 2021, 6:11pm

Hi robekras,
I tried lv_obj_set_y (lv_page_get_scrl (page), 0);
But still AUGUST button not showing.
Button is hiding back to the ADD DEVICES

robekras · March 21, 2021, 6:36am

Strange.

I tried it with my real board (STM32H743, not with the simulator) with the most recent lvgl master,
and it worked right this way.

This is the code (I put it into chandu.c) which I tried.
Do you have any other code running after this code?
Not that there are any side affects!?

#include "lvgl/lvgl.h"


lv_style_t   style_button;
lv_style_t   style_page;
lv_style_t   lv_style_text;


/*****   button_event_cb (...)                              *******************/

void august_event_handler (lv_obj_t* button, lv_event_t event)
{
}


void butterflymx_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void ecobee_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void genie_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void nest_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void honeywell_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void iotgizmo_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void kwikset_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void lifx_event_handler (lv_obj_t* button, lv_event_t event)
{
}

void philips_event_handler (lv_obj_t* button, lv_event_t event)
{
}

void ring_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void schelage_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void smartthings_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void sonos_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void kasa_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void wemo_event_handler(lv_obj_t* button, lv_event_t event)
{
}

void supported_devices (void)
{
    lv_style_init             (&style_button);
    lv_style_set_bg_color     (&style_button, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_bg_opa       (&style_button, LV_STATE_DEFAULT, LV_OPA_TRANSP);
    lv_style_set_radius       (&style_button, LV_STATE_DEFAULT, 30);

    lv_style_init             (&style_page);
    lv_style_set_bg_color     (&style_page, LV_STATE_DEFAULT, LV_COLOR_WHITE);
    lv_style_set_bg_opa       (&style_page, LV_STATE_DEFAULT, LV_OPA_TRANSP);
    lv_style_set_border_width (&style_page, LV_STATE_DEFAULT, 0);

    lv_style_init             (&lv_style_text);
    lv_style_set_text_font    (&lv_style_text, LV_STATE_DEFAULT, &lv_font_montserrat_10);
    lv_style_set_text_color   (&lv_style_text, LV_STATE_DEFAULT, LV_COLOR_BLACK);

    // title
    lv_obj_t* title = lv_label_create (lv_scr_act (), NULL);
    lv_label_set_text   (title, "ADD DEVICES");
    lv_obj_add_style    (title, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_obj_align        (title, NULL, LV_ALIGN_IN_TOP_MID, 0, 20);

    // PAGE
    lv_obj_t* page = lv_page_create (lv_scr_act (), NULL);
    lv_obj_set_size     (page, 480, 700);
    lv_obj_add_style    (page, LV_OBJ_PART_MAIN, &style_page);
    lv_obj_align        (page, title, LV_ALIGN_OUT_BOTTOM_MID, 0, 40);

    // AUGUST
    lv_obj_t* august = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (august, august_event_handler);
    lv_obj_set_size     (august, 400, 60);
    lv_obj_add_style    (august, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (august, title, LV_ALIGN_CENTER, 0, 20);

    lv_obj_t* label_august = lv_label_create (august, NULL);
    lv_obj_add_style   (label_august, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text  (label_august, "AUGUST");

    // BUTTERFLYMX
    lv_obj_t* butterflymx = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (butterflymx, butterflymx_event_handler);
    lv_obj_set_size     (butterflymx, 400, 60);
    lv_obj_add_style    (butterflymx, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (butterflymx, august, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_butterflymx = lv_label_create (butterflymx, NULL);
    lv_obj_add_style    (label_butterflymx, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_butterflymx, "BUTTERFLYMX");
    // ECOBEE
    lv_obj_t* ecobee = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (ecobee, ecobee_event_handler);
    lv_obj_set_size     (ecobee, 400, 60);
    lv_obj_add_style    (ecobee, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (ecobee, butterflymx, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_ecobee = lv_label_create (ecobee, NULL);
    lv_obj_add_style    (label_ecobee, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_ecobee, "ECOBEE");

    // GENIE
    lv_obj_t* genie = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (genie, genie_event_handler);
    lv_obj_set_size     (genie, 400, 60);
    lv_obj_add_style    (genie, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (genie, ecobee, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_genie = lv_label_create (genie, NULL);
    lv_obj_add_style    (label_genie, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_genie, "GENIE");

    // GOOGLE NEST
    lv_obj_t  * google_nest = lv_btn_create (page, NULL);
    lv_obj_set_event_cb  (google_nest, nest_event_handler);
    lv_obj_set_size      (google_nest, 400, 60);
    lv_obj_add_style     (google_nest, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align         (google_nest, genie, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_googlenest = lv_label_create (google_nest, NULL);
    lv_obj_add_style     (label_googlenest, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text    (label_googlenest, "GOOGLE NEST");

    // HONEY WELL
    lv_obj_t* honey_well = lv_btn_create (page, NULL);
    lv_obj_set_event_cb  (honey_well, honeywell_event_handler);
    lv_obj_set_size      (honey_well, 400, 60);
    lv_obj_add_style     (honey_well, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align         (honey_well, google_nest, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_honey_well = lv_label_create (honey_well, NULL);
    lv_obj_add_style     (label_honey_well, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text    (label_honey_well, "HONEY WELL");
    // IOTGIZMO
    lv_obj_t* iotgizmo = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (iotgizmo, iotgizmo_event_handler);
    lv_obj_set_size     (iotgizmo, 400, 60);
    lv_obj_add_style    (iotgizmo, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (iotgizmo, honey_well, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_iotgizmo = lv_label_create (iotgizmo, NULL);
    lv_obj_add_style    (label_iotgizmo, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_iotgizmo, "IOTGIZMO");

    // KWIKSET
    lv_obj_t* kwikset = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (kwikset, kwikset_event_handler);
    lv_obj_set_size     (kwikset, 400, 60);
    lv_obj_add_style    (kwikset, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (kwikset, iotgizmo, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_kwikset = lv_label_create (kwikset, NULL);
    lv_obj_add_style   (label_kwikset, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text  (label_kwikset, "KWIKSET");

    // LIFX
    lv_obj_t  * lifx = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (lifx, lifx_event_handler);
    lv_obj_set_size     (lifx, 400, 60);
    lv_obj_add_style    (lifx, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (lifx, kwikset, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_lifx = lv_label_create (lifx, NULL);
    lv_obj_add_style  (label_lifx, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text (label_lifx, "LIFX");

    // PHILIPS HUE BULB/BRIDGE
    lv_obj_t  * philips = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (philips, philips_event_handler);
    lv_obj_set_size     (philips, 400, 60);
    lv_obj_add_style    (philips, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (philips, lifx, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_philips = lv_label_create (philips, NULL);
    lv_obj_add_style    (label_philips, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_philips, "PHILIPS HUE BULB/BRIDGE");
    // RING
    lv_obj_t* ring = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (ring, ring_event_handler);
    lv_obj_set_size     (ring, 400, 60);
    lv_obj_add_style    (ring, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (ring, philips, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t* label_ring = lv_label_create (ring, NULL);
    lv_obj_add_style  (label_ring, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text (label_ring, "RING");

    // SCHELAGE ENCODE
    lv_obj_t* schelage = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (schelage, schelage_event_handler);
    lv_obj_set_size     (schelage, 400, 60);
    lv_obj_add_style    (schelage, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (schelage, ring, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_schelage = lv_label_create (schelage, NULL);
    lv_obj_add_style   (label_schelage, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text  (label_schelage, "SCHELAGE ENCODE");

    // SMARTTHINGS
    lv_obj_t  * smartthings = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (smartthings, smartthings_event_handler);
    lv_obj_set_size     (smartthings, 400, 60);
    lv_obj_add_style    (smartthings, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (smartthings, schelage, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_smartthings = lv_label_create (smartthings, NULL);
    lv_obj_add_style    (label_smartthings, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_smartthings, "SMARTTHINGS");

    // SONOS MUSIC
    lv_obj_t  * sonos = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (sonos, sonos_event_handler);
    lv_obj_set_size     (sonos, 400, 60);
    lv_obj_add_style    (sonos, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (sonos, smartthings, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_sonos = lv_label_create (sonos, NULL);
    lv_obj_add_style    (label_sonos, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_sonos, "SONOS MUSIC");

    // TP-LINK KASA
    lv_obj_t* kasa = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (kasa, kasa_event_handler);
    lv_obj_set_size     (kasa, 400, 60);
    lv_obj_add_style    (kasa, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (kasa, sonos, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_kasa = lv_label_create (kasa, NULL);
    lv_obj_add_style   (label_kasa, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text  (label_kasa, "TP-LINK KASA");

    // WEMO
    lv_obj_t  * wemo = lv_btn_create (page, NULL);
    lv_obj_set_event_cb (wemo, wemo_event_handler);
    lv_obj_set_size     (wemo, 400, 60);
    lv_obj_add_style    (wemo, LV_OBJ_PART_MAIN, &style_button);
    lv_obj_align        (wemo, kasa, LV_ALIGN_CENTER, 0, 80);

    lv_obj_t  * label_wemo = lv_label_create (wemo, NULL);
    lv_obj_add_style    (label_wemo, LV_OBJ_PART_MAIN, &lv_style_text);
    lv_label_set_text   (label_wemo, "WEMO");

    volatile int16_t scroll_pos = lv_obj_get_y (lv_page_get_scrl (page));

    scroll_pos = 0;
    lv_obj_set_y        (lv_page_get_scrl (page), scroll_pos);
}