Ajouter une image SVG avancée

Ajoutez une image SVG avancée au canevas pour modifier les propriétés de ses éléments lors de la conception ou de l’exécution.
CONSEIL: Par exemple, vous pouvez signaler un dysfonctionnement d’une partie matérielle en mettant en surbrillance une représentation d’un composant matériel.
Conditions préalables
Pour contrôler les propriétés de l’image, obtenez un fichier SVG conforme aux exigences suivantes :
  • Le format de fichier est SVG 1.2 Tiny
  • Le fichier contient tous les éléments d’image et les propriétés que vous souhaitez configurer
  • Les propriétés de remplissage et de bordure existent et leurs couleurs sont définies en tant qu’attributs XML ou CSS en ligne
  • Les valeurs de couleur sont hexadécimales
CONSEIL: Si le fichier SVG n’est pas conforme aux exigences, l’image s’affichera comme prévu, mais vous ne pourrez pas modifier ses propriétés.
  1. Pour ajouter une image SVG avancée
  2. Dans
    Vue de projet
    , cliquez avec le bouton droit de la souris sur l’objet ou le dossier qui contiendra l’image, puis sélectionnez
    Nouveau
    Dessins
    Image SVG avancée
    .
  3. Sélectionnez l’image à inclure :
    • Dans
      Propriétés
      , en regard de
      Chemin
      , sélectionnez
      Parcourir
       et sélectionnez une image à inclure dans votre application.
    • Dans l'éditeur, double-cliquez sur
      Icône Image
       et sélectionnez une image à inclure dans votre application.
    CONSEIL:
    Pour trouver des éléments, commencez à saisir le nom de l’élément à rechercher dans
    Sélectionner un fichier
    .
    Si le fichier n’apparaît pas dans
    Sélectionner un fichier
    , sélectionnez
    Icône Importer des fichiers
    Importer des fichiers
    , puis dans
    Importer des fichiers
    , sélectionnez le fichier à importer et choisissez
    Sélectionner
    .
  4. (Facultatif) Ouvrez le fichier SVG dans un éditeur de texte et vérifiez que l’attribut
    @id
     de l’élément image que vous souhaitez modifier et la propriété que vous souhaitez modifier existent dans le fichier SVG.
    Par exemple, pour pouvoir modifier le style de polygone d’un châssis :
    <g id="
    ConveyorChassis
    ">
    <polygon style="fill:#3C4660;" points="8.532,379.733 503.466,379.733 503.466,277.333 8.532,277.333"/>
</g>
  5. Dans
    Propriétés
    , développez
    Propriétés de l’élément SVG
    , puis dans
    ID
    , sélectionnez l’élément image à modifier.
    CONSEIL: Les options de la liste déroulante pour les éléments du fichier SVG correspondent aux attributs
    @id
     des éléments du fichier SVG. Si les valeurs n’apparaissent pas dans la liste déroulante, il se peut que l’image SVG ne soit pas conforme aux exigences requises pour contrôler les propriétés de l’image.
  6. Dans
    Propriété
    , sélectionnez la propriété à modifier pour l’élément d’image sélectionné, puis dans
    Valeur
    , sélectionnez
    Icône Ajouter un lien dynamique
    Ajouter un lien dynamique
     pour créer un lien dynamique complexe ou entrez une valeur pour la propriété indiquée :
    • Couleur
      . Sélectionnez ou entrez la valeur hexadécimale de la couleur ou créez un lien dynamique complexe avec un convertisseur vers des valeurs de couleur hexadécimales. Par exemple :
      La capture d’écran affiche la configuration du convertisseur conditionnel. La Valeur vraie utilise le rouge (#f51616), la Valeur fausse utilise le noir (#000000) et le lien dynamique de condition pointe vers ConveyorChassisMalfunctionAlarmVariable.
    • Opacité
      . Entrez une valeur comprise entre 0 et 100 pour rendre l’élément image complètement transparent ou totalement opaque.
    • Largeur du trait
      . Définissez la largeur de la ligne en pixels.
    • Dasharray du tracé
      . Spécifiez le tableau de traits de l’une des manières suivantes :
      • En sélectionnant ou saisissant
        Solid
        . Il s'agit de la valeur par défaut.
      • En saisissant un seul nombre. Le nombre représente à la fois la longueur des traits et la longueur de l’espace qui les sépare. Par exemple, entrez 5 pour que la longueur des traits et la longueur de l’espace qui les sépare soient de 5 pixels.
      • En configurant une série de nombres séparés par des points-virgules au format répétable #;#. Le premier nombre représente la longueur d'un trait et le nombre après chaque point-virgule représente la longueur de l’espace suivant ce trait. Les séries saisies sont répétées. Par exemple, entrez 5;2;10;3 pour que le premier trait mesure cinq pixels et que l’espace qui suit mesure deux pixels, suivi d’un autre trait de dix pixels et d’un espace de trois pixels. La série se répète pour afficher un trait plus court suivi d’un trait plus long sur l’ensemble de la ligne.
    CONSEIL:
    Lorsque vous liez la propriété dasharray à une variable de chaîne ou à une balise dans un automate, si la valeur de chaîne n'est pas valide, la valeur de la propriété dasharray prendra la valeur du fichier SVG lors de l’exécution.
    Par exemple, pour un tableau de tirets défini comme une ligne continue dans le SVG avancé, mais qui s'affiche actuellement sous la forme de tirets, si la valeur de la balise liée dans la propriété dasharray contient une erreur comme 1;5:8 ou change pour une valeur non valide comme abc, la valeur revient à la ligne continue spécifiée dans le fichier SVG.
    La propriété que vous sélectionnez pour l’élément image doit se trouver dans le fichier image SVG avec l’élément image, faute de quoi vous ne pourrez pas configurer la propriété de l’élément image.
  7. Pour ajouter une propriété supplémentaire au fichier SVG, en regard de
    Propriétés de l’élément SVG
    , sélectionnez
    Icône Ajouter en noir
    , puis répétez les étapes 4 et 5.
    Par exemple, si vous avez configuré
    Couleur
     pour un élément image SVG, vous pouvez ajouter une propriété
    Opacité
     pour modifier l’opacité de ce même élément image ou d’un élément image différent.
  8. Pour modifier les propriétés par défaut du fichier SVG, dans
    Propriétés
    , développez
    Apparence
     et modifiez les propriétés en créant un lien dynamique complexe ou en saisissant une valeur.
  9. (Facultatif) Dans
    Propriétés
    , modifiez les paramètres
    Apparence
     :
    • Visible
      . Affiche l'objet lors de l'exécution.
    • Activé
      . Active l’interaction avec l'objet lors de l’exécution.
    • Opacité
      . Niveau d’opacité de l’objet, en pourcentage. Spécifiez
      0
       pour rendre l'objet transparent.
    • Clignotement
      . Fait clignoter l'objet lors de l’exécution.
    • Rotation
      . Fait pivoter l'objet autour de son point central (en degrés d’arc). Les valeurs positives font pivoter l'objet dans le sens horaire ; les valeurs négatives le font pivoter dans le sens antihoraire.
    • Visible sur clic
      . Intercepte les sélections de l’utilisateur. Faux par défaut : les sélections de l’utilisateur ne sont pas interceptées et sont transmises à l’objet sous-jacent.
    • Mode de remplissage
      . Sélectionnez l'une des options suivantes :
      • Ajuster
        . L’objet conserve ses proportions d’origine lorsqu’il est redimensionné.
      • Étirer
        . L’objet remplit le conteneur et ignore ses proportions d’origine lorsqu’il est redimensionné.
      • Mosaïque
        . L’objet conserve ses proportions d’origine lorsqu’il est redimensionné et répète l’image à l’intérieur.
    • Mode de colorisation
      . Définissez le mode de colorisation de l’image. Les options disponibles incluent :
      Remplacer
      ,
      Teinter
      ,
      Multiplier
      ,
      Ajouter
      .
    • Déplacer la cible
      . Consultez la rubrique Rendre un objet graphique mobile.
  10. (Facultatif) Pour redimensionner, déplacer ou aligner l'objet, reportez-vous à Disposition des objets graphiques.
  11. (Facultatif) Dans
    Événements
    , ajoutez des méthodes à des événements existants ou ajoutez de nouveaux événements et de nouvelles méthodes. Consultez les rubriques Événements et Méthodes.
Exemple d’image SVG avancée - Alarme désactivée (châssis de convoyeur gris)
Icône de châssis de convoyeur avec un bouton d’alarme désactivé.
Exemple d’image SVG avancée - Alarme activée (châssis de convoyeur rouge)
Icône de châssis de convoyeur avec un bouton permettant de déclencher une alarme de dysfonctionnement.
Fournir une réponse
Vous avez des questions ou des commentaires sur cette documentation ? Veuillez envoyer vos commentaires ici.
Normal