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 ใหม่
By