Siamo arrivati alla puntata numero 6 relativamente all’integrazione di Qt e CMake. Dopo aver visto come usare CMake per inserire la versione di una applicazione sia per macOS che per Windows, ora vediamo come fare con le icone. Naturalmente questo è un argomento che non riguarda solo CMake, ma anche qmake e lo sviluppo di applicazioni in generale, ma in questo post ci focalizzeremo su come farlo usando CMake.
Ricordo che su GitHub trovate tutto il codice e le versioni per ogni post, e alla pagina CMake is the future trovate la collezione di tutte le puntate.
Che cosa è un’icona in macOS
Nel caso macOS il file con l’icona ha formato icns e si genera partendo da 10 diverse rappresentazioni della stessa icona, con risoluzioni via via crescenti, partendo da 16×16 fino a 1024×1024. Questo lo si vede bene creando un progetto con Xcode e cercando la proprietà AppIcon. Aprendo AppIcon troverete questo schema:
Posizione del file con l’icona
Se proviamo ad visualizzare il contenuto della applicazione Calculator.app, possiamo notare il file AppIcon.icns nel percorso Contents, Resources:
Provando ad aprire l’icona con l’anteprima, vediamo come in questo caso si tratti di sole 4 icone, con risoluzione crescente, partendo da 16×16 pixels, come si vede dallo sgorbio rappresentato dall’icona numero 4.
Selezionare l’icona per la nostra applicazione
Visto che la risoluzione massima deve essere 1024×1024, in genere è consigliabile cercare delle icone in formato svg, ovvero in formato vettoriale. Purtroppo questa volta non posso usare icon8, dato che non distribuisce gratuitamente icone in formato svg. Ho però trovato una valida alternativa nel sito flaticon.com.
Proviamo a cercare “satellite” sul sito www.flaticons.com o a scaricare l’icona che preferite in formato svg. Io ho scelto questa, che si chiama technology.svg
Poi mettiamo l’icona nel progetto, nella sotto cartella icons:
Naturalmente poi quando faremo la pagina “About” metteremo il riferimento all’autore dell’icona:
https://www.flaticon.com/authors/freepik
Creare icns con iconutil
Il processo di creazione del file icns prevede di usare una utility da riga di comando chiamata:
iconutil
che partendo da un set di icone le trasforma in un file icns.
Le icone devono essere in una cartella con estensione iconset e devono avere esattamente questi nomi e queste risoluzioni:
| Nome File | Risoluzione [pixel] |
| icon_16x16.png | 16 x 16 |
| icon_16x16@2x.png | 32 x 32 |
| icon_32x32.png | 32 x 32 |
| icon_32x32@2x.png | 64 x 64 |
| icon_128x128.png | 128 x 128 |
| icon_128x128@2x.png | 256 x 256 |
| icon_256x256.png | 256 x 256 |
| icon_256x256@2x.png | 512 x 512 |
| icon_512x512.png | 512 x 512 |
| icon_512x512@2x.png | 1024 x 1024 |
Script: creare .iconset
Per creare l’icona di una applicazione per macOS ci sono delle app specifiche, sia gratis che a pagamento e ci sono anche dei servizi on-line. Ma visto che Apple fornisce tutto il necessario, ho preso l’occasione per imparare a fare uno script, unendo vari suggerimenti trovati in rete.
Creo lo script file con TextEdit, impostando il formato “Plain Text” e poi lo salvo nella cartella icons, con estensione sh, chiamandolo:
Create-macOS-icns.sh
Editiamo il file inserendo l’intestazione #!/bin/bash, una variabile con il nome del progetto e il comando per creare la cartella con il set di icone partendo dal nome del progetto:
#!/bin/bash
PROJECT_NAME=CMakeWidgetProject
ICON_SET=${PROJECT_NAME}.iconset
mkdir ${ICON_SET}
Dopo aver salvato, controlliamo se questo primo pezzetto funziona: apriamo il terminale puntando alla cartella icons tramite “tasto destro”, “Services”, “New Terminal at Folder”, oppure tramite il terminale e con il comando cd arrivate fino alla cartella icons:
Ora dobbiamo eseguire il comando chmode per autorizzare Create-macOS-icns.sh ad essere eseguito come script:
chmod 755 Create-macOS-icns.sh
Per finire la prova invochiamo il comando dalla shell bash, usando la sintassi:
./Create-macOS-icns.sh
Se tutto ha funzionato, vedrete una cartella CMakeWidgetProject.iconset.
Script: da svg a png con qlmanage
Creiamo la prima icona, quella 1024×1024 facendo la conversione dal formato vettoriale svg al formato png.
Per farlo usiamo il comando “quick look” che è quello usato da finder per generare le anteprime e che si chiama qlmanage, passando i seguenti parametri:
- -t per generare il thumbnail
- -s per specificare che vogliamo ricampionare a 1024×1024 pixel
- -o per salvare il thumbnail creato nella cartella del documento originale
- per finire serve il nome del file con l’immagine da convertire.
Ecco il codice, dove ho messo in ICON_NAME il nome del file di partenza, in modo da non doverlo ripetere nel resto del codice:
ICON_NAME=technology.svg qlmanage -t -s 1024 -o . ICON_NAME
Salviamo lo script ed eseguiamolo nuovamente per creare il file:
technology.svg.png
Script: ricampionare con sips
Il comando sips ovvero “scriptable image processing system” dovrebbe essere più adatto a cambiare la risoluzione dell’immagine, mantenendo la migliore qualità possibile, mentre qlmanage è ottimizzato convertire moltissimi tipi di file, tra cui SVG in immagini nel modo più veloce possibile. Non ho fatto dei test, diciamo che mi fido e basta!
Invoco il comando 10 volte avendo cura di impostare:
- -z per specificare larghezza e altezza dell’immagine risultante
- il nome del file da ricampionare (che è il risultato di qlmanage)
- il nome del file di destinazione.
Il tutto lo costruisco usando le variabili definite in precedenza, in modo da rendere lo script facilmente adattabile a futuri progetti.
sips -z 16 16 ${ICON_NAME}.png --out ${ICON_SET}/icon_16x16.png
sips -z 32 32 ${ICON_NAME}.png --out ${ICON_SET}/icon_16x16@2x.png
sips -z 32 32 ${ICON_NAME}.png --out ${ICON_SET}/icon_32x32.png
sips -z 64 64 ${ICON_NAME}.png --out ${ICON_SET}/icon_32x32@2x.png
sips -z 128 128 ${ICON_NAME}.png --out ${ICON_SET}/icon_128x128.png
sips -z 256 256 ${ICON_NAME}.png --out ${ICON_SET}/icon_128x128@2x.png
sips -z 256 256 ${ICON_NAME}.png --out ${ICON_SET}/icon_256x256.png
sips -z 512 512 ${ICON_NAME}.png --out ${ICON_SET}/icon_256x256@2x.png
sips -z 512 512 ${ICON_NAME}.png --out ${ICON_SET}/icon_512x512.png
sips -z 1024 1024 ${ICON_NAME}.png --out ${ICON_SET}/icon_512x512@2x.png
Salviamo lo script ed eseguiamo. Il risultato sono 10 file di immagini png, con dimensione crescente e con il nome predefinito.
Script: da iconset ad icns con iconutil
Ed eccoci al comando finale! Convertiamo la cartella con il set di icone usando iconutil. Come argomento impostiamo:
- -c per indicare che voglio convertire un iconset
- icns che rappresenta il formato da generare
- ${ICON_SET} rappresenta il percorso in cui ho creato il mio iconset.
Ecco il comando
iconutil -c icns ${ICON_SET}
Salvare lo script ed eseguire per ottenere finalmente, dopo tanto lavoro, il file icns che contiene le icone per la nostra applicazione.
Inserire l’icona nel bundle
Ci sono 3 operazioni da fare:
- Impostare il nome dell’icona in Info.plist
- Aggiungere l’icona al progetto
- Fare in modo che l’icona venga copiata dentro Contents\Resources
Iniziamo con la prima attività, ovvero scriviamo dentro ad info.plist, il nome del file dell’icona valorizzando la variabile MACOSX_BUNDLE_ICON_FILE
set(MACOSX_BUNDLE_ICON_FILE CMakeWidgetProject)
Attenzione: solo il nome del file con l’icona, senza l’estensione icns!
La seconda operazione prevede invece di aggiungere il file dell’icona al progetto. Iniziamo creando una variabile ICON_FILE che contiene il percorso del nostro file icns, calcolato partendo da MACOSX_BUNDLE_ICON_FILE.
set(MACOSX_ICON_FILE
${CMAKE_CURRENT_SOURCE_DIR}/icons/${MACOSX_BUNDLE_ICON_FILE}.icns)
Dopo aver inserito questo file nel comando add_executable () lo possiamo anche vedere dentro il progetto in Qt Creator:
add_executable(CMakeWidgetProject
...
${MACOSX_ICON_FILE}
)
Ecco il risultato:
E ora veniamo alla terza operazione, ovvero alla copia del file dell’icona nello “application bundle”, nella posizione:
CmakeWidgetProject.app\Contents\Resources
L’operazione non è automatica, ma si fa specificando una proprietà per il file MACOSX_ICON_FILE, usando il comando set_source_files_properties():
set_source_files_properties(${MACOSX_ICON_FILE} PROPERTIES
MACOSX_PACKAGE_LOCATION "Resources")
In pratica diciamo a CMake di impostare il percorso di destinazione dentro alla cartella Resources, nel percorso MACOSX_PACKAGE_LOCATION, per il file MACOSX_ICON_FILE.
Bene, ora se compiliamo, vedremo la nostra applicazione con la nuova icona.
E dopo averla lanciata l’icona comparirà anche nella barra delle applicazioni:
Controlliamo il tutto
Qualora qualcosa non funzioni, si devono controllare due cose. Per prima cosa il percorso dell’icona nello “Application Bundle”:
Se questo è ok, non resta che controllare che il nome dell’icona si correttamente scritto in Info.plist, solo il nome del file, senza estensione o percorsi:
Conclusioni
Anche questo step, abbastanza pesante, è stato fatto. Cosa ci aspetta nel prossimo post? Ovvio inserire l’icona per l’applicativo windows.
Vi ricordo che potete trovare il codice su GitHub.
Inoltre, se volete ricevere aggiornamenti, potete iscrivervi anche alla mailing list.
Newsletter QtQB
