Fvwm - IV

19. 11. 2004 | Petr Bravenec | Recenze | 9504×

Pokročilejší konfigurace. Tentokrát o vylepšování vzhledu. Barevné přechody, tlačítka a v menu pozadí, obrázky a ikonky.

Úvod

I když jsem v předchozím díle našeho seriálu o fvwm psal něco málo o modulech a vy jste jistě zvědaví na dobrodružství modulů FvwmPager, FvwmButtons a jejich přátel, vrátím se dnes k bezmodulové konfiguraci. Budu vám vykládat o barevných obrázcích, přechodech, knoflících a dalších pokročilejších nastaveních.

V předchozích dílech jsme se orientovali spíše na funkční nastavení fvwm, dneska se budeme věnovat především nastavení vzhledu. I když mám fvwm rád a používám tento okenní manažer už dlouho, musím souhlasit s tím, že konfigurace není příliš dobře vyřešená. Zmlsaný postupy obvyklými v HTML a CSS mi přijde nastavení fvwm značně nepřehledné. S tímto způsobem nastavení mě smiřuje pouze tušení, že přilinkovat do fvwm gecko - renderovací jádro mozilly - by nejspíše udělalo z fvwm jeden z nejnenažranějších okenních manažerů.

Barevné pozadí v menu

Barevná pozadí v menu nemají žádný praktický význam, ale je to nejsnazší způsob, jak přizdobit vzhled fvwm. Pro použití barevných přechodů nebo obrázků je samozřejmě vhodná lepší grafická karta a monitor, protože třeba na starším notebooku s 32 tisíci barvami nevypadají obvykle jednobarevné přechody příliš dobře a na obrazovce s 265 barvami nemusí být menu čitelné vůbec.

Nejjednodušším nastavením může být jednobarevná plocha:

MenuStyle * MenuFace Solid lightblue

Trochu složitější je obrázek na pozadí. Obrázek by měl být ve formátu xpm. Aby nevznikaly nehezké přechody, měl by být obrázek dlaždicovatelný. To s sebou může přinést mírné komplikace při jeho tvorbě, ale když už je obrázek hotový, je jeho přidání do menu stejně triviální jako vybarvení menu barvou:

MenuStyle * MenuFace TiledPixmap tykev.xpm

V druhém díle tohoto seriálu jsem uváděl vzorový konfigurační soubor. V konfiguraci byly použité jednoduché barevné přechody:

MenuStyle * MenuFace DGradient 128 1 #bebede 50 #a8a8b8 50 #e0e0ff

Něco málo o gradientech - barevných přechodech

Gradienty lze použít na více místech fvwm - v menu, titulcích, v knoflících oken. Fvwm zná několik typů gradientů:

• VGradient - vertikální barevný přechod
• HGradient - horizontální barevný přechod
• DGradient - diagonální gradient z horního levého rohu do pravého dolního rohu
• BGradient - diagonální gradient z dolního levého rohu do pravého horního rohu
• SGradient - vycentrovaný čtvercový gradient
• CGradient - vycentrovaný kruhový gradient
• RGradient - vycentrovaný radarový kruhový gradient
• YGradient - barevný přechod ve stylu Jing&Jang

Každý z uvedených typů gradientů lze nakonfigurovat jako lineární či nelineární. U jednoduššího lineárního gradientu se uvádí pouze počet barev v barevném přechodu, počáteční a koncová barva:

DGradient 128 black white

O cosi komplikovanější je nelineární gradient, ve kterém se může uvést libovolný počet barev. Stejně jako lineární gradient začíná definice počtem barev. Následuje počet segmentů, počáteční barva, relativní délka a koncová barva segmentu. Dále může následovat libovolný další počet segmentů (vždy s uvedením relativní délky a barvy):

DGradient 128 2 #bebede 50 #a8a8b8 50 #e0e0ff

V příkladu výše jsou nadefinované dva segmenty, každý zabírá v celém gradientu 50 %. Pokud bychom přidali další segment o délce 50, každý ze segmentů by zabíral třetinu (50 jednotek z celkového součtu všech délek, ze 150).

Obrázky v menu

Jakmile máme menu vyzdobená barevnými gradienty, že až oči přecházejí, můžeme pokračovat ve výzdobě fvwm dále. Jak je zvykem v jiných prostředích, lze i ve fvwm doplnit menu o boční obrázek. Dumal jsem nad vhodným tématem na ukázku - chvíli jsem si hrál s perem a ze všech pokusů se mi nakonec líbil nejvíce styl Mathé, inspirovaný čajovnou na konci trati. Dodatečně jsem zjistil, že se to barevně trochu podobá Windows 98 (a možná i dalším). Obrázek by měl být opět ve formátu xpm.

Pro dosažení kýženého efektu lze postupovat dvěma cestami. Prvou z nich je nastavení obrázku přímo v definici menu. Vše, co je v názvu menu příkazu AddToMenu uzavřeno mezi znaky @ (zavináč), považuje fvwm za jméno souboru s obrázkem. Obrázek mathe2.xpm je sice poměrně vysoký, ale i tak stačí pouze na kratší menu. Jako obrázek se může použít i malá, jednoduchá ikona. Pokud chceme mít obrázek na jiném barevném pozadí při jakékoli velikosti menu, je třeba definovat i barvu pozadí - za její definici se považuje vše, co je uzavřeno mezi znaky ^ (stříška). Takto můžeme nastavit vzhled jednoho konkrétního menu:

AddToMenu RootMenu@mathe2.xpm@^#030860^
+ " **** Hlavní menu ****"    Title
+ ""              Nop
+ " Terminál"     Xterm-local

Pokud máme větší počet menu s jednotným vzhledem, je lepší použít v konfiguraci příkaz MenuStyle:

MenuStyle * SideColor #030860
MenuStyle * SidePic mathe2.xpm

Očekával jsem, že fvwm mi porozumí, když doplním do konfigurace řádek MenuStyle RootMenu SidePic lapsang.xpm - jenže fvwm si s tímto zjevně neví rady. Manuál pro případ, kdy chceme použít různé obrázky pro různá menu, radí použít pro globální nastavení příkaz MenuStyle a odchylky definovat přímo v konfiguraci menu. Pokud chceme mít soustředěné všechny definice vzhledu na jednom místě, můžeme si pomoci tak, že uvedeme v konfiguraci příkaz AddToMenu pro každé menu dvakrát:

MenuStyle * SideColor #030860
MenuStyle * SidePic mathe2.xpm
AddToMenu RootMenu@lapsang.xpm@
....pokračování konfiguračního souboru...
AddToMenu RootMenu " Hlavní menu" Title 
+ " Terminál" Xterm
+ " Programy" Popup Programy

Pokud pro některá menu obrázky nechceme, ale pro všechna ostatní ano, můžeme použít ještě jiný postup (i když v takovém případě se mi zdá rozumnější definovat obrázky pro každé menu zvlášť), příkaz ChangeMenuStyle. V dalším příkladu se předefinuje vzhled menu Window-Ops a Window-Ops2. Nešťastné je, že každý styl menu je třeba definovat zcela samostatně:

MenuStyle  * fvwm, \
   Font -adobe-helvetica-medium-r-*-*-16-*-*-*-*-*-iso8859-2
MenuStyle  * MenuFace DGradient 128 2 #bebede 50 #a8a8b8 50 #e0e0ff
MenuStyle  * SidePic mathe2.xpm
MenuStyle  * SideColor #02075f
MenuStyle  BezObrazku fvwm, \
   Font -adobe-helvetica-medium-r-*-*-16-*-*-*-*-*-iso8859-2
MenuStyle  BezObrazku \
   MenuFace DGradient 128 2 #bebede 50 #a8a8b8 50 #e0e0ff

...definice menu...
...a na konci, až jsou menu vytvořená...

ChangeMenuStyle BezObrazku Window-Ops Window-Ops2

Pro zájemce nakonec přiložím obrázky použité v příkladech, mathe2.xpm a tykev.xpm.

Ikonky v menu

V menu lze svázat obrázky přímo s jednotlivými položkami v menu. Podobně jako sloužil znak @ pro připojení obrázku k celému menu, slouží znaky * a % k připojení obrázku k jedné položce menu. Procentem se označují ikonky, které jsou vložené přímo v řádku společně s popisem položky v menu. Taková ikonka by měla být dostatečně malá, třeba 16x16 pixelů. Hvězdičkami se označují ikonky, které se v menu zobrazují nad příslušnou položkou:

+ Calculator*xcalc.xpm* Exec exec xcalc
+ Calculator%xcalc.xpm% Exec exec xcalc

Nastavení titulku okna

Podobně jako menu lze nastavit i titulky oken a knoflíky v titulcích:

TitleStyle  LeftJustified
TitleStyle  ActiveUp   DGradient 128 2 #bebede 50 #a8a8b8 50 #e0e0ff
TitleStyle  ActiveDown DGradient 128 2 #bebede 50 #a8a8b8 50 #e0e0ff
TitleStyle  InActive   HGradient 128 2 #8e8e9e 50 #787888 50 #a8a8b8
ButtonStyle All -- UseTitleStyle

Dekorace oken jsou v příkladu nastavovány podle toho, jestli je okno aktivní nebo ne. Aktivní okna mají v naší ukázkové konfiguraci dekorace a titulek světlejší. Narozdíl od typického chování MS Windows je ve fvwm možné, aby bylo okno aktivní, i když je utopené pod ostatními okny. Vzhled takového okna je možné také nastavit zvlášť. Knoflíky v titulcích okna jsou v příkladu nastavené tak, aby měly stejný styl jako ostatní dekorace okna.

A nakonec užitečný příklad - styl Licq

V poslední době se mi podstatným způsobem rozrostla velikost seznamu v ICQ. Protože okno začalo zabírat příliš velkou plochu obrazovky a jednoduchý výchozí styl se mi příliš nelíbíl, nastavil jsem si v Licq skin "Thomas" a pokusil se přizpůsobit styl fvwm obsahu okna Licq.

Style * NoButton 3
AddToDecor icq
+ TitleStyle   LeftJustified
+ TitleStyle   ActiveUp   Solid #192050 -- flat
+ TitleStyle   ActiveDown Solid #192050 -- flat
+ TitleStyle   InActive   Solid #192050 -- flat
+ ButtonStyle 3 17 \
    20x20@1 30x20@1 50x40@1 70x20@1 80x20@1 80x30@0 \
    60x50@0 80x70@1 80x80@0 70x80@0 50x60@0 30x80@0 \
    20x80@0 20x70@0 40x50@1 20x30@0 20x20@1
+ ButtonStyle 3 -- UseTitleStyle Flat
Style "Licq (*)" UseDecor icq, NoHandles, BorderWidth 0
Style "Licq (*)" NoButton 1, NoButton 2, Button 3, NoButton 4
Style "Licq (*)" HilightFore #d0d0d0, ForeColor #a0a0a0
Style "LicqWharf" NoTitle, NoHandles, BorderWidth 0
Mouse 0 3 A Close

Příkazem AddToDecor vytvořím nový styl dekorací a pojmenuju jej icq. Parametrem flat okennímu manažeru sdělují, že titulek nemá mít stínované okraje, nebude se tedy jevit plasticky - bude plochý.

Trochu bližší vysvětlení si žádá příkaz ButtonStyle. Ve fvwm se tvoří tlačítka zhruba dvěma způsoby - jednak se dají tlačítka vytvářet jako bitmapy a jednak jako vektorové obrázky. Právě druhý způsob je použitý ve fvwm jako výchozí. Kdysi dávno, když jsem si začínal hrát s fvwm a neměl jsem přístup na internet - a kdoví, jestli vůbec existovala nějaká domácí stránka fvwm - jsem se snažil pochopit vektorovou grafiku fvwm. Dneska si šetřím práci a knoflíky vytvářím metodou cut'n'paste z hotových knoflíků na domácích stránkách fvwm. Pokud by vám přesto nevyhovoval žádný z hotových dostupných knoflíků, najdete popis vektorové grafiky fvwm v manuálové stránce.

Do fvwm lze snadno přidat nové knoflíky tak, že na ně pověsíte nějakou akci příkazem Mouse. Knoflíky jsou rozlišené svým číslem. Knoflík číslo jedna je úplně vlevo, knoflík číslo dva je úplně vpravo, trojka je opět nalevo (blíže ke středu), čtyřka je napravo a tak dál. V ukázkové konfiguraci ve druhém díle seriálu jsou použité pouze knoflíky 1, 2 a 4. Pro Licq jsem vyrobil i knoflík 3, namaloval do něj křížek a pověsil na něj akci Close - zavření okna. Knoflík se chová a vypadá stejně jako zavírací knoflík úplně vpravo v oknech systému MS Windows. Aby se nový knoflík nezobrazoval v ostatních oknech, když je na něj pověšena akce Close, je nutné ještě před vytvořením stylu Licq zakázat zobrazování knoflíku číslo tři: Style * NoButton 3. Podobně jsou zakázané ve stylu Licq všechny ostatní knoflíky kromě toho našeho.

Výsledek si můžete prohlédnout na obrázku:

Na závěr

Suplovat manuálovou stránku fvwm je nadlidský úkol. Snažím se zde pouze ukázat možnosti fvwm a naznačit cesty, kterými lze postupovat při konfiguraci. Zájemce o podrobnější informace opět musím odkázat na manuálovou stránku a ukázkové konfigurační soubory přibalené k fvwm. Seriál ještě nekončí. Příště zkusím navázat na předchozí díl a říci něco bližšího o virtuálních obrazovkách a o modulech FvwmButtons, FvwmPager a FvwmBacker.

       

Komentáře

[Vlastimil Ott]

Pěkně napsané, především bych nejradši začal konfigurovat, ale ještě si počkám.

Jenom k těm gradientům - existuje nějaký, který není odpozující? Dejme tomu, že ten u licq není tak hrozný, ale to je poprvé, co takový vidím.

[David Ondřich]

Modrá (většinou) vypadá dobře - ostatně není náhoda, že značná část barevných GUI, která jsem kdy viděl, obsahovala nemalou složku modrých barev. Asi to souvisí s tím, že modrou barvu umějí monitory (jak CRT, tak LCD) docela dobře ukazovat. A taky s tím, že člověčí oko nemá na jemné odstíny modré moc dobrý odhad, takže spousta jemných rozdílů většině lidí splývá.

Osobně používám přechod z #5353a8 do #002154. Anebo, to se taky většině lidí líbí, přechody z modré do černé - taková modřená ocel...

[Zdeněk Štěpánek]

Zdravim

Windows XP jsou modre az dost, myslim ze s modrou se musi opatrne, mam rad modra-seda a obcas vypada pekne modra-cervena.

Nicmene jsem se stejne nedozvedel jak udelat ty tlacitka na plose jako jsem mel v litestepu, proste poslepovat hory bitmap vedle sebe a navesit na ne nejaky akce, nutnosti je abych mohl ovladat mizeni a zobrazovani tech ikon on the fly, nevyzaduji zmenu pozic.

Zdenek

[vol0da]

Pomocou modulu FvwmButtons mozete spravit tlacitka ake len chcete. Vsetko je pekne rozpisane v manualovej stranke, pripadne sa pozrite na hotove konfiguraky. Ako zdroj by som Vam odporucil fvwm-themes.sourceforge.net , hlavne odkazy v casti links.

[Petr Bravenec]

FvwmButtons plánuju sepsat v dalším díle.

[petr neptun]

ale mne prijde ze to porad vypada dost hrozne :))) jakoze naskinovany icewm nebo obycejny pekwm vypada lip a rychly+maly je stejne, tak proc? :) ale vim ze fvwm je vic geek, takze asi proto... /OT

[tdx]

Vím, že tu zas budu kamenován, ale jestli chcete vidět fvwm v poněkud elegantnějším hávu, zavítejte na www.lynucs.org a dejte si vyhledat příslušné screenshoty.

[petr neptun]

hm, tak mas pravdu, jde to naskinovat hezky - treba http://www.lynucs.org/index.php?screen_type=1&screen_id=1100909396413a3dea2ea63&m=screen je fakt nadhera!!! :) tak treba se k tomu v tomhle clanku taky doberou, protoze to kde to je ted (4.dil?) je zatim nic moc... :)

[Petr Bravenec]

No jo, je to hezké. Ale já bych to měl na ploše odhadem půl dne. Já s počítačem pracuju a fvwm mám před sebou takových deset hodin denně. V tomhle bych se špatně orientoval. Mě vadí už i kontrastnější nebo světlejší obrázek na pozadí. Takže tímto směrem se další díly ubírat nebudou.

[Robert Krátký]

Graficky je to sice pěkný počin, ale pochybuji, že by se v takovém prostředí někdo dokázal soustředit na práci. Všechna ta průhlednost... A ještě navíc pětinu desktopu zabírají různá udělátka (tipuju Karamba...).

[tdx]

Jsou i střízlivější případy, např. http://www.lynucs.org/index.php?screen_type=1&screen_id=182730852941a07d183bb49&m=screen. A všechny jsou mnohem estetičtější, než to, to tu bylo dosud prezentováno.

[Vaclavp]

Zajimalo by mne, jakym zpusobem se da vytvorit ten informacni radek na desktopu dole... Vite nekdo ?

[Mortal]

...a na obrazovce s 265 barvami nemusí být menu čitelné vůbec...