| 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
- เปิด OBS Studio
- ไปที่ Docks → Custom Browser Docks
- ตั้งชื่อ Dock:
L3 Control
- ใส่ URL:
file:///PATH/TO/L3_Control_Center.html
- กด OK
Modification Tips
เพิ่ม Label ใหม่
- แก้ไข
renderSingleCard() / renderDoubleCard() ใน app.js
- เพิ่ม input ใน HTML ถ้าต้องการ
- แก้ไข
applySingleL3() / applyDoubleL3() เพื่อส่งไป OBS
เปลี่ยนสี Theme
- แก้ไขใน
css/style.css
- สี Primary:
#00aaff
- สี Single Card:
#4ade80
- สี Double Card:
#fbbf24
- Background:
#1e1e1e
เพิ่ม OBS Actions ใหม่
