Pozadí promítání

Popisované nastavení promítání reflektuje aktuální vývojový stav, který se postupně bude upravovat ve prospěch lepší ergonomie používání.

Adresáře a soubory pro promítání

Promítání spojuje údaje ze tří míst:

1. Data: soutěžní data doplněná programem běžícím v prohlížeči (více viz rozhraní pro displeje). Tato data odpovídají zvolenému reportu a nelze je měnit.
2. Stránka: promítaná stránka, soubor ve formátu HTML předlohy, s možností volit barvy, druh pozadí, apod.
3. Soubory: obrázky a jiné soubory použité uvnitř stránky podle předešlého bodu.

Stránky

1. Soubory se stránkami pro jednotlivé displeje se jmenují stejně jako URL segment v nastavení displeje. Zvolíte-li např. za URL segment televize, pojmenujte stránku televize.html.
2. Všechny stránky pro všechny použité displeje uložte do stejného adresáře.
3. Při spuštění sart použijte parametr --templates "<adresář>\*.html".

Pro uvedený příklad displeje televize, pokud soubor televize.html uložíte do adresáře C:\promitani\predlohy, spusťte sart následovně (případně i s dalšími parametry):

sart --templates "C:\promitani\predlohy\*.html"

Soubory se stránkami využívají mechanismus předloh, který v aktuální verzi není nijak dále využitý. Formát HTML souborů se stránkami je proto doplněný o značky {% ... %} předlohového mechanismu. Pro správnou funkci promítání je nutné tyto značky a řádky zachovat.

⚠️ Upozornění

sart načítá předlohy jen jedenkrát při svém spuštění. Pokud změníte předlohu, například jména obrázků, nebo barvu textu, musíte sart restartrovat.

Prázdná předloha

Příklad předlohy stránky bez pozadí s linkami pod rozlosováním skupin soutěžících (typicky pro televizi):

{% extends "base.html" %}
{% block headcss %}
<style>
    :root {
        --text: #242424; /* barva textu #rrggbb */
        --highlight: #cf57ff; /* barva zvýrazněného textu #rrggbb */
        --dimmed-background: #eee;
        --dimmed-content: #eee;
    }

    .report-heats-by-competitors .filling-row {
        box-shadow: 0 0 0 0.5px #00000040;
    }
</style>
{% endblock headcss %}
{% block headscript %}{% endblock headscript %}
{% block content %}{% endblock content %}

Předloha s pozadím

Příklad předlohy stránky s pozadím a světlým textem na tmavém pozadí (typicky pro pódiovou velkoplošnou obrazovku):

{% extends "base.html" %}
{% block headcss %}
<style>
    :root {
        --text: #F0F0F0; /* barva textu #rrggbb */
        --highlight: #cf57ff; /* barva zvýrazněného textu #rrggbb */
        --dimmed-background: #00000068; /* ztmavení pozadí stránky #000000αα, α je opacita-překryvnost 0–ff */
        --dimmed-content: #000000e6; /* ztmavení pozadí obsahu #000000αα, α je opacita-překryvnost 0–ff */
    }

    .background-box {
        /* obrázek pozadí při promítání obsahu */
        background-image: url("/background.jpg");
    }

    .break-background {
        /* obrázek pozadí při přerušení */
        background-image: url("/break-background.jpg");
    }
</style>
{% endblock headcss %}
{% block headscript %}{% endblock headscript %}
{% block content %}{% endblock content %}

Soubory

Soubory použité uvnitř stránek poskytuje sart z adresáře určeného parametrem --assets "<adresář>", např. --assets "C:\promitani". Pro uvedený příklad předlohy s pozadím uložte soubory background.jpg a break-background.jpg do adresáře C:\promitani a spusťte sart následovně:

sart --assets "C:\promitani" --templates "C:\promitani\predlohy\*.html"

Pro ověření správného nastavení vložte do prohlížeče odkaz http://127.0.0.1/background.jpg a ověřte, že se zobrazí správný obrázek uložený v adresáři.

Při změně obsahu souborů s obrázky nemusíte sart restartovat.

Načítání souborů

Soubory je možné uložit do adresáře assets, který je podadresářem adresáře se serverem sart.exe. Při jejich načítání se postupuje v tomto pořadí:

1. Jako první se bere --assets <XXX>, tedy adresář XXX explicitně nastavený příslušným parametrem při spuštění serveru sart.
2. Pokud se soubor nenajde, bere se adresář assets (podadresář pracovního adresáře serveru sart).
3. Pokud se ani tam soubor nenajde, použije se výchozí nastavení přímo z programu.

Příklady

Obsah adresářů

Stránky a soubory použité v příkladech tohoto dokumentu včetně adresářové struktury, s doplněnou stránkou led pro velkoplošnou obrazovku:

c:\promitani\background.jpg
c:\promitani\break-background.jpg
c:\promitani\predlohy\televize.html
c:\promitani\predlohy\led.html

Formátování pozadí

Kompletní technické detaily: CSS background na stránkách MDN.

Jen barva pozadí

    .background-box {
        background-color: blue; /* nebo místo blue #rrggbb */
    }

Obrázek s přizpůsobenou velikostí

    .background-box {
        background-image: url("/background.jpg");
        background-size: cover; /* nebo contain */
    }

Obrázek s umístěním jiným než levý horní roh

    .background-box {
        background-image: url("/background.jpg");
        background-position: center; /* nebo right top bottom */
    }

Obrázek opakující se jen jedenkrát

    .background-box {
        background-image: url("/background.jpg");
        background-repeat: no-repeat;
    }

Obrázek ve středu přizpůsobený velikosti stránky bez opakování

    .background-box {
        background-image: url("/background.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }