En multiplateforme comme en desktop Windows classique la question de la résolution d’écran se pose de plus en plus. Delphi permet de gérer un certain nombre de choses de façon transparente et les nouveaux composants d’images multi résolutions pour la VCL présents depuis la version 10.3.3 Rio simplifient encore les choses.
Le problème c’est que si vous avez beaucoup de visuels dans vos projets VCL ou FMX vous devez y embarquer ces images dans plusieurs tailles différentes ce qui apporte des contraintes en terme de volume à déployer et de maintenance.
Il existe une solution : travailler avec des visuels vectoriels.
A l’origine le format SVG a été créé pour afficher des graphiques sur des pages web et les fichiers PDF mais il a bien vite remplacé les différents formats de cliparts utilisés dans les présentations PowerPoint et documents Word des années 90.
Il est possible de les utiliser aussi dans nos projets à l’aide de plusieurs solutions logicielles dont je vous présenterai une sélection.
Les outils utilisés lors de cette session seront : Delphi, Inkspace, Adobe Illustrator, des composants intégrés à Delphi et plusieurs librairies externes (dont les solutions proposées par RiverSoft, Winsoft et TMS Software).
Ma présentation est disponible en format PDF.
Voici également le replay de la session en live. J'ai un peu cafouillé sur les démos mais me rattraperai dès que possible en faisant des vidéos sur chaque librairie de façon indépendante (et surtout au calme, sans pelleteuse ni squatter un bureau le temps de l'enregistrement). Elles seront ajoutées sur cet article ou dans d'autres selon les cas. Vous les retrouverez de toute façon sur la chaîne YouTube du blog et mon compte Viméo.
Correctif important concernant ce que j'ai dit lors de la conférence en ligne : ce n'est pas RiverSoft qui référence le SVG comme format d'image partout, c'est TMS Software qui permet ainsi d'utiliser ce format et leur moteur de rendu sur tous les composants affichant un TBitmap (FMX) et TGraphic (VCL), qu'ils soient développés par TMS ou un tiers.
Voici également les liens promis. Je complèterai la liste au fil du temps et de vos remarques.
Concernant les dessins vectoriels, à la base des "chemins" et du SVG, je vous suggère de jeter un oeil à ces pages :
- Documentation de la norme SVG chez le W3C
- Tutoriel pour utiliser le SVG dans des pages web (ça a peu de rapport avec Delphi, mais ça donne une idée du fonctionnement du SVG et de ses utilisations possibles)
Pour créer vos propres dessins vectoriels vous pouvez utiliser l'un de ces logiciels. Notez que certains font du SVG et d'autres permettent de faire les chemins à utiliser de façon indépendante des formes (donc dans le composant TPath standard).
- Inkscape (open source, gratuit)
- IcoFX (payant, développé sous Delphi, sélectionné comme Cool Apps par Embarcadero et que j'utilise régulièrement pour générer les icones de mes logiciels)
- Adobe Illustrator (disponible en location mensuelle ou annuelle)
- Vector Creator (licence mixte)
Vous pouvez trouver des fichiers vectoriels sur ces sites, parfois gratuits. N'oubliez pas lorsque vous utiliser des images venant d'ailleurs de vous assurer que vous avez le droit de les utiliser et que leurs auteurs sont bien identifiés et rétribués (même si c'est juste avec un lien ou un remerciement quelque part). Ne piochez jamais des images depuis Google Images même si ça vous dit qu'elles sont libres !
- Icon Icons (packs d'icones gratuits, licence pas claire)
- Icons 8 (utilisation libre, gratuit)
- Material Design Icons (utilisation libre, gratuit, permet de récupérer des fichiers SVG et des chemins pour le composant TPath)
- Adobe Stock (achat d'images vectorielles (format Illustrator ou SVG selon les cas) à l'unité, sous forme de packs et d'abonnements mensuels et annuels)
Il existe de nombreux sites d'icones "libres de droit" où piocher mais faites attention à leur contenu et à la provenance de ce qu'ils proposent gratuitement ou à la vente. Les graphistes ne gagnent déjà pas grand chose avec ces plateformes, autant passer par celles qui les rémunèrent réellement.
Dans vos programmes développés sous Delphi ou C++Builder vous pouvez utiliser le composant TPath disponible dans la palette de composants sous FireMonkey. Il permet de dessiner des chemins encodés d'une certaine façon et monochromes (la couleur étant paramétrable).
- Documentation du composant TPath (FMX.Objects.TPath)
- TextPath (un projet open source de Paul Toth permettant d'utiliser le TPath pour dessiner des textes à partir de fontes True Type)
- TPath (plusieurs projets open source de Serge Girard illustrant ses articles sur le sujet dont sa fameuse guerre des étoiles)
- Animated Path Graphics of Grace Hopper (Jim McKeeth utilise des TPath pour dessiner le portrai de Grace Hopper et l'animer avec Delphi)
Les livres Delphi Cookbook et Delphi Programming Project publiés par Packt ont un passage abordant la question du composant TPath et en proposent chacun des idées d'utilisations.
Si vous désirez utiliser du SVG avec la VCL voici quelques solutions :
- Creation de fichiers SVG
- SVG Canvas chez Winsoft
- ImageEn
- Fast Report en parle dans sa documentation, je n'ai pas vérifié ni testé comment ça fonctionne pour l'export SVG.
- Affichage de fichiers SVG
- en open source
- Delphi SVG de Ekot1
- SVG Lite de Lamdalili
- en licences payantes
- en open source
Si vous désirez utiliser du SVG avec FireMonkey (FMX) voici quelques solutions :
- Création de fichiers SVG
- SVG Canvas de Winsoft
- Delphi HTML Components (indiqué dans la documentation, je n'ai pas vu en détail pour le moment)
- Fast Report
- Affichage de fichiers SVG
- en open source
- Delphi SVG de Ekot1
- en licences payantes
- RiverSoftAVG SVG Component Library
- APE Suite de Sivv
- Delphi SVG de B. Verhue
- TMS FNC UI Pack
- TMS FNC Core
- en open source
D'autres librairies de composants ou de classes permettent de travailler ponctuellement avec le SVG. C'est notamment le cas pour
- WPTools qui accepte le SVG pour les logos de boutons de barre d'outil
- Delphi HTML Components qui s'en sert à l'affichage de pages web et en export selon les cas
- Gnostice Document Studio qui permet d'en intégrer dans les documents générés ou affichés
Pour finir sur les liens je vous propose aussi de jeter un coup d'oeil aux librairies suivantes. Elles ne proposent pas le support du SVG en tant que tel mais fournissent des composants vectoriels dessinant des formes de base ou évoluées :
- Radiant Shapes, téléchargeable gratuitement depuis GetIt, propose des formes de base très paramétrables.
- Impact chez RiverSoftAVG fourni des éléments d'interface utilisateur (jauges, horloges, ...).
- EXT Graph fournit un ensemble de composants open source pour dessiner des schémas et graphiques.
- Simple Graph est en quelque sorte l'ancêtre de EXT Graph. Il fournit un canvas pour dessiner des graphiques.
Comme toujours, si vous avez des liens à me suggérer ou des remarques sur le contenu de ces listes ou du site en général, faites m'en part sans hésiter.
