AgentSkillsCN

L3 Control Center

OBS下三分之一区域控制器，支持Excel数据导入与动态卡片管理。

SKILL.md
--- frontmatter
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

code
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

TypeDescriptionOBS 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

code
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

FunctionDescription
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

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