กลับไปหน้ารวมไฟล์
all-in-one-clock-20-e16d7a.md

All-In-One-Clock-2.0

นี่คือเวอร์ชั่นสองของโปรเจคเก่าของพี่: **All In One Clock 1.0** โปรเจคนี้จะมีฟังก์ชันคล้ายๆ กัน แต่จะเพิ่มหน้าจอสัมผัสและข้อมูลที่มากขึ้นเข้าไปอีก

เป้าหมายของโปรเจค:

  1. แสดงเวลา (เวลาปัจจุบันและวันที่)
  2. นาฬิกาปลุก
  3. อุณหภูมิปัจจุบัน
  4. ข้อมูลอุณหภูมิแบบเต็ม (ความดัน, ความชื้น, อื่นๆ)
  5. พยากรณ์อากาศ 3 วัน (วันนี้, พรุ่งนี้, มะรืนนี้)
  6. ไอคอนสภาพอากาศปัจจุบัน
  7. ตัวจับเวลา (Timer)

เพื่อที่จะทำทั้งหมดนี้ได้ เราต้องเชื่อมต่ออินเทอร์เน็ต สำหรับโปรเจคนี้พี่เลือกใช้บอร์ด **Arduino RP2040 Connect** ในการใช้ RP2040 พี่จะใช้ **Arduino IoT Cloud** ซึ่งเป็นเครื่องมือทางการของ Arduino ที่ใช้ง่ายมาก และเหมาะมากสำหรับการใช้งานอินเทอร์เน็ตข้ามหลายอุปกรณ์

โอเค เรามี Arduino ที่ต่อเน็ตได้แล้ว แต่เราจะเอาข้อมูลมาจากไหนล่ะ? มาดูกัน แบ่งข้อมูลที่เราต้องการออกเป็นสองหมวดเลย:

  • **เวลา:** การได้เวลานี่ง่ายมาก เพราะขณะที่เราเชื่อมต่ออินเทอร์เน็ตอยู่ เราสามารถขอ **Unix timestamp** ได้ Unix timestamp คือวิธีนับเวลาชนิดหนึ่ง มันนับทุกวินาทีตั้งแต่วันที่ 1 มกราคม 1970 ตัวอย่างเช่น ตอนที่พี่เขียนอยู่นี้ timestamp คือ "1682760531" ในการแปลงเวลาแบบนี้ พี่จะใช้ไลบรารีที่แปลง timestamp นี้ให้เป็นเวลาที่อ่านง่ายขึ้น (ชั่วโมง, นาที, ปี, เดือน, ฯลฯ)
    1. **อุณหภูมิและสภาพอากาศ:** การได้ข้อมูลพวกนี้ เราจะใช้สิ่งที่เรียกว่า **API** พูดสั้นๆ ก็คือ API เป็นเซิร์ฟเวอร์แบบนึง ที่พอเรา "เรียก" มัน มันก็จะส่งข้อมูลกลับมาในรูปแบบ JSON ตัวอย่างง่ายๆ เช่น NASA API ที่แสดงตำแหน่งสถานีอวกาศนานาชาติ สำหรับโปรเจคนี้พี่ใช้ **WeatherAPI.com** API นี้มีข้อมูลเพียบสำหรับโปรเจคเรา แต่พี่จะใช้แค่บางส่วน เพราะไมโครคอนโทรลเลอร์อย่าง Arduino รับข้อมูลมหาศาลขนาดนั้นไม่ได้ (พูดถึงระดับ 20000 ตัวอักษรเลยทีเดียว) ดังนั้นในตั้งค่า API พี่จึงปรับให้ส่งมาแค่ข้อมูลที่จำเป็น API นี้ยังส่งลิงก์รูปภาพมาให้ด้วย เช่น รูปไอคอนสภาพอากาศ ในการได้รูปภาพมาแสดง เราต้องทำสองสามขั้นตอน: ดึงเลขของรูปภาพ และตรวจสอบว่าตอนนี้เป็นเวลากลางวันหรือกลางคืน

    ข้อมูลทั้งหมดที่ว่ามา จะถูกส่งผ่านอินเทอร์เน็ตเข้ามา Arduino ของเราจะรับมันมาและถอดรหัส (decode)

    temperature = doc.containsKey("tw") ? doc["tw"] : temperature;

    ในตัวอย่างโค้ดนี้ Arduino จะอ่านข้อมูลที่เข้ามา ถ้าข้อมูลนั้นมีคีย์เวิร์ด "tw" (ข้อมูลจะถูกเข้ารหัสเป็น JSON) ข้อมูลนั้นก็จะถูกบันทึกลงในตัวแปร `temperature`

    พี่ส่งเลขรูปภาพและข้อมูล Day/Night มาด้วย แต่เราจะแสดงรูปภาพยังไง? ง่ายๆ บน SD Card ที่ต่อกับหน้าจอของเรา มีโฟลเดอร์สองโฟลเดอร์ที่เก็บรูปภาพทั้งหมดของกลางวันและกลางคืนในรูปแบบ .bmp (bit map images) ดังนั้นพี่ก็แค่ไปที่ SD Card และแสดงรูปภาพตามเลขหรือตามเวลานั้นๆ

    ในโปรเจคนี้ พี่แสดงไอคอนสองวิธี วิธีแรกคือใช้ไฟล์ .h ซึ่งทำงานเร็ว แต่เราเก็บรูปเยอะแบบนี้ไม่ได้เพราะกินพื้นที่หน่วยความจำ (MB) เยอะ วิธีที่สองคือใช้ SD Card นี่แหละ

    แดชบอร์ด (Dashboard):

    Arduino IoT Cloud อนุญาตให้เราใช้แดชบอร์ด แดชบอร์ดคืออะไร? มันคือวิธีที่ทำให้เราดูข้อมูลจากที่ไหนก็ได้ บนอุปกรณ์ใดก็ได้

    ในแดชบอร์ดมีวิดเจ็ต (widget) เยอะแยะ เราจะใช้บางส่วนเพื่อแสดงข้อมูล เราจะใช้วิดเจ็ตปุ่ม (button widget) เพื่อสร้างปุ่มสำหรับอัพเดทอุณหภูมิ (ปกติเอาไว้ดีบั๊ก) และใช้วิดเจ็ตอื่นๆ อีกสองสามอันเพื่อแสดงข้อมูล (อุณหภูมิ, ความชื้น, ความดัน, และเวลา)

    ระวังนิดนึงนะน้อง ถ้า Arduino รับค่ามาเป็น 0 หรือมันรีสตาร์ทขึ้นมา กราฟมันอาจจะอัพเดทแปลกๆ ให้เห็นได้ (เดี๋ยวรุ่นพี่จะหาทางแก้ให้ในอนาคตนะ อย่าเพิ่งช็อต)

    ฟอนต์:

    รุ่นพี่ใช้ฟอนต์พิเศษเพิ่มมาสองสามตัว จะแถมให้ในไฟล์ดาวน์โหลดเลยจ้า

    หน้าจอ:

    รุ่นพี่ใช้หน้าจอ TFT 3.5 นิ้วนะตัวนี้ เป็นแบบทัชสกรีนด้วย ใช้ไลบรารี่ MCUFRIEND_kbv ควบคุม

    โปรเจคนี้มีทั้งหมด 5 หน้าจอ มาดูกันทีละอัน:

    1. หน้าหลัก (Main Screen): หน้าจอนี้จะแสดงเวลา, วันที่, อุณหภูมิ และไอคอนสภาพอากาศ แล้วก็มีปุ่มกดเพื่อไปหน้าอื่นๆ ทั้งหมด
    2. หน้าพยากรณ์ (Forecast Screen): ดูพยากรณ์อากาศได้เลย ทั้งวันนี้ พรุ่งนี้ มะรืนนี้ แต่ละวันจะมีไอคอนกับอุณหภูมิสูงสุด-ต่ำสุดให้ดู
    3. หน้าอุณหภูมิ (Temperature Screen): หน้าจอข้อมูลจัดเต็ม! มีอุณหภูมิ, ความชื้น, ความกดอากาศ, รังสี UV, ความเร็วลม, อุณหภูมิที่รู้สึกได้ (Feels like)
    4. หน้าการเตือน (Alarm Screen): ตั้งเวลาปลุกได้ในหน้านี้ โดยใช้ปุ่มสองปุ่มนั่นแหละ
    5. หน้านับถอยหลัง (Timer Screen): ตั้งเวลาได้ตามใจชอบ แล้วกดเริ่มนับถอยหลังได้เลย สู้งานนะน้อง!

    การประสานงานของฮาร์ดแวร์

    โปรเจค **All In One Clock 2.0** ตัวนี้ จริงๆ แล้วมันคือการเอาพร็อคเล็กๆ หลายๆ อันมารวมกันนั่นแหละ มันรวมการบอกเวลา (RTC), การวัดสภาพอากาศ, และเมนูแบบอินเตอร์แอคทีฟ เข้าไว้ในโค้ดก้อนใหญ่ก้อนเดียวที่ทำงานได้เพียบ

    1. สมอง (The Brain): ต้องใช้ Arduino Mega หรือ ESP32 นะ เพราะโค้ดมันใหญ่และใช้ไลบรารี่เยอะ ตัวเล็กไม่ไหว
    2. ผู้รักษาเวลา (DS3231 RTC): มันไม่เหมือนฟังก์ชัน `delay()` ทั่วไปนะ RTC มันมีแบตเตอรี่ในตัว ต่อให้ถอด Arduino ออกเป็นปี มันก็ยังจำวินาทีและปีได้เป๊ะๆ
    3. ผู้ตรวจสภาพอากาศ (DHT22 หรือ BME280): ใช้อ่านอุณหภูมิในห้องนั่นเอง
    4. ส่วนติดต่อผู้ใช้: ใช้จอ LCD แสดงข้อความ 20x4 หรือหน้าจอ TFT 3.5" แบบทัชสกรีน เพื่อแสดงข้อมูลทั้งหมดแบบจัดเรียงสวยงาม
    5. อินพุต: ปุ่มกด 4 ปุ่ม (Menu, Up, Down, Select) ไว้สำหรับเลื่อนเมนูตั้งค่าและตั้งปลุก

    โครงสร้างเมนูขั้นสูง

    เพื่อรวมฟีเจอร์ทั้งหมดนี้ โค้ดใช้หลักการ State Machine หรือเครื่องสถานะที่ค่อนข้างซับซ้อนนิดนึง

    • State 0 (Home): แสดงเวลาและอุณหภูมิ
    • State 1 (Menu): แสดงเมนู "1. ตั้งเวลา, 2. ตั้งปลุก, 3. ตั้งค่า"
    • State 2 (Set Alarm): เคอร์เซอร์จะกระพริบบนชั่วโมง รอให้ผู้ใช้กดปุ่ม 'Up' หรือ 'Down'

    การสร้างลอจิก switch/case สำหรับระบบเมนูหลายชั้นเนี่ย เป็นหนึ่งในแบบฝึกหัดซอฟต์แวร์ที่ทั้งน่าหงุดหงิดและน่าภูมิใจสุดๆ ในโลกของการโปรแกรม embedded systems เลยล่ะ!

    การต่อสาย:

    โปรเจคนี้ไม่ได้ต่อเยอะมาก แต่ก็มีบางจุดที่ต้องต่อนะ:

    1. ต่อ Arduino ทั้งสองตัวด้วย ISP จากขา rp2040 A4-D21 และ A5-D20
    2. จากขา mega 5v ไปที่ RP2040 VIN
    3. จากขา mega gnd ไปที่ RP2040 GND
    4. จากขา mega 5v ไปที่ vcc ของออด (buzzer) ตัวนี้ห้ามช็อตนะ!
    1. จาก mega gnd ไปยัง gnd ของบัซเซอร์ (Buzzer)
    2. จาก mega D44 ไปยังขาของบัซเซอร์

    กล่อง (Box):

    มีโมเดล 3D เพิ่มเติมสำหรับกล่องที่พี่ใช้กับหน้าจอนะ อยากได้ก็ไปแกะไฟล์เอาเองได้เลย

    GitHub:

    โค้ดและไฟล์ทั้งหมดพี่อัพไว้ให้แล้วใน GitHub ไปโหลดมาแกะกันได้เต็มที่เลยจ้า

    ข้อมูล Frontmatter ดั้งเดิม

    apps:
      - "1x Arduino IDE 2.0 (beta)"
      - "1x Arduino IoT Cloud"
    author: "dzh121"
    category: "Screens & Displays"
    components:
      - "1x Soldering iron (generic)"
      - "1x 3D Printer (generic)"
      - "1x Arduino Mega 2560 Rev3"
      - "1x Buzzer Module"
      - "1x 3.5 TFT Touch Screen with SD Card Socket for Arduino"
      - "1x 150 Pc. Jumper Wire Pack, 22AWG"
      - "1x Arduino Nano RP2040 Connect with headers"
      - "1x Cutter"
    description: "The ultimate bedside companion! Build a master clock featuring time, date, temperature, humidity, and customizable alarms on an LCD."
    difficulty: "Intermediate"
    documentationLinks: []
    downloadableFiles:
      - "https://github.com/dzh121/All-In-One-Clock-2.0/blob/main/code/arduinoMegaCode.ino"
      - "https://github.com/dzh121/All-In-One-Clock-2.0/blob/main/code/arduinoNanoCode.ino"
      - "https://github.com/dzh121/All-In-One-Clock-2.0/blob/main/code/icons.h"
    encryptedPayload: "U2FsdGVkX1/A0xGwVkj4rt5JWCwmggqpfBeVd34vwTiR/4svgDOcXYVElJ0u8tteSygKmQob7P7vB6ZQl7FwQ37y9wU7/ebalh7ScOWLVlFNh1GvBsjey5Vzz9UOs2kjQQ/vStMndY4I0AtvW8QIWA=="
    heroImage: "https://cdn.jsdelivr.net/gh/bigboxthailand/arduino-assets@main/images/projects/all-in-one-clock-20-e16d7a_cover.jpg"
    lang: "en"
    likes: 2
    passwordHash: "4d616da6f673f5bb50b093f1acfb918c39392acd2817bb2140137ddcd7d59356"
    price: 2450
    seoDescription: "All In One Clock 2.0: Smart alarm clock with weather info, time, and timer. An all-in-one Arduino and ESP32 project."
    tags:
      - "Clocks"
      - "Internet Of Things"
      - "Entertainment System"
    title: "นาฬิกาเทพ 2.0 - งานง่ายแต่หล่อ จัดเต็มทุกฟังก์ชันในตัวเดียว!"
    tools: []
    videoLinks: []
    views: 6963