- Présentation
- Comment utiliser une palette de couleurs ?
- Associer une palette à un projet
- Associer une palette à une fenêtre
- Remarques
- Manipuler une palette de couleurs par programmation
- Création d'une palette de couleur
- Changer dynamiquement la palette utilisée
- Création d'une palette de couleurs avec le thème Windows
- Icônes, images, boutons et palettes de couleurs
- Champ de saisie
- Champ Image
- Champ Sélecteur / Interrupteur
- Champ Bouton
- Champ Table
- Champ Potentiomètre
- Palettes de couleurs et WLangage
- Fonctions WLangage
- Palette de couleurs : manipulation du fichier JSON
- Contenu du fichier JSON
Gestion des palettes de couleurs
A partir de la version 2025, WINDEV et WINDEV Mobile proposent le concept de "Palette de couleurs" pour les projets et les fenêtres. Une palette est un ensemble de couleurs (une centaine). Chaque couleur est destinée à un usage précis dans le gabarit : fond, texte, bordure, etc.
Chaque couleur est nommée en fonction de son usage : fond-fenetre, fond-saisie, fond-survol, fond-bouton, etc.
Une palette définie attribue une couleur à chaque "nom de couleur". Par exemple, fond-fenetre = "#be677f" ou couleur-fond-bouton = RVB(190,103,127) Lorsque la palette en cours est changée, tous les champs passent automatiquement en nouvelles couleurs. Ce mécanisme permet de changer le look d'une application facilement et dynamiquement. Côté programmation, plusieurs fonctions permettent également de créer et manipuler les palettes de couleurs. Une palette de couleurs est un fichier JSON facilement modifiable en WLangage.  Evolutions disponibles au cours de la version 2025 : - Gestion des icônes, images, boutons (disponible à partir de la version 2025 Update 1). Pour plus de détails, consultez Icônes, images, boutons et palettes de couleurs.
- Gestion de la transparence (disponible à partir de la version 2025 Update 1). Pour plus de détails, consultez Palettes de couleurs et WLangage.
- Evolution des gabarits WINDEV et WINDEV Mobile pour utiliser des couleurs définies grâce aux palettes de couleurs. A partir de la version 2025 Update 2, les gabarits WINDEV Apollo et Eleven_Palette sont livrés.
 Avertissement
Attention : A partir de la version 2025 Update 2, les palettes des gabarits et les palettes générées (fonction PaletteGénère) changent de format. Les palettes générées avec une version précédente sont toujours utilisables mais ne sont pas compatibles avec celles fournies avec les gabarits. Ces palettes pourront tout de même être associées au projet.
Comment utiliser une palette de couleurs ? Les gabarits WINDEV sont fournis avec une palette de couleurs. Cette palette de couleurs est automatiquement liée au projet lors de l'application du gabarit. Il est possible de définir plusieurs palettes de couleurs pour un même projet. Associer une palette à un projet Pour associer une palette à un projet : - Affichez la fenêtre de description du projet : sous le volet "Projet", dans le groupe "Projet", cliquez sur "Description".
- Dans l'onglet "Style", dans la zone "Palette", la liste des palettes associées au projet est affichée. Il est possible de :
- Ajouter une palette (bouton
 ) : La fenêtre de sélection des palettes disponibles est alors affichée.
- Supprimer une palette (bouton
 ). - Définir la palette par défaut (bouton
 ) : Cette palette sera la palette utilisée par défaut sous l'éditeur et au lancement de l'application.
- Validez.
Associer une palette à une fenêtre Il est possible d'associer une palette de couleurs à l'ensemble du projet. Mais il est également possible d'associer une palette de couleurs à une fenêtre spécifique : dans ce cas, la palette de couleurs de la fenêtre est prioritaire sur la palette de couleurs du projet. Pour associer une palette à une fenêtre : - Affichez la fenêtre de description de la fenêtre (option "Description" du menu contextuel).
- Dans l'onglet "Style", dans la zone "Gabarit et palette", sélectionnez le fichier "wdpalette" voulu dans le champ "Palette de couleur".
- Validez. La palette de couleurs est immédiatement associée à la fenêtre sous l'éditeur.
Remarques - Pour associer dynamiquement une palette de couleurs à un projet ou une fenêtre, il suffit d'utiliser la fonction PaletteChange.
- Partager des palettes de couleurs : Les palettes de couleurs correspondent à un fichier JSON. Il est donc possible d'utiliser une même palette de couleurs pour plusieurs projets. Il est également possible de partager une palette de couleurs, notamment via le GDS (Gestionnaire de Sources).
Manipuler une palette de couleurs par programmation Création d'une palette de couleur La création d'une palette de couleurs est réalisée par programmation grâce à la fonction PaletteGénère. Cette fonction permet de générer une palette de couleurs à partir de la couleur de base spécifiée. Cette palette correspond à une variable de type Palette. Cette palette de couleurs peut ensuite être sauvée sous forme de fichier grâce à la fonction PaletteSauve. Exemples : MaPaletteRouge est une Palette
MaPaletteRouge = PaletteGénère(0x7F67BE)
PaletteSauve(MaPaletteRouge, "MaPaletteRouge.wdpalette")
MaPaletteVerte est une Palette
MaPaletteVerte = PaletteGénère(VertFoncé)
PaletteSauve(MaPaletteVerte, "MaPaletteVert.wdpalette")
Le fichier d'extension "wdPalette" obtenu peut être ensuite associé au projet ou à la fenêtre (sous l'éditeur ou par programmation). Remarque : La fonction PaletteGénère permet également de générer une palette en utilisant une couleur principale et une couleur secondaire. - Si la couleur secondaire n'est pas précisée, elle est automatiquement définie pour obtenir le meilleur effet.
- Si la couleur secondaire est précisée, cette couleur sera utilisée dans les styles utilisant une couleur secondaire (voir Contenu du fichier JSON).
Attention : Cette fonctionnalité est disponible uniquement à partir de WINDEV 2025 Update 2. Changer dynamiquement la palette utilisée Le changement dynamique de palette de couleurs peut être réalisé grâce à la fonction PaletteChange. Ce changement peut être effectué pour le projet dans son ensemble ou uniquement pour une fenêtre. Tous les éléments associés à une couleur définie dans la palette de couleurs du projet ou de la fenêtre seront automatiquement changés. - changer la palette associée un projet ou une fenêtre en utilisant une variable de type "Palette".
Exemple :
MaPaletteVerte est une Palette
MaPaletteVerte = PaletteGénère(VertFoncé)
PaletteSauve(MaPaletteVerte, "MaPaletteVert.wdpalette")
PaletteChange(MaPaletteVerte)
- changer la palette associée à un projet en utilisant un fichier "wdpalette". Par défaut, la complétion propose les fichiers wdpalette accessibles.
Pour modifier la syntaxe en cours sous l'éditeur de code, utilisez la combinaison CTRL + touche vers le haut ou vers le bas.
Création d'une palette de couleurs avec le thème Windows Sous Windows, l'utilisateur peut choisir une couleur principale pour son bureau : Microsoft appelle cette couleur la couleur d'accentuation. Cette couleur est utilisée, par exemple, pour les barres de titre des applications. Il est possible d'utiliser la couleur d'accentuation pour créer u,ne palette de couleurs. - Utilisez la fonction SysCouleurAccentuation pour connaître la couleur principale (ou couleur d'accentuation) du thème Windows.
- Générez la palette de couleurs correspondante (fonction PaletteGénère).
- Changez la palette utilisée (fonction PaletteChange).
Par exemple :
MaPaletteWindows est une Palette
MaPaletteWindows = PaletteGénère(SysCouleurAccentuation())
PaletteSauve(MaPaletteWindows, "MaPaletteWindows.wdpalette")
PaletteChange(MaPaletteWindows)
Astuce : Pour détecter que l'utilisateur a changé de couleur d'accentuation de Windows alors que l'application est déjà lancée, il faut utiliser l'événement Windows EVT_THEME (à l'aide de la fonction Evénement).
CONSTANT
EVT_THEME = 0x001A
FIN
Evénement(_ChangeCouleurAccentuation, "FEN_StatsPays", EVT_THEME)
PROCÉDURE INTERNE _ChangeCouleurAccentuation(nMessageWindows entier<utile>, ...
nWParam entier<utile>, nLParam entier<utile>)
MaPaletteWindows est une Palette
MaPaletteWindows = PaletteGénère(SysCouleurAccentuation())
PaletteSauve(MaPaletteWindows, "MaPaletteWindows.wdpalette")
PaletteChange(MaPaletteWindows)
FIN
Icônes, images, boutons et palettes de couleurs Par défaut, lorsque votre projet est associé à un gabarit, tous les éléments du gabarit (champs, icônes, etc.) sont associés à une palette de couleurs. Au changement de palette, les différents éléments s'adapteront en fonction de la palette. Si votre projet contient des icônes, des images, etc., au changement de palette, il est nécessaire que ces éléments s'adaptent à la couleur utilisée dans la palette. Cela est vrai notamment pour les icônes et images monochromes. Ce paragraphe présente comment configurer spécifiquement certaines éléments. Pour obtenir ce fonctionnement, il est possible d'utiliser des images / icônes monochromes, puis de définir la couleur de palette à utiliser pour ces images monochromes. Ainsi, lors du changement de palette, la couleur s'adaptera. La gestion des images monochrome est mise en place pour les champs les plus courants : Attention : La gestion des images monochromes est disponible uniquement à partir de la version 2025 Update 1. Champ de saisie Un champ de saisie peut afficher des boutons à gauche ou à droite de la zone de saisie. Il est possible d'indiquer si l'image utilisée doit être forcée ou non en monochrome, et si oui, si la couleur doit être fournie avec la couleur de texte ou la couleur de style. Si la couleur du texte est choisie, la couleur de l'image correspondra à la couleur du texte du champ de saisie. Si la couleur du style est choisie, la couleur de l'image correspondra à la couleur définie dans l'élément "Forcer en monochrome". Champ Image Dans un champ Image, il est possible de forcer l'utilisation de l'image en mode monochrome : - Affichez la fenêtre de description du champ.
- Dans l'onglet "Général", cochez la case "Monochrome".
- Dans l'onglet "Style", pour l'élément "Forcer en monochrome", indiquez la couleur de la palette à utiliser.
- Validez.
Champ Sélecteur / Interrupteur Dans un champ Sélecteur ou Interrupteur il est possible d'utiliser une couleur monochrome pour les coches et les cadres des coches. - Affichez la fenêtre de description du champ.
- Dans l'onglet "Style", sélectionnez l'élément "Cadre de la coche" (ou "Coche"), cochez l'option "Adapter l'image avec les couleurs ci-contre". Vous pouvez alors sélectionner la couleur de la palette à utiliser.
- Validez.
Champ Bouton Un champ Bouton peut être composé d'une ou de plusieurs images. Pour forcer les images du champ à se dessiner en monochrome en utilisant une couleur définie : - Affichez la fenêtre de description du champ.
- Dans l'onglet "Style", sélectionnez l'élément "Forcer en monochrome" et spécifiez la couleur voulue pour le monochrome. Cette couleur peut provenir d'une palette de couleurs.
- Validez.
Champ Table Un champ Table utilise plusieurs images : entonnoir, flèches de tri, etc. Pour forcer les images du champ à se dessiner en monochrome en utilisant une couleur définie : - Affichez la fenêtre de description du champ.
- Dans l'onglet "Style", sélectionnez l'élément "Forcer en monochrome" et spécifiez la couleur voulue pour le monochrome. Cette couleur peut provenir d'une palette de couleurs.
- Validez.
Champ Potentiomètre Dans un champ Potentiomètre, il est possible d'utiliser une couleur monochrome pour l'image du curseur. - Affichez la fenêtre de description du champ.
- Dans l'onglet "Style", sélectionnez l'élément "Curseur", cochez l'option "Adapter l'image avec les couleurs ci-contre". Vous pouvez alors sélectionner la couleur de la palette à utiliser.
- Validez.
Palettes de couleurs et WLangage Les palettes sont des fichiers JSON pouvant être manipulés : - via des fonctions WLangage spécifiques,
- via les fonctions de manipulation des variables JSON.
Fonctions WLangage Le WLangage permet de manipuler les palettes de couleurs : - via le type Palette.
- via différentes fonctions WLangage :
| | | Modifie la palette utilisée par le projet ou par une fenêtre. | | Charge une palette à partir d'un fichier de type ".wdpalette". | | Génère une palette à partir d'une couleur de base. | | Récupère la palette courante du projet ou la palette de la fenêtre. | | Sauve une palette dans un fichier. |
Palette de couleurs : manipulation du fichier JSON Une palette de couleurs correspond à un fichier JSON, contenant la description des différentes couleurs de la palette. Exemple de fichier JSON : // Apollo_Palette
// version 0.1
// Light theme
{
// primaire / couleur du theme
"primary" :"#344BF9",
"primary_text" :"#FFFFFF",
"primary_border" :"=primary",
"primary_red_background" :"#DB2635",
// couleur de base d'UI
"secondary" :"#6273FF",
"text" :"#000000",
"border" :"#C0C7DE",
// fonds
"window_background" :"#EEF0F8",
"container_background" :"#FFFFFF",
"input_background" :"#EEF0F8",
// Effets sur boutons
"pressed_mix" :"#00000014",
"hovered_mix" :"#0000000A",
"grayed_mix" :"#FFFFFF73",
// cadre de focus
"focus_outline" :"=BGOK(window_background)",
// autres effets
"accent_background" :"=MIX(window_background,text,10)",
"text_light" :"=MIX(input_background,text,45)",
"border_strong" :"=MIX(border,text,30)",
"primary_dark" :"=MIX(primary,#000000,60)",
// bandeau de selection et survol
"selected_background" :"=MIX(primary,#FFFFFF,85)",
"selected_text" :"=TEXTOK(selected_background)",
"hovered_background" :"=MIX(window_background,primary,15)",
// autres textes
"windows_title_text" :"#5F6368",
"title_text" :"=text",
"subtitle_text" :"=title_text",
"section_text" :"=MIX(primary,text,30)",
"red_text" :"=primary_red_background",
"gray_text" :"#808080", "link_text" :"=primary",
// negative
"negative_text" :"=TEXTOK(text)",
"negative_background" :"=BGOK(negative_text)",
// Grisés
"disabled_text" :"#A0A0A0",
"disabled_bkg_text" :"=window_background",
// Séries
"graph_series_1": "=primary",
"graph_series_2": "=SERIES(2)",
"graph_series_3": "=SERIES(3)",
"graph_series_4": "=SERIES(4)",
"graph_series_5": "=SERIES(5)",
"graph_series_6": "=SERIES(6)",
"graph_series_7": "=SERIES(7)",
"graph_series_8": "=SERIES(8)",
"graph_series_9": "=SERIES(9)",
"graph_series_10": "=SERIES(10)",
"graph_series_11": "=SERIES(11)",
} Il est possible de manipuler ce fichier JSON afin d'ajouter ses propres couleurs ou d'effectuer des modifications. Dans ce fichier, il est possible d'indiquer qu'une couleur dérive d'une autre couleur nommée, à laquelle on applique un filtre : luminosité, changement de teinte, etc. Il est ainsi possible de construire des couleurs en cascade. Par exemple : - Pour ajouter une couleur personnelle dans le fichier "WD_Eco.palette", il est possible d'utiliser le code :
MaPalette est une Palette
...
MaPalette["MaCouleurPerso"] = RVB(255,15,21)
- Pour gérer l'opacité sur une des couleurs de la palette, il est possible de modifier directement la couleur avec la propriété Opacité du WLangage :
MaPalette est une Palette
...
MaPalette["MaCouleurPerso"] = RVB(255,15,21)
MaPalette["MaCouleurPerso"].Opacité = 127
Après sauvegarde et chargement de la palette, la couleur "MaCouleurPerso" prendra en compte l'opacité (transparence). Elle pourra être sélectionnée dans les couleurs des différents champs. Un aperçu spécifique de la couleur permet de savoir que la couleur gère la transparence.
Attention : La gestion de l'opacité est disponible uniquement à partir de la version 2025 Update 1.
Contenu du fichier JSON Ce document décrit les couleurs et fonctions utilisées les palettes. Les couleurs - Couleurs Primaires
- Primary : Couleur principale d'accentuation, qui donne le look général de l'UI.
- Primary Text : Couleur du texte devant être visible sur un fond primary.
- Primary Border : Couleur de bordure principale des champs.
- Primary Red Background : Fond rouge contrasté pour un texte lisible en primary_text.
- Couleurs Secondaires et Textes
- Secondary : Couleur secondaire du thème
- Text : Couleur de texte principale, lisible sur les fonds secondary, windows_background, container_background.
- Border : Couleur de bordure pour distinguer les champs sur les fonds secondaires.
- Couleurs de fond
- Window Background : Fond de fenêtre.
- Container Background : Fond de champs de type conteneur (cellule, onglet, superchamp, ...).
- Input Background : Fond des champs de saisie et combo.
Astuce : Ces couleurs peuvent aussi être utilisées pour alterner les couleurs de lignes paires et impaires des tables et Zones répétées. - Effets d'Interaction
- Pressed Mix : Couleur mixée pour l'effet d'enfoncé.
- Hovered Mix : Couleur mixée pour l'effet de survol.
- Grayed Mix : Couleur mixée pour l'effet de grisement.
- Autres Effets
- Focus Outline : Couleur du cadre de focus.
- Accent Background : Fond pour jauges ou indicateurs.
- Text Light : Couleur de texte plus claire pour indications et labels informatifs.
- Border Strong : Couleur de bordure plus marquée.
- Primary Light : Version plus claire de primary.
- Primary Dark : Version plus foncée de primary.
- Bandeaux de sélection et de survol
- Selected Background : Fond des bandeaux de sélection.
- Selected Text : Texte lisible sur selected_background.
- Hovered Background : Fond d'éléments survolés.
- Autres Textes
- Windows Title Text : Texte des titres de fenêtre.
- Title Text : Couleur des titres de section.
- Subtitle Text : Couleur des sous-titres.
- Section Text : Couleur des libellés de section.
- Red Text : Texte rouge lisible sur windows_background et container_background.
- Gray Text : Texte gris lisible sur windows_background et container_background.
- Link Text : Couleur des boutons et liens.
- Négatif
- Negative Text : Texte en mode négatif.
- Negative Background : Fond en mode négatif.
- Grisé
- Disabled Text : Texte grisé.
- Disabled Background Text : Fond de texte grisé (effet de relief).
- Couleurs de séries :
- graph_series_N : Où N est un chiffre de 1 à 11 (voir exemple ci-dessus).
Les fonctions de palette
Les fonctions présentes dans les palettes permettent d'obtenir des effets spécifiques. Les fonctions gérées sont les suivantes : - Référencer une couleur de la palette
Il est possible dans la palette de référencer directement une autre couleur de la palette : - MIX : Mélange couleur1 et couleur2 selon le pourcentage spécifié.
Syntaxe :
MIX(<couleur1>, <couleur2>, <pourcentage couleur2>) - MIXGRAY : Identique à MIX, puis conversion du résultat en niveau de gris (extraction de la luminosité de la couleur obtenue).
Syntaxe :
MIXGRAY(<couleur1>, <couleur2>, <pourcentage couleur2>) - TEXTOK : Retourne blanc ou noir afin d'assurer une lisibilité optimale d'un texte sur un fond de couleur <couleurfond>.
Syntaxe :
- BGOK : Retourne un fond blanc ou noir afin d'assurer une lisibilité optimale d'un texte de couleur >couleurtexte<.
Syntaxe :
- SERIE : Retourne la couleur de série correspondant à l'indice donné (couleur prédéfinie en dur).
Syntaxe :
- IFLUMLT : Retourne <couleurSiPlusClaire> ou <couleurSiPlusFonce> selon la luminosité de <couleur1> comparée au seuil <nLuminance>.
Syntaxe :
IFLUMLT(<couleur1>, <nLuminance>, <couleurSiPlusClaire>, <couleurSiPlusFonce>)
Remarque : Bien entendu, si une des couleurs manipulée par une des fonctions est modifiée, la couleur utilisant cette fonction est également modifiée.
Documentation également disponible pour…
|
|
|