Toggle Switch

Lab 4: Switch Toggle Control

Week 3 Part I - LVGL Basics

ราฒการ
ΰΈ£ΰΈ²ΰΈ’ΰΈ₯ΰΈ°ΰΉ€ΰΈ­ΰΈ΅ΰΈ’ΰΈ”

ΰΈ£ΰΈ°ΰΈ”ΰΈ±ΰΈš

Beginner

ΰΉ€ΰΈ§ΰΈ₯ΰΈ²

30-45 ΰΈ™ΰΈ²ΰΈ—ΰΈ΅

Hardware

PSoC Edge E84 + Display

LVGL Version

v9.2.0


1. ΰΉ‚ΰΈ„ΰΈ£ΰΈ‡ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ΰΈ ΰΈ²ΰΈžΰΈ£ΰΈ§ΰΈ‘ΰΈ‚ΰΈ­ΰΈ‡ Lab

Why? - ΰΈ—ΰΈ³ΰΉ„ΰΈ‘ΰΈ•ΰΉ‰ΰΈ­ΰΈ‡ΰΉ€ΰΈ£ΰΈ΅ΰΈ’ΰΈ™ΰΈ£ΰΈΉΰΉ‰ΰΉ€ΰΈ£ΰΈ·ΰΉˆΰΈ­ΰΈ‡ΰΈ™ΰΈ΅ΰΉ‰

Switch Widget ΰΉ€ΰΈ›ΰΉ‡ΰΈ™ΰΉ€ΰΈ„ΰΈ£ΰΈ·ΰΉˆΰΈ­ΰΈ‡ΰΈ‘ΰΈ·ΰΈ­ΰΈ„ΰΈ§ΰΈšΰΈ„ΰΈΈΰΈ‘ΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ° Binary ΰΈ—ΰΈ΅ΰΉˆΰΉ€ΰΈ‚ΰΉ‰ΰΈ²ΰΉƒΰΈˆΰΈ‡ΰΉˆΰΈ²ΰΈ’:

  • Binary Control: ΰΈ„ΰΈ§ΰΈšΰΈ„ΰΈΈΰΈ‘ΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ° ON/OFF ΰΉ„ΰΈ”ΰΉ‰ΰΈŠΰΈ±ΰΈ”ΰΉ€ΰΈˆΰΈ™

  • GPIO Simulation: ΰΉ€ΰΈ•ΰΈ£ΰΈ΅ΰΈ’ΰΈ‘ΰΈžΰΈ£ΰΉ‰ΰΈ­ΰΈ‘ΰΈͺΰΈ³ΰΈ«ΰΈ£ΰΈ±ΰΈšΰΈ„ΰΈ§ΰΈšΰΈ„ΰΈΈΰΈ‘ Hardware GPIO

  • State Management: ΰΉ€ΰΈ£ΰΈ΅ΰΈ’ΰΈ™ΰΈ£ΰΈΉΰΉ‰ΰΈΰΈ²ΰΈ£ΰΈ•ΰΈ£ΰΈ§ΰΈˆΰΈͺอบ state ΰΈ”ΰΉ‰ΰΈ§ΰΈ’ LV_STATE_CHECKED

  • UI/UX Standard: Switch ΰΉ€ΰΈ›ΰΉ‡ΰΈ™ pattern ฑาตรฐานใน modern UI

What? - ΰΈˆΰΈ°ΰΉ„ΰΈ”ΰΉ‰ΰΉ€ΰΈ£ΰΈ΅ΰΈ’ΰΈ™ΰΈ£ΰΈΉΰΉ‰ΰΈ­ΰΈ°ΰΉ„ΰΈ£

  1. Switch Widget: ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ toggle switch ΰΈ”ΰΉ‰ΰΈ§ΰΈ’ LVGL

  2. State Checking: ΰΈ•ΰΈ£ΰΈ§ΰΈˆΰΈͺอบΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ°ΰΈ”ΰΉ‰ΰΈ§ΰΈ’ lv_obj_has_state()

  3. Value Changed Event: ΰΈ•ΰΈ­ΰΈšΰΈͺΰΈ™ΰΈ­ΰΈ‡ΰΉ€ΰΈ‘ΰΈ·ΰΉˆΰΈ­ΰΈ„ΰΉˆΰΈ²ΰΉ€ΰΈ›ΰΈ₯ΰΈ΅ΰΉˆΰΈ’ΰΈ™

  4. LED Synchronization: ΰΈ‹ΰΈ΄ΰΈ‡ΰΈ„ΰΉŒΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ° Switch กับ LED

  5. GPIO Concept: ΰΉ€ΰΈ‚ΰΉ‰ΰΈ²ΰΉƒΰΈˆΰΉΰΈ™ΰΈ§ΰΈ„ΰΈ΄ΰΈ” HIGH/LOW จาก UI

How? - ΰΈ—ΰΈ³ΰΈ­ΰΈ’ΰΉˆΰΈ²ΰΈ‡ΰΉ„ΰΈ£

ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ Switch ΰΈ—ΰΈ΅ΰΉˆΰΈ„ΰΈ§ΰΈšΰΈ„ΰΈΈΰΈ‘ Virtual LED ΰΈžΰΈ£ΰΉ‰ΰΈ­ΰΈ‘ΰΉΰΈͺΰΈ”ΰΈ‡ΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ° GPIO (HIGH/LOW)


2. ΰΈ«ΰΈ₯ักการทำงานแΰΈ₯ΰΈ° Flowchart

2.1 Switch Widget Architecture

2.2 State Checking Pattern

2.3 GPIO Simulation Concept

2.4 Program Flowchart


3. ΰΈŸΰΈ±ΰΈ‡ΰΈΰΉŒΰΈŠΰΈ±ΰΈ™ΰΈͺำคัญ

3.1 Switch Functions

Function
Description
Parameters

lv_switch_create(parent)

ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ Switch widget

parent: object ΰΈ«ΰΈ₯ัก

lv_obj_add_state(obj, state)

ΰΉ€ΰΈžΰΈ΄ΰΉˆΰΈ‘ state (ΰΉ€ΰΈ›ΰΈ΄ΰΈ” switch)

obj, LV_STATE_CHECKED

lv_obj_clear_state(obj, state)

ΰΈ₯บ state (ΰΈ›ΰΈ΄ΰΈ” switch)

obj, LV_STATE_CHECKED

lv_obj_has_state(obj, state)

ΰΈ•ΰΈ£ΰΈ§ΰΈˆΰΈͺอบ state

obj, state

3.2 State Management

3.3 Switch vs Button Comparison

Feature
Button
Switch

Action

Click (momentary)

Toggle (latching)

State

Pressed/Released

ON/OFF

Event

LV_EVENT_CLICKED

LV_EVENT_VALUE_CHANGED

Use Case

Action trigger

Setting toggle

Visual

Text label

Sliding indicator


4. Code Example

4.1 Complete Code

4.2 Code Breakdown

Part 1: Switch Event Callback

Part 2: Switch Creation


5. ΰΈ­ΰΈ‡ΰΈ„ΰΉŒΰΈ„ΰΈ§ΰΈ²ΰΈ‘ΰΈ£ΰΈΉΰΉ‰ΰΉΰΈ₯ΰΈ°ΰΉ€ΰΈ—ΰΈ„ΰΈ™ΰΈ΄ΰΈ„

5.1 Switch Styling

5.2 Programmatic State Control

5.3 Initial State Setting

5.4 Disabling Switch


6. ΰΉΰΈšΰΈšΰΈΰΈΆΰΈΰΈ«ΰΈ±ΰΈ”

Exercise 1: Master Switch (Easy)

ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ "Master Switch" ΰΈ—ΰΈ΅ΰΉˆΰΈ„ΰΈ§ΰΈšΰΈ„ΰΈΈΰΈ‘ 3 LEDs ΰΈžΰΈ£ΰΉ‰ΰΈ­ΰΈ‘ΰΈΰΈ±ΰΈ™

Expected Output:

Hints:

  • ΰΉƒΰΈŠΰΉ‰ array ΰΈ‚ΰΈ­ΰΈ‡ LED objects

  • Loop ΰΈœΰΉˆΰΈ²ΰΈ™ΰΈ—ΰΈΈΰΈ LED ΰΉƒΰΈ™ callback


Exercise 2: Two-Way Binding (Medium)

ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ Switch แΰΈ₯ΰΈ° Button ΰΈ—ΰΈ΅ΰΉˆΰΈ‹ΰΈ΄ΰΈ‡ΰΈ„ΰΉŒΰΈΰΈ±ΰΈ™:

  • กด Button β†’ ΰΈͺΰΈ₯ับΰΈͺΰΈ–ΰΈ²ΰΈ™ΰΈ° Switch

  • Toggle Switch β†’ ΰΈ›ΰΈΈΰΉˆΰΈ‘ΰΉ€ΰΈ›ΰΈ₯ΰΈ΅ΰΉˆΰΈ’ΰΈ™ΰΈ‚ΰΉ‰ΰΈ­ΰΈ„ΰΈ§ΰΈ²ΰΈ‘

Expected Output:


Exercise 3: Settings Panel (Advanced)

ΰΈͺΰΈ£ΰΉ‰ΰΈ²ΰΈ‡ΰΈ«ΰΈ™ΰΉ‰ΰΈ² Settings ΰΈ‘ΰΈ΅ 4 switches ΰΈžΰΈ£ΰΉ‰ΰΈ­ΰΈ‘ labels:

  • WiFi (ON/OFF)

  • Bluetooth (ON/OFF)

  • Notifications (ON/OFF)

  • Dark Mode (ON/OFF)

Expected Output:


7. References


Previous Lab: Lab 3: LED Widget Control Next Lab: Lab 5: GPIO Dashboard

Last updated

Was this helpful?