Interfacce grafiche con Kivy 4 - Modificare colori di BoxLayout e Label e creare widget personalizzati

La scelta dei colori

Il colore nero come sfondo di BoxLayout e Label non é sempre la scelta migliore per un'interfaccia.

Nella progettazione di un'interfaccia molta importanza deve essere data alla palette di colori che si andrà ad usare poiché questi influiranno molto sulla percezione di usabilità dell'applicazione da parte dell'utente oltre che alle emozioni che egli proverà dinnanzi all'interfaccia.

Ad esempio un testo verde chiaro su uno sfondo di un verde poco più scuro renderà il testo meno leggibile, così come un testo giallo canarino su uno sfondo blu intenso provocherà un fastidio durante la lettura.

Inoltre la scelta dei colori di un'interfaccia dovrebbe essere influenzata anche dal Paese in cui l'applicazione verrà usata.

Se il colore bianco, ad esempio, viene riconosciuto in alcuni Paesi come il colore della purezza, della vita in contrapposizione al nero che viene più associato all'idea di qualcosa di cupo ed alla morte in altri Paesi il bianco è il colore del lutto.

Già queste poche nozioni dovrebbero far intuire quanto importante in realtà sia la scelta dei colori, non solo per influenzare lo stato emotivo dell'utente ma prima di tutto per rendere usabile l'applicazione.

I colori in Kivy

I colori in Kivy vengono espressi nella codifica RGBA, tuttavia non si usano valori da 0 a 255, bensì da 0 a 1.

Per convertire un colore scritto con numeri da 0 a 255 basterà dividere ogni valore per 255, ad esempio il colore rosso codificato solitamente come (255, 0, 0, 255) viene ricodificato come (1, 0, 0, 1), per la rimodifica sono stati eseguiti i seguenti calcoli: (255/255, 0/255, 0/255, 255/255).

Modificare i colori dei widget in Kivy

Per modificare i colori di sfondo di BoxLayout e Label in Kivy viene usato il comando canvas.before che crea un colore di sfondo (di default non c'è per quello risulta nero) specificando il colore con l'attributo Color e la forma con l'attributo  Rectangle per definire un rettangolo in questo caso.

Per modificare i colori del testo basterà usare l'attributo semplicemente color ed indicando il codice del colore che si vuole usare

Widget personalizzati

Se vogliamo creare molti BoxLayout o Label dello stesso colore può essere comodo definire dei widget personalizzati in modo tale da dover definire una volta sola il colore rosso per un BoxLayout (o Label), chiamare questo nuovo widget "RedBox" ad esempio ed ogni volta che servirà definire un BoxLayout rosso creare un RedBox invece di dover riscrivere ogni volta il codice per il colore di sfondo.

Questo RedBox é definibile, ad esempio, come (a meno di corretta indentazione):

# il carattere '@' indica che RedBox eredita le proprietà di BoxLayout

<RedBox@BoxLayout> :  

canvas.before:

Color: 

rgba: (1, 0, 0, 1)

Rectangle:

size: self.size

pos: self.pos

Il tutto vale anche per le Label, in questo modo è possibile personalizzare i widget da  usare in un'interfaccia non solo per quanto riguarda i colori, ma per ogni aspetto del widget da personalizzare.