L3 Control Center

---
name: L3 Control Center
description: OBS Lower Third Controller with Excel data import and dynamic card management
---

# L3 Control Center - OBS Dock Controller

## Overview

แอปพลิเคชันสำหรับควบคุม Lower Third (L3) ใน OBS Studio ผ่าน WebSocket
- นำเข้าข้อมูลจาก Excel
- จัดการ Cards แบบ Single (1 คน) และ Double (2 คน)
- สร้าง OBS Sources อัตโนมัติ
- ควบคุม visibility ของ L3

---

## Project Structure

```
L3/
├── L3_Control_Center.html    # Main HTML (load in OBS Dock)
├── css/
│   └── style.css             # All styles
└── js/
    └── app.js                # All JavaScript logic
```

---

## Key Components

### 1. OBS Connection
- ใช้ Native WebSocket (ไม่ใช้ obs-websocket-js)
- เชื่อมต่อที่ `ws://localhost:4455`
- Auto-reconnect ทุก 5 วินาทีเมื่อหลุด

### 2. Card Types
| Type | Description | OBS Sources |
|------|-------------|-------------|
| Single | แสดง 1 คน | `T_Name_N`, `T_Label1_N`, `T_Label2_N`, `T_Label3_N`, `I_Avatar_N` |
| Double | แสดง 2 คน (Home/Away) | `T_Name_Home_N`, `T_Name_Away_N`, etc. |

### 3. Excel Columns
```
ID | name | LabelName1 | LabelName2 | LabelName3 | image
```

---

## OBS Source Naming Convention

### Single Card (Card ID = 1)
- **Group**: `G_LowerThird_1`
- **Text Name**: `T_Name_1`
- **Text Labels**: `T_Label1_1`, `T_Label2_1`, `T_Label3_1`
- **Image Avatar**: `I_Avatar_1`

### Double Card (Card ID = 2)
- **Home Group**: `G_LowerThird_Home_2`
- **Home Sources**: `T_Name_Home_2`, `T_Label1_Home_2`, `I_Avatar_Home_2`
- **Away Group**: `G_LowerThird_Away_2`
- **Away Sources**: `T_Name_Away_2`, `T_Label1_Away_2`, `I_Avatar_Away_2`

---

## Key Functions in app.js

| Function | Description |
|----------|-------------|
| `connectOBS()` | เชื่อมต่อ OBS WebSocket |
| `sendOBSRequest()` | ส่ง request ไปยัง OBS |
| `sendOBSBatch()` | ส่ง batch requests |
| `processFile()` | อ่านไฟล์ Excel |
| `renderCards()` | แสดง Cards ทั้งหมด |
| `applySingleL3()` | อัปเดต Single Card → OBS |
| `applyDoubleL3()` | อัปเดต Double Card → OBS |
| `toggleSingleVisibility()` | เปิด/ปิด Single L3 |
| `toggleDoubleVisibility()` | เปิด/ปิด Double L3 |
| `createGroupWithSources()` | สร้าง OBS Sources อัตโนมัติ |

---

## LocalStorage Keys

| Key | Description |
|-----|-------------|
| `l3_cards` | เก็บ Card configuration (JSON array) |

---

## How to Use in OBS

1. เปิด OBS Studio
2. ไปที่ **Docks → Custom Browser Docks**
3. ตั้งชื่อ Dock: `L3 Control`
4. ใส่ URL: `file:///PATH/TO/L3_Control_Center.html`
5. กด OK

---

## Modification Tips

### เพิ่ม Label ใหม่
1. แก้ไข `renderSingleCard()` / `renderDoubleCard()` ใน `app.js`
2. เพิ่ม input ใน HTML ถ้าต้องการ
3. แก้ไข `applySingleL3()` / `applyDoubleL3()` เพื่อส่งไป OBS

### เปลี่ยนสี Theme
- แก้ไขใน `css/style.css`
- สี Primary: `#00aaff`
- สี Single Card: `#4ade80`
- สี Double Card: `#fbbf24`
- Background: `#1e1e1e`

### เพิ่ม OBS Actions ใหม่
- ใช้ `sendOBSRequest(requestType, requestData)` 
- ดู OBS WebSocket Protocol: https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md