itten
148 lines
5.1 KiB
Markdown
148 lines
5.1 KiB
Markdown
# Two-Stands Transfers — Broadcast Graphics Template
|
||
|
||
Soccer player transfer broadcast graphics — **transparent overlay** for **1920×1080** frames.
|
||
|
||
## Specifications
|
||
|
||
| Property | State 1 (Reveal) | State 2 (Compact) |
|
||
|-------------------|------------------|------------------------|
|
||
| Frame | 1920×1080 px (transparent) | 1920×1080 px (transparent) |
|
||
| Graphics area | 1920×758 px | 641×758 px (centered) |
|
||
| Duration | 5 seconds | holds until next |
|
||
| Player photo | 641×758 PNG (1:1) | 230px crop from 641-wide source |
|
||
|
||
## Layout — State 1 (0–5 s)
|
||
|
||
Full-width 1920×758 bar:
|
||
|
||
```
|
||
┌─────────────────── 1920×758 ──────────────────────────────┐
|
||
│ │
|
||
│ ┌──────────┐ ПЕРЕХОД │
|
||
│ │ │ │
|
||
│ │ PLAYER │ PLAYER NAME │
|
||
│ │ PHOTO │ │
|
||
│ │ │ │
|
||
│ │ 641px │ [MLS] ЧЕЛСИ ┌──────────┐ │
|
||
│ │ (1:1) │ │ 138 млн │ │
|
||
│ │ │ └──────────┘ │
|
||
│ └──────────┘ │
|
||
└──────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
## Layout — State 2 (after 5 s)
|
||
|
||
Shrinks to centered 641×758:
|
||
|
||
```
|
||
┌──────── 641×758 ────────┐
|
||
│ │
|
||
│ ┌────────┐ ПЕРЕХОД │
|
||
│ │ PHOTO │ PLAYER NAME │
|
||
│ │ 230px │ │
|
||
│ │ │ ЧЕЛСИ │
|
||
│ │ │ ┌────────┐ │
|
||
│ └────────┘ │ 138 млн│ │
|
||
│ └────────┘ │
|
||
└─────────────────────────┘
|
||
```
|
||
|
||
## Data — `data/transfers.json`
|
||
|
||
Generated from `assets/transfers-list.csv`. Each transfer object:
|
||
|
||
```json
|
||
{
|
||
"id": 1,
|
||
"playerName": "Морган Роджерс",
|
||
"photo": "assets/players/player_01.png",
|
||
"team": {
|
||
"name": "Челси",
|
||
"logo": "assets/teams/chelsea.svg",
|
||
"color": "#034694",
|
||
"accent": "#FFFFFF"
|
||
},
|
||
"price": "138 млн",
|
||
"isFreeAgent": false
|
||
}
|
||
```
|
||
|
||
For free agents (`isFreeAgent: true`), the price badge turns green and the
|
||
label shows "Статус" instead of "Сумма".
|
||
|
||
### Data source — `assets/transfers-list.csv`
|
||
|
||
```
|
||
Player, Club, Sum
|
||
Морган Роджерс, Челси, 138 млн
|
||
Энтони Гордон, Барселона, 80 млн
|
||
Ибрагим Конате, Реал, Свободный агент
|
||
```
|
||
|
||
Edit the CSV, then re-run the generator to rebuild `transfers.json`
|
||
and regenerate placeholder PNGs + team crests.
|
||
|
||
## Usage
|
||
|
||
### 1. Run a local server (needed for fetch)
|
||
|
||
```bash
|
||
python3 -m http.server 8000
|
||
```
|
||
|
||
### 2. Open in browser
|
||
|
||
```
|
||
http://localhost:8000
|
||
```
|
||
|
||
### 3. Controls
|
||
|
||
| Key | Action |
|
||
|----------------|---------------------------|
|
||
| → / Enter | Next transfer |
|
||
| ← / Backspace | Previous transfer |
|
||
| R | Replay current |
|
||
| H | Hide / Show |
|
||
| A | Toggle autoplay (8s loop) |
|
||
|
||
### External API (CasparCG / OBS)
|
||
|
||
```javascript
|
||
window.transferGraphics.showAt(0); // show transfer #1 (starts State 1)
|
||
window.transferGraphics.next(); // next transfer
|
||
window.transferGraphics.prev(); // previous transfer
|
||
window.transferGraphics.replay(); // replay current
|
||
window.transferGraphics.hide(); // hide graphics
|
||
window.transferGraphics.show(); // show graphics
|
||
window.transferGraphics.autoplay(); // toggle autoplay
|
||
```
|
||
|
||
## Generating Placeholder Assets
|
||
|
||
```bash
|
||
python3 generate_placeholders.py
|
||
```
|
||
|
||
This reads `assets/transfers-list.csv` and generates:
|
||
- `assets/teams/*.svg` — team crest placeholders (colored shields)
|
||
- `assets/players/player_*.png` — player PNG placeholders at **641×758**
|
||
- `data/transfers.json` — the transfer data file
|
||
|
||
**Replace** the placeholder PNGs with real 641×758 player cutouts — just
|
||
drop your files into `assets/players/` with the same names (`player_01.png`,
|
||
`player_02.png`, …). No scaling needed — the source image is displayed 1:1
|
||
in State 1, and CSS `object-fit: cover` crops it for the compact State 2.
|
||
|
||
## Timing
|
||
|
||
```
|
||
0.0 s Card enters (slide + fade)
|
||
0.15s Photo scales in
|
||
0.35s "ПЕРЕХОД" label slides down
|
||
0.55s Player name slides in
|
||
1.0 s Team block appears
|
||
1.35s Price badge pops in (bounce)
|
||
5.0 s Container shrinks 1920 → 641 (0.85 s smooth transition)
|
||
5.85s+ Compact state holds
|
||
``` |