diff --git a/lv_examples/1_3_style_usage/style_usage.c b/lv_examples/1_3_style_usage/style_usage.c index f6f5ec8505..4c7ffe3227 100644 --- a/lv_examples/1_3_style_usage/style_usage.c +++ b/lv_examples/1_3_style_usage/style_usage.c @@ -4,8 +4,25 @@ */ /* + * You can modify the appearance of the graphical objects with styles. + * A style is simple 'lv_style_t' variable. + * Objects save the address of this variable so it has to be 'static or 'global'. * - */ + * A style contains various attributes to describe rectangle, image or text like + * objects at same time. To know which attribute is used by an object see: + * http://www.gl.littlev.hu/object-types + * + * To set a new style for an object use: 'lv_obj_set_style(obj, &style); + * If NULL is set as style then the object will inherit the parents style. + * For example is you create a style for button the label appearance can be defined there as well. + * + * You can use built-in styles. 'lv_style_get(LV_STYLE_... , ©)' will give you a pointer to built in style + * and copy it to variable (second parameter) if it is not NULL. + * By default the objects use the built-in styles. + * The built-in styles can be modified in run time to give a new default skin to your GUI. + * + * Learn more here: http://www.gl.littlev.hu/objects#style + * */ /********************* * INCLUDES @@ -46,15 +63,96 @@ void style_usage_init(void) { - /*3 buttons*/ - /*copy default style and mod, create new style*/ + /************************************ + * BUTTON + LABEL WITH DEFAULT STYLE + ************************************/ + + lv_obj_t * btn1; + btn1 = lv_btn_create(lv_scr_act(), NULL); /*Create a simple button*/ + lv_obj_set_pos(btn1, 10, 10); + lv_obj_t * label = lv_label_create(btn1, NULL); /*Add a lebel tothe button*/ + lv_label_set_text(label, "Default"); + + /************************ + * BUTTON WITH NEW STYLE + ************************/ + + /* Create a new style + * Don't forget a style can describe any object type + * like buttons and labels */ + static lv_style_t style_btn2; /*Styles can't be local variables*/ + lv_style_get(LV_STYLE_PRETTY_COLOR, &style_btn2); /*Copy a built-in style as a starting point*/ + style_btn2.swidth = 10; /*10 px shadow*/ + style_btn2.bwidth = 5; /*5 px border width*/ + style_btn2.mcolor = COLOR_ORANGE; /*Orange main color*/ + style_btn2.gcolor = COLOR_RED; /*Red gradient color*/ + style_btn2.letter_space = 10; /*10 px letter space*/ + style_btn2.txt_align = LV_TXT_ALIGN_MID; /*Text align: middle*/ + + /*Create a button and apply the new style*/ + lv_obj_t * btn2; + btn2 = lv_btn_create(lv_scr_act(), NULL); + lv_obj_align(btn2, btn1, LV_ALIGN_OUT_RIGHT_MID, 20, 0); + lv_obj_set_style(btn2, &style_btn2); + + /* Add a label to the button. + * Label by default inherits the parent's style */ + label = lv_label_create(btn2, NULL); + lv_label_set_text(label, "New\nstyle"); + + /************************ + * LABEL WITH NEW STYLE + ************************/ + + /*Create new style for the label*/ + static lv_style_t style_label; + lv_style_get(LV_STYLE_PRETTY_COLOR, &style_label); /*Use a built-in style*/ + style_label.ccolor = color_mix(COLOR_BLUE, COLOR_WHITE, OPA_70);/*Light blue content color (text color) */ + style_label.letter_space = 4; /*4 px letter space*/ + style_label.txt_align = LV_TXT_ALIGN_MID; /*Text align: middle*/ + + /*Copy 'btn2'. It will use the same style as 'btn2'*/ + lv_obj_t * btn3; + btn3 = lv_btn_create(lv_scr_act(), btn2); + lv_obj_align(btn3, btn2, LV_ALIGN_OUT_RIGHT_MID, 20, 0); + + /*Create a label and apply the new style */ + label = lv_label_create(btn3, NULL); + lv_label_set_text(label, "Label\nstyle"); + lv_obj_set_style(label, &style_label); + /************************ + * CREATE A STYLED LED + ***********************/ - /*3 labels font + symbol font*/ + /*Create a style for the LED*/ + static lv_style_t style_led; + lv_style_get(LV_STYLE_PRETTY_COLOR, &style_led); + style_led.swidth = 15; + style_led.radius = LV_RADIUS_CIRCLE; + style_led.bwidth = 5; + style_led.bopa = OPA_30; + style_led.mcolor = COLOR_MAKE(0xb5, 0x0f, 0x04); + style_led.gcolor = COLOR_MAKE(0x50, 0x07, 0x02); + style_led.bcolor = COLOR_MAKE(0xfa, 0x0f, 0x00); + style_led.scolor = COLOR_MAKE(0xb5, 0x0f, 0x04); - /*3 leds*/ + /*Create a LED and switch it ON*/ + lv_obj_t * led1 = lv_led_create(lv_scr_act(), NULL); + lv_obj_set_style(led1, &style_led); + lv_obj_align_us(led1, btn1, LV_ALIGN_OUT_BOTTOM_MID, 0, 40); + lv_led_on(led1); + /*Copy the previous LED and set a brightness*/ + lv_obj_t * led2 = lv_led_create(lv_scr_act(), led1); + lv_obj_align_us(led2, btn2, LV_ALIGN_OUT_BOTTOM_MID, 0, 40); + lv_led_set_bright(led2, 190); + + /*Copy the previous LED and switch it OFF*/ + lv_obj_t * led3 = lv_led_create(lv_scr_act(), led1); + lv_obj_align_us(led3, btn3, LV_ALIGN_OUT_BOTTOM_MID, 0, 40); + lv_led_off(led3); } /**********************