DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Environnement
  • Présentation
  • Le catalogue d'images
  • Mode d'affichage du catalogue d'images
  • Comment utiliser les images du catalogue d'images
  • Faire une recherche dans le catalogue d'images
  • Associer une image du catalogue à l'élément en cours
  • Afficher les images personnelles
  • Images contenues dans le catalogue
  • Format des images
  • Les boutons graphiques
  • Les puces
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Présentation
Dès qu'une image peut être utilisée (dans un champ, une fenêtre, un état, ...), la fenêtre de description de l'élément propose le bouton Menu déroulant pour sélectionner l'image. Ce bouton affiche différentes options.
Options de sélection de l'image
L'option "Catalogue" permet de sélectionner une image parmi les milliers d'images fournies dans le catalogue d'images "Produit" de WINDEV, WEBDEV, WINDEV Mobile.
Ce catalogue d'images permet de regrouper :
  • Clipart : images à 1 ou plusieurs états, pouvant être utilisées pour des images, des boutons, ...
  • Splash Screen, Splash Screen avancé,
  • Formes,
  • Animations GIF,
  • Bandeau, Fonds de fenêtres,
  • Powered by,
  • Cadre,
  • Puces, Boutons graphiques,
  • Images personnelles,
  • Images permettant de personnaliser le look des différents champs (onglets, colonnes de table, ...)
Remarque : Il est également possible d'accéder directement au catalogue d'images :
  • depuis l'éditeur de code. En effet, lors de la saisie de fonctions manipulant des images, l'option "<Catalogue d'images>" est automatiquement proposée par la saisie assistée.
  • à l'aide du volet "Catalogue d'images".
Le catalogue d'images

Mode d'affichage du catalogue d'images

Le catalogue d'images peut être affiché sous 2 formes :
  • mode simplifié : ce mode est automatiquement sélectionné lorsque le catalogue d'image est affiché depuis l'option "Catalogue d'images" d'un champ Image. Ce mode simplifié affiche uniquement le champ de recherche et les images correspondantes.
    Catalogue d'images simplifié
  • mode complet : ce mode est automatiquement sélectionné lorsque le catalogue d'image est affiché depuis l'option "Catalogue d'images" d'un champ spécifique : icône, cadre d'un bouton, ... Ce mode propose la possibilité de sélectionner un thème ainsi que de choisir la catégorie de l'image recherchée, ...
    Catalogue d'images complet
Pour passer du mode simplifié au mode complet (et inversement), il suffit de manipuler la poignée (Poignée de changement de mode).
Remarque : pour créer des applications au look "Windows 11", utilisez le thème "Windows 11" du catalogue d'image.
Comment utiliser les images du catalogue d'images

Faire une recherche dans le catalogue d'images

Selon le mode d'affichage, plusieurs modes de recherche sont disponibles.
En mode simplifié, il suffit de saisir le mot-clé correspondant à la recherche voulue et de lancer la recherche à l'aide du bouton "Loupe". Par exemple :
Recherche en mode simplifié
En mode complet, pour faire une recherche :
  1. Saisissez les différents paramètres de la recherche :
    • mot-clé : Le mot-clé est utilisé uniquement dans le cas d'une recherche parmi les cliparts. Le mot-clé est recherché parmi les mots-clés associés aux cliparts. Vous pouvez également saisir directement le nom du fichier à rechercher.
    • thème : Le choix d'un thème permet de visualiser l'ensemble des éléments graphiques utilisant le même style graphique. De nombreux thèmes sont disponibles.
    • type d'image : Clipart, Splash screen, ...
  2. Si vous avez saisi un mot-clé, lancez la recherche à l'aide du bouton Loupe de recherche. Les images correspondant aux critères sélectionnés sont affichées.

Associer une image du catalogue à l'élément en cours

Pour associer une image du catalogue à l'élément en cours :
  1. Dans la fenêtre de description de l'élément en cours, cliquez sur le bouton Bouton déroulant et sélectionnez l'option "Catalogue". Remarque : Les images proposées par le catalogue d'images s'adaptent au champ en cours. Par exemple, si le catalogue d'images est affiché depuis la description du cadre d'un bouton, seules les images de cadres de bouton seront proposées par défaut.
  2. Recherchez si nécessaire l'image voulue.
  3. Sélectionnez l'image.
  4. Double-cliquez sur cette image.
  5. La fenêtre de paramétrage de l'image s'affiche :
    Fenêtre de paramétrage de l'image
  6. Indiquez :
    • Le nom de l'image à générer
    • Le format à générer : bmp, gif, jpg, png, svg, ico, ...
      Le format svg est désormais disponible pour la plupart des cliparts.
    • Le nombre d'états de l'image (cas des cliparts).
    • Les caractéristiques de l'image générée :
      • couleurs : Il est possible de :
        • utiliser les couleurs proposées par défaut dans le catalogue d'images.
        • utiliser les couleurs TSL. Dans ce cas, il est possible de modifier la teinte, la saturation et la luminosité de l'image.
        • coloriser l'image (notamment pour les images monochromes). Un sélecteur de couleurs permet de définir la couleur utilisée et il est également possible de définir le seuil utilisé (saturation).
      • rotation,
      • symétrie,
      • couleur de fond et niveau de transparence de la couleur de fond,
      • opacité de l'image : les pixels avec une valeur inférieure au seuil défini seront complètement transparents.
    • La taille de l'image.
    • Si vous voulez générer une animation (uniquement si l'élément en cours correspond à l'image de fond d'un bouton).
    • Si vous voulez conserver les paramètres pour la prochaine image sélectionnée depuis le catalogue.
  7. Validez. L'image est automatiquement copiée dans le répertoire du projet et associée à l'élément en cours.
Le bouton "Editer l'image" permet en plus d'ouvrir l'image dans une nouvelle vue de l'éditeur pour la modifier. Cette vue peut être déplacée afin de profiter de toutes les options de l'éditeur d'images.
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac Catalyst Remarque : Si l'élément nécessite une image par DPI, toutes les images nécessaires sont créées, copiées dans le répertoire du projet et associées à l'élément en cours. Pour plus de détails, consultez Android/iOS : Fournir une image par DPI.

Afficher les images personnelles

Pour afficher les images personnelles :
  1. Affichez si nécessaire le catalogue d'images en mode complet.
  2. Cliquez sur le bouton "Images personnelles".
  3. Pour ajouter une image, cliquez sur le bouton "Ajouter".
  4. Dans l'onglet "Image", sélectionnez le fichier image voulu. Indiquez le nom de l'image et sa description.
  5. Dans l'onglet "Mots-clés", indiquez les mots-clés liés à l'image. Ces mots-clés peut être choisis parmi les mots-clés existants ou être créés.
  6. Validez. Votre image est automatiquement ajoutée aux images personnelles. Elle sera prise en compte lors des prochaines recherches.
Remarques :
  • Il est également possible de modifier les caractéristiques d'une image personnelle ou de supprimer une image personnelle.
  • Les images personnelles sont référencées dans la base de données des Centres de Contrôle. En cas de changement de poste, ou de changement de version de WINDEV, WEBDEV ou WINDEV Mobile, ces images seront conservées. Pour plus de détails, consultez Base de données des Centres de Contrôle.
Images contenues dans le catalogue

Format des images

Les images du catalogue sont disponibles dans différents formats : soit GIF, soit BMP, soit PNG, soit SVG, ...
WINDEV Mobile Seules les images au format GIF, BMP, JPEG et PNG sont disponibles.
Attention : Les images au format PNG (24 bits) demandent une bonne configuration du poste utilisateur (affichage plus lent).

Les boutons graphiques

En sélectionnant les boutons graphiques, le catalogue d'images présente l'ensemble des boutons graphiques disponibles. Ces boutons sont classés par couleur. Pour chaque couleur, différentes formes sont proposées.

Les puces

En sélectionnant les puces, le catalogue d'images présente une large palette de puces pouvant être utilisées dans vos applications.
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 18/04/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale