[Zooper] Expertise 06 : Comment créer et exploiter un ICONSET

Par Buick59 - Le 12/11/14 - Affichages : 7213

Bonjour à tous,

Allons plus loin dans la série des expertises de Zooper Widget. et voici donc le chapitre sur les iconsets. :D

Les autres Expertises de Zooper
- [Zooper] expertise 01 : fontes et icônes dynamiques
- [Zooper] expertise 02 : Texte enrichi par BBCode
- [Zooper] expertise 03 : construction horloge analogique
- [Zooper] expertise 04 : déclencher des popups widgets
- [Zooper] expertise 05 : Texte enrichi par BBCode (2)

Le but de ce sujet est d'expliquer, très simplement et sans m'être inspiré d'un autre tuto, leur fonctionnement, mais également de vous montrer que vous aussi, vous pouvez créer le vôtre :)
Bien entendu, je ne rentrerai pas dans des termes trop techniques, car Zooper ne demande pas de connaissances particulières en programmation.

Définition d'un iconset:
- Un iconset ou set d'icônes en Français (oui oui, je suis bilingue :lol: ) est un ensemble d'images définies (ou bitmaps) correspondant à une variable, elle aussi définie.

Par défaut dans Zooper, vous avez des iconsets sur la batterie et sur la météo, mais sachez que vous pouvez en créer avec n'importe quelle variable.

Constitution d'un iconset:
- C'est simple, il se constitue d'un dossier d'images, nommé "icons" et d'un fichier *.xml (pour les variables), les deux étant enregistrés dans un dossier *.zip pour pouvoir être compris par l'application.

Et son fonctionnement?
- C'est encore plus simple! Dans le fichier *.xml, une variable est définie avec ses conditions, et lorsque une condition est effective, alors une image est appelée.
Concrètement, dans le cas d'un iconset météo:
- s'il y a du soleil alors une image d'un soleil est affichée
- s'il pleut alors une image de pluie est affichée
- ect,...

Bon, maintenant que j'ai expliqué grosso-modo un iconset, nous allons créer le notre, étape par étape :D

On va commencer par une chose simple, un iconset météo mais avec nos images perso.
Voilà à quoi ressemble un fichier *.xml d'une variable météo:
ImageImage

Allez, c'est parti, on commence à taper... :shock: Non, je rigole, je vais vous mâcher le travail... ;)
Voici un fichier config.xml de météo complète, avec cycle jour/nuit. Je l'ai récupéré dans un Iconset existant, mais je l'ai "nettoyé" pour vous aider au mieux. Je vous invite donc à le compléter au fur et à mesure de la lecture :)

En pratique:
Commençons par ouvrir ce fichier (qui doit toujours être nommé "config.xml"), pour cela, j'utilise Axel, un éditeur simple d'utilisation, mais rien ne vous empêche d'en choisir un autre :)

En ouvrant le fichier, on trouvera directement une série de 17 lignes en vert (0->16), ce sont des commentaires. Ils permettent de s'y retrouver facilement dans le fichier et n'influencent pas le fonctionnement, vous pouvez donc y écrire ce que vous voulez.
ImageImageImage

On descend dans le fichier, et on y trouve ceci. Là, ça devient intéressant.
Image
Dans l'ordre, on y trouve:
- Le titre de l'iconset
- La description
- Icons (dossier dans lequel se trouve les bitmaps)
- Demo: vignette dans Zooper
- Default: bitmap par défaut dans le widget (lorsque vous n'avez pas choisi "Choix du type d'icones" et "La position du widget")

Image

Maintenant que c'est fait, on continue de descendre dans le fichier.

On y trouve:
- #WCCODE#, #W0CODE#, #W1CODE#, #W2CODE#, #W3CODE#,#W4CODE# ,#W5CODE#, #W6CODE#, #W7CODE#
Image

qui représentent ceci dans Zooper
Image

Dans la foulée, vous y trouverez chaque condition météo (#MODE#=*) avec le nom de l'image appelée si la condition est valable.

La structure est la suivante:
- <!--Le commentaire--> (celui qu'on a retrouvé au début du fichier)
- <condition>
- <test> (définie la condition #MODE#=*)
- <image> (le nom du bitmap correspondant à la condition #MODE#=*. Vous le nommé comme vous le voulez, pluie.png, journée de pluie.png, mode 3.png, ect..., Ce bitmap devra se trouver dans le dossier "icons")

Vous remarquerez qu'il peut y avoir plusieurs #MODE# dans une seule condition, comme pour DRIZZLE/RAIN (Bruine/Pluie). Car en fait, ce sont des synonymes. Si j'ai une seule des deux conditions, l'image de pluie sera la même.

C'est bon, vous êtes toujours là? ....... On continue alors!! :D

Je vous rassure, on n'a pas fait le plus difficile, car si vous voulez un iconset original, il faudra faire des recherches de photos, les retoucher, les redimensionner,...voir pour les graphistes en herbe, les créer! mais je vous laisse juger sur la meilleure façon de le faire (avec un PC ou une appli dédiée). Pour ma part, j'utilise Picsart, simple question d'habitude :)

Pour vos bitmaps, je vous conseille de faire en sorte qu'ils aient tous la même taille (min 400px pour un meilleur rendu). Cela évitera les décalages dans votre widget.

Bon, ça se termine... ouf :shock:

Maintenant que vos bitmaps sont prêts, on va les regrouper dans un dossier nommé "icons". N'oubliez pas de renommer vos bitmaps en fonction de ce que vous avez configurez dans le config.xml

On récupère notre fichier config.xml, qu'on a paramétré comme il se doit.

On sélectionne le dossier icons et le config.xml et...
Image

on crée un zip en donnant le nom du titre dans le fichier config.xml
ImageImage

Une fois fait, on déplace notre zip iconset dans Zooper/Iconsets

Maintenant, c'est fini!!! nous pouvons (enfin) profiter de notre travail! :D :D :D
Image

En espérant que ce tuto aura été clair pour vous, n'hésitez pas à poser vos questions sur les iconsets, ici-même. :)
Enjoy it! :mrgreen:

La suite dans le prochain épisode ;)


14 réponse(s) -