# Style

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

![](/files/-MgeQ0W1vhVtMe3l2fI6)

## การนำ 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/general/getting-start/lvgl-light-and-versatile-embedded-graphics-library/style.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.