วันที่นัดเยอะ การหันไปดูจอเล็ก ๆ บนโต๊ะแล้วเห็นเลยว่า “นัดหมายถัดไปคืออะไร อีกกี่นาที” ง่ายกว่าเปิด Calendar ทุกครั้ง โปรเจกต์นี้จะทำให้เราดึงนัดหมายของวันนี้จาก Google Calendar ผ่านลิงก์ iCal แล้วส่งขึ้น Mini Display ให้เองตามรอบเวลา
ข้อมูลที่ได้บนจอ:
- ชื่อนัดหมายถัดไป พร้อมเวลาเริ่ม–จบ
- นับถอยหลัง ว่าอีกกี่นาทีจะถึงนัด
- สถานที่ และตัวเลข “+N more today” บอกว่าวันนี้ยังเหลืออีกกี่นัดหมาย
หลักการทำงานเบื้องหลัง
สิ่งที่เราจะสร้างนี้คือโปรแกรมที่ทำงานเป็นรอบ ๆ บนคอมพิวเตอร์ของเรา โดยมีขั้นตอนดังนี้: ดึงนัดหมายจากลิงก์ iCal ที่มาจาก Google Calendar, สร้างภาพสำหรับแสดงผลบน Mini Display แล้วส่งภาพเข้า Mini Display ผ่าน Wi-Fi วงเดียวกัน ใช้เพียงแค่เครื่องคอมพิวเตอร์ของเรา
- รันซ้ำตามรอบเวลา ตั้งด้วย
INTERVAL_MINUTESค่าเริ่มต้นของโปรเจกต์คือ 5 นาที ถ้าอยากให้อัปเดตทุก 30 นาทีก็ตั้งเป็น30 - ดึงข้อมูลจาก Google Calendar (iCal) อ่านลิงก์ iCal ส่วนตัวของปฏิทิน เลือกเฉพาะนัดหมายของวันนี้ แล้วข้ามนัดหมายที่ถูกยกเลิก และนัดหมายที่เราตอบปฏิเสธแล้ว (ผ่านการตั้ง
SELF_EMAIL) - แสดงผลภาพจากข้อมูล แสดงผลภาพขนาด 240×240 พร้อมเซฟเป็นไฟล์
calendar.pngไว้ให้ดู Preview - อัปโหลดภาพ ส่งภาพเข้า Mini Display ผ่าน Local Network ด้วย Endpoint ของรุ่นนั้น
สิ่งที่ต้องเตรียม
ต้องมี Mini Display หนึ่งตัวที่ต่อ Wi-Fi ได้แล้ว คอมพิวเตอร์ที่ติดตั้ง Node.js และบัญชี Google Calendar สำหรับดึงข้อมูลนัดหมายมาแสดงผล
| สิ่งที่ต้องมี | รายละเอียด |
|---|---|
| Mini Display | GeekMagic Ultra (~400 บาท) หรือ Smart Clock Pro Ultra (~350 บาท) ต่อ Wi-Fi 2.4GHz หรือ Hotspot |
| คอมพิวเตอร์ | อยู่ Wi-Fi วงเดียวกับ Mini Display และเปิดทิ้งไว้ตลอดที่อยากให้จออัปเดต |
| Node.js 22 ขึ้นไป | โหลดที่ nodejs.org เวอร์ชั่น 22 ขึ้นไป |
| Google Calendar | บัญชีที่มีนัดหมายของเรา |
| IP ของ Mini Display | ได้มาจากตอนตั้งค่า Wi-Fi ของ Mini Display |
| AI Coding Agent Tools | Claude Code, Codex, Antigravity หรือ AI Coding Agent อื่น ๆ |
ข้อจำกัดและข้อควรระวังก่อนเริ่ม
ก่อนลงมือ มีสี่ข้อที่ควรรู้ เพราะกระทบทั้งความปลอดภัยและความคาดหวังต่อจอ:
- ลิงก์ iCal คือรหัสสำหรับอ่านปฏิทินทั้งหมดของเรา ใครได้ลิงก์นี้ไปจะเห็นนัดหมายของเราได้โดยไม่ต้อง Login ให้เก็บเป็นความลับเหมือนรหัสผ่าน อย่าโพสต์ลง Chat ที่คนอื่นเห็น และถ้าหลุดให้ Reset ลิงก์ใหม่ (ดูวิธีในส่วน FAQ)
- Google อัปเดต iCal ช้า นัดหมายที่เพิ่งสร้างหรือแก้อาจใช้เวลาหลายนาทีกว่าจะโผล่ในลิงก์ ดังนั้นจอนี้เหมาะกับ “ดูคร่าว ๆ ว่านัดหมายถัดไปคืออะไร” ไม่เหมาะกับการเช็กนัดหมายที่เพิ่งเปลี่ยนเมื่อสองนาทีก่อน
- นับถอยหลังละเอียดเท่ารอบอัปเดต ถ้าตั้งรอบ 30 นาที ตัวเลขนับถอยหลังบนจอจะเปลี่ยนทีละครึ่งชั่วโมงเท่านั้น ถ้าอยากให้ตัวเลขใกล้เคียงความจริง ใช้ค่าเริ่มต้น 5 นาที
- ต้องมีคอมพิวเตอร์เปิดอยู่ โปรแกรมรันบนเครื่องเรา ถ้าเครื่อง Sleep หรือหลุดจาก Wi-Fi จอจะค้างที่การ์ดล่าสุด และเวลาบนการ์ดใช้ Time Zone ของคอมพิวเตอร์
วิธีทำอย่างละเอียด
ตั้งค่า Mini Display
ทำให้ Mini Display ต่อ Wi-Fi 2.4GHz (หรือ Hotspot) วงเดียวกับคอมพิวเตอร์ และรู้ IP กับ Path อัปโหลดของรุ่นที่ใช้ ถ้ายังไม่เคยตั้งค่า ให้ทำตามบทความ วิธีตั้งค่า Mini Display (GeekMagic Ultra และ Smart Clock Pro Ultra) ก่อน แล้วกลับมาที่นี่
การตั้งค่า Mini Display จะทำให้เราได้ IP ของ Mini Display (192.168.1.xxx) ที่ต้องเอาไปใส่ในไฟล์ .env ของ Project โดยต้องใส่ข้อมูลตามรายละเอียดด้านล่าง
| รุ่น | DEVICE_URL | UPLOAD_DIR |
|---|---|---|
| GeekMagic Ultra | http://<IP ของจอ>/doUpload | /image/ |
| Smart Clock Pro Ultra | http://<IP ของจอ>/photo/upload | /photo/ |
เอาลิงก์ iCal จาก Google Calendar
เปิด Google Calendar บนเว็บ (ใน Desktop Browser เพราะหน้านี้ไม่มีในแอปมือถือ) เข้า Settings เลือกปฏิทินที่ต้องการ แล้วคัดลอก Secret address in iCal format ซึ่งเป็นลิงก์ลงท้ายด้วย .ics
- เปิด calendar.google.com แล้วกดไอคอนเฟือง → Settings
- ที่แถบซ้าย หัวข้อ Settings for my calendars เลือกปฏิทินที่ต้องการให้ขึ้นจอ
- เลื่อนไปที่ Integrate calendar
- คัดลอกลิงก์ใต้ Secret address in iCal format
- เก็บลิงก์ iCal ไว้ก่อน เดี๋ยวเอาไปวางในไฟล์
.envด้วยตัวเองในขั้นถัดไป
– Public address in iCal format สามารถอ่านข้อมูลนัดหมายได้กรณีที่เราเปิด Calendar นั้นเป็น Public
– Secret address in iCal format ทำให้เราสามารถอ่านข้อมูลนัดหมายได้แม้จะเป็น Private Calendar (ไม่ต้อง Login)
ติดตั้งโปรเจกต์และทดสอบ
ติดตั้งโปรเจกต์ ตั้งค่า .env แล้วทดสอบทีละขั้น: ส่งรูปตัวอย่างก่อน ต่อด้วยการ์ดจำลอง แล้วค่อยใช้ปฏิทินจริง การทดสอบเป็นขั้น ๆ ช่วยให้รู้ทันทีว่าติดที่การเชื่อมต่อจอ หรือติดที่ลิงก์ปฏิทิน
ดาวน์โหลด Node.js
ดาวน์โหลด Node.js ที่ nodejs.org เวอร์ชั่น 22 ขึ้นไป เพื่อใช้รัน Script สำหรับทำ Project
ดาวน์โหลดและติดตั้ง Project จาก GitHub
ไปที่ หน้า Project แล้วกด Code → Download ZIP แล้วแตกไฟล์ จากนั้นเปิด AI Tools อย่าง Claude, Codex หรือ Antigravity บน Project นั้น
กรณีที่ติดตั้ง Git หรือ GitHub Desktop สามารถ Clone Project มาได้เลย
แล้วรันคำสั่งให้ AI ช่วยติดตั้ง Project ให้ดังนี้
Setup Project นี้ ตาม AGENTS.md ทำตามขั้นตอนและอธิบายสิ่งที่ทำระบบจะติดตั้ง package ที่จำเป็น และสร้างไฟล์ .env ให้
หากต้องการรันคำสั่งเองใน Terminal (macOS) หรือ PowerShell (Windows)
npm install
cp .env.example .envสร้างและแก้ไฟล์ .env
เปิด .env ด้วยโปรแกรมแก้ข้อความ แล้วแก้ค่าตามนี้ (ตัวอย่างนี้เป็นของ Smart Clock Pro Ultra)::
DEVICE_URL=http://192.168.1.106/photo/upload
UPLOAD_DIR=/photo/
ICS_URL=
SELF_EMAIL=your-name@gmail.com
INTERVAL_MINUTES=5| ตัวแปร | ใช้ทำอะไร | ค่าเริ่มต้น |
|---|---|---|
DEVICE_URL | URL อัปโหลดของ Mini Display (ดูได้จากขั้นตอนการตั้งค่า Mini Display) | http://10.255.221.161/photo/upload |
UPLOAD_DIR | โฟลเดอร์ปลายทางบนจอ (ดูได้จากขั้นตอนการตั้งค่า Mini Display) | /photo/ |
ICS_URL | ลิงก์ iCal ลับจากขั้นที่ 2 ถ้าเว้นว่าง โปรแกรมจะใช้นัดจำลอง | ว่าง |
SELF_EMAIL | อีเมล Google ของเรา ใช้ซ่อนนัดที่ตอบปฏิเสธ | ว่าง |
INTERVAL_MINUTES | รอบอัปเดตเป็นนาที ใส่ทศนิยมได้ ค่าเริ่มต้นคือ 5 นาที | 5 |
PREVIEW_PATH | ไฟล์ PNG Preview ที่ใช้เพื่อเช็คการแสดงผลบนเครื่อง | calendar.png |
วางค่า ICS_URL เองลงในไฟล์ .env อย่าส่งลิงก์นี้ให้ AI ถ้าไม่จำเป็น ถ้าใช้ AI Agent ช่วยติดตั้ง ให้ AI ทำถึงขั้นสร้างไฟล์ .env แล้วเราค่อยวางลิงก์เอง เพราะลิงก์นี้เปิดอ่านปฏิทินได้ทั้งหมด
ถ้าอยากให้ AI Agent พาติดตั้ง ใช้ Prompt นี้ได้:
ช่วยติดตั้งโปรเจกต์ https://github.com/Datayolk/mini-display-calendar ให้ฉันทีละขั้น
- Mini Display รุ่น: [GeekMagic Ultra หรือ Smart Clock Pro Ultra]
- IP ของ Mini Display: [เช่น 192.168.1.106] (ถ้าฉันไม่ได้ใส่มา ให้ถามก่อน)
- ระบบปฏิบัติการ: [macOS หรือ Windows]
ทำให้ถึงขั้นสร้างไฟล์ .env และใส่ DEVICE_URL, UPLOAD_DIR ให้ตรงกับรุ่นจอ
แต่ห้ามขอ ICS_URL จากฉัน ให้ฉันวางลิงก์ลงไฟล์ .env เอง แล้วบอกฉันว่าต้องวางตรงไหน
ถ้ามีอะไรที่ฉันต้องทำเอง ให้อธิบายเป็น Step by Stepรัน Project บน Mini Display Device จริง
ให้ AI Agent รัน Project ให้ใช้ Prompt นี้
รัน Project นี้เพื่อใช้งานจริงหากต้องการรัน Project ใน Terminal ด้วยตัวเองให้ใช้คำสั่ง
npm run watch
ไอเดียต่อยอด
โค้ดใน Project แยกเป็นส่วน ๆ ชัดเจน แก้เฉพาะจุดได้โดยไม่ต้องรื้อทั้งโปรเจกต์ ไอเดียด้านล่างยังไม่ได้ทำใน Repo ปัจจุบัน เป็นทิศทางที่ต่อยอดได้ และสั่ง AI Agent ให้ช่วยเขียนได้ (Vibe Coding)
- ทำให้รองรับ Calendar ได้หลายอัน ตอนนี้อ่านได้ทีละลิงก์ สามารถปรับปรุงเพิ่มเติมให้รองรับได้หลาย ๆ Calendar
- เพิ่ม Animation ให้ Calendar Mini Display รับไฟล์ GIF ได้ ลองให้สถานะ NOW กะพริบหรือให้แถบนับถอยหลังเคลื่อนไหว แต่ต้องรักษาขนาดภาพ 240×240
- เปลี่ยนจาก Google Calendar เป็น Todoist ปรับแต่งให้ดึงข้อมูลจาก Todoist API แทน
- ซ่อนนัดที่ไม่อยากเห็น เช่น นัดหมาย “Focus time”
- เปลี่ยนสี ฟอนต์ ขนาด ตามที่ต้องการ
คำถามที่พบบ่อย
ลิงก์ iCal ตั้งค่าเร็วกว่ามาก แค่วางลิงก์ครั้งเดียว ไม่ต้องสร้าง Google Cloud Project ไม่ต้องขอสิทธิ์ ไม่ต้องจัดการ Token ข้อแลกเปลี่ยนคือ Google อัปเดตลิงก์ช้ากว่า API และลิงก์เป็นกุญแจอ่านปฏิทินทั้งหมด ถ้างานต้องการข้อมูลสดแบบวินาทีต่อวินาที API เหมาะกว่า
กลับไปที่ Settings → Integrate calendar ของปฏิทินนั้นใน Google Calendar แล้วกด Reset ที่ Secret address ลิงก์เดิมจะใช้ไม่ได้ทันที จากนั้นคัดลอกลิงก์ใหม่ไปวางใน .env แล้วรัน npm run watch ใหม่
Google อัปเดตข้อมูลในลิงก์ iCal ช้า อาจต้องรอหลายนาที ลองรอสักพักแล้วสังเกตการ์ดรอบถัดไป ถ้านานผิดปกติให้เช็คว่านัดหมายนั้นอยู่ในปฏิทินที่เราคัดลอกลิงก์มาจริงหรือเปล่า เพราะลิงก์หนึ่งอันคือปฏิทินหนึ่งอัน
ใส่อีเมล Google ที่ใช้กับปฏิทินนั้นใน SELF_EMAIL โปรแกรมต้องรู้ว่าเราคือใครถึงจะซ่อนนัดที่เราปฏิเสธได้ แล้วรีสตาร์ตโปรแกรม
การ์ดใช้ Time Zone ของคอมพิวเตอร์ที่รันโปรแกรม เช็กการตั้งค่า Time Zone ของเครื่อง (ไม่ใช่ของ Google Calendar)
ETIMEDOUTคอมพิวเตอร์ติดต่อ Mini Display ไม่ได้ เช็กตามลำดับ: IP ใน DEVICE_URL ยังตรงกับ IP ปัจจุบันของจอไหม, คอมพิวเตอร์กับจออยู่ Wi-Fi วงเดียวกันไหม, ลองเปิด IP ของจอในเบราว์เซอร์ว่าเข้าได้หรือเปล่า
Device responded 4xx/5xxจอตอบกลับแต่ไม่ยอมรับไฟล์ ให้เช็ก DEVICE_URL และ UPLOAD_DIR ว่าตรงกับรุ่นที่ใช้ตามตารางในขั้นที่ 1 หรือยัง (GeekMagic Ultra ใช้ /doUpload กับ /image/ ส่วน Smart Clock Pro Ultra ใช้ /photo/upload กับ /photo/)
Calendar fetch failed: HTTP 404ลิงก์ใน ICS_URL ผิด หรือถูก Reset ไปแล้ว คัดลอกลิงก์ใหม่จาก Google Calendar มาวาง
ใช่ โปรแกรมรันบนคอมพิวเตอร์ของเรา ถ้าเครื่อง Sleep จอจะค้างที่การ์ดล่าสุด ถ้าไม่อยากเปิดเครื่องหลักทิ้งไว้ ลองรันบนคอมพิวเตอร์เครื่องเล็กที่เปิดทิ้งได้ หรือเครื่องเก่าที่ไม่ใช้แล้ว ขอแค่ต่อ Wi-Fi วงเดียวกับจอ
โค้ดอ่านลิงก์ iCal (.ics) ซึ่งเป็นรูปแบบมาตรฐาน ปฏิทินที่ให้ลิงก์ลักษณะนี้ได้ก็น่าจะใช้ได้ แต่โปรเจกต์ถูกทำและทดสอบกับ Google Calendar เป็นหลัก ถ้าอยากใช้ Todoist หรือบริการอื่นที่ไม่มีลิงก์ iCal ต้องเขียน Source เพิ่ม (ดูหัวข้อไอเดียต่อยอด)
รองรับ GeekMagic Ultra และ Smart Clock Pro Ultra โดยต่างกันที่ DEVICE_URL และ UPLOAD_DIR ตามตาราง (รุ่นอื่นก็สามารถใช้ได้)
