> For the complete documentation index, see [llms.txt](https://docs.aic-eec.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aic-eec.com/general/getting-start/lvgl-light-and-versatile-embedded-graphics-library/style.md).

# Style

Change your color, font and be stylish

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

### สร้าง Style 

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

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

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

##

### Background

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

```cpp
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 บนขอบของวัตถุ เราสามารถไฮไลท์ขอบของวัตถุได้ โดยฟังก์ชั่นเกี่ยวกับการตั้งค่าขอบของวัตถุมีดังต่อไปนี้

```cpp
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); // เลือกให้มีขอบแค่ด้านล่างกับด้านขวา
```

{% hint style="success" %}
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 = ขอบทุกด้าน
  {% endhint %}

##

### Outline

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

```cpp
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)
```

{% hint style="success" %}
LV\_OPA สามารถตั้งค่าให้โปร่งแสงได้ทุก 10%\
e.g. LV\_OPA\_10,  LV\_OPA\_20,  LV\_OPA\_50
{% endhint %}

##

### Shadow

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

```cpp
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); // ขยายขนาดของเงา
```

{% hint style="warning" %}
ขนาดของเงาจะมีขนาดเท่ากับขนาดของ object
{% endhint %}

##

### Text

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

```cpp
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);
```

{% hint style="success" %}
Text decor มี 3 แบบให้ใช้ด้วยกันคือ

* LV\_TEXT\_DECOR\_NONE = ไม่มีการตกแต่ง
* LV\_TEXT\_DECOR\_UNDERLINE = ขีดเส้นใต้ตัวหนังสือ
* LV\_TEXT\_DECOR\_STRIKETHROUGH = ขีดเส้นทับตัวหนังสือ
  {% endhint %}

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

![](https://1856353139-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MClo3nC-1US0rbK8Qau%2F-MgePh9-FhDnWibOJ8xx%2F-MgeQ0W1vhVtMe3l2fI6%2Fimage.png?alt=media\&token=f02ecda4-6c1b-4e3e-a7f6-fb70f2818f76)

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

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

```cpp
lv_obj_add_style(obj, &style, 0);
```

{% hint style="warning" %}
โดย agreement ทั้งสามคือ

1. Object ที่จะนำ style ไปใส่
2. style ที่เราจะนำมาใส่ใน object
3. สถานะของ object นั้นที่จะแสดงผล
   {% endhint %}

{% hint style="success" %}
สถานะตอนแสดงผลมีหลายสถานะสถานะเช่น

* LV\_STATE\_DEFAULT = ขณะ object อยู่เฉยๆ
* LV\_STATE\_PRESSED = ขณะ object ถูกกด
* LV\_STATE\_FOCUSED = ขณะ object ถูกเลือก<br>

ดูสถานะอื่นๆได้ [ที่นี่](https://docs.lvgl.io/8/overview/style.html#states)
{% endhint %}