ปฏิทินครอบครัวสมาร์ทโฮม DIY (โคลน Skylight)

📖 แนะนำ

เมื่อไม่นานมานี้ ภรรยาของผมโดนโฆษณาปฏิทินสมาร์ทโฮม (Skylight, Cozyla, Hearth) ในโซเชียลมีเดียบ่อยมาก และเธอก็พร้อมที่จะซื้อในราคากว่า 300 ดอลลาร์ ก่อนจะให้ไฟเขียว ผมขอโอกาสในการหาข้อมูลเกี่ยวกับอุปกรณ์เหล่านี้ก่อน ผมสังเกตว่าฟีเจอร์ส่วนใหญ่คล้ายกันแต่ราคาต่างกันมาก ที่สำคัญคือผมไม่เห็นฟีเจอร์ใดที่โดดเด่นจนผมไม่สามารถทำเองใน Home Assistant ได้

เป้าหมาย: หน้าจอสัมผัสแสดงปฏิทินที่วางบนเคาน์เตอร์ได้ ได้รับการยอมรับจากภรรยา (WAF) และเชื่อมต่อกับสมาร์ทโฮมอย่างลึกซึ้งโดยไม่มีค่าบริการรายเดือน

💡 ทำเองดีกว่าไหม?

การเลือกทำเองผ่าน Home Assistant ให้ข้อดีหลายอย่างเมื่อเทียบกับการซื้อ Skylight/Hearth display:

• ไม่มีค่ารายเดือน: ไม่ต้องเสียค่าสมัครสมาชิกฟีเจอร์ "พรีเมียม"
• เชื่อมต่อสมูท: สื่อสารกับไฟบ้าน งานบ้าน (Grocy) และเซ็นเซอร์ตรวจจับคนอยู่
• ใช้ฮาร์ดแวร์เก่า: นำ Mini PC และจอมอนิเตอร์ธรรมดามาใช้ใหม่
• ความเป็นส่วนตัว: ไม่มีล็อกอินหรือเสี่ยงที่บริษัทจะปิดตัว

🛠 เลือกฮาร์ดแวร์

ตอนนี้โปรเจกต์นี้สร้างมาเพื่อแสดงแดชบอร์ดบนหน้าจอ HD (1920x1080) ได้ทุกตัว

ในกรณีของผมต้องการให้มัน "ดูเหมือน" skylight, เป็นจอสัมผัส, วางบนเคาน์เตอร์ และสามารถย้ายไปจุดอื่นได้ ผมจึงเลือกฮาร์ดแวร์ด้านล่างนี้ แต่ของคุณอาจต่างกันและต้องปรับเปลี่ยนตามเหมาะ เช่น ถ้าคุณอยากแสดงบนแท็บเล็ตหรืออุปกรณ์อื่น

ฮาร์ดแวร์ที่ผมเลือกตอนแรกเพราะเหตุผลข้างต้นและหวังว่าจะขยายฟีเจอร์ด้วย webcam, ลำโพง และไมค์ได้ ในตอนนี้ถ้าย้อนกลับไป ผมคงเลือกแบบอื่น เพราะยังไม่มีเวลาทำไอเดียฮาร์ดแวร์เพิ่มเติมเหล่านี้

• จอภาพ: HP Engage 15-inch Touchscreen ผมเลือกแทนจอพกพาทั่วไปเพราะมี ลำโพง, กล้อง, ไมค์ ในตัว เผื่อเพิ่มควบคุมด้วยเสียงหรือวิดีโอคอลในอนาคต
• คอมพิวเตอร์: Mini PC เก่า (NUC/Tiny PC) ที่รัน Windows/Linux แบบ Kiosk หรือ Raspberry Pi 4~~

✨ ฟีเจอร์

• ดูทั้งครอบครัวหรือเฉพาะบุคคล: เปิด/ปิดปฏิทินของสมาชิกแต่ละคนได้
• ซิงค์สองทาง: แก้ไขกิจกรรมบนหน้าจอหรือในมือถือ (Google Calendar)
• ป๊อปอัป "เพิ่มกิจกรรม": UI เฉพาะสำหรับเพิ่มกิจกรรมลงปฏิทินแต่ละอันจากหน้าจอ
• สภาพอากาศ & วันที่: ส่วนหัวสวย ดูง่าย
• Responsive: นับจำนวนวันอัตโนมัติตามความกว้างหน้าจอ (มือถือ/เดสก์ท็อป)

⚙️ คู่มือการติดตั้ง

หมายเหตุ: การตั้งค่านี้ใช้ YAML Package เพื่อสร้างตัวช่วย, สคริปต์ และตัวแปรที่จำเป็นทั้งหมดให้อัตโนมัติ โดยไม่ต้องสร้างเองทีละตัว

1. ข้อกำหนดเบื้องต้น (HACS)

คุณต้องติดตั้ง HACS แล้ว กรุณาติดตั้งอินทิเกรต Frontend ต่อไปนี้:

• week-planner-card
• bubble-card
• config-template-card
• card-mod
• better-moment-card
• weather-card
• browser_mod (จำเป็นสำหรับการทำงานของป๊อปอัป)
• layout-card (จำเป็นสำหรับมุมมอง Sections)
• button-card (จำเป็นสำหรับป๊อปอัปเพิ่มกิจกรรม)

2. ส่วน Backend (สมองกล)

• เปิดไฟล์ configuration.yaml ของคุณใน Home Assistant
• ตรวจสอบว่าคุณได้เพิ่มบรรทัดนี้ไว้ภายใต้ homeassistant: เพื่อเปิดใช้งานแพ็คเกจ:

   homeassistant:
     packages: !include_dir_named packages
   ``
สร้างโฟลเดอร์ชื่อ packages ในไดเรกทอรี config ของ Home Assistant (ถ้าคุณยังไม่มีโฟลเดอร์นี้)

ดาวน์โหลด packages/family_calendar.yaml จากรีโปนี้
วางไฟล์ไว้ในโฟลเดอร์ packages/ ของคุณ

รีสตาร์ท Home Assistant
3. ปฏิทิน
คุณสามารถใช้ Google Calendars หรือ Local Calendars ได้
#### ตัวเลือก A: Local Calendar (ง่ายที่สุด)
หมายเหตุ: ยังไม่ได้ทดสอบ เพราะฉันใช้ Google Calendars เป็นหลัก
ไปที่ การตั้งค่า > อุปกรณ์และบริการ

เพิ่มการเชื่อมต่อ Local Calendar
สร้างปฏิทินโดยใช้ชื่อดังนี้: Alice, Bob, Charlie, Daisy, Family

    
 ถ้าคุณใช้ชื่อเหล่านี้ โค้ดจะใช้งานได้ทันที!*
#### ตัวเลือก B: Google Calendar
เปิดไฟล์ packages/family_calendar.yaml

เลื่อนลงไปที่สคริปต์ add_google_calendar_event

อัปเดต calendar_map ให้ชี้ไปที่เอนทิตี้ Google ของคุณจริง ๆ

    
`yaml
    calendar_map:
      "Alice": "calendar.alice_gmail_com"
      "Bob": "calendar.bob_work_account"
    `
#### การตั้งค่าวันหยุด
เนื่องจาก Home Assistant มีการอัปเดต ตอนนี้สามารถเพิ่มวันหยุดผ่าน UI ได้แล้ว:
ไปที่ การตั้งค่า > อุปกรณ์และบริการ > เพิ่มอินทิเกรชัน > Holiday.
เลือกประเทศของคุณ
ตรวจสอบ entity ID (เช่น calendar.holidays) หากแตกต่างจากค่าดีฟอลต์ ให้อัปเดตใน dashboard YAML
4. แดชบอร์ด (รูปลักษณ์)
สร้าง Dashboard View ใหม่ (ตั้งค่า View Type เป็น Sections)

คัดลอกรหัสจาก dashboard.yaml
ปรับแต่ง:
   
ค้นหา & แทนที่: แทนที่ person.alice ด้วย entity ของสมาชิกในครอบครัวที่แท้จริงของคุณ

   
สภาพอากาศ: แทนที่ weather.home ด้วยผู้ให้บริการสภาพอากาศของคุณ

   
พื้นหลัง: อัปเดต URL รูปภาพที่ด้านล่างของ yaml
ขั้นตอนที่ 5: ธีม (ตัวเลือกเสริม)
เพื่อให้ได้ลักษณะฟอนต์เฉพาะ (Ovo):
ตรวจสอบให้แน่ใจว่า configuration.yaml ของคุณมีบรรทัดนี้อยู่ใต้ frontend:
   
`yaml
   frontend:
     themes: !include_dir_merge_named themes
   `
สร้างโฟลเดอร์ชื่อ themes ในไดเรกทอรี config ของคุณ  

ดาวน์โหลด themes/skylight.yaml แล้ววางไว้ในโฟลเดอร์นั้น  
รีสตาร์ท Home Assistant  
ไปที่โปรไฟล์ของคุณ (ไอคอนผู้ใช้มุมล่างซ้าย) แล้วเปลี่ยน Theme เป็น Skylight  

หมายเหตุ: ธีมนี้ยังไม่ครอบคลุมทั้งหมด โปรดทราบจุดนี้ด้วย  
---  
📐 วิธีทำงาน (เบื้องหลัง)  
หลักการกรองข้อมูล  
week-planner-card ไม่รองรับการซ่อนปฏิทินบางอันแบบทันที ในการแก้ปัญหานี้ ฉันใช้ Input Texts ทำหน้าที่เป็นตัวกรอง Regex  
 เมื่อคุณคลิกปุ่มของบุคคลหนึ่ง มันจะสลับตัวกรองของเขาระหว่าง . (แสดงทั้งหมด) และ ^$ (ไม่แสดงอะไรเลย)  
config-template-card จะใส่ตัวแปรเหล่านี้เข้าไปใน calendar card แบบไดนามิก  
สคริปต์สร้างกิจกรรม  
หน้าต่างป็อปอัพ "Add Event" ใช้สคริปต์เดียวที่จัดการลอจิกสำหรับหลายคนและหลายประเภทกิจกรรม (ทั้งวัน หรือ ระบุเวลา)  

หมายเหตุ

โพสต์ต้นฉบับของผมเป็นเพียงการให้ภาพรวมในระดับสูงเกี่ยวกับวิธีการทำ และเปิดโอกาสให้ผู้ใช้ปรับแต่งโค้ดให้เหมาะสมกับสถานการณ์ของตนเอง

โดยเฉพาะอย่างยิ่งผมทำเช่นนี้เพราะแต่ละจอแสดงผลและความต้องการนั้นแตกต่างกัน ผมไม่สามารถพัฒนาให้รองรับขนาดจอแสดงผล แดชบอร์ด ฯลฯ ทุกรูปแบบได้ ดังนั้นจึงสร้างขึ้นเพื่อให้ทำงานกับจอที่ผมกล่าวถึงหรือจอขนาดใดก็ได้ (1920x1080) แต่สามารถแก้ไขให้เหมาะสมกับแบบอื่นๆ ได้

พูดถึงจอแสดงผล เดิมทีผมแนะนำรุ่นนั้นเพราะมันกำลังลดราคาที่ Woot และเป็นวิธีที่ประหยัดมากในการได้จอทัชสกรีนในขณะนั้น ซึ่งตอนนี้อาจไม่เป็นเช่นนั้นแล้ว ดังนั้นใช้จอที่เหมาะสมกับคุณได้เลย ไม่ว่าจะเป็นแท็บเล็ต ทัชสกรีน โทรศัพท์ หรืออะไรก็ได้ สิ่งสำคัญที่คุณจะต้องแก้ไขคือแดชบอร์ด

--- Tranlated By Open Ai Tx | Last indexed: 2026-01-14 ---