Scale Temperature

Lab 4: Scale Widget (Temperature Gauge)


1. โครงสร้างภาพรวมของ Lab

Why? - ทำไมต้องเรียนรู้เรื่องนี้

  • Professional UI: ดูเหมือนเครื่องมือวัดจริง

  • Color Zones: แสดง warning zones ด้วยสี

  • Needle Display: เข็มชี้ค่าปัจจุบัน

  • Custom Labels: กำหนด tick labels เอง

What? - จะได้เรียนรู้อะไร

  1. Scale Widget: สร้าง gauge แบบมืออาชีพ

  2. Sections: เพิ่ม color zones (cold, normal, hot)

  3. Needle Line: เข็มชี้ค่าปัจจุบัน

  4. Custom Labels: กำหนด labels ด้วย array

How? - จะทำอย่างไร

  1. สร้าง Scale ในโหมด ROUND_OUTER

  2. กำหนด tick count และ major tick

  3. เพิ่ม sections สำหรับ color zones

  4. สร้าง needle line แสดงค่าปัจจุบัน


2. หลักการทำงานและ Flowchart

2.1 Configuration Flow


3. ฟังก์ชันสำคัญ

3.1 Scale Functions

Function
Description

lv_scale_create(parent)

สร้าง scale

lv_scale_set_mode(scale, mode)

กำหนดโหมด

lv_scale_set_total_tick_count(scale, count)

จำนวน tick ทั้งหมด

lv_scale_set_major_tick_every(scale, nth)

major ทุก n tick

lv_scale_set_range(scale, min, max)

กำหนด range

lv_scale_set_text_src(scale, labels[])

custom labels

lv_scale_add_section(scale)

เพิ่ม color section

3.2 Scale Modes

Mode
Description

LV_SCALE_MODE_HORIZONTAL_TOP

แนวนอน tick ด้านบน

LV_SCALE_MODE_HORIZONTAL_BOTTOM

แนวนอน tick ด้านล่าง

LV_SCALE_MODE_VERTICAL_LEFT

แนวตั้ง tick ด้านซ้าย

LV_SCALE_MODE_VERTICAL_RIGHT

แนวตั้ง tick ด้านขวา

LV_SCALE_MODE_ROUND_INNER

วงกลม tick ด้านใน

LV_SCALE_MODE_ROUND_OUTER

วงกลม tick ด้านนอก

3.3 Section Functions

Function
Description

lv_scale_add_section(scale)

เพิ่ม section

lv_scale_section_set_range(sec, min, max)

กำหนด range

lv_scale_section_set_style(sec, part, style)

กำหนด style

3.4 Needle Function


4. Code Example

4.1 Global Variables

4.2 Timer Callback

4.3 Main Function


5. องค์ความรู้และเทคนิค

5.1 Custom Labels Array

5.2 Multiple Sections

5.3 Style Parts

Part
Description

LV_PART_MAIN

Background arc

LV_PART_INDICATOR

Major ticks + labels

LV_PART_ITEMS

Minor ticks


6. แบบฝึกหัด

Exercise 1: Three-Zone Scale

สร้าง Scale มี 3 zones:

  • Cold (0-25): Blue

  • Normal (25-75): Green

  • Hot (75-100): Red

Exercise 2: Speedometer

สร้าง Speedometer 0-200 km/h พร้อม danger zone (150-200)


7. References


Previous Lab: Lab 3: Chart Time-Series Next Lab: Lab 5: Sensor Dashboard

Last updated

Was this helpful?