Masharos vMix Control | S([vmix.com](https://www.vmix.com/help28/DeveloperAPI.html?utm_source=chatgpt.com))tyle> :root { --orange: #d2651d; --orange2: #e17b35; --dark: #414140; --black: #171717; --panel: #242424; --panel2: #303030; --white: #ffffff; --green: #16a34a; --red: #dc2626; --yellow: #f59e0b; --blue: #2563eb; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: #101010; color: var(--white); min-height: 100vh; } button, input, select, textarea { font: inherit; } button { cursor: pointer; border: none; } .app { display: grid; grid-template-columns: 290px 1fr; min-height: 100vh; } aside { background: #181818; border-right: 1px solid #333; padding: 22px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; } .brand-mark { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, var(--orange), var(--dark)); display: grid; place-items: center; font-weight: 900; } .brand h1 { font-size: 18px; line-height: 1.1; } .brand span { color: #aaa; font-size: 12px; } .side-section { background: #202020; padding: 16px; border-radius: 18px; margin-bottom: 16px; border: 1px solid #333; } .side-section h3 { font-size: 14px; margin-bottom: 10px; color: var(--orange2); text-transform: uppercase; letter-spacing: .7px; } label { display: block; font-size: 13px; margin-bottom: 6px; color: #ccc; } input, select, textarea { width: 100%; background: #111; color: white; border: 1px solid #444; border-radius: 12px; padding: 11px 12px; margin-bottom: 10px; outline: none; } textarea { min-height: 80px; resize: vertical; } .btn { width: 100%; border-radius: 14px; padding: 12px 14px; font-weight: 800; color: white; background: var(--orange); margin: 5px 0; transition: .18s ease; } .btn:hover { transform: translateY(-1px); filter: brightness(1.08); } .btn.dark { background: #3a3a3a; } .btn.green { background: var(--green); } .btn.red { background: var(--red); } .btn.blue { background: var(--blue); } .btn.yellow { background: var(--yellow); color: #111; } main { padding: 22px; overflow: hidden; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .status { display: flex; align-items: center; gap: 10px; background: #1d1d1d; border: 1px solid #333; border-radius: 999px; padding: 10px 16px; color: #ddd; font-weight: 700; } .status-dot { width: 12px; height: 12px; border-radius: 50%; background: #666; } .status.online .status-dot { background: var(--green); } .status.offline .status-dot { background: var(--red); } .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .tab { background: #242424; color: white; border: 1px solid #3a3a3a; border-radius: 999px; padding: 11px 17px; font-weight: 800; } .tab.active { background: var(--orange); border-color: var(--orange); } .page { display: none; } .page.active { display: block; } .grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 14px; } .control { background: linear-gradient(145deg, #292929, #1d1d1d); border: 1px solid #3a3a3a; color: white; min-height: 94px; border-radius: 22px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; box-shadow: 0 12px 24px rgba(0,0,0,.18); transition: .16s ease; } .control:hover { transform: translateY(-2px); border-color: var(--orange); } .control strong { font-size: 18px; } .control small { color: #aaa; } .control.orange { background: linear-gradient(145deg, var(--orange), #983f09); } .control.green { background: linear-gradient(145deg, #16a34a, #0f6c32); } .control.red { background: linear-gradient(145deg, #dc2626, #7f1d1d); } .control.blue { background: linear-gradient(145deg, #2563eb, #173c91); } .control.yellow { background: linear-gradient(145deg, #f59e0b, #a16207); color: #111; } .control.yellow small { color: #222; } .panel { background: #1d1d1d; border: 1px solid #333; border-radius: 24px; padding: 18px; margin-bottom: 18px; } .panel h2 { font-size: 22px; margin-bottom: 14px; color: var(--orange2); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .inputs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .input-card { background: #262626; border: 1px solid #3a3a3a; border-radius: 18px; padding: 14px; } .input-card h4 { margin-bottom: 6px; } .input-card p { color: #aaa; font-size: 13px; margin-bottom: 10px; } .mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mini { border-radius: 10px; padding: 9px; color: white; background: #3b3b3b; font-weight: 800; font-size: 13px; } .football-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; background: #111; border: 1px solid #333; padding: 24px; border-radius: 24px; text-align: center; margin-bottom: 18px; } .team-name { font-size: clamp(18px, 3vw, 34px); font-weight: 900; } .score { font-size: clamp(42px, 7vw, 86px); color: var(--orange); font-weight: 900; } .clock { font-size: 34px; font-weight: 900; color: #fff; margin-top: 12px; } .log { background: #0b0b0b; border: 1px solid #333; border-radius: 16px; padding: 14px; color: #cfcfcf; height: 160px; overflow-y: auto; font-family: Consolas, monospace; font-size: 13px; } @media (max-width: 1100px) { .app { grid-template-columns: 1fr; } aside { position: relative; height: auto; } .grid { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } } @media (max-width: 620px) { main { padding: 14px; } .grid { grid-template-columns: 1fr; } .football-board { grid-template-columns: 1fr; } } </style> </head> <body> <div class="app"> <aside> <div class="brand"> <div class="brand-mark">MN</div> <div> <h1>Masharos vMix Control</h1> <span>Sistema de botonera web</span> </div> </div> <div class="side-section"> <h3>Conexión vMix</h3> <label>IP de vMix</label> <input id="vmixHost" value="192.168.1.102" /> <label>Puerto API</label> <input id="vmixPort" value="8088" /> <button class="btn green" onclick="saveSettings(); testConnection();">Conectar</button> <button class="btn dark" onclick="loadInputs();">Actualizar Inputs</button> </div> <div class="side-section"> <h3>Acción rápida</h3> <label>Función vMix</label> <input id="customFunction" placeholder="Ej: Fade, Cut, SetText" /> <label>Input / Número / GUID</label> <input id="customInput" placeholder="Opcional" /> <label>Value / Texto</label> <input id="customValue" placeholder="Opcional" /> <label>SelectedName</label> <input id="customSelectedName" placeholder="Ej: Headline.Text" /> <button class="btn" onclick="runCustomFunction();">Ejecutar comando</button> </div> <div class="side-section"> <h3>Títulos rápidos</h3> <label>Input de título</label> <input id="titleInput" placeholder="Ej: 5 o Nombre del título" /> <label>Campo SelectedName</label> <input id="titleField" placeholder="Ej: Headline.Text" /> <label>Nuevo texto</label> <textarea id="titleText" placeholder="Texto para enviar al lower"></textarea> <button class="btn blue" onclick="updateTitle();">Actualizar título</button> </div> </aside> <main> <div class="topbar"> <div> <h1>Panel de Producción en Vivo</h1> <p style="color:#aaa;">Controla vMix desde una interfaz web personalizada.</p> </div> <div class="status offline" id="status"><span class="status-dot"></span><span id="statusText">Sin conexión</span></div> </div> <div class="tabs"> <button class="tab active" onclick="showPage('control', this)">Control</button> <button class="tab" onclick="showPage('inputs', this)">Inputs</button> <button class="tab" onclick="showPage('titles', this)">Títulos</button> <button class="tab" onclick="showPage('football', this)">Fútbol PRO</button> <button class="tab" onclick="showPage('logs', this)">Registro</button> </div> <section class="page active" id="page-control"> <div class="panel"> <h2>Transiciones principales</h2> <div class="grid"> <button class="control orange" onclick="vmix('Cut')"><strong>CUT</strong><small>Preview a Program</small></button> <button class="control orange" onclick="vmix('Fade', { Duration: 500 })"><strong>FADE</strong><small>500 ms</small></button> <button class="control" onclick="vmix('Zoom', { Duration: 500 })"><strong>ZOOM</strong><small>Transición Zoom</small></button> <button class="control" onclick="vmix('Merge', { Duration: 700 })"><strong>MERGE</strong><small>Transición Merge</small></button> </div> </div> <div class="panel"> <h2>Overlays / Lower Thirds</h2> <div class="grid"> <button class="control blue" onclick="vmix('OverlayInput1In')"><strong>Overlay 1 IN</strong><small>Activar gráfico</small></button> <button class="control red" onclick="vmix('OverlayInput1Out')"><strong>Overlay 1 OUT</strong><small>Quitar gráfico</small></button> <button class="control blue" onclick="vmix('OverlayInput2In')"><strong>Overlay 2 IN</strong><small>Activar gráfico</small></button> <button class="control red" onclick="vmix('OverlayInput2Out')"><strong>Overlay 2 OUT</strong><small>Quitar gráfico</small></button> </div> </div> <div class="panel"> <h2>Controles generales</h2> <div class="grid"> <button class="control green" onclick="vmix('StartRecording')"><strong>REC ON</strong><small>Iniciar grabación</small></button> <button class="control red" onclick="vmix('StopRecording')"><strong>REC OFF</strong><small>Detener grabación</small></button> <button class="control green" onclick="vmix('StartStreaming')"><strong>LIVE ON</strong><small>Iniciar streaming</small></button> <button class="control red" onclick="vmix('StopStreaming')"><strong>LIVE OFF</strong><small>Detener streaming</small></button> <button class="control yellow" onclick="vmix('StartExternal')"><strong>NDI ON</strong><small>Salida externa</small></button> <button class="control yellow" onclick="vmix('StopExternal')"><strong>NDI OFF</strong><small>Detener salida</small></button> <button class="control" onclick="vmix('AudioAuto')"><strong>AUDIO AUTO</strong><small>Audio automático</small></button> <button class="control" onclick="vmix('FadeToBlack')"><strong>FTB</strong><small>Fade to Black</small></button> </div> </div> </section> <section class="page" id="page-inputs"> <div class="panel"> <h2>Inputs detectados</h2> <p style="color:#aaa;margin-bottom:14px;">Presiona “Actualizar Inputs” después de conectar con vMix.</p> <div class="inputs-list" id="inputsList"></div> </div> </section> <section class="page" id="page-titles"> <div class="panel"> <h2>Lower Thirds / Titulares</h2> <div class="split"> <div> <label>Titular principal</label> <input id="headline" placeholder="Ej: NOTICIA DE ÚLTIMA HORA" /> <label>Subtítulo</label> <input id="subtitle" placeholder="Ej: Masharos News informa" /> <label>Input del título en vMix</label> <input id="newsTitleInput" placeholder="Ej: 8" /> <button class="btn blue" onclick="sendNewsLower();">Enviar lower noticioso</button> <button class="btn red" onclick="vmix('OverlayInput1Out');">Quitar lower</button> </div> <div> <label>Texto urgente</label> <textarea id="breakingText" placeholder="Escribe aquí una alerta informativa"></textarea> <label>Input del banner urgente</label> <input id="breakingInput" placeholder="Ej: 9" /> <button class="btn yellow" onclick="sendBreaking();">Enviar alerta</button> <button class="btn red" onclick="vmix('OverlayInput2Out');">Quitar alerta</button> </div> </div> </div> </section> <section class="page" id="page-football"> <div class="panel"> <h2>Módulo Fútbol PRO</h2> <div class="football-board"> <div> <input id="homeName" value="LOCAL" style="text-align:center;font-weight:900;" /> <div class="team-name" id="homeLabel">LOCAL</div> </div> <div> <div class="score"><span id="homeScore">0</span> - <span id="awayScore">0</span></div> <div class="clock" id="clock">00:00</div> </div> <div> <input id="awayName" value="VISITA" style="text-align:center;font-weight:900;" /> <div class="team-name" id="awayLabel">VISITA</div> </div> </div> <div class="grid"> <button class="control green" onclick="goal('home')"><strong>Gol Local +1</strong><small>Actualiza marcador</small></button> <button class="control green" onclick="goal('away')"><strong>Gol Visita +1</strong><small>Actualiza marcador</small></button> <button class="control red" onclick="removeGoal('home')"><strong>Restar Local</strong><small>Corrige marcador</small></button> <button class="control red" onclick="removeGoal('away')"><strong>Restar Visita</strong><small>Corrige marcador</small></button> <button class="control blue" onclick="startClock()"><strong>Iniciar tiempo</strong><small>Cronómetro</small></button> <button class="control yellow" onclick="pauseClock()"><strong>Pausar</strong><small>Detener tiempo</small></button> <button class="control" onclick="resetClock()"><strong>Reset</strong><small>00:00</small></button> <button class="control orange" onclick="sendScoreboard()"><strong>Enviar a vMix</strong><small>Marcador + tiempo</small></button> </div> <div class="panel" style="margin-top:18px;"> <h2>Campos del marcador en vMix</h2> <div class="split"> <div> <label>Input del marcador</label> <input id="scoreInput" placeholder="Ej: 10" /> <label>Campo equipo local</label> <input id="fieldHomeName" value="Home.Text" /> <label>Campo equipo visita</label> <input id="fieldAwayName" value="Away.Text" /> </div> <div> <label>Campo goles local</label> <input id="fieldHomeScore" value="HomeScore.Text" /> <label>Campo goles visita</label> <input id="fieldAwayScore" value="AwayScore.Text" /> <label>Campo tiempo</label> <input id="fieldClock" value="Clock.Text" /> </div> </div> </div> </div> </section> <section class="page" id="page-logs"> <div class="panel"> <h2>Registro del sistema</h2> <div class="log" id="log"></div> </div> </section> </main> </div> <script> let vmixHost = localStorage.getItem('vmixHost') || '192.168.1.102'; let vmixPort = localStorage.getItem('vmixPort') || '8088'; let clockSeconds = 0; let clockTimer = null; let football = { home: 0, away: 0 }; document.getElementById('vmixHost').value = vmixHost; document.getElementById('vmixPort').value = vmixPort; function apiBase() { return `http://${vmixHost}:${vmixPort}/api/`; } function log(message) { const box = document.getElementById('log'); const time = new Date().toLocaleTimeString(); box.innerHTML = `[${time}] ${message}<br>` + box.innerHTML; } function saveSettings() { vmixHost = document.getElementById('vmixHost').value.trim() || '127.0.0.1'; vmixPort = document.getElementById('vmixPort').value.trim() || '8088'; localStorage.setItem('vmixHost', vmixHost); localStorage.setItem('vmixPort', vmixPort); log(`Configuración guardada: ${apiBase()}`); } function setStatus(online, text) { const status = document.getElementById('status'); const statusText = document.getElementById('statusText'); status.className = `status ${online ? 'online' : 'offline'}`; statusText.textContent = text; } async function testConnection() { saveSettings(); try { const response = await fetch(apiBase(), { method: 'GET' }); if (!response.ok) throw new Error('Sin respuesta válida'); const text = await response.text(); if (text.includes('<vmix')) { setStatus(true, 'Conectado a vMix'); log('Conexión exitosa con vMix.'); loadInputs(); } else { setStatus(false, 'Respuesta no reconocida'); log('La API respondió, pero no parece XML de vMix.'); } } catch (error) { setStatus(false, 'Sin conexión'); log('Error de conexión: ' + error.message); alert('No se pudo conectar con http://192.168.1.102:8088/. Verifica que vMix esté abierto, que Web Controller/API esté activado en Settings > Web Controller y que esta computadora esté en la misma red.'); } } async function vmix(functionName, params = {}) { saveSettings(); const query = new URLSearchParams({ Function: functionName }); Object.entries(params).forEach(([key, value]) => { if (value !== undefined && value !== null && value !== '') query.append(key, value); }); const url = `${apiBase()}?${query.toString()}`; try { await fetch(url, { method: 'GET', mode: 'no-cors' }); log(`Ejecutado: ${functionName} ${JSON.stringify(params)}`); } catch (error) { log(`Error ejecutando ${functionName}: ${error.message}`); alert('Error ejecutando comando. Si el navegador bloquea la petición, usa este archivo en la misma PC de vMix o instala un proxy local.'); } } function showPage(page, btn) { document.querySelectorAll('.page').forEach(p => p.classList.remove('active')); document.getElementById(`page-${page}`).classList.add('active'); document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); btn.classList.add('active'); } async function loadInputs() { saveSettings(); try { const response = await fetch(apiBase()); const xmlText = await response.text(); const xml = new DOMParser().parseFromString(xmlText, 'text/xml'); const inputs = Array.from(xml.querySelectorAll('input')); const active = xml.querySelector('active')?.textContent || ''; const preview = xml.querySelector('preview')?.textContent || ''; const list = document.getElementById('inputsList'); list.innerHTML = ''; inputs.forEach(input => { const number = input.getAttribute('number'); const key = input.getAttribute('key'); const title = input.getAttribute('title') || input.textContent || `Input ${number}`; const type = input.getAttribute('type') || 'Input'; const isActive = number === active; const isPreview = number === preview; const card = document.createElement('div'); card.className = 'input-card'; card.innerHTML = ` <h4>${number}. ${escapeHtml(title)}</h4> <p>${type} ${isActive ? ' · PROGRAM' : ''} ${isPreview ? ' · PREVIEW' : ''}</p> <div class="mini-actions"> <button class="mini" onclick="vmix('PreviewInput', { Input: '${key}' })">Preview</button> <button class="mini" onclick="vmix('ActiveInput', { Input: '${key}' })">Program</button> <button class="mini" onclick="vmix('OverlayInput1In', { Input: '${key}' })">Overlay</button> <button class="mini" onclick="vmix('Cut', { Input: '${key}' })">Cut</button> </div> `; list.appendChild(card); }); setStatus(true, `Conectado · ${inputs.length} inputs`); log(`Inputs cargados: ${inputs.length}`); } catch (error) { setStatus(false, 'Sin conexión'); log('Error cargando inputs: ' + error.message); } } function escapeHtml(text) { return String(text).replace(/[&<>'"]/g, c => ({'&':'&','<':'<','>':'>',"'":''','"':'"'}[c])); } function runCustomFunction() { const f = document.getElementById('customFunction').value.trim(); const input = document.getElementById('customInput').value.trim(); const value = document.getElementById('customValue').value.trim(); const selectedName = document.getElementById('customSelectedName').value.trim(); if (!f) return alert('Escribe una función de vMix. Ej: Fade, Cut, SetText'); const params = {}; if (input) params.Input = input; if (value) params.Value = value; if (selectedName) params.SelectedName = selectedName; vmix(f, params); } function updateTitle() { const input = document.getElementById('titleInput').value.trim(); const selectedName = document.getElementById('titleField').value.trim(); const value = document.getElementById('titleText').value.trim(); if (!input || !selectedName) return alert('Falta Input de título o SelectedName.'); vmix('SetText', { Input: input, SelectedName: selectedName, Value: value }); } async function setText(input, field, value) { if (!input || !field) return; await vmix('SetText', { Input: input, SelectedName: field, Value: value }); } async function sendNewsLower() { const input = document.getElementById('newsTitleInput').value.trim(); const headline = document.getElementById('headline').value.trim(); const subtitle = document.getElementById('subtitle').value.trim(); if (!input) return alert('Escribe el número o nombre del Input del título.'); await setText(input, 'Headline.Text', headline); await setText(input, 'Subtitle.Text', subtitle); await vmix('OverlayInput1In', { Input: input }); } async function sendBreaking() { const input = document.getElementById('breakingInput').value.trim(); const text = document.getElementById('breakingText').value.trim(); if (!input) return alert('Escribe el Input del banner urgente.'); await setText(input, 'Breaking.Text', text); await vmix('OverlayInput2In', { Input: input }); } function updateFootballView() { const home = document.getElementById('homeName').value || 'LOCAL'; const away = document.getElementById('awayName').value || 'VISITA'; document.getElementById('homeLabel').textContent = home; document.getElementById('awayLabel').textContent = away; document.getElementById('homeScore').textContent = football.home; document.getElementById('awayScore').textContent = football.away; document.getElementById('clock').textContent = formatClock(clockSeconds); } function goal(team) { football[team]++; updateFootballView(); sendScoreboard(); } function removeGoal(team) { football[team] = Math.max(0, football[team] - 1); updateFootballView(); sendScoreboard(); } function startClock() { if (clockTimer) return; clockTimer = setInterval(() => { clockSeconds++; updateFootballView(); }, 1000); log('Cronómetro iniciado.'); } function pauseClock() { clearInterval(clockTimer); clockTimer = null; log('Cronómetro pausado.'); } function resetClock() { pauseClock(); clockSeconds = 0; updateFootballView(); sendScoreboard(); } function formatClock(total) { const m = Math.floor(total / 60).toString().padStart(2, '0'); const s = (total % 60).toString().padStart(2, '0'); return `${m}:${s}`; } async function sendScoreboard() { const input = document.getElementById('scoreInput').value.trim(); if (!input) { log('Marcador actualizado en pantalla, pero no enviado a vMix porque falta Input del marcador.'); return; } const homeName = document.getElementById('homeName').value || 'LOCAL'; const awayName = document.getElementById('awayName').value || 'VISITA'; await setText(input, document.getElementById('fieldHomeName').value, homeName); await setText(input, document.getElementById('fieldAwayName').value, awayName); await setText(input, document.getElementById('fieldHomeScore').value, football.home); await setText(input, document.getElementById('fieldAwayScore').value, football.away); await setText(input, document.getElementById('fieldClock').value, formatClock(clockSeconds)); log('Marcador enviado a vMix.'); } document.getElementById('homeName').addEventListener('input', updateFootballView); document.getElementById('awayName').addEventListener('input', updateFootballView); updateFootballView(); </script> </body> </html>