Theme creator
Ce plugin permet de créer des librairies de styles basées sur les concepts du Material Design (https://m3.material.io/).
Le principe de base des styles du Material Design est de ne définir qu'une seule couleur (couleur de fond et couleur de ligne indentiques) dans chaque style. Ces styles peuvent ensuite être utilisés dans les éléments des Industrial Graphics.
Le Material Design définit une large palette de couleurs, qui sont toutes identifiées par un nom. Notre plugin importe seulement les principales couleurs il utilise les styles User_Defined_XX qui sont limités à 24 dans la System Platform.
Il est préférable d'utiliser ce plugin tout au début d'un nouveau projet System Platform, car le plugin va redéfinir tous les styles "UserDefined_XX" qui ne doivent donc pas déjà être utilisés dans des Industrial Graphics.
Créer un style avec le Material Theme Builder
Aller sur le site https://material-foundation.github.io/material-theme-builder/
Sélectionner une couleur principale en cliquant sur le rond "Source color".
La palette des "Core Colors" (Primary, Secondary, Tertiary, Erreur, Neutral, Neutral variant) est automatiquement générée. Il est également possible de sélectionner ces couleurs unitairement en cliquant sur les ronds de couleur.
Les palettes de couleurs des thèmes "Light" et "Dark" sont automatiquement mises à jour dans la partie droite de la page. Les couleurs saisies sont modifiées automatiquement pour améliorer les contrastes et les dégradés.
Des composants standard du Material Design sont également affichés pour montrer le rendu du thème.
Il est possible de prévisualiser sur la page courante une variation du même thème en cliquant sur les boutons du haut de la page (bouton "Standard contrast", "Medium contrast" et "High contrast", ainsi que le bouton "Swith to dark/light mode")
La case à cocher "Stay true to my color inputs" permet de garder exactement les "Core Colors" qui ont été définies manuellement.
Une fois le thème défini, cliquer sur le bouton "Pick your fonts" en bas à droite de la page.
Cliquer sur le bouton "Export theme".
Cliquer sur le bouton "Web (CSS)".
Enregistrer le fichier ZIP.
Exporter la libraire de styles modèle
Le plugin utilise une librairie de style "Modèle" à partir de laquelle il génère les nouvelles librairies de styles. Seuls les styles "UserDefined_XX" sont paramétrés par le plugin. Les autres styles sont conservés à l'identique du la librairie de style "Modèle".
Cliquer sur le menu "Galaxy", puis sur "Configure", puis "Styles". Cliquer sur le bouton "..." du style modèle à exporter puis cliquer sur "Export"
Cliquer sur "Enregistrer" pour enregistrer le fichier XML de la librairie de styles.
Générer les styles avec le plugin
Cliquer sur le menu "Scaderis" puis "Style Generator".
En face du champ "Galaxy style xml file", cliquer sur le bouton "Browse" et sélectionner le fichier XML de la librairie de style "Modèle" précédemment exportée.
En face du champ "Theme builder zip file", cliquer sur le bouton "Browse" et sélectionner le fichier ZIP exporté depuis le Material Theme Builder.
Saisir un nom pour le nouveau thème dans le champ "Theme name".
Par défaut, 3 thèmes light et 3 thèmes dark sont générés: standard, medium contrast (mc), hight contrast (hc). Les cases à cocher permettent de désélectionner des thèmes qui ne seront pas générés.
Cliquer sur le bouton "Process".
Cliquer sur "OK".
Les fichiers XML des librairies de styles correspond aux thèmes sélectionnés sont générées dans le dossier "C:\Users<username>\Documents\ScaderisPlugin\Themes".
Importer les styles dans la Galaxy
Cliquer sur le menu "Galaxy", puis sur "Configure", "Galaxy", puis "Styles". Cliquer sur le bouton "..." puis cliquer sur "Import".
Sélectionner les librairies de styles à importer depuis le dossier "C:\Users<username>\Documents\ScaderisPlugin\Themes", puis cliquer sur "Ouvrir".
Les nouvelles librairies de styles sont importées. En cliquant sur l'onglet "Définis par l'utilisateur" on peut voir que les styles "UserDefined_XX" ont été renommées, et que les couleurs des thèmes ont été paramétrées.
Cliquer sur le bouton "Save".