Vibe Coding แสดงโควตา Claude (5 ชั่วโมง / 7 วัน) บน Mini Display

ใช้ Claude หนัก ๆ แล้วโควตาเต็มกลางงาน เป็นเรื่องที่ไม่มีใครอยากเจอ การหันไปดูจอเล็ก ๆ บนโต๊ะแล้วเห็นเลยว่า “ตอนนี้ใช้ไปกี่เปอร์เซ็นต์ และอีกกี่ชั่วโมงจะรีเซ็ต” ง่ายกว่ากดเข้าไปดู Usage ทุกครั้ง โปรเจกต์นี้จะอ่านเปอร์เซ็นต์การใช้งานจากบัญชี Claude ของเรา สร้างเป็นการ์ดภาพ แล้วส่งขึ้น Mini Display ให้เองตามรอบเวลา

รองรับเฉพาะ Claude เท่านั้น

ข้อมูลที่ได้บนจอ:

• 5H Session เปอร์เซ็นต์ที่ใช้ไปในหน้าต่าง 5 ชั่วโมง พร้อมแถบความคืบหน้าและเวลารีเซ็ต
• 7D Weekly เปอร์เซ็นต์ที่ใช้ไปในหน้าต่าง 7 วัน พร้อมแถบความคืบหน้าและวัน/เวลารีเซ็ต
• สีเตือนอัตโนมัติ เขียวเมื่อยังสบาย ส้มเมื่อเริ่มสูง แดงเมื่อใกล้เต็ม

หลักการทำงานเบื้องหลัง

สิ่งที่เราจะสร้างนี้คือโปรแกรมที่ทำงานเป็นรอบ ๆ บนคอมพิวเตอร์ของเรา โดยอ่านโควตาจากบัญชี Claude ที่ล็อกอินไว้ในเครื่อง สร้างภาพสำหรับแสดงผลบน Mini Display แล้วส่งภาพเข้า Mini Display ผ่าน Wi-Fi วงเดียวกัน ไม่ต้องใช้เซิร์ฟเวอร์หรือ Cloud

1. รันซ้ำตามรอบเวลา ตั้งด้วย INTERVAL_MINUTES ค่าเริ่มต้นของโปรแกรมคือ 5 นาที ถ้าอยากให้อัปเดตทุก 30 นาทีก็ตั้งเป็น 30
2. อ่านล็อกอิน Claude ในเครื่อง อ่าน OAuth token ที่ Claude เก็บไว้ จาก macOS Keychain หรือไฟล์ ~/.claude/.credentials.json (ไม่ต้องคัดลอก token มาใส่ที่ไหน)
3. ดึงเปอร์เซ็นต์การใช้งาน เรียก usage endpoint ของ Anthropic เพื่อรับค่าที่ใช้ไปและเวลารีเซ็ตของหน้าต่าง 5 ชั่วโมงและ 7 วัน
4. สร้างภาพขนาด 240×240 วาดเป็นการ์ดพร้อมมาสคอต แล้วเซฟเป็นไฟล์ usage.png ไว้ให้ดู Preview
5. อัปโหลดภาพ ส่งภาพเข้า Mini Display ผ่าน Local Network ด้วย Endpoint ของรุ่นนั้น ๆ

การ์ดบนจอ

สีของตัวเลขและแถบเปลี่ยนตามระดับการใช้งาน:

สิ่งที่ต้องเตรียม

ต้องมี Mini Display หนึ่งตัวที่ต่อ Wi-Fi ได้แล้ว คอมพิวเตอร์ที่ติดตั้ง Node.js และ Claude Code ที่ล็อกอินไว้แล้วในเครื่องเดียวกัน

ข้อจำกัดและข้อควรระวังก่อนเริ่ม

ก่อนลงมือ มีห้าข้อที่ควรรู้ เพราะกระทบทั้งความปลอดภัยและความคาดหวังต่อจอ:

• ข้อมูลมาจาก endpoint ที่ไม่มีเอกสารทางการ โปรแกรมเรียก /api/oauth/usage ของ Anthropic ซึ่งอาจเปลี่ยนรูปแบบหรือหยุดทำงานได้โดยไม่แจ้งล่วงหน้า ถ้าวันหนึ่งจอแสดง Error ไม่ใช่ว่าเราตั้งค่าผิดเสมอไป (ดูวิธีแก้ในส่วน FAQ)
• OAuth token คือกุญแจเข้าบัญชีของเรา โปรแกรมอ่านจากเครื่องตอนรันเท่านั้น ไม่พิมพ์ ไม่บันทึก ไม่เขียนลงไฟล์ และส่งไปที่ api.anthropic.com เท่านั้น เราจึงไม่ต้องคัดลอก token มาใส่ใน .env และ อย่าวาง token ลง Chat หรือส่งให้ AI ถ้าใช้ AI ช่วยติดตั้ง ให้บอกมันไม่ให้อ่านหรือแสดง token
• macOS อาจถามสิทธิ์ Keychain ครั้งแรกที่รันบน macOS จะมีหน้าต่างถามว่าอนุญาตให้เข้าถึง Keychain ไหม ให้กด Allow
• ตัวเลขช้าเท่ารอบอัปเดต ถ้าตั้งรอบ 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 ของจอ (เช่น 192.168.1.xxx) ที่ต้องเอาไปใส่ในไฟล์ .env ตามรุ่นที่ใช้:

⚠️ ไฟล์ .env.example ใน Repo ตั้งค่าเป็นของ Smart Clock Pro Ultra (/photo/upload และ /photo/) ถ้าใช้ GeekMagic Ultra ต้องแก้ทั้งสองบรรทัด

ล็อกอิน Claude Desktop

โปรเจกต์นี้ไม่ต้องใช้ API key ขอแค่มี Claude Desktop ที่ล็อกอินไว้แล้วบนคอมพิวเตอร์เครื่องเดียวกับที่จะรันโปรแกรม

1. ติดตั้ง Claude Desktop ถ้ายังไม่มี
2. เปิด Claude Desktop แล้วล็อกอินด้วยบัญชีที่ใช้แพ็กเกจ Pro หรือ Max
3. ไปที่ เมนู Settings และ Usage เพื่อดูว่าเห็นเปอร์เซ็นต์การใช้งานของเรา (เดี๋ยวเอาไว้เทียบกับตัวเลขบนจอ)

ติดตั้งโปรเจกต์และทดสอบ

ติดตั้งโปรเจกต์ ตั้งค่า .env แล้วให้ AI ช่วยทดสอบทีละขั้น ส่งรูปตัวอย่างก่อน ต่อด้วยการ์ดจำลอง แล้วค่อยใช้ข้อมูลจริง ช่วยให้รู้ทันทีว่าติดที่การเชื่อมต่อจอ หรือติดที่การอ่านโควตา

ดาวน์โหลด Node.js

ดาวน์โหลด Node.js ที่ nodejs.org เวอร์ชั่น 22 ขึ้นไป (เลือก LTS) เพื่อใช้รัน 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/
INTERVAL_MINUTES=5

⚠️ ไฟล์ .env.example ตั้ง INTERVAL_MINUTES=30 ไว้ ถ้าอยากให้ตัวเลขบนจอสดกว่านี้ ให้แก้เป็น 5

ไม่ต้องใส่ API key หรือ token ลงในไฟล์ .env และอย่าให้ AI อ่านหรือแสดง token ของ Claude Code

ถ้าอยากให้ AI Agent พาติดตั้งและทดสอบ ใช้ Prompt นี้ได้:

ช่วยติดตั้งโปรเจกต์ https://github.com/Datayolk/mini-display-claude-ai-usage ให้ฉันทีละขั้น

- Mini Display รุ่น: [GeekMagic Ultra หรือ Smart Clock Pro Ultra]
- IP ของ Mini Display: [เช่น 192.168.1.106] (ถ้าฉันไม่ได้ใส่มา ให้ถามก่อน)
- ระบบปฏิบัติการ: [macOS หรือ Windows]

ทำให้ถึงขั้นสร้างไฟล์ .env และใส่ DEVICE_URL, UPLOAD_DIR ให้ตรงกับรุ่นจอ
ห้ามอ่านหรือแสดง OAuth token ของ Claude Code เด็ดขาด
ถามฉันก่อนเสมอเมื่อจะรันคำสั่งที่เปลี่ยนภาพบนจอจริง
ถ้ามีอะไรที่ฉันต้องทำเอง ให้อธิบายเป็น Step by Step

รัน Project บน Mini Display Device จริง

ให้ AI Agent รัน Project ให้ใช้ Prompt นี้

รัน Project นี้เพื่อใช้งานจริง

หากต้องการรัน Project ใน Terminal ด้วยตัวเองให้ใช้คำสั่ง npm run watch

ถ้าปิด Terminal โปรแกรมจะหยุด ให้ปล่อยหน้าต่างนี้เปิดทิ้งไว้ หรือสั่ง AI ว่า “ช่วยตั้งให้ Project นี้รันเบื้องหลังตอนเปิดเครื่อง”

ไอเดียต่อยอด

โค้ดใน Project แยกเป็นส่วน ๆ ชัดเจน แก้เฉพาะจุดได้โดยไม่ต้องรื้อทั้งโปรเจกต์ ไอเดียด้านล่างสั่ง AI Agent ให้ช่วยเขียนได้ (Vibe Coding)

• เปลี่ยนสี ฟอนต์ ขนาด ตามที่ต้องการ
• ปรับเกณฑ์สีเตือน ตอนนี้ส้มที่ 70% และแดงที่ 90% ปรับได้ตามความต้องการ
• เปลี่ยนมาสคอต แทนที่ไฟล์ claude-mascot.png ด้วยรูปของเราเอง
• เพิ่ม Animation ให้การ์ด Mini Display รับไฟล์ GIF ได้ ลองให้แถบสีแดงกะพริบเมื่อใกล้เต็ม แต่ต้องรักษาขนาดภาพ 240×240
• สลับกับ Project อื่น ใช้คู่กับ mini-display-calendar เพื่อสลับการแสดงผลคนละช่วงเวลา

คำถามที่พบบ่อย

• Facebook
• Twitter
• Line

Claude Code Claude Usage DIY GeekMagic Ultra Mini Display Node.js Smart Clock Pro Ultra Vibe Coding

Worakarn Ounhattapradit

วรกาญจน์ อุ่นหัตถประดิษฐ์ (ปีเตอร์) ผู้เชี่ยวชาญด้าน No-Code และ Vibe Coding ที่ปรึกษาธุรกิจที่ต้องการนำ Technology มาใช้ในองค์กร อ่านรายละเอียดเพิ่มเติม