diegosouzapw 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 ใหม่
- ใช้
sendOBSRequest(requestType, requestData) - ดู OBS WebSocket Protocol: https://github.com/obsproject/obs-websocket/blob/master/docs/generated/protocol.md