50 sfumature di colore in FileMaker…

Uno dei problemi che gli sviluppatori si trovano ciclicamente ad affrontare è quello di gestire il colore di sfondo di campi o formati, per evidenziarne o differenziarne il contenuto in base a differenti criteri. 

Per risolvere il problema ci sono diverse soluzioni, ciascuna con vari pro e contro:

La formattazione condizionale: rapida e semplice, controlla molti aspetti dei campi. Il problema è che il colore e le formattazioni vanno impostate manualmente in fase di sviluppo e quindi non sono dinamiche, e non possono ad esempio variare il colore in base ai dati inseriti in un campo  (a meno di non inserire N clausole, ciascuna con un colore differente, ma risulta un lavoro immenso e comunque poco flessibile).

L’utilizzo di file monocromatici pre-impostati: vanno quindi creati i file colorati, inseriti in campi specifici e poi richiamati alla bisogna mediante calcolo. Faticoso e poco flessibile, ma sicuramente è più dinamico della formattazione condizionale, soprattutto usando EseguiSQL e la codifica base64 per richiamare i colori. 

Infine, il visualizzatore web: flessibile, gestibile, fa tutto quello che si vuole… con un piccolo difetto: nel momento in cui carica codice passa automaticamente in primo piano, non permettendo di interagire con nessuno degli oggetti, anche se nel layout sono posti al di sopra. Non esattamente gestibile come sfondo, quindi.

… o meglio 16.581.375. 

Ma vediamo di capire attraverso che parametri possiamo gestire il colore. Ci sono varie codifiche di colore che vengono usate - che che possiamo effettivamente usare - ( Esadecimale, Javascript, quadricromia, LAB, etc…) ma per semplicità ci limiteremo alla più semplice: il metodo di RGB

Questo sistema viene utilizzato in tutti i monitor per gestirne il colore: ciascun colore viene identificato da tre numeri (ciascuno con un valore da 0 a 255) relativi ai tre colori Rosso (Red), Verde (Green) e Blu (Blue): in tutto quindi 16.581.375 sfumature.

Cosa serve?

Per assegnare uno sfondo dinamico serve un quindi calcolo che raccolga i criteri colore e quindi crei una immagine sufficientemente leggera da poter essere gestita senza ritardi.
Andando a vedere le tipologie dei varii formati di immagine spicca lo splendido lavoro di Matthew Flickinger che in sostanza spiega come in una immagine GIF l’ordine dei byte è specifico, e la tabella colori è sempre nella stessa posizione. Quindi basta usare un editor di codice esadecimale per vedere ( e modificare) esattamente l'area colore di un file.

A questo punto (nella immaginifica mente di Russell Watson, che ha creato questa tecnica) scatta la scintilla del genio:

 Sarebbe splendido potersi costruire una immagine GIF “a richiesta” con i colori che vogliamo. Potrebbe essere sufficientemente piccola da essere gestibile e rapida e potremmo utilizzare le funzioni del campo contenitore per allargarla fino a coprire tutto il campo.

Ma come creare le immagini dal nulla, per giunta partendo da un astruso codice esadecimale? In questo ci vengono in aiuto le funzioni contenitore di FileMaker: in particolate HexDecode ( ), arrivata con FileMaker 16, pare fatta apposta. Anzi, _è_ fatta apposta. Dobbiamo solo capire come creare il codice esadecimale che ci serve.

Come diceva Picasso “un grande artista non copia: ruba”. Quindi utilizziamo un qualunque programma di grafica e creiamo una immagine gif, monocromatica (il colore non importa), di 16 px di lato. Poi la apriamo con un qualunque editor di testo che mostri anche i caratteri esadecimali, e avremo qualcosa del genere:

47 49 46 38 37 61 10 00 10 00 91 00 00 00 00 00 FF 00 00 FF FF FF 00 00 00 21 F9 04 09 0A 00 03 00 2C 00 00 00 00 10 00 10 00 00 02 0E 8C 8F A9 CB ED 0F A3 9C B4 DA 8B B3 3E 05 00 3B

Copiamo il testo e lo incolliamo in un qualunque editor di testo (o anche direttamente in un calcolo di FileMaker): una volta trovati i caratteri relativi al colore (evidenziati in grassetto) li sostituiamo con segnaposti relativi ai valori R, G e B, e otteniamo un codice del genere:

47 49 46 38 37 61 10 00 10 00 91 00 00 00 00 00 #R #G #B FF FF FF 00 00 00 21 F9 04 09 0A 00 03 00 2C 00 00 00 00 10 00 10 00 00 02 0E 8C 8F A9 CB ED 0F A3 9C B4 DA 8B B3 3E 05 00 3B

A questo punto il più è fatto, dobbiamo solo:

  • raccogliere i valori R,G,B
  • convertirli nei corrispondenti valori esadecimali
  • sostituirli nel codice
  • riconvertire il codice esadecimale corretto in immagine 
  • impostare il campo contenitore con l’immagine creata.

Per fare tutto questo, la cosa migliore è creare una funzione personalizzata, in cui utilizziamo i parametri per raccogliere i valori RGB, e che applicata al campo contenitore imposti il file creato come contenuto .

O magari più di una, vediamo un po:

per convertire i colori da RGB a Esadecimale possiamo usare due funzioni personalizzate specifiche (_HexF e _Hex, entrambe di Russell che operano una semplice sostituzione meccanica, disponibili in calce), presenti nel file di esempio e citate nella nostra funzione. Poi, andiamo a creare la nostra funzione:

/* simple_ColorImage ( r;g;b )
giulio villani,  pesantemente basata su _colorimage, di Russell Watson*/

Casi(
EVuoto( r  & g & b)  ; "" ;
/* se tutti e tre i parametri sono vuoti, il campo è vuoto, se no… */

Dichiara(
[
/*per prima cosa dichiariamo il nostro codice esadecimale con i marcatori*/
vGIFTemplate = "47 49 46 38 37 61 10 00 10 00 91 00 00 00 00 00 #R #G #B FF FF FF 00 00 00 21 F9 04 09 0A 00 03 00 2C 00 00 00 00 10 00 10 00 00 02 0E 8C 8F A9 CB ED 0F A3 9C B4 DA 8B B3 3E 05 00 3B " ;

/*poi i valori dei colori convertiti in esadecimale mediante funzioni personalizzate: dato che i valori possono essere solo numerici e da 0 a 255, usiamo un ulteriore dichiara che contiene un if per evitare di passare valori impropri*/
vRR = _HexF ( "00" ; 
Dichiara(t=RicavaComeNumero(R); Casi( t<0;0; t>255; 255;t)));
vGG = _HexF ( "00" ; 
Dichiara(t=RicavaComeNumero(G); Casi( t<0;0; t>255; 255;t)));
vBB = _HexF ( "00" ; 
Dichiara(t=RicavaComeNumero(B); Casi( t<0;0; t>255; 255;t)));

/* Quindi andiamo a sostituire i marcatori con i colori reali e a filtrare eventuali caratteri spurii */
vGIFHex = Filtro( 
Minuscolo( 
CercaeSost( vGIFTemplate ; ["#R" ; vRR ] ; ["#G" ; vGG ] ; ["#B" ; vBB ] ) 
) 
; "01234567890abcdef" ) 

];

/* e infine ricostruiamo il file, dando come nome i valori RGB */
HexDecode ( vGIFHex ; "color" & vRR&vGG&vBB & ".gif" )
))

Potremo quindi impostare il nostro campo contenitore con l'inserimento di un valore calcolato, ricordandoci di deselezionare l'opzione "Non sostituire il valore esistente ( se presente)". In questo modo, cambiando i parametri della funzione personalizzata, verrà creata nel campo una immagine del colore desiderato.

A questo punto, siamo all'ultimo passo: a livello di formato scheda, imposteremo nel nostro campo contenitore le opzioni “Riduci o Ingrandisci immagine per adattare” deselezionando l’opzione mantenere le proporzioni originali”. In questo caso, la nostra piccola immagine occuperà tutto il campo contenitore, non importa quano grande possa diventare, assicurando il colore di sfondo dinamico in base a quanto inserito nei nostri parametri R,G e B.

In questo modo possiamo raggiungere l'obiettivo che ci eravamo prefissati: avere uno sfondo configurabile mediante script, a cui possiamo sovrapporre altri oggetti, come campi o campi fusione, per raggiungere il nostro risultato. Questa tecnica è leggera, veloce e molto flessibile, dato che può essere utilizzata anche in liste o portali senza problemi: addirittura utilizzandola all'interno di campi multipli può essere valutata in maniera diversa per ogni ripetizione, cosa che la rende praticamente la tecnica ultima di gestione dinamica del colore in FileMaker.

Ovviamente Russell non si è fermato qui, e ha aggiunto i supporti per le altre codifiche colore.

Funzioni accessorie (per i più curiosi):

Ecco le funzioni utilizzate per la funzione principale:

/* _Hex( pNumber )
returns the hex representation of the (positive integer) number.
Note: Only numbers up to 1e332-1 can be converted.
Parameters
pNumber - any number
Returns
the hex representation of the positive integer value of the number.
2018-05-17 RW: Version 2.0 Renamed for GBS and comment improved
20120411 MrW Version 1.0v0
*/
Casi( not EVuoto( RicavaComeNumero( pNumber ) ) ;
Dichiara([
vN = Assoluto( Intero( pNumber ) ) ;
vFormula = ";¶vM = Mod( vN ; 16 ) ; vN = Div( vN ; 16 ) ; vR = Case( vN or vM or isempty( vR ) ; Middle( \"0123456789ABCDEF\" ; vM + 1 ; 1 ) ) & vR" ;
vFormula = Casi( not EVuoto( vN ) ; "
Dichiara([¶
vN=" & vN & ";¶
vR=\"\"" &
CercaeSost( vN; ["0";"A"];["1";"A"];["2";"A"];["3";"A"];["4";"A"];["5";"A"];["6";"A"];["7";"A"];["8";"A"];["9";"A"];["A";vFormula]) & "¶
];¶
vR¶
)" )
];
Valutazione( vFormula )
)
)

/* _HexF( pFormat ; pNumber )
returns the formatted hex representation of the number.
The format string is overwritten by the hex string from right to left, so if the number is too big, the result will burst the bounds of the format string.
Parameters
pFormat - a formatting string - typically "#000000" or similar
pNumber - a decimal number - typically an RGB color value
Examples
G_TX_HexF( "#000000" ; 1
256^2 + 2256^1 + 3256^0 ) -> "#010203" G_TX_HexF( "#000000" ; 1256^3 + 2256^2 + 3256^1 + 4*256^0 ) -> "1020304"
2018-05-17 RW: Version 2.0 Renamed for GBS and comment improved
20120511 MrW Version 1.0v0
*/
Dichiara([
vHex = _Hex( pNumber );
vMin = Min( Lunghezza( pFormat ) ; Lunghezza( vHex ) )
];
Sinistra( pFormat ; Lunghezza( pFormat ) - vMin ) & Destra( vHex ; vMin )
)

Se ti serve aiuto dare colore alla tua soluzione FileMaker ci trovi sul FileMaker Guru Corner, il nostro forum e nella nostra meravigliosa community Facebook FileMaker Developer Italia dove facciamo assistenza gratuitamente. Se invece hai bisogno di un preventivo per una consulenza, mandaci una email (team@fmguru.it)!




Nessuna domanda trovata.

Giulio Villani

Utilizza FileMaker dalla versione 2 (A.D. 1993), per sviluppare idee e soluzioni, e risolvere problemi. Membro della Filemaker Business Alliance, sviluppatore Certificato FileMaker su tuttele versioni a partire dalla 11, FileMaker Certified Trainer, si occupa di formazione, consulenza, sviluppo di soluzioni, con qualche incursione nell’editoria. Oltre a “Sviluppo FileMaker consapevole”, è autore di “FileMaker Pro 9 La Grande Guida” e di “FileMaker Pro 10 La Grande Guida”, entrambi editi da Mondadori Informatica, di articoli e di recensioni sulle principali riviste italiane del settore. Utilizza – con sentimenti ambivalenti – anche PHP, JavaScript, CSS/HTML, MySQL e NoSQL. Feroce capacità di analisi e problem solving.
Cerca
Prendi la corsia preferenziale e risolvi i tuoi problemi di sviluppo FileMaker!

Risorse gratuite

Guru Corner

Altri articoli di Giulio Villani

Altri articoli:
,

Ultimi articoli