🎓 HUMG Banner Generator

Ứng dụng Node.js tạo banner chào mừng sinh viên HUMG với avatar, tên người dùng, trạng thái và thời gian. Hỗ trợ CLI và API.

🚀 Tính năng

• ✅ CLI Tool - Chạy trực tiếp từ command line
• ✅ JavaScript API - Tích hợp vào project
• ✅ 3 dòng text tùy chỉnh:
  • 📝 "Chào mừng, [TÊN NGƯỜI DÙNG]"
  • 📋 "[TRẠNG THÁI]" (ĐÃ THAM GIA / ĐÃ RỜI KHỎI)
  • 🏫 "CỘNG ĐỒNG TÂN SINH VIÊN K70 HUMG"
• ✅ Avatar người dùng (hình tròn với viền)
• ✅ Thời gian hiện tại tự động
• ✅ Font UTM_Avo chuyên nghiệp
• ✅ Hỗ trợ avatar từ URL hoặc file local
• ✅ Vị trí và màu sắc có thể tùy chỉnh
• ✅ Xuất file JPG chất lượng cao

📦 Cài đặt

Cài đặt global (CLI)

npm install -g humg-banner-generator

Cài đặt local (API)

npm install humg-banner-generator

🎯 Cách sử dụng

1. CLI Tool (Dễ nhất)

Interactive Mode

npx humg-banner-generator
# Hoặc nếu đã cài global
humg-banner

Sẽ hỏi:

• 👤 Tên người dùng
• 📋 Trạng thái (1: ĐÃ THAM GIA, 2: ĐÃ RỜI KHỎI)
• 🖼️ URL avatar (tùy chọn)
• 💾 Tên file output

Sử dụng config file

npx humg-banner-generator --config config.json

Ví dụ config.json:

{
  "userName": "NGUYỄN VĂN A",
  "status": "ĐÃ THAM GIA",
  "avatarUrl": "https://example.com/avatar.jpg",
  "outputPath": "my-banner.jpg",
  "datetimeFormat": {
    "showDate": true,
    "showTime": true,
    "dateFormat": "dd/mm/yyyy",
    "timeFormat": "24h",
    "separator": " | "
  }
}

2. JavaScript API

Sử dụng cơ bản

const BannerGenerator = require('humg-banner-generator');

async function createBanner() {
  const generator = new BannerGenerator();
  await generator.initialize();
  
  await generator.generateBanner({
    userName: 'NGUYỄN VĂN A',
    status: 'ĐÃ THAM GIA',        // hoặc 'ĐÃ RỜI KHỎI'
    avatarUrl: 'https://example.com/avatar.jpg',
    outputPath: 'welcome-banner.jpg'
  });
}

createBanner();

Với font tùy chỉnh

const generator = new BannerGenerator();

// Đăng ký fonts
await generator.initialize([
  {
    path: './fonts/MyFont.ttf',
    family: 'MyFont',
    weight: 'bold'
  }
]);

await generator.generateBanner({
  userName: 'NGUYỄN VĂN A',
  status: 'ĐÃ RỜI KHỎI',
  avatarUrl: 'https://example.com/avatar.jpg',
  outputPath: 'custom-banner.jpg',
  datetimeFormat: {
    showDate: true,
    showTime: false
  }
});

⚙️ Tùy chỉnh nâng cao

Vị trí text

Chỉnh sửa file position-config.js:

module.exports = {
  text: {
    main: { x: 0.5, y: 0.55 },         // Vị trí tên chính
    status: { x: 0.5, y: 0.67 },       // Vị trí trạng thái
    community: { x: 0.5, y: 0.78 },    // Vị trí text cộng đồng
    datetime: { x: 0.52, y: 0.9 }      // Vị trí thời gian
  }
}

Style text

style: {
  mainText: {
    fontSize: 0.005,
    fontFamily: 'UTM_AvoBold, sans-serif',
    color: '#FFFFFF',
    strokeColor: '#004aad'
  },
  statusText: {
    fontSize: 0.025,
    fontFamily: 'UTM_AvoBold, sans-serif', 
    color: '#FFFFFF',         // Màu trắng
    strokeColor: '#004aad'
  },
  communityText: {
    fontSize: 0.025,
    fontFamily: 'UTM_AvoBold, sans-serif',
    color: '#FFFFFF',
    strokeColor: '#004aad',
    fontWeight: 'bold'
  }
}

API Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | userName | string | 'Tân Sinh Viên' | Tên hiển thị | | status | string | 'ĐÃ THAM GIA' | Trạng thái tham gia | | avatarUrl | string | null | URL avatar | | avatarFile | string | null | Đường dẫn file avatar | | outputPath | string | 'output-banner.jpg' | File output | | datetimeFormat | object | {} | Cấu hình thời gian |

Status Options

• "ĐÃ THAM GIA" - Thành viên hiện tại
• "ĐÃ RỜI KHỎI" - Cựu thành viên

📁 Template Project

Để tạo project mới từ template:

npx create-humg-banner my-banner-project
cd my-banner-project
npm start

🔧 Development

# Clone repository
git clone https://github.com/Epchannel/humg-banner-generator.git
cd humg-banner-generator

# Cài đặt dependencies  
npm install

# Test CLI
npm run cli

# Test API
npm start

📝 Ví dụ kết quả

Banner sẽ bao gồm 4 dòng text:

1. "Chào mừng, NGUYỄN VĂN A" - Tên người dùng
2. "ĐÃ THAM GIA" - Trạng thái (có thể thay đổi)
3. "CỘNG ĐỒNG TÂN SINH VIÊN K70 HUMG" - Text cộng đồng
4. "25/07/2024 | 14:30" - Thời gian hiện tại

Cùng với:

• Avatar người dùng (hình tròn có viền)
• Font UTM_Avo chuyên nghiệp
• Layout responsive

📄 License

MIT © Pham Hong Hiep

🤝 Contributing

Pull requests welcome! Báo lỗi tại: https://github.com/Epchannel/humg-banner-generator/issues

Made with ❤️ for HUMG Community