Rótulos Customizados

6 · Pre sesión

🎨 Rótulos Customizados — Zócalos Libres al Aire

Los Rótulos Customizados son zócalos de texto libre que vos escribís y mandás al aire cuando querés. No dependen del cronometraje: sirven para entrevistas, sponsors, avisos, nombres, frases, hashtags, locutores, invitados, información extra, placa negra, agradecimientos y cualquier cosa que quieras mostrar. Podés tener cientos guardados, organizados por grupos, con 1, 2 o 3 líneas, posición izquierda/centro/derecha, y con estilo totalmente editable por tipo. Al aire va uno solo a la vez, con animación de apertura desde el centro y salida de líneas escalonada.

Idea central: Vos creás los rótulos antes o durante la carrera, los agrupás (General, Entrevistas, Sponsors, etc.), elegís cómo se ven los de 1 línea, los de 2 y los de 3 por separado, y en PLAY solo tocás MOSTRAR / OCULTAR. Existe además el grupo especial ⚡ Rápido con atajo Alt+R para escribir algo en el momento y tirarlo al aire en 2 segundos. Un solo rótulo al aire a la vez; si prendés otro, el anterior sale animado y entra el nuevo.

1. Dónde está y cómo se abre

🖼️

Falta captura: Screenshots/rotulos-boton-play.pngGrilla de PLAY mostrando el botón verde 🎨 ROTULOS CUSTOMIZADOS entre Paradas y Chat, con borde verde diferenciado.

🖼️

Falta captura: Screenshots/rotulos-modal-general.pngModal completo: columna izquierda Nuevo/Editar, preview abajo, tabs GRUPOS y ESTILOS POR TIPO a la derecha.

🎨

Botón en PLAY

En PLAY, en la grilla principal, botón verde 🎨 ROTULOS CUSTOMIZADOS. Es draggable como todos: podés moverlo donde te quede cómodo. No prende nada directo: abre el modal de gestión.

⌨

Atajo Zócalo Rápido

Alt+R en cualquier momento del panel abre el mini modal de Zócalo Rápido. Escribís 1 a 3 líneas y sale al aire instantáneo, sin guardar en grupo fijo. Ideal para imprevistos.

📁

Un solo al aire

Solo puede haber un rótulo activo a la vez. Si tocás Mostrar en otro, el anterior se oculta con animación (líneas hacia afuera + fondo cerrándose al centro) y entra el nuevo.

🎬

También en ACTC

A diferencia de otros overlays, los rótulos customizados SÍ están habilitados en modo ACTC. No se ocultan por configuración de categoría.

2. Tipos de rótulo — 1, 2 o 3 líneas

🖼️

Falta captura: Screenshots/rotulos-tipos.pngDropdown Tipo de Zócalo con opciones 1 Línea, 2 Líneas, 3 Líneas y leyenda El estilo de este tipo se aplica a TODOS los rótulos de ese tipo.

Tipo	Cuándo usarlo	Qué se ve	Regla obligatoria
1 Línea	Títulos cortos, avisos, hashtag, placa, nombre destacado.	Solo Línea 1 grande, impactante.	Línea 1 obligatoria. Si está vacía no guarda.
2 Líneas	Nombre + cargo, sponsor + leyenda, entrevistado + medio.	L1 título + L2 subtítulo más chica.	L1 obligatoria, L2 opcional pero recomendada. Si L2 vacía se oculta.
3 Líneas	Bloque informativo completo: título, subtítulo, dato extra.	L1 + L2 + L3 en stack vertical.	L1 obligatoria. L2/L3 se ocultan si están vacías.

Regla de estilo clave: El estilo se edita por TIPO, no por rótulo individual. Todos los rótulos de 1 línea comparten el mismo diseño, todos los de 2 líneas otro, y todos los de 3 líneas otro. Cambiás el color de 1L y cambian TODOS los de 1L al instante, incluso el que está al aire. Esto garantiza coherencia visual en toda la transmisión y evita que tengas 50 diseños distintos.

3. Grupos — Organización sin mezcla

🖼️

Falta captura: Screenshots/rotulos-grupos.pngColumna izquierda Grupo select + botón ＋, lista de rótulos agrupados por bloque con nombre de grupo, filtro y Apagar Todos.

📂

Grupo = carpeta

Cada rótulo pertenece a un grupo. Grupo por defecto General. Podés crear Entrevistas, Sponsors, Locutores, Avisos, Placas o lo que quieras. Los grupos se guardan en orden de creación.

Crear: select Grupo → ＋ → escribir nombre → Enter. Se crea y queda seleccionado.

✏️

Renombrar / Borrar

En la pestaña GRUPOS cada cabecera de grupo tiene ✏ Renombrar y 🗑 Borrar. General no se puede borrar ni renombrar. Al borrar un grupo, sus rótulos pasan automáticamente a General, no se pierden.

🔍

Filtro y Apagar

Arriba de la lista: Filtrar... busca en texto de líneas. ⚫ Apagar Todos oculta el rótulo que esté al aire. Si hay uno al aire, su card queda con borde amarillo.

⚡

Grupo especial Rápido

Grupo ⚡ Rápido es del Zócalo Rápido (Alt+R). Cada envío genera un id quick-xxxxxx nuevo, pisa el anterior y sale al aire directo. Se borran solos al crear el siguiente rápido, para no acumular basura.

4. Posición horizontal y vertical

🖼️

Falta captura: Screenshots/rotulos-posicion.pngBotones ◀ Left, ⬌ Center, Right ▶ con estado activo y leyenda Vertical Bottom Global.

Control	Qué hace	Dónde se ve
◀ Left / ⬌ Center / Right ▶	Dónde se ancla horizontalmente el bloque al aire. Left = izquierda, Center = centrado, Right = derecha.	En layout, clase pos-left / pos-center / pos-right en #ov-customrotulo.
Vertical Bottom Global	La altura vertical NO se elige por rótulo. Es global del estilo, variable --PosBottomGlobal. Se ajusta desde Estilos por Tipo → Posición.	Todos los tipos comparten la misma base vertical, para que no bailen en pantalla.

5. Creación paso a paso — Flujo del operador

Abrir modalPLAY → 🎨 ROTULOS CUSTOMIZADOS. Se abre overlay oscuro con 2 columnas: izquierda edición, derecha lista.

Elegir grupoEn Grupo elegí dónde va. Si no existe, ＋ y escribí nombre nuevo (ej: Entrevistas). Queda creado.

Elegir tipoTipo de Zócalo: 1, 2 o 3 líneas. Al cambiar, aparecen/desaparecen los inputs Línea 2 y Línea 3 y cambia la preview.

Elegir posición◀ Left para zócalo tradicional, ⬌ Center para placa al medio, Right ▶ para derecha. Recomendado Left para transmisión.

Escribir líneasLínea 1 obligatoria (título). Línea 2 y 3 según tipo. Usá MAYÚSCULAS si querés impacto, el estilo puede forzar upper también.

Vista previaAbajo ves Vista Previa (usa estilo del tipo seleccionado) con fondo negro y borde amarillo. Es una preview real con el estilo actual del tipo.

Guardar💾 Guardar en Grupo. Se guarda y aparece en la lista de la derecha, dentro de su grupo. Si estabas editando uno existente (id oculto), lo actualiza.

Mandar al aireEn la lista, botón Mostrar del rótulo. Si ya había uno al aire, sale animado y entra el nuevo. Ocultar lo saca. Solo uno activo a la vez.

6. Edición, duplicado y borrado

🖼️

Falta captura: Screenshots/rotulos-card-acciones.pngDetalle de una card de rótulo en lista, con 3 líneas de texto, pos left, badge tipo y 4 botones de acción.

Acción	Botón	Qué hace y qué tener en cuenta
Mostrar / Ocultar	MOSTRAR / OCULTAR	Manda al aire / saca del aire. Si tocás Mostrar en otro, apaga el anterior automáticamente. Al aire el botón queda amarillo y la card con borde.
Editar	✏️	Carga el rótulo en el form izquierdo (id oculto). Cambiás textos, grupo, tipo, posición y guardás. Si ese rótulo estaba al aire, la edición se ve en vivo sin re-animar (misma clave cambia).
Duplicar	⧉	Crea copia con mismo texto y grupo, id nuevo. Útil para variar una palabra sin reescribir todo.
Borrar	🗑️	Elimina definitivo. Si era el que estaba al aire, se oculta automáticamente del aire también.
Limpiar form	✕ Limpiar	Vacía inputs y resetea id de edición. No borra nada guardado, solo limpia formulario.

7. Zócalo Rápido — Alt+R

🖼️

Falta captura: Screenshots/rotulos-quick.pngMini modal con inputs líneas 1-3, pos left/center/right y botones Enviar al Aire y Cancelar, grupo ⚡ Rápido.

Atajo universal: Presioná Alt+R en cualquier parte del panel de control. Se abre un mini modal rápido: elegí tipo, posición y escribí líneas. Enviar al Aire crea un rótulo con id quick-xxxxxx en grupo ⚡ Rápido y lo manda al aire de una. El anterior quick se borra automáticamente al crear uno nuevo, así no se acumulan. Ideal para nombres que te dicen por cucaracha, avisos de último momento, correcciones.

⚡

Flujo de 3 segundos

Alt+R → escribir Línea 1 (ej: ENTREVISTA EN BOXES) → Línea 2 (ej: Julián Santero) → Enviar. Entra animado al aire.

🔄

Pisa anterior

Si ya había un quick al aire y mandás otro quick, hace salida animada del anterior y entrada del nuevo, sin que tengas que apagar manual.

🧹

No ensucia grupos

Los quick no van a General ni a tus grupos normales. Quedan en ⚡ Rápido, separados. Si necesitás guardar uno permanente, duplicarlo desde la lista a otro grupo.

8. Estilos por Tipo — Diseño total por 1L / 2L / 3L

🖼️

Falta captura: Screenshots/rotulos-estilos-tabs.pngPestaña ESTILOS POR TIPO con tabs 1 Línea, 2 Líneas, 3 Líneas, preview en vivo sobre fondo damero y grid de controles.

🖼️

Falta captura: Screenshots/rotulos-estilos-controles.pngDetalle grid con grupos Fondo, Bordes, Radius, Padding, Líneas, Sombra, Fuente custom, imagen de fondo.

En el tab 🎨 ESTILOS POR TIPO personalizás cómo se ven todos los rótulos de 1 línea, todos los de 2 y todos los de 3. Cada tipo tiene su propio panel completo:

🎨

Fondo

Modo: sólido, degradado, transparente. Color + Alpha (opacidad) del bloque. Imagen de fondo opcional desde RotulosFondos/ (PNG/JPG/WebP) subida con botón. La imagen va detrás del color.

◧

Bordes y Radius

Borde por lado (top/bottom/left/right) con color y grosor independiente. Radius por esquina (TL/TR/BR/BL) y opción link 🔗 para igualar las 4. Permite zócalo con solo borde izquierdo amarillo, por ejemplo.

↔

Padding y Tamaños

Padding vertical/horizontal del bloque, min-width, gap entre líneas, ancho máximo. Todo en px. Controla cuánto respira el texto dentro de la placa.

Tipografía por línea

Por cada línea (L1/L2/L3): color, tamaño, peso (100-900), mayúsculas, tracking (espaciado), fuente custom con upload de fuente (src). Cada línea puede tener fuente distinta.

🌑

Sombra y Efectos

Sombra del bloque, brillo, y animación: duración de fondo --cr-bg-dur, duración de líneas --cr-line-dur y stagger --cr-line-stagger (retraso entre líneas). Se ajustan en CSS del estilo visual pero se previsualizan acá.

🖼

Fondos custom

Botón Subir imagen → va a carpeta RotulosFondos/. Podés usar texturas, degradados en imagen, logos de agua, etc. Se lista con thumb y se puede borrar.

Cómo se guarda el estilo: Cada tipo (1,2,3) guarda un objeto con todas las claves de estilo (bgMode, bgColor, borderColor, l1Color, l1Size, l1Font, l1Css final armado). Ese objeto se envía a todos los layouts conectados por socket (custom_rotulo_styles) y el layout redibuja el rótulo que esté al aire sin recargar. Por eso ves cambios en vivo si editás estilo mientras hay un rótulo al aire.

9. Animación al aire — Entrada y salida

Fase	Qué pasa en pantalla	Duración (del estilo)
Entrada	El fondo se abre desde el centro hacia los lados (clip-path). Luego las líneas entran una por una de abajo hacia arriba con fade.	--cr-bg-dur ~0.45s fondo + --cr-line-stagger ~0.15s por línea
En aire	Queda fijo. Si editás texto o estilo del mismo id, cambia sin animar (clave detecta que es el mismo).	—
Salida	Líneas se van en reversa (de última a primera). Luego fondo se cierra hacia el centro.	--cr-line-stagger + --cr-line-dur + --cr-bg-dur
Cambio de rótulo	Si hay uno al aire y mandás otro, hace salida completa del anterior + entrada del nuevo encadenada, sin pisarse.	Suma de salida + entrada

10. Dónde se ve en el Layout — Overlay

🖼️

Falta captura: Screenshots/rotulos-layout.pngSalida al aire del rótulo customizado abajo izquierda, con fondo negro 85%, borde amarillo 4px, 3 líneas de texto.

📺

Div #ov-customrotulo

En layout.html hay un div fijo #ov-customrotulo con 3 hijos #cr-ov-l1 / l2 / l3. Solo se muestra si hay un rótulo activo. Posición real viene del estilo visual global y del pos-* del rótulo.

🔤

Texto plano seguro

Las líneas se ponen con textContent, no HTML. No podés inyectar tags: si escribís <b> se ve literal. Es a propósito, evita que se rompa el layout con código.

🎨

Estilo final por CSS

El bloque recibe cssText final armado por el diseñador y cada línea su propio l1Css / l2Css / l3Css. Además se inyecta @font-face si usás fuente custom.

🔁

Polling vivo

Layout hace poll cada 1s a /api/custom_rotulos y cada 5s a estilos. Si cambiás algo en el panel, el layout lo refleja solo, sin F5.

11. Archivos y carpetas que intervienen

Archivo / Carpeta	Qué guarda	Cuándo se usa
custom_rotulos.json	Array de todos los rótulos: id, tipo, lines[], pos, estilo (legacy), grupo, created.	Lista principal. Se lee al abrir modal y al hacer poll del layout.
custom_rotulos_meta.json	Grupos (array) + styles (objeto por tipo 1/2/3).	Grupos y estilos editables. Sin esto no hay grupos ni diseño por tipo.
RotulosFondos/	Imágenes de fondo subidas para los estilos.	Cuando elegís imagen de fondo en estilo. Formatos PNG/JPG/WebP/GIF.
layout.html #ov-customrotulo	Overlay visual al aire.	Siempre presente, oculto si no hay activo.
index.html modal customrotulos	UI completa de gestión.	Solo cuando abrís el botón verde.

12. Usos recomendados — Ideas para transmisión

🎤

Entrevistas

Grupo Entrevistas. Tipo 2: Línea 1 nombre del entrevistado, Línea 2 cargo / equipo. Pos Left. Lo dejás 5-8s mientras habla.

🏷

Avisos / Placa negra

Grupo Avisos. Tipo 1 centrado (Center), fondo negro sólido 95%, texto blanco grande. Para cortes, demoras, info de carrera.

#️⃣

Hashtag / Redes

Tipo 1, Left, con # y arroba. Útil para interacción: #TCenVivo, @categoria oficial.

🎙

Locutores / Equipo

Grupo Equipo. Tipo 2: Línea1 nombre locutor, Línea2 rol (Relatos, Comentarios, Boxes). Presentación inicial.

📍

Ubicación / Hora / Temp

Tipo 1 rápido: "Autódromo Oscar Cabalén - 15:32 - 28°C". Si tenés Clima, mejor usar overlay Clima, pero para texto libre sirve.

13. Precauciones — Lo que más falla en vivo

Línea 1 vacía: no guarda. El backend devuelve error "Línea 1 requerida". Siempre escribí al menos L1, aunque sea una palabra.

Texto muy largo sin espacios: ej: URL larguísima. El bloque tiene ancho máximo pero si es una palabra sin cortes puede desbordar. Partilo en 2 líneas o poné espacios.

Cambiar estilo con rótulo al aire: se ve en vivo, sí, pero si cambiás fuente custom que tarda en cargar puede hacer flash. Probá estilos antes de salir al aire, no en plena entrevista.

Grupo General con 200 rótulos: se vuelve inmanejable. Creá grupos por tema (Entrevistas, Sponsors, Avisos) y usá filtro. Borrà los quick viejos si quedaron.

Posición Center tapa pilotos: Center queda al medio abajo, puede tapar gráficos. Usá Left para zócalos normales, Center solo para placas negras o avisos grandes.

Imagen de fondo muy pesada: si subís PNG de 5MB como fondo, el layout tarda en cargarlo al aire. Usá JPG/WebP comprimido < 500KB, 1920x400 aprox.

Fuente custom sin acentos: algunas fuentes decorativas no tienen ñ o tildes y se ven cuadrados. Probá antes con texto real con acentos.

Borrar grupo con rótulo al aire: si borrás el grupo que tiene el rótulo activo, ese rótulo pasa a General y se oculta del aire automáticamente (salida animada).

Dos operadores tocando a la vez: si dos PCs abren el modal y tocan Mostrar al mismo tiempo, gana el último. Solo uno debe manejar rótulos al aire.

Alt+R no abre: algunos navegadores o teclados capturan Alt+R. Probá desde el botón verde si no abre. En Chrome funciona siempre.

14. Problemas frecuentes

Lo que ves	Qué significa y qué hacer
Modal no abre / queda oscuro	Overlay #customrotulos-modal-overlay quedó con display block pero sin contenido. Recargá panel con F5. Si persiste, borrá localStorage de grupos.
Guardar no hace nada	Línea 1 vacía, o tipo inválido, o custom_rotulos.json corrupto. Revisá que L1 tenga texto. Si json corrupto, renombrá archivo y se crea nuevo vacío.
No aparece al aire aunque dice MOSTRAR	Layout no está haciendo poll o está en ACTC viejo que lo ocultaba. Verificá que layout.html sea última versión y que polling custom rotulos esté corriendo (consola sin errores).
Estilo no cambia	Tab ESTILOS → no tocaste Guardar. Cada tipo tiene su botón Guardar. Además el layout refresca estilos cada 5s, esperá 5s.
Fondo imagen no se ve	Ruta /RotulosFondos/archivo no existe o formato no soportado. Subí de nuevo desde el diseñador, solo PNG/JPG/WebP/GIF. Nombre sin espacios raros.
Texto se corta con ...	Ancho máximo o padding muy chico. En estilo, subí min-width o bajá font-size L1. Revisá max-width del bloque.
Al cambiar de rótulo hay flash negro	Normal: hace salida + entrada. Si querés cambio instantáneo, editá el mismo id en lugar de mostrar otro distinto. Edición en vivo no anima.
Quick no se borra	Los quick se borran solo al crear uno nuevo. Si querés limpiar manual, borrá desde lista grupo ⚡ Rápido → 🗑️.
Grupo duplicado	Nombre con mayúsculas distintas: "Entrevistas" vs "entrevistas". El sistema compara exacto. Usá siempre misma capitalización.

15. Lista de control rápida

🖼️

Falta captura: Screenshots/rotulos-checklist.png4 cards: Preparación grupos y estilos, Antes de salir preview, Durante transmisión Alt+R y rotación, Al terminar guardar json.

🗂

Al preparar evento

Creá grupos: Entrevistas, Sponsors, Avisos, Equipo. Cargá rótulos básicos de cada grupo. Diseñá estilos: 1L grande impacto, 2L nombre+cargo, 3L informativo. Subí fondos a RotulosFondos si usás texturas.

🔍

Antes de salir al aire

Probá Mostrar/Ocultar de cada tipo en layout. Verificá posición Left no tape cronos. Probá Alt+R rápido. Revisá que fuente custom tenga ñ y acentos.

🎙

Durante transmisión

Usá Grupos para encontrar rápido. Alt+R para imprevistos. No cambies estilos en vivo salvo que sea necesario. Un solo rótulo a la vez: coordiná con operador de gráficos.

🏁

Al terminar

Los rótulos quedan guardados para próximo evento (mismo custom_rotulos.json). Si querés backup, copiá custom_rotulos.json + custom_rotulos_meta.json + carpeta RotulosFondos.

Resumen para el operador: Rótulos = zócalos libres que vos escribís. 1/2/3 líneas. Grupos para ordenar. Estilo por tipo (todos los 1L iguales). Pos Left/Center/Right. Uno solo al aire con animación centro→lados y líneas escalonadas. Alt+R para rápido. Guardado en custom_rotulos.json + custom_rotulos_meta.json + RotulosFondos/. Funciona también en ACTC. Ideal para entrevistas, sponsors, avisos y cualquier texto que no viene del cronometraje.