Accueil / Domotique / Domoticz / Domoticz : donnez un coup de jeune en personnalisant les icônes

Domoticz : donnez un coup de jeune en personnalisant les icônes

Les icônes proposées par défaut par Domoticz sont un peu vieillissante et ne répondent pas toujours à nos besoins. Heureusement il est possible de personnaliser certaines d’entre elles assez simplement. Cette méthode s’applique au types de dispositifs suivants : Media Player et ON/OFF

Avant de vous lancer, vous aurez besoin de savoir :

Comment créer de nouvelles icônes pour Domoticz

Domoticz n’a pas besoin d’un fichier icônes spécifique. Domoticz gère simplement deux états (ON / OFF) à partir de 2 images. Vous pourrez récupérer des fichiers images d’un autre logiciel domotique Open Source ou préparer les vôtres. Pour créer simplement de nouvelles icônes, le plus facile est de partir d’un design existant dans un format vectoriel (SVG). Par exemple sur le site internet Flaticon vous pourrez trouver de très nombreux fichiers vectoriels disponibles gratuitement (à condition de citer son auteur !). Vous pouvez également jeter un coup d’oeil du coté d‘iconfinder.

Voici ce qu’on trouve par exemple avec le mot clé garage door (et oui, il faudra un faire un peu de google transat pour trouver les bons mots clés). J’ai sélectionné les deux icônes sur la seconde ligne. La porte fermée est cochée.

flaticon recherche

Maintenant, ouvrez le panier dans le coin supérieur droit. Cliquez sur Download collection


2-flaticon-domoticz-icone-collection

Choisissez SVG

flaticon domoticz icone format svg

Si vous décidez de citer l’auteur des icônes, vous pouvez les télécharger gratuitement.

flaticon free download domoticz

Le téléchargement des fichiers débute aussitôt après (my-icons-collection). Après décompression, allez dans le répertoire svg pour y trouver les icônes récupérées.

Maintenant, nous pouvons les personnaliser avec un logiciel de dessin vectoriel. Si vous n’en avez pas, il en existe plusieurs Open Source et gratuits. Le plus facile reste le module Dessin de Libre Office (https://fr.libreoffice.org). Inskscape (https://inkscape.org/fr/) est aussi un très bon choix si vous voulez vous lancer dans des icônes plus complexes.

Lancez Libre Office et ouvrez un nouveau dessin. Ouvrez l’image vectorielle (fichier svg). Par exemple, j’ai créé sur une première page un état OFF en vert avec un libellé FERME et sur une seconde page un état ON (libellé OUVERT).

domoticz icone personnalisee libreoffice dessin vectoriel

Il ne reste plus qu’à exporter ces deux images au format PNG (Fichier -> Export…)

domoticz icone export icone png on off

Donner un nom de fichier et respectant le formalisme de Domoticz pour chaque état ON et OFF (48_On et 48_Off).

domoticz icone export png nom fichier

Dans la liste de sélection, choisissiez Pixels et saisissez 48. Terminez par OK.

domoticz icone export png 48x48 pixels

Ouvrez une connexion FTP (lisez cet article si vous ne savez pas comment faire) et déposez les deux fichiers dans le répertoire domoticz/www/images.

domoticz icone transfert images icones ftp filezilla

Installer les nouvelles icônes sur un serveur Domoticz

Maintenant que nous avons nos nouvelles icônes, il ne reste plus qu’à les installer et configurer Domoticz pour pouvoir les utiliser. Ouvrez une connexion SSH ou connectez vous à votre Domoticz directement sur le Raspberry.

Nous allons commencer par éditer le fichier switch_icons.txt qui se trouve dans le répertoire www du dossier domoticz

sudo nano domoticz/www/switch_icons.txt

Le fichier de configuration ressemble à ceci. Il comporte 19 icônes par défaut.

Light;Light/Switch;A Lamp or Switch
WallSocket;Wall Socket;Power Wall Socket
TV;Television;Television Screen
Harddisk;Hard disk;Hard disk drive
Printer;Printer;Printer
Amplifier;Amplifier;Device that controls audio
Computer;Computer Laptop;Personal Computer System
Fan;Fan;Airflow Producer
Speaker;Speaker;Audio Speaker
Generic;Generic;Generic On/Off switch
Fireplace;Fireplace;Fireplace
Water;Water;Water
Media;Media Player;Multi Media player
Alarm;Alarm;Alarm
ChristmasTree;Christmas Tree;Christmas Tree
Heating;Heating;Heating device
Cooling;Cooling;Cooling device
ComputerPC;Computer PC;Personal Computer System
Phone;Phone;Mobile Phone

Chaque ligne correspond à une icône. La ligne comprend 3 noms :

  1. Le nom du fichier image en retirant (48_On.png ou 48_Off.png)
  2. Le libellé de l’icône (affiché en gras)
  3. Un sous-libellé (une information complémentaire optionnelle)

Remarque. Vous pouvez en profiter pour traduire les libellés des icônes au passage

Le mieux est de déclarer vos icônes personnels à la fin de la liste. Domoticz construit la liste de choix en triant par ordre alphabétique les libellés du fichier de configuration. Enregistrez le fichier avec Ctrl + X puis O (ou Y).

Ajouter une nouvelle ligne de déclaration de l’icône garage

Garage;Garage;Porte de Garage

On relance le service Domoticz pour prendre en compte le nouveau fichier de configuration.

sudo service domoticz.sh restart

Actualisez également le navigateur.

Editez maintenant un dispositif, un interrupteur de type On/OFF. Dans la liste de choix, vous allez trouver votre nouvelle icône. Enregistrez la modification.


domoticz choix icone personnalisee

 

Et voilà, votre dispositif est maintenant personnalisé. Pour obtenir un meilleur aspect, il est préférable de faire des icônes avec un fond transparent.

domoticz icone affichee

Autres sources d’icônes Open Source