Race-GBanderas y Estados
7 · Sesión - Común
¿Cómo usar Banderas / Situaciones Manuales?
Las banderas manuales son los carteles grandes que sacás al aire a mano: Pace Car, Bandera Roja, Vuelta de Formación, Virtual Safety Car, Actividad Demorada, Última Vuelta, Últimas X Vueltas, Carrera Suspendida, Carrera Cancelada y Vuelta Previa. Comparten la misma ubicación, ancho y alto en pantalla: solo cambia el color, la imagen de fondo y el texto según la que actives. No son la bandera automática del Cuenta Vueltas (amarilla/verde/roja que viene del crono): son estados que vos decidís.
1. Antes de empezar
Mismo lugar para todas
En banderas-module.js la config dice: manual.box = {width:359, height:120, top:40, left:40, align:center}. Ese rectángulo es único para las 10 banderas manuales. Si movés una, movés todas. Así no se te desacomoda al aire.
Cada estado con su estilo propio
Cada bandera manual es un objeto con bgType (solid/gradient/image), bg, bg2, angle, bgImage, text, textOn, align, fontFamily, fontSize, fontWeight, textColor, shadow, padding, radius. Podés tener Safety Car con imagen /Assets/as.png y fondo naranja, y Bandera Roja con fondo rojo sólido y texto “BANDERA ROJA”.
Guardado en banderas_cfg
Todo se guarda dentro de /api/config → banderas_cfg. No hay tabla aparte. Al guardar desde el Editor Visual (pestaña 🚩 BANDERAS) se dispara socket banderas_cfg_change y todos los layouts conectados lo aplican en vivo con applyExternalConfig.
Imágenes en Assets/
Las imágenes de fondo de cada bandera manual van en Assets/. Ejemplos de fábrica: /Assets/as.png (Pace Car), /Assets/FormationLap.png, /Assets/vueltaf.jpeg, /Assets/roja.png. Podés subir la tuya desde el Editor de Banderas: acepta PNG, JPG, WEBP y si pegás una ruta local C:\Imagenes\bandera.png la copia a Assets/ vía /api/assets/import_image.
2. Dónde están los botones
Screenshots/banderas-botones.pngBloque Banderas / Situaciones en PLAY con botones Formación, Previa, Pace Car, Bandera Roja, Última Vuelta, VSC, Actividad Demorada, Últimas X Vueltas, Suspendida, Cancelada.PLAY → Banderas / Situaciones
Bloque movible con 10 botones arrastrables. Cada botón tiene data-label _bnd_* y llama a toggleBandera(this, tipo, extra). El bloque es de ancho completo y se puede reordenar como cualquier LABEL. Atajos: clic = prende, otro clic = apaga.
Apaga las otras
Cuando prendés una, el código apaga todas las demás banderas manuales automáticamente (recorre _BND_LABELS, setea labelState a false y manda /api/labels visible:false). No podés tener Pace Car y Bandera Roja a la vez: la última que tocás gana.
Últimas X Vueltas — contador
Botón especial: al hacer clic calcula automáticamente vueltas restantes con rgLapsRemaining(currentData) y manda {n: 4, auto:true}. El texto del estado tiene token {N} que se reemplaza por el número: “ÚLTIMAS {N} VUELTAS” → “ÚLTIMAS 4 VUELTAS”. Si tocás de nuevo, se apaga.
3. Qué hace cada bandera manual
| Clave interna | Label visible | Default de fábrica | Cuándo usarla |
|---|---|---|---|
| safety | Pace Car / Safety Car | #c9631a + /Assets/as.png + “PACE CAR” textOn | Entra Pace Car. Amarilla + auto de seguridad en pista. |
| previa | Vuelta Previa | #c9a600 + /Assets/FormationLap.png sin texto | Vuelta de instalación antes de largada (previa). |
| formacion | Vuelta de Formación | #c9a600 + /Assets/vueltaf.jpeg sin texto | Vuelta de formación oficial antes de largar. |
| roja | Bandera Roja | #a11212 + /Assets/roja.png + “BANDERA ROJA” | Carrera detenida por incidente. Todos a boxes. |
| vsc | Virtual Safety Car | #c9a600 + “VIRTUAL SAFETY CAR” | VSC: ritmo controlado sin Pace Car físico. |
| demorada | Actividad Demorada | #555555 + “ACTIVIDAD DEMORADA” | Demora por clima, rescate, etc. |
| ultima | Última Vuelta | #e0e0e0 + “ÚLTIMA VUELTA” | Última vuelta de carrera. |
| ultimas_x | Últimas X Vueltas | #e0e0e0 + “ÚLTIMAS {N} VUELTAS” | Recta final: 5, 4, 3 vueltas. El N se calcula solo. |
| suspendida | Carrera Suspendida | #a11212 + “CARRERA SUSPENDIDA” | Suspensión momentánea. |
| cancelada | Carrera Cancelada | #a11212 + “CARRERA CANCELADA” | Cancelación definitiva. |
Todos estos textos son editables: podés cambiar “PACE CAR” por “AUTO DE SEGURIDAD” y queda guardado.
4. Dónde se muestran al aire
Screenshots/banderas-layout.pngCartel central grande con caja bnd-box, imagen bnd-bg-img y texto bnd-text. Mismo lugar para las 10 banderas.ov-bandera — cartel central
En layout.html: <div id="ov-bandera"> <div class="bnd-box" id="bnd-box"> <img id="bnd-bg-img"> <div id="bnd-text"></div> </div> </div>. Ocupa toda la pantalla pero la caja interna es de 359x120 por defecto en top:40 left:40. Al activar con showBanderaManual(tipo, extra) se le pone width/height/top/left del box único, se aplica applyFlagBox (fondo + imagen + texto) y se agrega clase show con opacity 1. Al ocultar, quita show.
Banderas automáticas — Cuenta Vueltas
Arriba en el Cuenta Vueltas (superior) y abajo en Crawl Inferior (inferior): cv-flag-box / ci-flag-box con cv-flag-img / cv-flag-text y ci-flag-img / ci-flag-text. Cada una tiene su propio tamaño (cv_box superior/inferior width/height). Los estados son yellow/green/red/finish/none con defaults: yellow #c9a600 “AMARILLA”, green #1a7d2c sin texto, red #a11212 “ROJA”, finish #111111 + /Flags/finish.png.
Comando que viaja
PLAY manda {cmd:'bandera', tipo:'safety'} o {cmd:'bandera', tipo:'ultimas_x', n:4} vía /api/layout_cmd y /api/labels. layout.html lo recibe por socket o polling y llama a BanderasModule.processBanderaCmd(cmd): si tipo=ocultar → hideBanderaManual(), si no → showBanderaManual(tipo, {n}). Además la config visual viaja por banderas_cfg_change y por /api/layout_data en cada poll.
5. Cómo se configuran — pestaña 🚩 BANDERAS
Screenshots/banderas-editor.pngPanel con secciones para cv_flag superior/inferior y manual box + estados con preview, fondo sólido/gradiente/imagen, texto, tipografía, sombra, padding y radius.Editor Visual → 🚩 BANDERAS
Pestaña nueva que no usa SE_GROUPS: la arma BanderasModule.buildEditorPanel(onChange) y monta HTML propio en se-banderas-content. Cada fila es un estado con preview en vivo. Al tocar cualquier campo llama a onChange() que hace BanderasModule.saveConfig() con debounce y re-aplica al aire.
Fondo: sólido / gradiente / imagen
Control bnd-color-section: pastillas Sólido/Gradiente/Imagen. Sólido: color picker + opacidad slider + vista. Gradiente: ángulo 135° por defecto, hasta 3 pasos con color + posición %, barra de vista previa. Imagen: campo de texto con URL /Assets/… + botón Subir. Si pegás ruta local C:\ o \\servidor\share o file://, la detecta isLocalDiskPath y la importa a Assets/ con /api/assets/import_image.
Texto
Campo texto libre con token {N} para ultimas_x, switch textOn (mostrar o no), align left/center/right, fontFamily con datalist de sugerencias (Roboto Condensed Variable, Arial, Segoe UI, monospace, Impact, Georgia) pero campo libre, fontSize px (0 = default del layout), fontWeight 100-900, textColor sólido o gradiente con background-clip:text, shadowMode none/custom con x/y/blur/color.
Padding y Radius con candado
Dos cajas tipo Corel: padding {t,r,b,l} y radius {tl,tr,tr,br} con candado 🔒🔓. Si está vinculado, editar uno cambia los 4. Si no, cada lado independiente. Se aplican con boxEl.style.padding y borderRadius. Si los 4 radios son 0 no pisa el CSS (deja --cv-flag-border-radius del editor).
6. Parámetros de la caja única (todas las manuales)
| Parámetro | Default | Qué hace |
|---|---|---|
| width / height | 359 x 120 px | Tamaño de la caja del cartel manual. Compartido por las 10. |
| top / left | 40, 40 px | Posición absoluta del cartel en el layout. Mové desde Editor Visual o editando box. |
| align | center | Alineación del texto dentro de la caja si textOn. |
| bgType | solid/image/gradient | Cómo se pinta fondo. |
| bg / bg2 / bgMid / bgMidPos / angle / bgGrad | #c9631a, etc. | Color sólido o gradiente lineal. bgGrad es string completo linear-gradient() del editor de gradientes. |
| bgImage | /Assets/as.png, etc. | Imagen de fondo, solo si bgType=image. Se dibuja ENCIMA del color base. |
| text / textOn | “PACE CAR” true, etc. | Texto y si se muestra. |
| fontFamily / fontSize / fontWeight / textColor / shadow | — | Tipografía y sombra. textColor puede ser gradiente con background-clip:text. fontSize 0 = default layout. |
7. Banderas automáticas — config aparte
Superior e Inferior independientes
STATE.cv_flag.superior y inferior cada uno con yellow/green/red/finish/none. Tamaño propio en STATE.cv_box.superior/inferior {width:null, height:null}: null = usa CSS (--cv-flag-width/height), número = pisa CSS. Así podés tener bandera grande arriba y chica abajo.
Finish con imagen
Default finish usa /Flags/finish.png como bgImage. Recomendación: PNG a cuadros bien nítido, sin fondo, 400x300 mínimo.
8. Recomendación para PNG nítido
Para banderas manuales con imagen de fondo:
• Formato: PNG-24 con transparencia, no JPG. JPG mete artefactos en bordes de texto y no deja ver el color base debajo.
• Tamaño: Exportá al menos 2x del tamaño al aire. Si la caja es 359x120, exportá 720x240 o 1080x360. El navegador escala para abajo nítido, si escalás para arriba se pixela.
• Texto en la imagen: Evitá meter texto dentro del PNG. Usá el campo text del estado: así queda vectorial, nítido a cualquier resolución y podés cambiar tipografía, color, sombra y traducción sin re-exportar imagen.
• Si necesitás imagen con texto (ej: logo de categoría): exportá con texto en 300dpi, sin compresión, y dejá padding transparente alrededor para que el radius y padding del estado no lo corten.
• Fondos: Si usás imagen + color base, poné en bg un color que combine si la imagen tiene transparencia parcial (ej: Pace Car naranja #c9631a debajo de as.png con transparencia).
• Subida: Desde Editor Visual → campo imagen → Subir → elige archivo → se sube a /api/assets/upload_image → devuelve /Assets/xxx.png. Si pegaste ruta local C:\Users\...\bandera.png, el server la copia a Assets/ automático.
• Cache: Las imágenes en galería usan cache-buster ?t= timestamp. Si cambiás imagen con mismo nombre y no la ves, recargá layout con Ctrl+F5 o renombrá.
9. Flujo de uso en transmisión
10. Precauciones
Una sola a la vez. El sistema apaga todas las demás al prender una. No intentes tener Safety y Roja juntas: la última gana. Es por diseño para no tapar pantalla.
Misma caja para todas. Si achicás width/height para que entre “VSC”, también achicás “BANDERA ROJA”. Diseñá para el texto más largo (VIRTUAL SAFETY CAR).
Texto con token {N} solo en ultimas_x. Solo ese estado reemplaza {N} por número. Si lo ponés en otro estado, queda literal {N}.
Imágenes en Assets/, no en Marcas-Brands ni Flags. Las manuales usan Assets/. Las automáticas de finish usan /Flags/finish.png. No mezcles carpetas o no las encuentra.
Ruta local pegada: Si pegás C:\Imagenes\bandera.png, el server la copia a Assets/ vía import_image. Si la ruta no existe en el servidor, falla con “No se pudo copiar”.
Fuentes de fonts/: Si usás una fuente de carpeta fonts/ que no está declarada en layout, BanderasModule la detecta como missing en usedFamilies() y vuelve a pedir lista con ensureFolderFonts() y re-aplica. Si aún no se ve, recargá layout.
Sombra por defecto SIN sombra. En este módulo shadowMode vacío = none (sin sombra), distinto al resto del editor. Si querés sombra, poné custom y ajustá x/y/blur/color.
Padding y radius 0 no pisa CSS. Si los 4 radios son 0, no setea borderRadius y deja --cv-flag-border-radius del Editor de Estilo. Con algún valor >0, manda el panel.
Bandera automática vs manual conviven. Podés tener amarilla automática en Cuenta Vueltas y Pace Car manual al centro a la vez. No se apagan entre sí.
11. Problemas frecuentes
| Lo que ves | Qué hacer |
|---|---|
| Toco bandera y no pasa nada al aire | Verificá que layout.html esté cargado con banderas-module.js y que BanderasModule.loadConfig() se haya llamado. Mirá consola: debe haber ov-bandera, bnd-box. Si layout está en CasparCG, la config también viaja por /api/layout_data en cada poll, no solo por socket. |
| Se prende y se apaga sola | Otro operador tocó otra bandera: el sistema apaga todas las demás. Coordinen quién dispara banderas. |
| Imagen no se ve, solo color | bgType debe ser “image” y bgImage con ruta /Assets/xxx.png. Si bgType es solid/gradient, ignora bgImage. Cambiá a Imagen en el editor. |
| Subí PNG y sigue viejo | Cache. La galería usa ?t= timestamp pero layout puede cachear. Ctrl+F5 en layout, o renombrá archivo. |
| Pegué C:\ruta y dice No se pudo copiar | El servidor no tiene acceso a esa ruta (está en tu PC, no en el server). Subí con botón Subir en vez de pegar ruta, o copiá archivo a carpeta compartida accesible por el server. |
| Texto {N} literal | Solo funciona en ultimas_x. En otros estados queda literal. Usalo solo ahí. |
| Fuente no cambia | El panel de control fuerza font-family con !important en #se-panel *. BanderasModule usa setTxt con important para pisarlo. Si aún no cambia, verificá que fontFamily esté escrita con comillas: "Roboto Condensed Variable, \"Segoe UI\", sans-serif" y que esté en fonts/ declarada. |
| Bandera muy grande/chica | Ajustá manual.box width/height en editor de Banderas. Es para las 10 a la vez. O ajustá cv_box superior/inferior para automáticas. |
| Últimas X muestra número viejo | El N se calcula al momento del clic con rgLapsRemaining. Si avanzaron vueltas, tocá de nuevo para actualizar. |
| No veo pestaña 🚩 BANDERAS en Editor | Verificá que /banderas-module.js esté cargado en index.html (script src) y que BanderasModule.buildEditorPanel exista. Si no, recargá index. |
12. Lista de control rápida
Al preparar el evento
Editor Visual → 🚩 BANDERAS → revisar 10 estados manuales: fondo, imagen en Assets/, texto, tipografía, sombra, padding, radius. Posicionar caja única 359x120. Probar cada una al aire.
Antes de salir al aire
PLAY → Banderas / Situaciones → probar clic en cada una, verificar que apaga las otras, que texto se ve nítido, que imagen no pixela, que Últimas X calcula bien. Verificar automáticas amarilla/verde/roja/finish en Cuenta Vueltas.
Durante la transmisión
Un clic prende, otro apaga. Últimas X recalcula al tocar. No hay que ir al Editor: solo botonera. Si necesitás cambiar texto al vuelo, Editor → 🚩 BANDERAS → editar texto → guarda auto y se aplica en vivo.
Al terminar
Backup de config.json (contiene banderas_cfg) y carpeta Assets/. Queda para próxima fecha.
