Archivio

Posts Tagged ‘Xfwm4’

Xfwm4: modificare tema

19 Ottobre 2019 Commenti chiusi

Xfwm4, ovvero il window manager nativo di Xfce4, utilizza immagini in formato xpm ed un file di testo, per le altre opzioni di configurazione (themerc).
Come esempio di “theming”, modifichiamo il button close nella titlebar della finestra (in alto a destra) in modo che assuma la
colorazione rossa, quando il puntatore del mouse ci passa sopra.
Per fare questo, basterà modificare il file xpm corrispondente a quel pulsante.

Per prima cosa facciamo una copia del tema xfwm4 che ci interessa modificare, perchè non è mai una buona idea modificare i file originali; nel mio caso il tema in questione è Greybird.
Apriamo quindi un terminale e diamo i comandi per la copia:

banco@banco-desktop:~$ sudo cp -r /usr/share/themes/Greybird /usr/share/themes/GreybirdCustom

Il nome GreybirdCustom, indica il nostro tema che sceglieremo dopo aver effettuato le modifiche.

Ora dobbiamo identificare quale oggetto viene coinvolto dalla modifica.
Per prima cosa facciamo una distinzione

– Active Window e Inactive Window

Come da titolo, una window può essere attiva (active) e non attiva (inactive), pertanto quando cercheremo una parte di finestra, dovremo specificare anche se active o inactive, es:

title-1-active.xpm e title-1-inactive.xpm

– TitleBar

La titlebar della window è formata da 7 pixmaps per la active window:

top-left-active.xpm: raccordo in alto a sinistra


title-1-active.xpm
title-2-active.xpm
title-3-active.xpm
title-4-active.xpm
title-5-active.xpm

riguardano la titlebar

top-right-active.xpm: raccordo in alto a destra

e i relativi per la inactive window

top-left-inactive.xpm: raccordo in alto a sinistra
title-1-inactive.xpm
title-2-inactive.xpm
title-3-inactive.xpm
title-4-inactive.xpm
title-5-inactive.xpm
top-right-inactive.xpm: raccordo in alto a destra

Per modificare il testo della titlebar, quindi il colore, l’ombra e l’allineamento,
sarà necessario editare il file themerc.

– SideBars e Bottom

I cosiddetti lati della window, sono identificati da 2 pixmaps per parte, a sinistra:

left-active.xpm: lato sinistro
bottom-left-active.xpm: raccordo con il bottom bar

a destra:

right-active.xpm: lato destro
bottom-right-active.xpm: raccordo con il bottom bar

tra i due raccordi bottom-left-active.xpm e bottom-right-active.xpm, risiede il:

bottom-active.xpm

che verrà ripetuto fino a riempire la lunghezza della bottom bar.
Come si può notare dall’immagine del top-left-active, top-right-active, nel tema di riferimento Greybird, i lati sono minimi, infatti sono identificati da un unico pixel in trasparenza. Tali sezioni sono identificate dal file xpm:

/* XPM */
static char * <xpm_var_name>[] = {
"1 1 1 1",
" 	c #939393",
" "};

I relativi pixmaps dedicati alla inactive window.

– Buttons

Xfwm4 può utilizzare fino a 6 action-buttons:

stick
menu
shade
hide
maximize
close

Gli stati di questi bottoni sono 4:

active: aspetto del bottone nella active window
inactive: aspetto del bottone nella inactive window
prelight: aspetto del bottone quando il puntatore del mouse ci passa sopra
pressed: aspetto del bottone quando viene premuto

Alcune caratteristiche dei bottoni, come gli offset o la spaziatura tra essi, sono settabili, come per
i testi, nel file themerc, risiedente nella stessa dir dei pixmaps.

Ad esempio il file themerc di Greybird è:

active_text_color=#686868
active_text_shadow_color=#ececec
inactive_text_color=#bbbbbb
inactive_text_shadow_color=#ececec
title_shadow_active=true
title_shadow_inactive=true
full_width_title=true
title_vertical_offset_active=2
title_vertical_offset_inactive=2
button_offset=4
button_spacing=2
shadow_delta_height=2
shadow_delta_width=0
shadow_delta_x=0
shadow_delta_y=-10
shadow_opacity=50

Ricapitoliamo quali sono i pixmaps

Window frames:

active, inactive
top-left-active, top-left-inactive
title-1-active, title-1-inactive
title-2-active, title-2-inactive
title-3-active, title-3-inactive
title-4-active, title-4-inactive
title-5-active, title-5-inactive
top-right-active, top-right-inactive
right-active, right-inactive
bottom-right-active, bottom-right-inactive
bottom-active, bottom-inactive
bottom-left-active, bottom-left-inactive
left-active, left-inactive

Buttons:

active, inactive, prelight, pressed
menu-active, menu-inactive, menu-prelight, menu-pressed
shade-active, shade-inactive, shade-prelight, shade-pressed
stick-active, stick-inactive, stick-prelight, stick-pressed
hide-active, hide-inactive, hide-prelight, hide-pressed
maximize-active, maximize-inactive, maximize-prelight, maximize-pressed
close-active, close-inactive, close-prelight, close-pressed

Toggled Buttons:

toggled-active, toggled-inactive, toggled-prelight, toggled-pressed
shade-toggled-active, shade-toggled-inactive, shade-toggled-prelight, shade-toggled-pressed
stick-toggled-active, stick-toggled-inactive, stick-toggled-prelight, stick-toggled-pressed
maximize-toggled-active, maximize-toggled-inactive, maximize-toggled-prelight, maximize-toggled-pressed

L’obbiettivo iniziale era di colorare di rosso il close button della window, quando il puntatore del mouse ci passa sopra. Il pixmap interessato sarà:

close-prelight.xpm

Apriamo con un editor di testo il file suddetto:

sudo mousepad /usr/share/themes/GreybirdCustom/xfwm4/close-prelight.xpm

Il contenuto sarà il seguente:

/* XPM */
static char * close_prelight_xpm[] = {
"20 24 8 1",
" 	c None",
".	c #939393",
"+	c #FFFFFF",
"@	c #DEDEDE s active_color_2",
"#	c #4B4B4B",
"$	c #666666",
"%	c #E5E5E5",
"&	c #8B8B8B",
"....................",
"++++++++++++++++++++",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@##@@@@##@@@@@@",
"@@@@@@$$#@@#$$@@@@@@",
"@@@@@@%$$##$$%@@@@@@",
"@@@@@@@%$$$$%@@@@@@@",
"@@@@@@@@&$$&@@@@@@@@",
"@@@@@@@#$$$$#@@@@@@@",
"@@@@@@#$$%%$$#@@@@@@",
"@@@@@@$$%@@%$$@@@@@@",
"@@@@@@%%@@@@%%@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@"};

Come sappiamo, ad ogni carattere corrisponde un colore.
Volendo mantenere lo stesso sfondo, basterà modificare i colori dei simboli: #, $, %, &.
Modificando ad esempio le stringhe inerenti i simboli precedenti, con queste tonalità di rosso:

"#	c #940e04",
"$	c #fc1303",
"%	c #c95951",
"&	c #e69b95",

…si dovrebbe ottenere l’effetto desiderato.

Ora basterà modificare il tema Xfwm4 mediante il Gestore delle Finestre, scegliendo il nostro GreybirdCustom.

Lo stesso principio può essere utilizzato per modificare la forma della finestra.
Prendiamo ad esempio il top-left-active.xpm, che per la versione default di Greybird è così costituito:

/* XPM */
static char * top_left_active_xpm[] = {
"8 24 4 1",
" 	c None",
".	c #939393",
"+	c #FFFFFF",
"@	c #DEDEDE s active_color_2",
"     ...",
"   ..+++",
"  .@@@@@",
" .@@@@@@",
" .@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@"
};

se lo confrontiamo con l’omonimo del thema Greybird compact:

/* XPM */
static char * top_left_inactive_xpm[] = {
"8 18 4 1",
" 	c None",
".	c #939393",
"+	c #FFFFFF",
"@	c #DEDEDE s active_color_2",
"     ...",
"   ..+++",
"  .@@@@@",
" .@@@@@@",
" .@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@",
".@@@@@@@"
};

Come si nota, l’altezza del pixmap è minore: 18 righe contro le 24 della versione di default.
Per l’effetto curvatura viene utilizzato il carattere ” ” (None), che indica la trasparenza.
Con queste indicazione è possibile quindi modificare il profilo della window stessa.

link utili:
file XPM

Categorie:Xfce, Xfwm4 Tag: ,

XFwm4: XPM file

18 Ottobre 2019 Commenti chiusi

Il formato XPM è il formato standard dei pixmap gestiti da X Window.
XPM salva i dati dell’immagine in formato ASCII, formattandoli sottoforma di array di stringhe in formato Standard C. La comodità quindi, è di poter editare tale immagine con un comune text-editor.

Sintassi di un file XPM

Un file XPM deve essere strutturato secondo lo schema seguente:

/* XPM */
static char * <pixmap_name>[] = {
<Values>
<Colors>
<Pixels>
<Extensions>
};

Un file XPM deve sempre cominciare con la stringa XPM delimitata dai token-comments di Standard C.

/* XPM */

Subito dopo il commento di identificazione del file XPM, troviamo la definizione dell’array, che conterrà i dati del pixmap, in formato stringa.

static char * <pixmap_name>[] = {
...
};

All’interno dell’array, quindi, troviamo la definizione e i dati riguardando il pixmap.

<Values>
<Colors>
<Pixels>
<Extensions>

– Values

La sezione definisce, con 6 integer in base 10, come sarà costituito il pixmap, dalle dimensioni al numero di colori utilizzati.
La sintassi della sezione è quindi la seguente:

<width/columns> <height/rows> <numcolors> <cpp> [<x_hotspot><y_hotspot>] [XPMEXT]

dove:
: la larghezza (numero di colonne) del pixmap;
: l’altezza (numero di righe) del pixmap;
: il numero di colori utilizzati nel pixmap;
: chars per pixel, ovvero il numero di caratteri utilizzati per ogni pixel;
[]: opzionale ed indica le coordinate del hotspot dell’immagine;
[XPMEXT]: opzionale, indica che in fondo al file, vengono utilizzate informazioni sul pixmap supplementari.

– Colors

La sezione definisce i caratteri ASCII che difiniscono i colori utilizzati nel pixmap.
Qui verranno definite tante stringhe, quanti saranno i colori utilizzati.
La sintassi per la definizione del colore è la seguente:

<character> { <key> <color> } { <key> <color> }

dove:
: il tipo di carattere utilizzato per la rappresentazione il singolo pixel, nel pixmap;
: indica il tipo di colore/dato utilizzato e può assumere uno dei seguenti valori:

– m: Mono
– s: Symbolic name
– g4: 4 livelli di Scala di Grigio
– g: Sacla di Grigio (più di 4 livelli)
– c: Color

Il symbolic name specifica i colori in fase di caricamento e non verranno quindi generati all’interno del file.
: il colorname in formato RGB esadecimale, preceduto da # (es. #FFFFFF)

Passare a una stringa None significa che il colore è trasparente.

– Pixels

La sezione contiene i dati del bitmap, ovvero un’area composte da tante righe (), dove ogni riga è composta * .
Ogni deve essere un gruppo definito nella sezione .
In sostanza viene rappresentata l’immagine tramite caratteri.

– Extensions

La sezione contiene dati supplementari e deve essere dichiarata all’inizio nella sezione con un assposito flag.
Ogni Extensions supplementare si dichiara a fine file con la seguente sintassi:

XPMEXT <extension-name> <extension-data>

oppure si indica il nome della extension e nella sottosezione, si indicano le multiple extension-data:

XPMEXT <extension-name> 
    <extension-data-1>
    <extension-data-2>

terminata la definizione delle extensions, si deve aggiungere la stringa di fine sezione:

XPMENDEXT

un esempio di chiusura sezione:

"XPMEXT extension-1 data-1",
"XPMEXT extension-2",
"data-2_1",
"data-2_2",
"XPMENDEXT"
};

Esempio

Di seguito un pixmap di un tema Xfwm4 (Greybird), per la precisione il file XPM del bottone di chiusura della titlebar:

/* XPM */
static char * close_prelight_xpm[] = {
"20 24 8 1",
" 	c None",
".	c #939393",
"+	c #FFFFFF",
"@	c #DEDEDE s active_color_2",
"#	c #4B4B4B",
"$	c #666666",
"%	c #E5E5E5",
"&	c #8B8B8B",
"....................",
"++++++++++++++++++++",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@##@@@@##@@@@@@",
"@@@@@@$$#@@#$$@@@@@@",
"@@@@@@%$$##$$%@@@@@@",
"@@@@@@@%$$$$%@@@@@@@",
"@@@@@@@@&$$&@@@@@@@@",
"@@@@@@@#$$$$#@@@@@@@",
"@@@@@@#$$%%$$#@@@@@@",
"@@@@@@$$%@@%$$@@@@@@",
"@@@@@@%%@@@@%%@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@"};

Vediamo una sezione alla volta:

/* XPM */

il commento di identificazione del file XPM

static char * close_prelight_xpm[] = {
...
};

definizione dell’array

"20 24 8 1",

sezione dove si definiscono 20 colonne (width), 24 righe (height), 8 colori, 1 carattere per pixel, nessuna coordinata hotspot e nessuna extension supplementare.

" 	c None",
".	c #939393",
"+	c #FFFFFF",
"@	c #DEDEDE s active_color_2",
"#	c #4B4B4B",
"$	c #666666",
"%	c #E5E5E5",
"&	c #8B8B8B",

Questa è la sezione dove si definiscono gli 8 colori, anticipati nella sezione precedente.
lo schema è { } { }
se prendiamo il carattere “@” che fa da sfondo alla croce (la x di chiusura della titlebar), come si nota

"@	c #DEDEDE s active_color_2",

tramite la ‘s’ si definisce, in fase di caricamento, active_color_2, cioè lo sfondo del tema gtk in uso.

infine:

"....................",
"++++++++++++++++++++",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@##@@@@##@@@@@@",
"@@@@@@$$#@@#$$@@@@@@",
"@@@@@@%$$##$$%@@@@@@",
"@@@@@@@%$$$$%@@@@@@@",
"@@@@@@@@&$$&@@@@@@@@",
"@@@@@@@#$$$$#@@@@@@@",
"@@@@@@#$$%%$$#@@@@@@",
"@@@@@@$$%@@%$$@@@@@@",
"@@@@@@%%@@@@%%@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@",
"@@@@@@@@@@@@@@@@@@@@"};

questa è la rappresentazione via carattere, del nostro simbolo.
Ad ogni carattere corrisponde un colore da noi definito e come si nota, l’area è precisamente quella definita nella sezione : 20×24.

Categorie:Xfce, Xfwm4 Tag: ,