issue146:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente | ||
issue146:inkscape [2019/07/15 08:05] – d52fr | issue146:inkscape [2019/07/17 06:56] (Version actuelle) – andre_domenech | ||
---|---|---|---|
Ligne 5: | Ligne 5: | ||
Si vous avez suivi le tutoriel du mois dernier, vous devriez avoir un bouton décoré qui passe d'une classe à l' | Si vous avez suivi le tutoriel du mois dernier, vous devriez avoir un bouton décoré qui passe d'une classe à l' | ||
- | Nous avons vu précédemment deux façons de mettre du JavaScript dans un fichier Inkscape : directement dans les champs | + | Nous avons vu précédemment deux façons de mettre du JavaScript dans un fichier Inkscape : directement dans les champs |
**First, load the SVG file for the button that you created last time into Inkscape. Then open the File > Document Properties dialog, and select the “Scripting” tab. Within that section make sure the “External scripts” tab is active. | **First, load the SVG file for the button that you created last time into Inkscape. Then open the File > Document Properties dialog, and select the “Scripting” tab. Within that section make sure the “External scripts” tab is active. | ||
Ligne 11: | Ligne 11: | ||
As with the “Embedded scripts” tab, the UI here is sparse and slightly misleading. At the top is an excessively short area that lists any external script files linked to from your document – it should be empty at the moment. Below that is an unlabelled line, with Plus (+) and Minus (-) buttons after it, the latter being disabled at this point. As the name of the tab suggests, this UI is used to link external scripts – i.e. JavaScript code stored in a separate file – to your SVG file. You have probably also guessed that the Plus button adds a file to the list above, whilst the minus button removes it. What isn’t so clear is that the Plus button actually works in three different ways, depending on the content of the unlabelled field, and whether or not your JS file exists yet.** | As with the “Embedded scripts” tab, the UI here is sparse and slightly misleading. At the top is an excessively short area that lists any external script files linked to from your document – it should be empty at the moment. Below that is an unlabelled line, with Plus (+) and Minus (-) buttons after it, the latter being disabled at this point. As the name of the tab suggests, this UI is used to link external scripts – i.e. JavaScript code stored in a separate file – to your SVG file. You have probably also guessed that the Plus button adds a file to the list above, whilst the minus button removes it. What isn’t so clear is that the Plus button actually works in three different ways, depending on the content of the unlabelled field, and whether or not your JS file exists yet.** | ||
- | D' | + | D' |
- | Comme pour l' | + | Comme pour l' |
**Method 1: If you just click on the Plus button, you’ll be presented with a file selector dialog. You can then navigate to the directory of your choice and enter a new filename into the file selector. When you accept the content of the file selector (e.g. by clicking the “Open” button), the full path and name of your file will appear in the list at the top of the dialog. NOTE: This does not actually create the file on-disk, so you’ll need to do that manually, opening up the possibility of typos. | **Method 1: If you just click on the Plus button, you’ll be presented with a file selector dialog. You can then navigate to the directory of your choice and enter a new filename into the file selector. When you accept the content of the file selector (e.g. by clicking the “Open” button), the full path and name of your file will appear in the list at the top of the dialog. NOTE: This does not actually create the file on-disk, so you’ll need to do that manually, opening up the possibility of typos. | ||
Ligne 21: | Ligne 21: | ||
Method 3: Type something into the unlabelled box, then click the Plus button. Whatever you typed will be added to the list of files at the top of the dialog. Of course, it only really makes sense to type the name (and possibly path) of a JavaScript file, but this field does no error checking so typos and bad paths are all too easy to introduce.** | Method 3: Type something into the unlabelled box, then click the Plus button. Whatever you typed will be added to the list of files at the top of the dialog. Of course, it only really makes sense to type the name (and possibly path) of a JavaScript file, but this field does no error checking so typos and bad paths are all too easy to introduce.** | ||
- | Méthode 1 : Si vous cliquez simplement sur le bouton Plus, un dialogue de sélection de fichier vous est présenté. Vous pouvez alors naviguer jusqu' | + | Méthode 1 : Si vous cliquez simplement sur le bouton Plus, un dialogue de sélection de fichier vous est présenté. Vous pouvez alors naviguer jusqu' |
Méthode 2 : C'est la même chose que la méthode précédente, | Méthode 2 : C'est la même chose que la méthode précédente, | ||
- | Méthode 3 : Tapez quelque chose dans le champ sans étiquette, puis cliquez sur le bouton Plus. Ce que vous avez tapez se retrouve ajouté au sommet de la liste. Bien sûr, ça n'a vraiment de sens qu'en tapant le nom (et éventuellement le chemin) d'un fichier | + | Méthode 3 : Tapez quelque chose dans le champ sans étiquette, puis cliquez sur le bouton Plus. Ce que vous avez tapé se retrouve ajouté au sommet de la liste. Bien sûr, ça n'a vraiment de sens qu'en tapant le nom (et éventuellement le chemin) d'un fichier JavaScript, mais ce champ ne fait pas de vérification ; aussi, les erreurs et les mauvais chemins sont très faciles à introduire. |
**You might think that the third method is to be avoided – the possibility of making a typo is too high. But, in practice, this is the only method of the three that I recommend using! In just about every case, you will want to keep the JavaScript file close to your SVG file: if not in the same directory, then usually just one level away in a “scripts” or “resources” folder. The third method lets you supply just the filename, or a relative path and filename (eg. ‘scripts/ | **You might think that the third method is to be avoided – the possibility of making a typo is too high. But, in practice, this is the only method of the three that I recommend using! In just about every case, you will want to keep the JavaScript file close to your SVG file: if not in the same directory, then usually just one level away in a “scripts” or “resources” folder. The third method lets you supply just the filename, or a relative path and filename (eg. ‘scripts/ | ||
Ligne 31: | Ligne 31: | ||
The first two methods, on the other hand, produce absolute paths which will break as soon as the files are moved. And you can’t edit the paths within this dialog – you have to modify them via the XML editor. So not only is there a chance of introducing typos as you edit them, but you have to be comfortable with using the XML editor to do so. Better, I think, to use method 3 and just be careful with what you type.** | The first two methods, on the other hand, produce absolute paths which will break as soon as the files are moved. And you can’t edit the paths within this dialog – you have to modify them via the XML editor. So not only is there a chance of introducing typos as you edit them, but you have to be comfortable with using the XML editor to do so. Better, I think, to use method 3 and just be careful with what you type.** | ||
- | Vous pourriez penser que la méthode 3 est à éviter | + | Vous pourriez penser que la méthode 3 est à éviter |
- | D'un autre côté, les deux premières méthodes produisent des chemins absolus qui seront erronés dès que les fichiers seront déplacés. Et vous ne pouvez pas modifier | + | En revanche, les deux premières méthodes produisent des chemins absolus qui seront erronés dès que les fichiers seront déplacés. Et vous ne pouvez pas modifier |
**To keep things simple, let’s create a new JavaScript file in the same directory as the main SVG file. Using a text editor, create a new file containing the following line: | **To keep things simple, let’s create a new JavaScript file in the same directory as the main SVG file. Using a text editor, create a new file containing the following line: | ||
Ligne 47: | Ligne 47: | ||
alert(" | alert(" | ||
- | Enregistrez le fichier dans le même répertoire que votre image SVG, avec un extension « .js ». Dans mon cas, le fichier Inkscape s' | + | Enregistrez le fichier dans le même répertoire que votre image SVG, avec une extension « .js ». Dans mon cas, le fichier Inkscape s' |
Si tout a été fait correctement, | Si tout a été fait correctement, | ||
Ligne 65: | Ligne 65: | ||
Save both files, then reload the SVG file in a web browser, confirming that both elements are visible, and that a click on the button shows the new alert() dialog.** | Save both files, then reload the SVG file in a web browser, confirming that both elements are visible, and that a click on the button shows the new alert() dialog.** | ||
- | Nous voulons que notre bouton pilote un autre objet quand il est cliqué | + | Nous voulons que notre bouton pilote un autre objet quand il est cliqué, ce qui sera plus facile si nous avons un autre objet à piloter ! Dans Inkscape, modifiez le fichier pour ajouter un simple cercle rempli, en vous assurant de lui donner un ID logique |
- | Par un clic droit sur le bouton, ouvrez le dialogue des propriétés | + | Par un clic droit sur le bouton, ouvrez le dialogue des Propriétés |
buttonPressed(); | buttonPressed(); | ||
Ligne 77: | Ligne 77: | ||
} | } | ||
- | Enregistrez les deux fichiers puis rechargez le fichier SVG dans votre navigateur, confirmant que les deux éléments sont visibles et qu'une clic sur le bouton montre le nouveau dialogue alert(). | + | Enregistrez les deux fichiers puis rechargez le fichier SVG dans votre navigateur, confirmant que les deux éléments sont visibles et qu'un clic sur le bouton montre le nouveau dialogue alert(). |
**Now that we’ve got a function that runs when the button is clicked, we want to populate it with some code to change the fill color of the circle. Previously, we’ve changed the fill color of the object being clicked, either by explicitly setting “this.style.fill”, | **Now that we’ve got a function that runs when the button is clicked, we want to populate it with some code to change the fill color of the circle. Previously, we’ve changed the fill color of the object being clicked, either by explicitly setting “this.style.fill”, | ||
Ligne 83: | Ligne 83: | ||
Depending on exactly what you are trying to do, there are various approaches that could be used. But the simplest, at least conceptually, | Depending on exactly what you are trying to do, there are various approaches that could be used. But the simplest, at least conceptually, | ||
- | Maintenant que nous avons une fonction qui est lancée quand on clique sur le bouton, nous voulons la remplir avec un peu de code pour changer la couleur de remplissage du cercle. | + | Maintenant que nous avons une fonction qui est lancée quand on clique sur le bouton, nous voulons la remplir avec un peu de code pour changer la couleur de remplissage du cercle. |
- | Suivant | + | Selon ce que nous essayons de faire, il y a plusieurs approches qui peuvent être utilisées. Mais les plus simples, au moins conceptuellement, sont deux méthodes |
**Both methods take a single parameter: a string containing a CSS selector. If the selector matches more than one element then querySelector() just returns the first one. If it matches no elements, the method returns “null”. In JavaScript terms, “null” is what’s referred to as a “falsey” value – that is, one that evaluates to “false” when you use it in an “if” statement. That makes it pretty simple to write defensive code that won’t fall over if your CSS selector doesn’t match anything. Let’s take a look at an example, by replacing the alert() in your buttonPressed() function (top right). | **Both methods take a single parameter: a string containing a CSS selector. If the selector matches more than one element then querySelector() just returns the first one. If it matches no elements, the method returns “null”. In JavaScript terms, “null” is what’s referred to as a “falsey” value – that is, one that evaluates to “false” when you use it in an “if” statement. That makes it pretty simple to write defensive code that won’t fall over if your CSS selector doesn’t match anything. Let’s take a look at an example, by replacing the alert() in your buttonPressed() function (top right). | ||
Ligne 94: | Ligne 94: | ||
• Try changing the selector to match an element (eg. “circle”) instead of an ID. | • Try changing the selector to match an element (eg. “circle”) instead of an ID. | ||
• Open your SVG file in a text editor and search for your ID. Is it definitely present in an ID attribute on the element you expected?** | • Open your SVG file in a text editor and search for your ID. Is it definitely present in an ID attribute on the element you expected?** | ||
+ | |||
+ | Les deux méthodes n'ont besoin que d'un seul paramètre : une chaîne contenant un sélecteur de CSS. Si le sélecteur correspond à plus d'un élement, alors querySelector() ne renvoie que le premier. Si aucun élément ne correspond, la méthode retourne « null ». En termes JavaScript, « null » est ce qui fait référence à une valeur « faussée » - autrement dit, une qui est évaluée « fausse » quand vous l' | ||
+ | |||
+ | Enregistrez le fichier JS, puis rechargez le fichier SVG dans votre navigateur. Les outils du développeur étant ouverts (appuyez sur F12, si nécessaire), | ||
+ | ••Vous souvenez-vous d' | ||
+ | ••Est-ce que l'ID correspond à celui que vous avez donné au cercle dans Inkscape ? | ||
+ | ••Essayez de changer le sélecteur pour qu'il corresponde à un élément (par ex., « circle ») plutôt qu'à un ID. | ||
+ | ••Ouvrez votre fichier SVG dans un éditeur de texte et cherchez votre ID. Est-il vraiment présent dans un attribut d'ID sur l' | ||
+ | |||
**Now that we’ve got a reference to the circle, it’s a pretty simple task to set the style explicitly, or modify its class list. Here’s the buttonPressed() function (below) rewritten to directly set the fill color on the circle. Note that I’ve removed the “else”, as we just want the code to fail silently with no side-effects if the CSS selector fails to match anything. | **Now that we’ve got a reference to the circle, it’s a pretty simple task to set the style explicitly, or modify its class list. Here’s the buttonPressed() function (below) rewritten to directly set the fill color on the circle. Note that I’ve removed the “else”, as we just want the code to fail silently with no side-effects if the CSS selector fails to match anything. | ||
Despite what I said earlier, the querySelector() method doesn’t actually return the SVG node, as such, but rather a JavaScript object that references the element in the browser’s internal document structure. Usually you can ignore this subtle distinction, | Despite what I said earlier, the querySelector() method doesn’t actually return the SVG node, as such, but rather a JavaScript object that references the element in the browser’s internal document structure. Usually you can ignore this subtle distinction, | ||
+ | |||
+ | Maintenant que nous avons une référence au cercle, c'est une tâche très simple de paramétrer explicitement le style ou de modifier sa liste de classes. Voici la fonction buttonPressed() (ci-dessous) réécrite pour régler directement la couleur de remplissage du cercle. Notez que j'ai enlevé le « else », car nous voulons que le code échoue en silence sans effet colatéral si le sélecteur de CSS n' | ||
+ | |||
+ | En dépit de ce que j'ai dit précédemment, | ||
**Consider trying to toggle the color in response to the button presses. You could use a CSS class, and call the circle.classList.toggle() method to alternately add and remove it. This is similar to the approach we took last time, except we’re referencing our object variable rather than “this”. But what if you want to set the fill color on the circle directly, rather than via a class? You could read the value of circle.style.fill back, and test to see what it’s currently set to. But there are various ways to define colors in CSS, so you might not get back the format you expect. | **Consider trying to toggle the color in response to the button presses. You could use a CSS class, and call the circle.classList.toggle() method to alternately add and remove it. This is similar to the approach we took last time, except we’re referencing our object variable rather than “this”. But what if you want to set the fill color on the circle directly, rather than via a class? You could read the value of circle.style.fill back, and test to see what it’s currently set to. But there are various ways to define colors in CSS, so you might not get back the format you expect. | ||
A better approach is to create a property on the object that you can refer to each time the function is called. You can test its current value, then set it to something else before your function finishes. You don’t need to do anything fancy to create a property like this – the browser will create it as soon as you try to use it – so the code ends up looking like that shown next page, bottom left.** | A better approach is to create a property on the object that you can refer to each time the function is called. You can test its current value, then set it to something else before your function finishes. You don’t need to do anything fancy to create a property like this – the browser will create it as soon as you try to use it – so the code ends up looking like that shown next page, bottom left.** | ||
+ | |||
+ | Tentez un essai de changement de couleur en réponse à un appui sur le bouton. Vous pouvez utiliser une classe du CSS et appeler la méthode circle.classList.toggle() pour alternativement l' | ||
+ | |||
+ | Une meilleure approche est de créer une propriété sur cet objet à laquelle vous pouvez vous référer chaque fois que la fonction est appelée. Vous pouvez tester sa valeur actuelle, puis la régler à quelque chose d' | ||
**The first time you click the button the “isOn” property doesn’t exist. That means the test in the “if” statement fails, and the code in the “else” runs – setting the color to green, and creating the “isOn” property, with a value of “true”. The next time you click the button the “if” succeeds, the fill is set to red and the property is set to “false”. Thereafter the color and property will continue to toggle each time you click the button. | **The first time you click the button the “isOn” property doesn’t exist. That means the test in the “if” statement fails, and the code in the “else” runs – setting the color to green, and creating the “isOn” property, with a value of “true”. The next time you click the button the “if” succeeds, the fill is set to red and the property is set to “false”. Thereafter the color and property will continue to toggle each time you click the button. | ||
One important thing to note as we’ve been editing this code is that you haven’t had to go anywhere near Inkscape since the initial setup. This is one big advantage of using external, linked scripts, as there’s less chance of accidentally making changes to your SVG file. You also get all the benefits of using a proper text editor: with any half-decent editor you should get syntax highlighting and other aids, which can help to indicate problems in your code. Plus, being able to work in a proper sized window, rather than the single line of the Object Properties dialog or the letterbox of Inkscape’s Embedded Scripts tab, is a huge advantage.** | One important thing to note as we’ve been editing this code is that you haven’t had to go anywhere near Inkscape since the initial setup. This is one big advantage of using external, linked scripts, as there’s less chance of accidentally making changes to your SVG file. You also get all the benefits of using a proper text editor: with any half-decent editor you should get syntax highlighting and other aids, which can help to indicate problems in your code. Plus, being able to work in a proper sized window, rather than the single line of the Object Properties dialog or the letterbox of Inkscape’s Embedded Scripts tab, is a huge advantage.** | ||
+ | |||
+ | La première fois que vous cliquez sur le bouton, la propriété « isOn » n' | ||
+ | |||
+ | Une chose importante à noter lors de la modification de ce code, c'est que vous n'avez pas eu à vous approcher d' | ||
**When deploying an SVG file with a linked script, you need to make sure that the script is still accessible to the SVG file once it’s on to your web server – typically by ensuring you use a relative path as outlined at the top of this article. You have to make sure you remember to keep your JS file in sync with any changes to your SVG file or its location. But this additional housekeeping is usually more than worth it. Generally, unless you really are writing only a single line of code, or perhaps a single, short function, linking is the way to go.** | **When deploying an SVG file with a linked script, you need to make sure that the script is still accessible to the SVG file once it’s on to your web server – typically by ensuring you use a relative path as outlined at the top of this article. You have to make sure you remember to keep your JS file in sync with any changes to your SVG file or its location. But this additional housekeeping is usually more than worth it. Generally, unless you really are writing only a single line of code, or perhaps a single, short function, linking is the way to go.** | ||
+ | |||
+ | Lors du déploiement d'un fichier SVG avec un script lié, vous devez vous assurer que le script reste accessible au fichier SVG une fois qu'il est chargé dans votre navigateur Web, typiquement en vous assurant que vous utilisez un chemin relatif comme souligné au début de cet article. Assurez-vous de vous souvenir de garder votre fichier JS synchronisé avec tous les changements dans votre fichier SVG ou de sa localisation. Mais cette maintenance supplémentaire vaut en général largement le coup. Dans l' | ||
issue146/inkscape.1563170720.txt.gz · Dernière modification : 2019/07/15 08:05 de d52fr