Awesome-omni-skill L3 Control Center

OBS Lower Third Controller with Excel data import and dynamic card management

install

source · Clone the upstream repo

git clone https://github.com/diegosouzapw/awesome-omni-skill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/frontend/l3-control-center" ~/.claude/skills/diegosouzapw-awesome-omni-skill-l3-control-center && rm -rf "$T"

manifest: skills/frontend/l3-control-center/SKILL.md

source content

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