Tvorba skinů pro ZME

Obsah:
  1. Co je to skin
  2. Uložení a struktura skinů ZME5
  3. Popis souboru skin.ini
  4. Okna
  5. Tlačítka
  6. Ostatní komponenty



1. Co je to skin

Skin (anglicky "kůže") je běžně používaný termín pro grafické uživatelské prostředí programu, které může být odlišné od tradičního prostředí Windows. Většina programů, které používají skiny, tedy vlastní grafické uživatelské prostředí, disponuje možností toto prostředí změnit. Také Zoner Media Explorer 5 (dále jen ZME5) používá skiny.
dialog Možnosti
Skiny můžete přepínat v dialogu Možnosti (Ctrl+M) v sekci Všeobecné.
Formát skinů ZME5 umožňuje, aby si šikovný uživatel vytvořil a používal vlastní.

2. Uložení a struktura skinů ZME5

Uložení skinů ZME5
Skiny jsou uloženy ve složce Skins tam, kde je nainstalováno ZME5 (nejčastěji C:\Program Files\Zoner\Media Explorer 5\Skins\). Každému skinu odpovídá jeden soubor s příponou ZSK. Ve skutečnosti se jedná o přejmenovaný archiv ve formátu ZIP, který obsahuje 42 bitmap ve formátu PNG (komponenty prostředí) a soubor skin.ini (popis a vlastnosti skinu). Pro účely vytváření a testování skinů můžete tyto soubory umístit do složky s příponou ZSK (např. C:\Program Files\Zoner\Media Explorer 5\Skins\Test.zsk\). Pro distribuci je ovšem vhodné samotné soubory zkomprimovat do formátu ZIP a přejmenovat na příponu ZSK.


3. Popis souboru skin.ini

Soubor skin.ini je textový soubor popisující nastavení skinu. Skládá se ze tří sekcí - Info (informace o skinu), Colors (nastavení barev) a Metrics (rozměry). Řádky, které začínají znakem "středník", budou ignorovány a považovány za komentář.
Příklad souboru skin.ini
[Info]
SkinName=Světle šedý
SkinAuthor=ZONER

[Colors]
COLOR_3DFACE=196,205,216
COLOR_BTNHILIGHT=246,255,255
COLOR_BTNSHADOW=146,155,166
COLOR_BTNTEXT=0,0,0
COLOR_CAPTIONTEXT=0,41,118
COLOR_INACTIVECAPTIONTEXT=138,158,178
COLOR_INFOBK=255,243,199
COLOR_INFOTEXT=0,0,0
COLOR_WINDOW=240,244,247
COLOR_WINDOWTEXT=0,0,0
COLOR_MENU=196,205,216
COLOR_MENUTEXT=0,0,0
COLOR_HIGHLIGHT=0,0,128
COLOR_HIGHLIGHTTEXT=255,255,255

[Metrics]
TextButtonLeftSpace=10
TextButtonRightSpace=18
TextButtonPressedOffsetX=1
TextButtonPressedOffsetY=1


Následuje popis všech dostupných nastavení.

[Info]
SkinName - jméno skinu, které se zobrazí v dialogu Možnosti v seznamu skinů
SkinAuthor - autor skinu

[Colors]
Barvy se zadávají po složkách ve formátu R, G, B (Red - červená, Green - zelená, Blue - modrá). Jednotlivé složky mohou nabývat hodnoty 0 až 255. Například: 0,0,0 - černá 255,255,255 - bílá, 0,0,128 - tmavě modrá.

Pokud není některá barva zadána, použije se odpovídající barva z aktuálního barevného nastavení Windows.

COLOR_3DFACE - barva pozadí ovládacích prvků
COLOR_BTNHILIGHT - světlá barva pro vytváření 3D prvků
COLOR_BTNSHADOW - tmavá barva pro vytváření 3D prvků
COLOR_BTNTEXT - barva textu ovládacích prvků
COLOR_CAPTIONTEXT - barva textu titulku aktivního okna
COLOR_INACTIVECAPTIONTEXT - barva textu titulku neaktivního okna
COLOR_INFOBK - barva pozadí informačních textů
COLOR_INFOTEXT - barva textu informačních textů
COLOR_WINDOW - barva pozadí okna
COLOR_WINDOWTEXT - barva textu okna
COLOR_MENU - barva pozadí menu
COLOR_MENUTEXT - barva textu menu
COLOR_HIGHLIGHT - barva pozadí vybraných položek
COLOR_HIGHLIGHTTEXT - barva textu vybraných položek

Barvy


[Metrics]
Tyto rozměry slouží pro doladění vzhledu skinu a umístění některých prvků. Všechny rozměry jsou uvedeny v obrazových bodech (pixelech). Všechny proměnné jsou nepovinné. Pokud nebudou uvedené, použije se výchozí hodnota (uvedená v závorkách).

TextButtonLeftSpace - odsazení textu tlačítek zleva (10)
TextButtonRightSpace - odsazení textu tlačítek zprava (20)
TextButtonPressedOffsetX - posun (v ose x) textu tlačítka při zmáčknutí (0)
TextButtonPressedOffsetY - posun (v ose y) textu tlačítka při zmáčknutí (0)
GalleryMenuOffset - posun začátku menu v oknech Průzkumník a Editor (10)
MainMenuStartX - začátek hlavního menu (šířka levé horní bitmapy hlavního okna)
MainCloseOffsetX - posun tlačítka "Zavřít" od konce hlavního okna (šířka pravého okraje hlavního okna minus 3 pixely)
GalleryCloseOffsetX - posun tlačítka "Zavřít" od konce v ostatních oknech (šířka pravého okraje okna minus 3 pixely)
CaptionTextOffsetX - posun textu titulku od začátku okna (šířka levého okraje okna mínus 3 pixely)

Odsazení


4. Okna

Okna ZME5 se vykreslují následujícím způsobem: nejdříve se do odpovídajících rohů vykreslí rohové bitmapy a poté se do zbývajících míst roztáhnou bitmapy, které definují hrany oken. Z toho vyplývá, že nejvhodnější pro hranové bitmapy jsou bitmapy se šířkou (resp. výškou) 1 pixel. Tím lze jednoduše vykreslit libovolnou velikost okna, bohužel nelze pro hrany oken použít opakující se vzory. Velikost okrajů oken se převezme z výšky (resp. šířky) bitmap definujících okraje oken. Například pro výšku titulkového pruhu hlavního okna se použije výška bitmapy main_top.png.

Seznam bitových map - komponent skinu
Hlavní okno
main_lefttop.png - levý horní roh
main_top.png - horní okraj (titulek)
main_righttop.png - pravý horní roh
main_right.png - pravý okraj
main_rightbottom.png - pravý dolní roh
main_bottom.png - dolní okraj
main_leftbottom.png - levý dolní roh
main_left.png - levý okraj
background.png - pozadí okna

Ostatní okna
gallery_wnd_lefttop.png - levý horní roh
gallery_wnd_top.png - horní okraj (titulek)
gallery_wnd_righttop.png - pravý horní roh
gallery_wnd_right.png - pravý okraj
gallery_wnd_rightbottom.png - pravý dolní roh
gallery_wnd_bottom.png - dolní okraj
gallery_wnd_leftbottom.png -levý dolní roh
gallery_wnd_left.png - levý okraj


5. Tlačítka

Tlačítka jsou kreslena do titulku okna. Pokud tlačítko obsahuje alfa kanál (formát PNG podporuje 8-bitový alfa kanál), jsou tlačítka kreslena transparentně na pozadí. Tlačítko se skládá ze tří stavů:
  1. Normální - normální stav
  2. "Hot" - zobrazuje se při najetí kurzorem myši nad tlačítko
  3. Zmáčknutý - zobrazuje se při stisknutí tlačítka
Tlačítka
Tyto tři stavy jsou uloženy v jedné bitmapě nad sebou ve výše uvedeném pořadí. Všechny stavy musí mít stejnou výšku a výška celé bitmapy musí být dělitelná třemi. Viz obrázek. Červené linky jsou pouze ilustrační pro oddělění jednotlivých stavů.
Tlačítka se do titulku horizontálně centrují. Mezi sousedními tlačítky není žádná mezera, kreslí se těsně vedle sebe, při návrhu tlačítek je potřeba s tímto počítat.

Tlačítka v hlavní okně
main_menu.png - Menu
navigator.png - Navigátor
preview.png - Náhled
browser.png - Průzkumník
editor.png - Editor
workspace.png - Okna
preferences.png - Možnosti
help.png - Nápověda
minimize.png - Minimalizovat
maximize.png - Maximalizovat
restore.png - Obnovit
close.png - Zavřít
Tlačítko Menu se použije, když je hlavní okno příliš úzké na to, aby se do něj vešla všechna tlačítka pro jednotlivé položky menu

Tlačítka v ostatních oknech
gallery_menu_left.png - levá část textového tlačítka menu
gallery_menu_mid.png - střední část textového tlačítka menu
gallery_menu_right.png - pravá část textového tlačítka menu
gallery_dock.png - Ukotvit
gallery_undock.png - Zrušit ukotvení
gallery_minimize.png - Minimalizovat
gallery_maximize.png - Maximalizovat
gallery_restore.png - Obnovit
gallery_close.png - Zavřít
První tři bitmapy tvoří speciální textová tlačítka. Tyto tlačítka se skladají z levé a pravé části, prostřední část se roztáhne do zbývající velikosti. Tlačítko má proměnnou velikost podle délky textu, který se do něj kreslí. Text se do tlačítka horizontálně centruje.


6. Ostatní komponenty

Následující symboly se kreslí přímo do náhledu obrázku v průzkumníkovi, pokud daný obrázek splňuje určité podmínky (např. obsahuje zvukovou poznámku). Pokud daný symbol obsahuje alfa kanál, jsou symboly kresleny transparentně na pozadí.
mark_audio.png - symbol zvuku
mark_exif_camera.png - symbol fotoaparátu
mark_exif_description.png - symbol popisu
mark_shortcut.png - symbol zástupce