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édente | |||
issue146:inkscape [2019/07/16 14:57] – auntiee | issue146:inkscape [2019/07/17 06:56] (Version actuelle) – andre_domenech | ||
---|---|---|---|
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, | ||
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 |
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 les chemins dans le dialogue - vous devez les modifier via l' | 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 les chemins dans le dialogue - vous devez les modifier via l' | ||
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 via le dialogue des Propriétés de l' |
Par un clic droit sur le bouton, ouvrez le dialogue des Propriétés de l' | Par un clic droit sur le bouton, ouvrez le dialogue des Propriétés de l' | ||
Ligne 118: | Ligne 118: | ||
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' | 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' | + | 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. | ||
Ligne 124: | Ligne 124: | ||
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' | + | 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'avait pas eu à vous approcher d' | + | 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' | + | 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.1563281823.txt.gz · Dernière modification : 2019/07/16 14:57 de auntiee