Symboles

Tous les symboles peuvent être utilisés à différents endroits dans la visualisation. Il est ainsi possible de les définir comme variable ou texte.

Pour afficher un symbole sur la visualisation, celui-ci est déclaré directement dans le texte au moyen du tag [icon:SYMBOLPFAD]. Le chemin du symbole peut être copié depuis la bibliothèque de symboles à l'aide d'un clic droit ou avec CTRL+C. Si possible, il est recommandé de choisir uniquement les Material Symbols afin que le style de la visualisation reste cohérent.

Bibliothèque De Symboles

Tous les symboles disponibles peuvent être consultés et recherchés sous le menu contextuel Visualisation ▸ Symboles. Il est également possible d'importer un ensemble de symboles personnalisé dans la bibliothèque. La procédure est expliquée plus loin.

Remarques : Le nom affiché dans la liste des symboles n'est pas identique au chemin du symbole. Si aucun ensemble de symboles n'est spécifié dans le chemin, l'ensemble Glyphicons est utilisé par défaut.

Le filtre dans la bibliothèque de symboles recherche également les tags enregistrés. Si ce comportement n'est pas souhaité, le filtre peut commencer par un = pour rechercher uniquement dans les noms.

Ensemble De Symboles Material Symbols (Standard)

Cet ensemble de symboles est entièrement dynamique et le style des symboles est automatiquement configuré en fonction du design de la visualisation. De plus, un symbole rempli est automatiquement utilisé lorsque le symbole doit être actif. Cependant, tous les symboles n'ont pas une variante remplie.

Les symboles sont automatiquement arrondis si le rayon du bouton est supérieur ou égal à 16 pixels. Si le rayon est égal à 0px, les symboles nets sont utilisés. Dans l'éditeur, les symboles normaux sont toujours utilisés.

Remarque : Il est recommandé d'utiliser l'ensemble de symboles "Material Symbols" pour concevoir une visualisation uniforme.

Ensemble De Symboles Material Animated

Certains symboles de Material Symbols ont été animés pour représenter des valeurs. Ces symboles n'ont qu'une animation avec le symbole de la structure. Lors de la sélection, d'autres variables sont alors activées.

Ensemble De Symboles Philips Hue

Les symboles de Philips Hue peuvent être utilisés librement si l'interface Hue est utilisée. De plus, il existe un ensemble de symboles Hue supplémentaire de la communauté Home Assistant HASS. Vous trouverez plus d'informations à la fin de ce chapitre.

Ensemble De Symboles Météorologiques

Cet ensemble de symboles affiche les symboles météorologiques de la visualisation. Ceux-ci sont pris en charge sans couture par diverses interfaces. Voir le chapitre ci-dessous Icônes Météorologiques.

Ensemble De Symboles Legacy (obsolète)

L'ensemble de symboles Legacy contient tous les symboles de l'ancienne visualisation. Le style d'affichage de la nouvelle interface reste le même. Les symboles ne doivent plus être utilisés, car leur représentation n'a pas été optimisée pour la nouvelle interface.

Divers anciens symboles sont toujours animés :

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Symboles Cachés

Il existe également des symboles cachés pour la visualisation. Ceux-ci sont expliqués plus en détail dans les chapitres suivants.

Pour appeler les symboles, seul un préfixe d'URL est nécessaire.

Ensembles De Symboles Personnalisés

Il est possible d'importer un ensemble de symboles personnalisé dans le projet. Chaque ensemble de symboles doit être préparé sous forme de fichier ZIP. Quelques données d'exemple peuvent être téléchargées ici :

Conseil Pro : Après un import réussi, vous pouvez exporter l'ensemble de symboles en tant que .antobj pour simplifier l'importation. Pour ce faire, cliquez avec le bouton droit sur un ensemble de symboles et sélectionnez Export.

Les règles suivantes définissent la structure et les exigences d'un ensemble de symboles. Veuillez les lire attentivement et les suivre précisément.

Règles

  • Préfixe
    • Ne peut contenir que _, a–z et 0–9.
    • Les majuscules sont automatiquement converties en minuscules.
    • Les noms réservés comme sys, src ou doc sont invalides.
    • Doit commencer par une lettre (a–z). Les chiffres seuls ne sont pas autorisés.
    • Les tirets de soulignement en fin de mot (_) sont supprimés.
    • Doit avoir une longueur minimale de 3 caractères.
    • Les tirets de soulignement multiples (__) sont réduits à un seul.
  • Noms De Symboles
    • Sont automatiquement convertis en minuscules.
    • Les caractères autorisés sont -, _, a–z et 0–9.
    • Les noms trop longs et les préfixes doivent être évités.
    • Un préfixe doit être unique et ne doit être utilisé qu'une seule fois.
    • Si un symbole a le même nom et le même préfixe qu'un symbole système, il peut remplacer ce dernier.
  • Restrictions De Fichier
    • Taille maximale du fichier après nettoyage : 10 kB. Les fichiers plus volumineux sont rejetés.
    • Les fichiers SVG doivent être nettoyés :
      • Les sauts de ligne sont automatiquement supprimés.
      • Les éléments suivants sont supprimés : <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • Les attributs suivants sont supprimés : style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Les icônes avec des scripts intégrés, des images, du CSS ou des ressources externes sont rejetées.
      • Si les styles contiennent des couleurs ou des blocs de style, l'importation peut également être rejetée.
  • Exigences De L'En-Tête SVG
    • Doit contenir : viewBox, width et height. Les valeurs manquantes sont, si possible, automatiquement complétées.
    • Doit contenir le namespace : xmlns="http://www.w3.org/2000/svg". S'il est manquant ou incorrect, il est automatiquement complété.
    • Le nom de l'icône doit correspondre exactement aux dimensions, sinon l'icône est rejetée.
    • Les dimensions doivent être carrées (largeur = hauteur). Par défaut : 24px.
    • Les styles contradictoires ou les dimensions inappropriées doivent être évités.
  • Général
    • Les icônes mal créées peuvent fortement ralentir l'affichage ou même le rendre incorrect.
    • Veuillez absolument respecter les droits d'auteur des symboles.
    • Tous les vecteurs sont arrondis à trois décimales.

Structure

  • Le fichier iconset.ini est obligatoire pour reconnaître l'ensemble de symboles.
    • Il peut se trouver dans le répertoire racine du fichier ZIP ou dans un sous-répertoire.
    • Doit être en minuscules (iconset.ini).
    • Les noms de fichiers des symboles eux-mêmes ne sont pas sensibles à la casse.
  • L'importation ne recherche pas automatiquement les fichiers SVG.
    • Le dossier d'icônes doit être défini explicitement dans iconset.ini (respecter la casse).
    • Dans le modèle de fichier ZIP, un dossier nommé icons/ a été défini.
  • Sous-dossiers
    • Les sous-dossiers dans le dossier défini (icons/) servent de catégories.
    • Les noms des symboles doivent être uniques à travers toutes les catégories.
    • Règles de nommage dans le dossier des symboles :
      • Minimum : seule la dimension et l'extension de fichier (par exemple 24.svg).
      • Les variantes comme filled24.svg ou round_filled_24.svg sont valides.
      • Les noms de fichiers avec plusieurs chiffres (par exemple 24_48.svg) sont invalides.
      • Les variantes de style sont reconnues par :
        • Rempli : doit contenir filled ou fill.
        • Rond : doit contenir round.
        • Anguleux : doit contenir sharp.
        • Rond et anguleux ne peuvent pas être combinés.
      • Si plusieurs règles s'appliquent, le fichier reconnu en dernier est utilisé (le choix peut sembler aléatoire).
  • Autres Règles
    • Aucun sous-sous-dossier imbriqué n'est recherché (ceux-ci peuvent être utilisés pour les sauvegardes ou les originaux).
    • Les fichiers sans .svg sont ignorés.
    • Dans un dossier de symboles, un fichier nommé tags.txt peut être présent pour ajouter des tags supplémentaires à la recherche.
      • Les tags peuvent être séparés par ,, ; ou sauts de ligne.

Ensembles De Symboles Spéciaux

Il existe également divers ensembles de symboles spéciaux qui peuvent être importés comme les ensembles de symboles personnalisés, mais qui n'ont pas besoin d'être configurés selon les directives ci-dessus.

Hass Hue Icons

L'un d'eux est celui de la page GitHub hass-hue-icons. Il s'agit d'un ensemble de symboles Hue supplémentaire de la communauté Home Assistant HASS et ne peut être utilisé que pour des projets non commerciaux, car il est soumis à la licence Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International. C'est pourquoi l'ensemble de symboles n'est pas fourni avec Antcas Control. Les symboles peuvent cependant être importés à tout moment dans le projet en tant que nouvel ensemble de symboles avec le fichier ZIP hass-hue-icons-main.zip. Veuillez noter les conditions de licence du projet sur le site web de GitHub.

Source : https://github.com/arallsopp/hass-hue-icons.

Material Design Icons de Pictogrammers

Un autre est celui de Pictogrammers. Pour ce faire, le fichier mdi-###.json doit être compressé dans un fichier ZIP et importé. Le fichier peut être trouvé et téléchargé dans la console de développement du navigateur. Une tentative est faite pour combiner les symboles en contour avec ceux remplis. La bibliothèque est presque identique aux Material Symbols. Cependant, il existe de nombreuses extensions communautaires. Si vous souhaitez intégrer d'autres ensembles de symboles dans la bibliothèque, n'hésitez pas à nous contacter.

Source : https://pictogrammers.com/library/mdi/

Pages Subordonnées