Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • interface • inkscape • inkscape
issue147:inkscape

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue147:inkscape [2019/08/10 16:32] – d52frissue147:inkscape [2019/08/12 15:32] (Version actuelle) – andre_domenech
Ligne 3: Ligne 3:
 For simplicity, I’ve based this on the file I created for the previous instalment. That means the red light already has an ID (“redCircle”), and the JS file is already linked. I’ve duplicated the red circle to create the amber and green ones, giving them corresponding IDs of “amberCircle” and “greenCircle”. Because the JS is linked, and the red circle has the same ID as last time, loading the file into a web browser draws the lights okay, and clicking the button toggles the red light to green and back. Clearly there’s more work to be done, but at least the fundamentals are in place.** For simplicity, I’ve based this on the file I created for the previous instalment. That means the red light already has an ID (“redCircle”), and the JS file is already linked. I’ve duplicated the red circle to create the amber and green ones, giving them corresponding IDs of “amberCircle” and “greenCircle”. Because the JS is linked, and the red circle has the same ID as last time, loading the file into a web browser draws the lights okay, and clicking the button toggles the red light to green and back. Clearly there’s more work to be done, but at least the fundamentals are in place.**
  
-La dernière fois, nous avons utilisé un fichier Javascript lié pour créer un fichier SVG contenant un cercle qui change de couleur quand un bouton est pressé, lors qu'il est chargé dans un navigateur Web. Cette fois-ci, nous prolongerons cet exemple simple pour montrer comment la combinaison de SVG et de Javascript est idéale pour des démonstrations animées, en mettant en œuvre des feux tricolores. Nos feux sont la sorte de chose qui peut apparaître sur un site d'éducation ou dans un musée : ils vont se succéder dans une séquence de couleurs (rouge (red), rouge et jaune (amber), vert (green), jaune, rouge), une fois que le bouton a été cliqué. Mais, d'abord, nous avons besoin de feux tricolores :+La dernière fois, nous avons utilisé un fichier JavaScript lié pour créer un fichier SVG contenant un cercle qui change de couleur quand on appuie sur un bouton, lorsqu'il est chargé dans un navigateur Web. Cette fois-ci, nous prolongerons cet exemple simple pour montrer comment la combinaison de SVG et de JavaScript est idéale pour des démonstrations animées, en mettant en œuvre des feux tricolores. Nos feux sont la sorte de chose qui peut apparaître sur un site d'éducation ou dans un musée : ils vont se succéder dans une séquence de couleurs (rouge (red), rouge et jaune (amber), vert (green), jaune, rouge), une fois quand on clique sur le bouton. Mais, d'abord, nous avons besoin de feux tricolores :
  
-Par simplicité, comme base pour ceci, j'ai pris le fichier créé dans l’article précédent. Ça signifie que la lumière rouge a déjà un ID (« redCircle ») et que le fichier JS est déjà lié. J'ai dupliqué le cercle rouge pour créer les jaune et vert, en leur donnant des ID qui correspondent, « amberCircle » et « greenCircle ». Comme le fichier JS est lié, et que le cercle rouge a le même ID que la dernière fois, le chargement du fichier dans le navigateur dessine bien les feux, et un les clics sur le bouton font passer le feu du rouge au vert et vice-versa. Clairement, il reste encore beaucoup de travail à faire, mais les fondamentaux sont en place.+Par simplicité, comme base pour ceux-ci, j'ai pris le fichier créé dans l’article précédent. Cela signifie que la lumière rouge a déjà un ID (« redCircle ») et que le fichier JS est déjà lié. J'ai dupliqué le cercle rouge pour créer les jaune et vert, en leur donnant des ID qui correspondent, « amberCircle » et « greenCircle ». Comme le fichier JS est lié et que le cercle rouge a le même ID que la dernière fois, le chargement du fichier dans le navigateur dessine bien les feux, et un clic sur le bouton fait passer le feu du rouge au vert et vice-versa. Clairement, il reste encore beaucoup de travail à faire, mais les fondamentaux sont en place.
  
 **For this demo, we want the dull colored lights to turn bright at the correct times. Let’s forget about the timing for now, and deal with the colors first. With a variation on our existing code, we could easily set each light to a specific color by targeting it using its ID, then setting the “style.fill” property directly. A better approach, in this case, is to use classes. We can set a class for each light onto some ancestor object, and use CSS to apply the right fill. Since classes can be combined, we don’t need a “red-and-amber” class; we can just set the “red” and “amber” classes at the same time. **For this demo, we want the dull colored lights to turn bright at the correct times. Let’s forget about the timing for now, and deal with the colors first. With a variation on our existing code, we could easily set each light to a specific color by targeting it using its ID, then setting the “style.fill” property directly. A better approach, in this case, is to use classes. We can set a class for each light onto some ancestor object, and use CSS to apply the right fill. Since classes can be combined, we don’t need a “red-and-amber” class; we can just set the “red” and “amber” classes at the same time.
Ligne 25: Ligne 25:
 </style>** </style>**
  
-Pour cette démo, nous voulons que les couleurs effacées des feux deviennent vives aux bons moments. Oublions le séquencement temporel pour l'instant, et occupons-nous d'abord des couleurs. En modifiant notre code existant, nous pourrions facilement paramétrer chaque feu à une couleur particulière en utilisant leurs ID, puis en réglant la propriété « style.fill » directement. L'utilisation des classes est, dans notre cas, est une meilleure approche. Nous pouvons paramétrer une classe pour chaque feu sur le même objet ancêtre et utiliser le CSS pour appliquer le bon remplissage. Comme les classes peuvent être combinées, nous n'avons pas besoin d'une classe « rouge et jaune » ; nous pouvons simplement régler les classes » red » et « amber » en même temps.+Pour cette démo, nous voulons que les couleurs ternes des feux deviennent vives aux bons moments. Oublions le séquencement temporel pour l'instant, et occupons-nous d'abord des couleurs. En modifiant notre code existant, nous pourrions facilement paramétrer chaque feu à une couleur particulière en utilisant leurs ID, puis en réglant la propriété « style.fill » directement. L'utilisation des classes est, dans notre cas, une meilleure approche. Nous pouvons paramétrer une classe pour chaque feu sur le même objet ancêtre et utiliser le CSS pour appliquer le bon remplissage. Comme les classes peuvent être combinées, nous n'avons pas besoin d'une classe « rouge et jaune » ; nous pouvons simplement régler les classes « red » et « amber » en même temps.
  
-Mais avant de nous engager trop loin, nous avons besoin de paramétrer des couleurs par défaut dasn le css, de sorte que nous pourrons ensuite les remplacer en utilisant les classes. Ouvrez le fichier dans un éditeur de texte, et trouvez la section <style> (ou ajoutez-en une, comme enfant de l'élément <svg>. si elle n'existe pas déjà). Plcez dedans quelques sélecteurs d'ID, avec les couleurs de base que vous voulez utiliser - quelque chose comme ceci :+Mais avant de nous engager trop loin, nous avons besoin de paramétrer des couleurs par défaut dans le CSS, afin de pouvoir ensuite les remplacer en utilisant les classes. Ouvrez le fichier dans un éditeur de texte et trouvez la section <style> (ou ajoutez-en une, comme enfant de l'élément <svg>, si elle n'existe pas déjà). Placez dedans des sélecteurs d'ID, avec les couleurs de base que vous voulez utiliser - quelque chose comme ceci :
  
 <style> <style>
Ligne 63: Ligne 63:
 </style>** </style>**
  
-Ne vous inquiétez-pas si du contenu existe déjà dans votre bloc <style>, tel que des règles utilisées pour l'aspect du bouton - ajoutez simplement le nouveau code à la fin. N'oubliez pas que vous devez aussi supprimer les propriétés « fill » dans les attributs de style des éléments <circle> ; autrement, ils vont remplacer n'importe quel autre réglage su bloc <style>. Un bon test à changer toutes les couleurs du CSS en « blue » (bleu) et de recharger la page - si vous voyez encore du rouge, du jaune et du vert vous avez alors un entrée de remplacement sur les éléments eux-mêmes.+Ne vous inquiétez-pas si du contenu existe déjà dans votre bloc <style>, tel que des règles utilisées pour l'aspect du bouton ; ajoutez simplement le nouveau code à la fin. N'oubliez pas que vous devez aussi supprimer les propriétés « fill » dans les attributs de style des éléments <circle> ; autrement, ils vont remplacer n'importe quel autre réglage dans le bloc <style>. Un bon test est de changer toutes les couleurs du CSS en « blue » (bleu) et de recharger la page ; si vous voyez encore du rouge, du jaune et du vert, vous avez alors une entrée de remplacement sur les éléments eux-mêmes.
  
-Maintenant, nous avons besoin d'ajouter les couleurs que nous voulons utiliser quand chaque feu est éclairé. C'est simplement un autre jeu de trois styles ajouté à la fin du bloc <style>, avec la balise fermante :+Maintenant, nous avons besoin d'ajouter les couleurs que nous voulons utiliser quand chaque feu est allumé. C'est simplement un autre jeu de trois styles ajouté à la fin du bloc <style>, avec la balise fermante :
  
   ...   ...
Ligne 91: Ligne 91:
 }** }**
  
-Chacune de ces règles est structurée à l'identique, et peut être lue ainsi : « régler cette couleur de remplissage pour l'élément avec l'ID particulier, mais seulement si un de ces ancêtres a un classe particulière ». Avec cette méthode, nous pouvons régler les classes « red », « amber » et « green » d'un des éléments ancêtres des feux, tel que le calque du parent,  ou même sur l'élément <svg> racine, de façon à allumer les feux. Voyons cela...+Chacune de ces règles est structurée à l'identique, et peut être lue ainsi : « régler cette couleur de remplissage pour l'élément avec l'ID particulier, mais seulement si un de ses ancêtres a une classe particulière ». Avec cette méthode, nous pouvons régler les classes « red », « amber » et « green » d'un des éléments ancêtres des feux, tel que le calque du parent, ou même de l'élément <svg> racine, de façon à allumer les feux. Voyons cela.
  
-Nous avons déjà vu comment utiliser document.querySelector() avec un ID pour retrouver un élément particulier. L'ajout de nos classes au calque d'Inkscape serait juste un cas de recupération du bon ID pour l'élément <g> correct. Mais pour présenter une autre approche, nous ferons à la place référence à l'élément racine < svg >, puis nous y ajouterons une classe. Si vous tout suivi la dernière fois, vous devriez avoir déjà un fichier Javascript avec une fonction buttonPressed(). Remplacez le contenu de cette fonction avec ceci :+Nous avons déjà vu comment utiliser document.querySelector() avec un ID pour retrouver un élément particulier. L'ajout de nos classes au calque d'Inkscape serait juste un cas de découverte du bon ID pour l'élément <g> correct. Mais pour présenter une autre approche, nous ferons, à la place, référence à l'élément racine < svg >, puis nous y ajouterons une classe. Si vous avez tout suivi la dernière fois, vous devriez déjà avoir un fichier JavaScript avec une fonction buttonPressed(). Remplacez le contenu de cette fonction par ceci :
  
 function buttonPressed() { function buttonPressed() {
Ligne 104: Ligne 104:
  
 Replace the word “red” with “amber”, save the file, reload the web page, and click the button again. Then do the same with “green” as the class name. Make sure that each light works as expected before moving on.** Replace the word “red” with “amber”, save the file, reload the web page, and click the button again. Then do the same with “green” as the class name. Make sure that each light works as expected before moving on.**
 +
 +La propriété de document.documentElement retourne l'élément racine d'un document XML ou assimilé. Dans le cas d'un fichier SVG, elle retourne l'élément <svg> ; pour un document HTML, elle retourne l'élément <html>, et ainsi de suite. Ainsi, vous pouvez voir que cette simple fonction sur deux lignes basculera la classe « red » sur l'élément <svg>, et notre CSS est écrit de telle sorte que ça modifiera la couleur du cercle rouge. Sauvegardez le code, rechargez l'image dans votre navigateur et vérifiez qu'un clic sur le bouton fait véritablement changer la teinte rouge au premier cercle.
 +
 +Remplacez le mot « red » par « amber », sauvegardez le fichier, rechargez la page Web et cliquez à nouveau sur le bouton. Faites ensuite la même chose avec « green » comme nom de classe. Assurez-vous que chaque feu fonctionne comme attendu, avant de poursuivre.
  
 **Our traffic light sequence includes one step in which two lights must be illuminated at once – requiring us to set two classes. In an ideal world, the classList.toggle() method would be flexible enough to take a parameter of “red amber”, and toggle both classes. But we’re stuck in a less than ideal world – one in which the classList methods all work with a single class at a time – so to toggle both classes requires the method to be called twice: **Our traffic light sequence includes one step in which two lights must be illuminated at once – requiring us to set two classes. In an ideal world, the classList.toggle() method would be flexible enough to take a parameter of “red amber”, and toggle both classes. But we’re stuck in a less than ideal world – one in which the classList methods all work with a single class at a time – so to toggle both classes requires the method to be called twice:
Ligne 112: Ligne 116:
   svg.classList.toggle("amber");   svg.classList.toggle("amber");
 }** }**
 +
 +La séquence de nos feux tricolores comprend un état où deux feux doivent être éclairés en même temps, nous obligeant à régler deux classes. Dans un monde idéal, la méthode classList.toggle() serait assez flexible pour accepter un paramètre « red amber » et faire basculer les deux classes. Mais nous sommes prisonniers de notre monde qui n'est pas idéal, dans lequel les méthodes classList fonctionnent toutes avec une seule classe à la fois ; aussi, pour faire basculer deux classes, nous devons appeler la méthode deux fois :
 +
 +function buttonPressed() {
 +  const svg = document.documentElement;
 +  svg.classList.toggle("red");
 +  svg.classList.toggle("amber");
 +}
  
 **In our demo we don’t actually want to toggle lights on and off – we just want to set a fixed selection of lights for each step, without having to also turn off lights from the previous step, or call the same method multiple times. Using the classList interface actually makes life more difficult for us, when all we want to do is set the “class” attribute to a specific value. Luckily for us, browsers provide a function for setting the value of an attribute. It’s got the sensible name of setAttribute() and its arguments are the name of the attribute to set, and the value to set it to. Let’s use it to turn on both the red and amber lights: **In our demo we don’t actually want to toggle lights on and off – we just want to set a fixed selection of lights for each step, without having to also turn off lights from the previous step, or call the same method multiple times. Using the classList interface actually makes life more difficult for us, when all we want to do is set the “class” attribute to a specific value. Luckily for us, browsers provide a function for setting the value of an attribute. It’s got the sensible name of setAttribute() and its arguments are the name of the attribute to set, and the value to set it to. Let’s use it to turn on both the red and amber lights:
Ligne 119: Ligne 131:
 If you try this in your code you’ll find that you can turn the lights on, but as we’re no longer using a toggling function you can’t turn them off again without reloading the page. But we’re not really interested in toggling – we want a sequence of particular lights. For that, however, we need a little foray into the history of JavaScript…** If you try this in your code you’ll find that you can turn the lights on, but as we’re no longer using a toggling function you can’t turn them off again without reloading the page. But we’re not really interested in toggling – we want a sequence of particular lights. For that, however, we need a little foray into the history of JavaScript…**
  
-**Back in the early days of the web, JavaScript was executed as part of the same “thread” as the browser code itself. This meant that the browser would effectively hand over control to the script, and couldn’t update its UI, or respond to input, until the JS code relinquished that control. You might remember the bad old days when a rogue web page could hang the browser, preventing you from doing anything else with either the page itself or the browser UI. So, JavaScript doesn’t contain any instructions to pause execution of the script, as doing so would block the browser entirely. That means we can’t sequence our lights with something as simple as this pseudo-code:+En fait, dans notre démo, nous ne voulons pas que les feux s'allument et s'éteignent, nous voulons simplement une sélection déterminée de feux à chaque étape, sans avoir à éteindre les feux de l'étape précédente, ou appeler plusieurs fois la même méthode. L'utilisation de l'interface classList nous rend vraiment la vie plus difficile, alors que tout ce que nous voulons faire, c'est donner une valeur particulière à l'attribut « class ». Heureusement, les navigateurs fournissent une fonction pour le réglage de la valeur d'un attribut. Elle a reçu le nom bien choisi de setAttribut() (régler l'attribut) et ses arguments sont le nom de l'attribut à régler et la valeur à lui donner. Utilisons-la pour allumer les feux rouge et jaune :
  
 +svg.setAttribute("class", "red amber");
  
 +Si vous l'essayez dans votre code, vous trouverez que vous pouvez allumer les feux, mais, comme nous n'utilisons plus la fonction de bascule, vous ne pouvez plus les éteindre sans recharger la page. Mais nous ne sommes pas vraiment intéressés par le va-et-vient, nous voulons une séquence particulière des feux. Pour ça, nous avons besoin de faire une petite incursion dans l'histoire de JavaScript.
 +
 +**Back in the early days of the web, JavaScript was executed as part of the same “thread” as the browser code itself. This meant that the browser would effectively hand over control to the script, and couldn’t update its UI, or respond to input, until the JS code relinquished that control. You might remember the bad old days when a rogue web page could hang the browser, preventing you from doing anything else with either the page itself or the browser UI. So, JavaScript doesn’t contain any instructions to pause execution of the script, as doing so would block the browser entirely. That means we can’t sequence our lights with something as simple as this pseudo-code:
  
 svg.setAttribute("class", "red"); svg.setAttribute("class", "red");
Ligne 129: Ligne 145:
 svg.setAttribute("class", "green"); svg.setAttribute("class", "green");
 ...** ...**
 +
 +Dans les premiers temps du Web, JavaScript était exécuté comme faisant partie du même « thread » (séquence de calcul) que le code du navigateur lui-même. Cela signifiait que le navigateur transmettait vraiment le pilotage au script, et ne pouvait mettre à jour son interface utilisateur, ou répondre à une saisie, avant que JS ne rende ce pilotage. Vous vous souvenez peut-être de ces jours terribles où une page Web malfaisante pouvait bloquer le navigateur, vous empêchant de faire quoi que ce soit, sur la page elle-même ou dans l'interface du navigateur. Aussi, JavaScript ne contient aucune instruction pour mettre l'exécution du script en pause, car le faire, ce serait bloquer tout le navigateur. Ça signifie que nous ne pouvons pas séquencer nos feux avec quelque chose d'aussi simple que ce pseudo-code :
 +
 +svg.setAttribute("class", "red");
 +pause(3000);
 +svg.setAttribute("class", "red amber");
 +pause(3000);
 +svg.setAttribute("class", "green");
 +...
  
 **Instead JavaScript has a function called setTimeout(). This is a mechanism for queuing up a function call for later on. It doesn’t pause execution of the current function, but asks the browser to run another function after at least a certain amount of time has passed. It takes two parameters: a function or reference to a function, and the minimum timeout in milliseconds. With this, we can write a series of functions that call each other in sequence, to create our demo: **Instead JavaScript has a function called setTimeout(). This is a mechanism for queuing up a function call for later on. It doesn’t pause execution of the current function, but asks the browser to run another function after at least a certain amount of time has passed. It takes two parameters: a function or reference to a function, and the minimum timeout in milliseconds. With this, we can write a series of functions that call each other in sequence, to create our demo:
Ligne 148: Ligne 173:
   svg.setAttribute("class", "green");   svg.setAttribute("class", "green");
 }** }**
 +
 +À la place, Javascript a une fonction appelée setTimeout(). C'est un mécanisme pour mettre en file d'attente un appel de fonction pour plus tard. Elle ne provoque pas de pause dans l'exécution en cours, mais demande au navigateur de lancer une autre fonction quand, au minimum, une certaine quantité de temps s'est écoulée. Elle utilise deux paramètres : une fonction ou une référence à une fonction, et le temps limite minimum en millisecondes. Avec elle, nous pouvons écrire une série de fonctions qui s'appellent les unes les autres en séquence, pour créer notre démo :
 +
 +function buttonPressed() {
 +  const svg = document.documentElement;
 +  svg.setAttribute("class", "red");
 +  setTimeout(redAmber, 3000);
 +}
 +
 +function redAmber() {
 +  const svg = document.documentElement;
 +  svg.setAttribute("class", "red amber");
 +  setTimeout(green, 3000);
 +}
 +
 +function green() {
 +  const svg = document.documentElement;
 +  svg.setAttribute("class", "green");
 +}
  
 **That covers the first three steps of the sequence. I’ll leave it as an exercise for the reader to extend it to the full five steps described at the start of the article. **That covers the first three steps of the sequence. I’ll leave it as an exercise for the reader to extend it to the full five steps described at the start of the article.
  
 With that, our traffic lights demo is almost complete. Clicking the button will begin the sequence, which will stop automatically at the end. All that’s left is a little more work in Inkscape to make the lights look better. Provided you don’t change the CSS we added, or remove the link to the JS file, you’re free to tweak the design as much as you like without fear of the interactivity being broken. Here’s my result, partway through its cycle, after a little work in Inkscape with a few gradients and some lines.** With that, our traffic lights demo is almost complete. Clicking the button will begin the sequence, which will stop automatically at the end. All that’s left is a little more work in Inkscape to make the lights look better. Provided you don’t change the CSS we added, or remove the link to the JS file, you’re free to tweak the design as much as you like without fear of the interactivity being broken. Here’s my result, partway through its cycle, after a little work in Inkscape with a few gradients and some lines.**
 +
 +Voilà pour les trois premières étapes de la séquence. Je laisserai, à titre d'exercice pour le lecteur, sa complexe extension aux cinq étapes décrites du début de l'article.
 +
 +Avec elle, notre démo de feux tricolores est presque complète. En cliquant sur le bouton, la séquence commence et elle s'arrêtera automatiquement à la fin. Il reste un peu de travail dans Inkscape pour améliorer l'aspect des feux. Partant du principe que vous ne modifiez pas le CSS que nous avons ajouté, ni ne supprimez le lien vers le fichier JS, vous êtes libre d'ajuster le dessin comme il vous chante sans craindre de détruire l'interactivité. Voici mon résultat, au milieu de son cycle, après un peu de travail sur quelques dégradés et des lignes dans Inkscape.
  
 **Comparing this to the first image in this article shows just how much impact a little extra design work can achieve. But if I’d done all that design work first and only then started adding JavaScript, I would have had to deal with a much more complex SVG file for the few manual edits required. If you possibly can, it’s usually better to focus on the core aspects of your animations or interactions, and get those working on a simple version of your file first. **Comparing this to the first image in this article shows just how much impact a little extra design work can achieve. But if I’d done all that design work first and only then started adding JavaScript, I would have had to deal with a much more complex SVG file for the few manual edits required. If you possibly can, it’s usually better to focus on the core aspects of your animations or interactions, and get those working on a simple version of your file first.
Ligne 158: Ligne 206:
  
 Next time, we’ll have a quick look at some other options for manipulating SVG using JavaScript, moving beyond a few changes of fill and stroke color into altering other aspects of your images.** Next time, we’ll have a quick look at some other options for manipulating SVG using JavaScript, moving beyond a few changes of fill and stroke color into altering other aspects of your images.**
 +
 +En le comparant à celui de la première page de cet article, nous voyons l'impact que peut avoir un peu de travail supplémentaire de dessin. Mais si j'avais fait tout de suite tout le travail de dessin puis commencé à ajouter le JavaScript, j'aurai dû gérer un fichier SVG beaucoup plus compliqué pour les quelques ajouts manuels nécessaires. S'il vous est possible de le faire, il est préférable habituellement de se concentrer sur les aspects primordiaux de vos animations et interactions et de vous assurer d'abord qu'elles marchent sur une version simple.
 +
 +Si vous faites attention, la modification de votre fichier dans Inkscape ne détruit pas vos codes et interactions. Mais, parce qu'un tel travail nécessite d'aller et venir entre Inkscape et l'éditeur de texte, les deux travaillant sur le même fichier, et par conséquent, risquant d'avoir des interférences dans les contributions de l'un et de l'autre, je vous recommande chaudement de faire des sauvegardes régulières pendant que vous travaillez.
 +
 +La prochaine fois, nous regarderons d'autres options pour manipuler Inkscape en utilisant du Javascript, dépassant les simples modifications des couleurs de remplissage et de contour pour changer d'autres aspects de vos images.
 +
 +
 +
 +
  
issue147/inkscape.1565447522.txt.gz · Dernière modification : 2019/08/10 16:32 de d52fr