Shooter: generátor promo screenshotů, co se osamostatnil

Když jsem pro TangerineUI Classic přidával nové barevné varianty, potřeboval jsem k nim pokaždé to samé: promo screenshot do README – browser okno v light i dark módu diagonálně vedle sebe, k tomu iPhone mockup, na barevně tónovaném pozadí. Ručně to skládat mě po 5 minutách přestalo bavit a tak vznikl malý Python skript schovaný hluboko v art/Screenshots/ repa.

Vykostění

Skript uměl jen jednu věc pro jeden konkrétní projekt – natvrdo zadrátované jméno souborů TangerineUI-<variant>.png, natvrdo osm barevných variant. Když jsem ale potřeboval podobné promo obrázky i pro Fedík, Katalog nebo Sloníka, vyplatilo se ho z TangerineUI vytrhnout a zobecnit. Tak vznikl Shooter – samostatný nástroj, co spustíš jako:

python3 shoot.py <jméno> --bg <barva>

a on si sám v screenshots/ najde <jméno>-light.png, -dark.png a volitelně i -iphone.png.

Jak to funguje

Trik je v tom, že se nefotí žádný skutečný telefon ani prohlížeč. Je tam jednou provždy připravená šablona – ořezané browser chrome s drop shadow a čistý iPhone rámeček s "vypáleným" stavovým řádkem a transparentní dírou uprostřed. Screenshoty se pořizují v Chrome DevTools na přesný viewport a DPR, a skript je pak jen nalepí do šablony přes Pillow.

Detektivka se stínem

Nejzábavnější část bylo lovení jednoho vizuálního bugu – v levém horním rohu okna se objevovala falešná, moc tmavá skvrna stínu, kterou jsem předtím vždycky opravoval ručně kopírováním čistého kousku pozadí přes to špatné místo. Ukázalo se, že šablona má v sobě zapečený druhý, přebytečný stín navázaný přesně na výšku toolbaru – takže se tam sčítaly dva stíny najednou. Řešení nakonec bylo přesně to, co jsem dělal ručně, jen automatizované: najít přesnou hranici (na pixel) a přelepit ji čistým pruhem pozadí zespodu.

Co z toho je

Shooter teď umí udělat promo screenshot pro libovolný web – fedik.online, katalog.zpravobot.news i Sloníka jsem jím prohnal bez jediné úpravy kódu, jen se změnou jména a barvy.