4D v11 SQL : Graphes SVG Par Christopher VISAYA, Technical Support Engineer, 4D Inc. Note technique 4D-200705-15-FR Version 1 - Date 1 mai 2007 Résumé 4D v11 SQL supporte nativement le SVG (Scalable Vector Graphics). Cette note technique décrit les concepts généraux de création de graphes SVG en utilisant des données des enregistrements. Deux méthodes différentes de création de fichiers SVG sont présentées : en utilisant la commande GRAPHE associée à une variable image, et en créant un élément XML. 4D Notes techniques Copyright 1985-2009 4D SAS - Tous droits réservés Tous les efforts ont été faits pour que le contenu de cette note technique présente le maximum de fiabilité possible. Néanmoins, les différents éléments composant cette note technique, et le cas échéant, le code, sont fournis sans garantie d'aucune sorte. L'auteur et 4D S.A. déclinent donc toute responsabilité quant à l'utilisation qui pourrait être faite de ces éléments, tant à l'égard de leurs utilisateurs que des tiers. Les informations contenues dans ce document peuvent faire l'objet de modifications sans préavis et ne sauraient en aucune manière engager 4D SA. La fourniture du logiciel décrit dans ce document est régie par un octroi de licence dont les termes sont précisés par ailleurs dans la licence électronique figurant sur le support du Logiciel et de la Documentation afférente. Le logiciel et sa documentation ne peuvent être utilisés, copiés ou reproduits sur quelque support que ce soit et de quelque manière que ce soit, que conformément aux termes de cette licence. Aucune partie de ce document ne peut être reproduite ou recopiée de quelque manière que ce soit, électronique ou mécanique, y compris par photocopie, enregistrement, archivage ou tout autre procédé de stockage, de traitement et de récupération d'informations, pour d'autres buts que l'usage personnel de l'acheteur, et ce exclusivement aux conditions contractuelles, sans la permission explicite de 4D SA. 4D, 4D Calc, 4D Draw, 4D Write, 4D Insider, 4ème Dimension, 4D Server, 4D Compiler ainsi que les logos 4e Dimension, sont des marques enregistrées de 4D SA. Windows,Windows NT,Win 32s et Microsoft sont des marques enregistrées de Microsoft Corporation. Apple, Macintosh, Power Macintosh, LaserWriter, ImageWriter, QuickTime sont des marques enregistrées ou des noms commerciaux de Apple Computer,Inc. Mac2Win Software Copyright 1990-2002 est un produit de Altura Software,Inc. 4D Write contient des éléments de "MacLink Plus file translation", un produit de DataViz, Inc,55 Corporate drive,trumbull,ct,usa. XTND Copyright 1992-2002 4D SA. Tous droits réservés. XTND Technology Copyright 1989-2002 Claris Corporation.. Tous droits réservés ACROBAT Copyright 1987-2002, Secret Commercial Adobe Systems Inc.Tous droits réservés. ACROBAT est une marque enregistrée d'adobe Systems Inc. Tous les autres noms de produits ou appellations sont des marques déposées ou des noms commerciaux appartenant à leurs propriétaires respectifs. 1 / 8
Graphes SVG en 4D v11 SQL Résumé Scalable Vector Graphics (SVG) est un langage basé sur du XML, utilisé pour créer de riches graphiques en deux dimensions. Ce format de fichier présente des caractéristiques qui procurent quelques avantages pour les types d'images les plus populaires comme les JPEG ou les GIF. Par exemple, il est (comme son nom l'indique) graduable : les images SVG ne sont pas en pixels, mais sont des images vectorisées. Elles sont construites à partir de formes géométriques comme des lignes, ce qui signifie que l'on n'a pas besoin de stocker des informations pour chaque pixel. 4D v11 SQL supporte nativement le SVG. SVG est typiquement utilisé pour dessiner des données statistiques, ainsi le langage est contenu dans un arbre XML, les développeurs 4D peuvent modifier les attributs SVG directement dans l'éditeur de méthode 4D. Ce document inclut un exemple de base de données pour générer et modifier des graphes SVG, afficher les résultats dans un formulaire, et exporter l'image en image svg sur le disque. Appeler du SVG 4D v11 SQL possède un moteur de rendu SVG intégré. Il y a différentes façons de l'utiliser dans 4D. Une de ces façons est l'utilisation de la commande GRAPHE. Cette commande a fortement évolué par rapport aux versions précédentes, et c'est à l'utilisateur de décider quel moteur de rendu il veut utiliser sur le premier paramètre. La syntaxe pour la commande est la suivante : GRAPHE (ZoneGraphe/VariableImage;GraphNum;xCatégories;yValeurs{yValeurs2;...;yValeursN}) Le paramètre ZoneGraphe/VariableImage détermine quel moteur graphique sera utilisé : en passant une zone 4D Chart ou une référence de zone de graphe, on utilisera le plug-in 4D Chart ; en passant une variable image, 4D utilisera le moteur SVG. Dans la base exemple, le formulaire de saisie contient une variable de type Image et le graphe sera donc construit en utilisant SVG : La commande GRAPHE étant utilisée, il faut aussi utiliser la commande PARAMETRES DU GRAPHE. La syntaxe de la commande est : 2 / 8
PARAMETRES DU GRAPHE (ZoneGraphe/VariableImage ;xmin;xmax,ymin;ymax;xprop; grillex;grilley;titre {;titre 2;...;titre N}) Le paramètre ZoneGraphe/VariableImage doit correspondre au paramètre ZoneGraphe/VariableImage de la commande GRAPHE. Hormis ce point, le reste des paramètres est identique. La base exemple Pour la base exemple, nous avons imaginé un utilisateur qui veut suivre la répartition de ses loisirs. Il y a trois activités auxquelles cette personne peut participer : jouer avec une console Nintendo Wii, faire de la gym, et jouer au basketball. Les heures passées sur chaque activité ont été suivies pendant un mois, et maintenant l'utilisateur veut pouvoir faire une représentation graphique des données. Pour voir la démo, lancez la base exemple avec 4D v11 SQL, ouvrez le Menu Test, et sélectionnez "Lancer la démo.." La base exemple comprend trois graphes. Dans le premier graphe, le total des heures passées sur chaque activité pendant le mois est graphé. Ceci est fait en associant une méthode-objet avec le pop-up/liste déroulante ar_choix pour dessiner le graphique dans la variable image vgraphpict. Voici le code : `Création de la chaîne pour l'axe des X TABLEAU ALPHA(20;times;1) times{1}:="1111" `Tableaux pour récupérer le total du temps passé pour chaque activité TABLEAU REEL(wii_time;1) wii_time{1}:=somme([phys_time]wii) 3 / 8
TABLEAU REEL(gym_time;1) gym_time{1}:=somme([phys_time]gym) TABLEAU REEL(bas_time;1) bas_time{1}:=somme([phys_time]basketball) GRAPHE(vGraphPict;1;times;wii_time;gym_time;bas_time) PARAMETRES DU GRAPHE(vGraphPict;0;0;0;0;Faux;Faux;Vrai;"Wii";"Gym";"Basketball") Notez les arguments dans l'avant-dernière ligne de code : GRAPHE(vGraphPict;1;times;wii_time;gym_time;bas_time) Le style du graphe est passé à 1 et ainsi le résultat sera un graphe à colonnes standard (ou à barres). D'autres styles sont disponibles en utilisant un nombre de 1 à 8. Les trois derniers paramètres déclarent les données à représenter. Dans ce cas, il y a trois informations de temps, trois totaux calculés par programmation : le temps passé sur la console, à faire de la gym ou à jouer au basket. Maintenant, notez les paramètres de la dernière ligne de code : PARAMETRES DU GRAPHE(vGraphPict;0;0;0;0;Faux;Faux;Vrai;"Wii";"Gym";"Basketball") Les quatre zéros indiquent les valeurs minimum et maximum de l'axe des X et de l'axe des Y. En mettant 0 dans ces paramètres, on utilise les valeurs par défaut. Le premier argument "Faux" indique que le graphe n'utilisera pas un axe des X proportionnel mais un axe des X normal. Le second "Faux" indique que la grille des X ne sera pas dessinée. Le paramètre "Vrai" indique que la grille des Y sera dessinée. Enfin on donne les valeurs des titres des séries. Elles doivent être dans le même ordre que les données utilisées dans la commande GRAPHE. Voici le résultat du graphe : 4 / 8
Notez que les graphe SVG offre un look plus moderne que les anciens graphes 4D. Si ce nouveau look ne convient pas aux besoins de l'utilisateur, l'ancienne présentation est toujours disponible en plaçant une zone 4D Chart sur le formulaire. Il reste deux graphiques dans notre base exemple : un graphique présente les temps moyens passés pour chaque activité, et le second graphique montre combien de temps est passé sur chaque activité chaque jour. Chaque jour est imprimé le long de l'axe des X et le total de temps passé pour chaque activité est représenté par jour. Les algorithmes qui déterminent ces valeurs varient pour chaque graphique mais la façon dont le moteur SVG est utilisé est le même. Essayez de changer de graphique en modifiant la valeur dans le pop-up menu pour voir la différence. Menus contextuels et export Sélectionnez "Total heures/jour sur 1 mois" du pop-up menu pour afficher le temps passé chaque jour à chaque activité. Un graphe SVG similaire à celui ci-dessous est affiché : Ceci est complètement illisible! Heureusement, il n'est pas nécessaire de retourner en Mode Développement pour ajuster le graphe à afficher. Un avantage immédiat du rendu des images en SVG est la possibilité d'accéder au menu contextuel. 5 / 8
Simplement en plaçant le pointeur de la souris sur le graphique et en utilisant un clic droit ou Contrôle Clic (MacOS) sur l'image. Le menu contextuel suivant apparaît alors : Y figurent les habituels "Couper", "Copier", "Coller" et "Effacer". Pour remédier à notre problème d'affichage, déployez "Format d'affichage". Essayez les trois formats différents. Des exemples de "Tronquée non centrée" et "Non tronquée" sont montrés ci-dessous : (a) tronquée non centrée 6 / 8
(b) "Non tronquée" Dans l'image (a), le format "Tronquée non centrée" permet l'utilisation des ascenseurs. Ceci offre à l'utilisateur la possibilité de voir les informations en détail comme les légendes du graphe le long de l'axe des X et des Y, mais n'est pas très pratique pour avoir une vue d'ensemble de l'image. L'image (b) montre la totalité du graphique puisque l'image est mise à l'échelle pour tenir à l'intérieur de l'espace délimité par la variable. C'est aussi une taille plus gérable que "Tronquée non centrée" mais à cause de la distorsion de l'image, le graphique est toujours impossible à lire. Il existe une fonctionnalité supplémentaire que vous pouvez utiliser pour donner à l'utilisateur le meilleur des deux mondes. Clic droit ou Contrôle Clic sur le graphique et sélectionnez "Enregistrez sous...". dans le dialogue de sauvegarde qui vous est proposé, l'utilisateur peut choisir de sauvegarder l'image dans n'importe quel format disponible sur la machine, SVG inclus. Pourquoi est-ce important? Désormais l'utilisateur dispose de beaucoup d'autres types d'images. Zooms et défilements sont facilités. En outre, son graphe est maintenant stocké pour une utilisation future sur le disque, dans 4D ou en dehors. Une autre façon d'utiliser SVG... En testant l'application, notez, dans le coin gauche en haut du formulaire, que l'affichage du titre change pour chacun des graphes. Ceci aurait pu être fait en utilisant une commande texte 4D, mais nous avons choisi de le faire en utilisant une image SVG. Le code peut être trouvé dans la méthode projet "graph_title". Un extrait significatif du code est affiché ci-dessous : C_IMAGE(vPicHello) $svg:=dom Creer ref XML("svg") $ref:=dom Creer element XML($svg;"text";"font-weight";"bold";"font-size";18;"fill";"blue") DOM ECRIRE VALEUR ELEMENT XML($ref;$label) DOM EXPORTER VERS IMAGE($svg;vPicHello;Copier source données XML ) DOM FERMER XML($svg) Les premières lignes de ce code mettent en place l'arbre XML et créent un élément XML, un élément "text". Le formatage de cet élément (graisse, taille, couleur) est fait en utilisant le code SVG standard. Plus d'informations sur le formatage des polices peuvent être trouvées ici : http://www.w3.org/tr/svg11/fonts.html Les trois dernières lignes installent les valeurs. Avec la commande DOM ECRIRE VALEUR ELEMENT XML, $label varie en fonction du graphe à afficher. La commande DOM EXPORTER VERS IMAGE est utilisée pour sauvegarder l'image SVG dans une variable image, "vpichello". Le dernier paramètre dans la commande permet à 4D de garder une copie de l'arbre XML avec l'image pour un usage futur. La dernière commande, DOM FERMER XML, libère la mémoire que l'objet XML occupait. Voici ce que donne la sortie lorsque vous affichez le temps total : 7 / 8
Il est possible de modifier l'arbre XML qui a été créé dans l'une ou l'autre des deux méthodes ci-dessus. Une présentation de manipulation XML peut être trouvée en utilisant les différentes notes disponibles sur le sujet : http://www.4d.fr/support/technotes.html Conclusion Cette note technique a décrit les concepts généraux de création de graphes SVG en utilisant des données des enregistrements. Deux méthodes différentes de création de fichiers SVG ont été présentées dans des contextes qui ne sont pas nouveaux dans 4D : en utilisant la commande GRAPHE associée à une variable image, et en créant un élément XML. Les informations ci-dessus devraient ouvrir de nouvelles perspectives aux développeurs et les encourager à utiliser SVG dans leurs bases de données. 8 / 8