Style

Change your color, font and be stylish

Style เป็นตัวจัดการคุณสมบัติแบบต่างๆของ screen รวมถึง widget ทั้งหลายด้วย การจัดการคุณสมบัติของตัว object นี้มีทั้งการ เปลี่ยนสี การทำให้โปร่งแสง การตีขอบ การจัดการขอบเขตของแต่ละ object ว่าให้ชิดกันได้มากสุดแค่ไหน

สร้าง Style

การสร้าง style ขึ้นมาจะเหมือนกับการประกาศ Object อื่นๆ ทั่วไปโดยการสร้าง style จะใช้คำสั่งต่อไปนี้

static lv_style_t ชื่อ_style;
lv_style_init(&ชื่อ_style);

จากนั้นเราจะได้ style เปล่าๆของเราขึ้นมา จากนนี้การปรับแต่งใดๆก็ตามที่ใส่ไปใน style นี้จะทำหน้าที่เป็นเหมือน template ให้กับ object อื่นๆที่เรียก style นี้มาใช้

Background

เป็นฟังก์ชั่นจัด style เกี่ยวกับพื้นหลังทั้งหมด รวมถึงการจัดสี การไล่สี การตั้งค่าความโปร่งแสง โดยชุดคำสั่งที่เกี่ยวข้องกับการจัดการพื้นหลังมีดังต่อไปนี้

lv_style_set_radius(&style, 5); // ลบมุม object ให้เป็นโค้งรัศมี 5
/*Make a gradient*/
lv_style_set_bg_opa(&style, LV_OPA_COVER); // ตั้งค่าความโปร่งแสงโดยค่าความใส เปลี่ยนจาก LV_OPA_COVER(ไม่มีโปร่งแสง) -> 0-255
lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));// เปลี่ยนสีพื้นหลังหลัก [LV_PALLETTE_ชื่อสี] หรือ lv_color_hex(0x000000) ตามด้วยความสว่างสี 1-5
lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE));// สีพื้นหลังรอง
lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);// ทิศทางการ gradient โดย LV_GRAD_DIR_VER = แนวตั้ง, LV_GRAD_DIR_HOR = แนวนอน
/*Shift the gradient to the bottom*/
lv_style_set_bg_main_stop(&style, 128); // จุดที่สีหลักเริ่ม gradient (0-255)
lv_style_set_bg_grad_stop(&style, 192); // จุดที่สีรองเริ่ม gradient (0-255)

Border

การตั้งค่า style บนขอบของวัตถุ เราสามารถไฮไลท์ขอบของวัตถุได้ โดยฟังก์ชั่นเกี่ยวกับการตั้งค่าขอบของวัตถุมีดังต่อไปนี้

lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE)); //เปลี่ยนสีขอบ
lv_style_set_border_width(&style, 5);// ตั้งความกว้างของขอบ(pixel)
lv_style_set_border_opa(&style, LV_OPA_50); // ตั้งค่าความโปร่งใสของขอบเป็น 50%
lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT); // เลือกให้มีขอบแค่ด้านล่างกับด้านขวา

border side สามารถเลือกทิศต่างๆได้ดังนี้

• LV_BORDER_SIDE_NONE = ไม่มีขอบ

• LV_BORDER_SIDE_LEFT = ขอบด้านซ้าย

• LV_BORDER_SIDE_RIGHT = ขอบด้านขวา

• LV_BORDER_SIDE_TOP = ขอบด้านบน

• LV_BORDER_SIDE_BOTTOM = ขอบด้านล่าง

• LV_BORDER_SIDE_FULL = ขอบทุกด้าน

Outline

เส้นขอบนอก ส่วนนี้จะเป็นฟังก์ชั่นเกี่ยวกับการตั้งค่าต่างๆของเส้นขอบด้านนอก object เราสามารถตั้งค่าให้ หนา /บาง ตามที่ต้องการได้ สามารถตั้งค่าความห่างระหว่างเส้นขอบกับตัววัตถุได้

lv_style_set_outline_width(&style, 2); //ตั้งค่าความกว้างของเส้นขอบ (pixel)
lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));// ตั้งค่าสีเส้นขอบ
lv_style_set_outline_pad(&style, 8); // ตั้งค่าความห่างระหว่างเส้นขอบกับobject (pixel)
lv_style_set_outline_opa(&style, LV_OPA_50); // ตั้งค่าความโปร่งแสงของเส้นขอบ (0-255)

LV_OPA สามารถตั้งค่าให้โปร่งแสงได้ทุก 10% e.g. LV_OPA_10, LV_OPA_20, LV_OPA_50

Shadow

เป็นการตั้งค่าให้มีเงาฉายมาจาก object โดยเราสามารถตั้งค่าสีของเงา และตำแหน่งของเงาได้ โดยฟังก์ชั่นเกี่ยวกับการตั้งค่าเงาของวัตถุมีดังต่อไปนี้

lv_style_set_shadow_width(&style, 25); // ตั้งค่าความเบลอของขอบเงา
lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
lv_style_set_shadow_ofs_x(&style, 10); // ตำแหน่งของเงาในแกน x
lv_style_set_shadow_ofs_y(&style, 20); // ตำแหน่งของเงาในแกน y
lv_style_set_shadow_ofs_y(&style, 5); // ขยายขนาดของเงา

ขนาดของเงาจะมีขนาดเท่ากับขนาดของ object

Text

ฟังก์ชั่นเกี่ยวกับการตั้งค่าตัวอักษร ไม่ว่าจะเป็นเลือก font, ปรับขนาด, เปลี่ยนสี ปรับช่องไฟ ของตัวหนังสือได้ โดยชุดคำสั่งทั้งหมดจะมีดังนี้

lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE)); // ปรับสีตัวหนังสือ
lv_style_set_text_letter_space(&style, 5); //ปรับช่องไฟ
lv_style_set_text_line_space(&style, 20); //ปรับระยะเว้นบรรทัด
lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE); //ปรับแต่ง ขีดเส้นใต้,ขีดฆ่า
//lv_obj_set_style_text_font(ltr_label, &lv_font_montserrat_16, 0);

/*Create an object with the new style*/
lv_obj_t * obj = lv_label_create(lv_scr_act());
lv_obj_add_style(obj, &style, 0);
lv_label_set_text(obj, "Text of\n"
                       "a label");

lv_obj_center(obj);

Text decor มี 3 แบบให้ใช้ด้วยกันคือ

• LV_TEXT_DECOR_NONE = ไม่มีการตกแต่ง

• LV_TEXT_DECOR_UNDERLINE = ขีดเส้นใต้ตัวหนังสือ

• LV_TEXT_DECOR_STRIKETHROUGH = ขีดเส้นทับตัวหนังสือ

เราสามารถดู font ที่ใช้งานได้ในไฟล์ lv_conf.h บรรทัดที่ 265

การนำ Style ไปใส่บน object

เราสามารถนำไปใส่ได้ด้วยการใช้คำสั่งดังต่อไปนี้

lv_obj_add_style(obj, &style, 0);

โดย agreement ทั้งสามคือ

1. Object ที่จะนำ style ไปใส่

2. style ที่เราจะนำมาใส่ใน object

3. สถานะของ object นั้นที่จะแสดงผล

สถานะตอนแสดงผลมีหลายสถานะสถานะเช่น

• LV_STATE_DEFAULT = ขณะ object อยู่เฉยๆ

• LV_STATE_PRESSED = ขณะ object ถูกกด

• LV_STATE_FOCUSED = ขณะ object ถูกเลือก

ดูสถานะอื่นๆได้ ที่นี่