Ceci est une ancienne révision du document !
This month, I’m going to look at an “application” which actually manifests itself as a collection of Inkscape extensions: JessyInk. This is a way to turn Inkscape into an editor for presentations (think PowerPoint and similar) that can then be viewed with a web browser. To achieve this, JessyInk modifies your document; it adds JavaScript code – to allow keyboard and mouse navigation and to implement some basic transition effects. A good example of what JessyInk is capable of can be seen in the “JessyInk 1.5.5 Showcase” presentation, which can be found on Canonical’s Launchpad site: https://launchpad.net/jessyink/+download You can click the link on the page to view this with any modern SVG-capable web browser, but a better idea is to right-click on the link and save it to your local machine first. One recommended approach to creating a JessyInk presentation is to simply load this showcase into Inkscape and replace the contents with your own, in which case having a local copy of the file is a necessary first step. Note that, in my testing at least, I had to download the file directly from the Launchpad page: loading it into the browser first and then saving the running document always resulted in a file that failed to reload afterwards.
Ce mois-ci, je regarde une « application » qui se présente réellement elle-même comme un ensemble d'extensions d'Inkscape : JessyInk. C'est une façon de transformer Inkscape en éditeur de présentations (pensez à PowerPoint et similaires) qui peuvent ensuite être regardées dans un navigateur. Pour y arriver, JessyInk modifie votre document : elle ajoute du code Javascript - pour permettre la navigation avec la clavier et la souris et pour implémenter quelques effets de transition basiques. Un bon exemple de ce que JessyInk est capable se trouve dans la présentation « JessyInk 1.5.5 Showcase » (présentation de JessyInk 1.5.5) qui peut être trouvée sur le site Launchpad de Canonical : https://launchpad.net/jessyink/+download
Vous pouvez cliquer sur le lien de la page pour la voir avec un navigateur Web moderne acceptant les SVG, mais une meilleure idée est de faire un clic droit sur le lien, et de, d'abord, la sauvegarder sur votre machine. Une approche recommandée pour la création d'une présentation avec JessyInk est de simplement charger cette présentation dans Inkscape et de remplacer le contenu par le votre, et, dans ce cas, l'obtention d'une copie locale du fichier est une première étape nécessaire. Notez que, tout du moins dans mon test, j'ai dû télécharger directement le fichier sur la page de Launchpad : en la chargeant d'abord dans le navigateur et, ensuite, en sauvegardant le document en cours, j'ai toujours eu un fichier qui ne se rechargeait pas par la suite.
Rather than modifying the showcase document, I’m going to demonstrate how to create a JessyInk presentation from scratch. I recommend having both Inkscape and a web browser open throughout. As you make changes to the Inkscape file, you can save them (CTRL-S), and then immediately reload the file in the browser (F5) to check the results. So with your browser at the ready, and a blank document in Inkscape, let’s begin… A blank Inkscape file knows nothing about JessyInk and its extensive JavaScript functions, so the first step is to initialise it by running the Extensions > JessyInk > Install/update… extension (for brevity I’ll refer to extensions just by their name from now on; they’re all in the Extensions > JessyInk menu). There’s nothing to do here, other than to click the Apply button, and then close the dialog once it’s finished.
Plutôt que de modifier le document de la démonstration, je vais démontrer comment créer une présentation Jessylink à partir de zéro. Je recommande d'avoir ouvert en permanence Inkscape et un navigateur Web. Tout en faisant des modifications au fichier Inkscape, vous pouvez les sauvegarder (CTRL-S) puis recharger immédiatement le fichier dans le navigateur (F5) pour vérifier le résultat. Ainsi, avec le navigateur prêt, et un document vierge dans Inkscape, commençons …
Un fichier vierge d'Inkscape ne connaît rien à Inkscape et à ses fonctions Javascript étendues. ; aussi, la première étape est de l'initialiser en lançant Extensions > JessyInk > Installer/mette à jour les extensions (pour faire court, à partir de maintenant, je ne ferai référence aux extensions que par leur nom ; elles sont toutes dans le menu Extensions > JessyInk). Il n'y a rien à faire ici, si ce n'est cliquer sur le bouton Appliquer et ensuite fermer le dialogue quand c'est terminé.
For consistency in presentations, it’s common to create a master slide, containing elements that will be present in all the slides, such as a particular background or company logo. In JessyInk terms, one particular layer of your drawing can serve as a master slide, so we’ll make it blindingly obvious by opening the Layers dialog and renaming the existing layer to “MASTER”. Then it’s worth opening the Document Properties dialog and setting the units to “px” and the page size to suit the screen you’ll be presenting on (1024×768 in my case). This isn’t essential, as the browser will scale your SVG to fit the screen, but does at least give you some idea of how the final presentation will appear. Note, however, that although the browser will scale the document, the aspect ratio will be preserved, so presenting on a screen of a different ratio will result in blank borders. Finally, add common page elements to the document: I’ve drawn a rectangle with a gradient fill as a background, then added some solid rectangles with placeholder text for the slide title, and “nn of NN”. The latter has been implemented as three separate text objects, for reasons which will become clear shortly. Here’s how our master page looks:
Pour la cohérence des présentations, il est habituel de créer une diapo maître, contenant les éléments qui seront présents sur toutes les diapos, comme un fond spécifique ou le logo de l'entreprise. En termes de JessyInk, une couche particulière de votre dessin peut servir de diapo maître ; aussi, nous allons la rendre aveuglément évidente en ouvrant le dialogue des Calques et en renommant « MASTER » le calque existant. Ensuite, il vaut mieux ouvrir le dialogue des Propriétés du document et de paramétrer les unités en « px » (pixel) et la taille de la page pour correspondre à l'écran sur lequel elle sera présentée (1024×768 dans mon cas). Ce n'est pas vital, car le navigateur mettra votre SVG à l'échelle pour l'adapter à l'écran, mais cela vous donne au moins une idée de comment apparaîtra la présentation finale. Cependant, notez que, bien que le navigateur mettra votre document à l'échelle, le rapport d'aspect sera préservé ; aussi, l'affichage sur un écran avec un rapport différent entraînera des bordures blanches.
Our master slide may look correct, but, at the moment, JessyInk doesn’t know that it should be treated differently to any other slide. Run the “Master slide…” extension and supply the name of your layer (“MASTER” in my case) before clicking Apply and then closing the dialog when it’s finished. Before moving on from the master slide, let’s deal with the placeholder text we’ve added. Select the “SLIDE TITLE” text element and run the “Auto-texts…” extension. This is used to define text elements on the page that will be dynamically replaced when the slideshow runs. For this element, you should choose the “Slide title” radio button and click Apply. Now, with the dialog still open, select the “nn” text and change the radio button to “Slide number” before applying. Finally select the “NN” text and change the radio button to “Number of slides”, then apply once more. You can now close the dialog.
We’ve finished with the master slide for now, so it’s probably a good idea to lock the layer to prevent accidental changes when we start adding the real content to our presentation. Now it’s time to add some real slides. Because Inkscape (and SVG) has no inherent ability to handle multi-page documents, we can’t just have each slide on a new page and switch between them using tabs or thumbnails, as you might in other presentation programs. Instead, we have to fake the effect of multiple documents by creating each slide on its own layer. This approach works, but requires a little discipline to work with: at any time you should only have the master slide and one other slide visible. When you want to switch between slides, you must remember to hide the old slide, otherwise you could easily be confused into thinking that some of the content of the old slide is actually part of the new one. You also need to make sure you select the new layer, otherwise your modifications will apply to the wrong slide. To illustrate this, let’s create a couple of layers for our first two slides, and name them based on the content we intend to put in them.
Perhaps counter-intuitively, the order of the slides runs from bottom to top, so the first slide is the one called “Introducing JessyInk”, whilst the second is named “What is Inkscape?”. Note that the master slide is locked, and only the master slide and the first slide are visible. The first slide is currently selected, so it’s time to add some content. This can be any content that would normally go into an Inkscape document, including text, vector graphics and bitmaps. Remember, however, that it will eventually be rendered by a web browser, so the final display will be limited by the browser’s SVG engine: don’t use flowed text, and be aware that fonts may be different between your Inkscape machine and the final viewer. If you must use particular fonts then you should probably convert them to paths – but remember to keep a copy of the un-converted presentation, otherwise you won’t be able to edit the text in future. With some content in both slides, it’s time to test the presentation in a browser. Load the file from disk (press CTRL-O in the browser to bring up a file selector), and optionally press F11 to put the browser into full-screen mode (it’s the same key to return to normal afterwards). You should see that the placeholder text in the title, and in the page count at the bottom, have been replaced with real content.
To move through your presentation, click the mouse button or use the LEFT and RIGHT cursor keys. HOME and END will take you to the start and end of your presentation, respectively – although with only two slides, they’re somewhat redundant at this point. Let’s build up our presentation a bit more with another slide, describing JessyInk’s transition effects. The ways in which a slide can transition in or out are limited in JessyInk, but that’s probably a good thing: if you’re relying on fancy effects to keep people interested then you need to rethink your presentation! To set a transition on a slide, it’s handy to first double-click on the layer in the Layers dialog, then copy the layer name to the clipboard. You’ll need to paste this into the Transitions… dialog to identify which slide you’re adjusting.
You can then choose how the slide should appear and disappear: Appear results in one slide immediately replacing the next with no animation. Fade causes the slide to fade in. Pop scales the slide from a small initial rendering up to its full size. Fade and Pop work best when the previous slide uses one of them as a transition-out effect, otherwise they can be quite jarring. You can also adjust the duration of the effect, although I’ve found the default value of 0.8s to be fine in most cases. You may be wondering about the Default transition type. This removes the in or out transition, effectively setting it back to the default behaviour – which seems to be identical to the Appear option. After editing a few slides it can be easy to lose track of the transition state of each of them. The Summary… extension is useful here: on clicking apply it produces a dialog with a summary of the presentation, including the transition types and times you’ve set. The dialog always open a little small, but you can resize it rather than reading the summary line-by-line in a tiny textbox.
As well as slide transitions, similar animations can be applied to individual elements of your slide, using the Effects… extension. In this case the transition is applied to each selected element, and an “Order” field is used to determine what sequence the effects are applied in. The elements are transitioned starting with Order 1 and working upwards. Multiple elements with the same Order will be transitioned at the same time. The None (default) option is used to stop them transitioning, such that they are always present on the slide. By now it’s probably time to test your presentation once more. Simply save the Inkscape file, then press F5 in the browser to reload the file. There’s no need to quit and re-launch either application, making it easy to quickly iterate your design to refine the fine details of your presentation.
If JessyInk was limited to simple slideshows with a few transitions it would be of little benefit over using LibreOffice Impress. But it also offers the ability to create “zoom and pan” presentations – originally made popular by a website called Prezi (prezi.com) with a fresh take on presentations that are more dynamic than the linear PowerPoint shows of old. Prezi’s editing software originally required the use of Adobe Flash, though they now have an HTML5 offering. There’s also an Open Source program called Sozi that performs the same trick, if you want to try another alternative to JessyInk. A common theme in these types of presentation is that a single slide is used to give a big picture overview of a topic, then the viewing program zooms, rotates and pans the viewport to “dive in” to more detailed information. For our purposes I’m going to create another slide with three further “views” within it. I’ve marked out each view (including the initial view of the whole slide) with a rectangle in Inkscape – and given them bright green strokes to ensure they stand out. They are hidden in the final presentation, so you can use any color or stroke style you want to help you keep track of the individual views.
I’ve kept the same aspect ratio for each of the rectangles as I’ve used for the presentation as a whole. That way I can ensure that my views are properly sized and positioned relative to the content. The one around the “3” has also been turned to demonstrate that rotation is allowed, as well as zooming and panning. With the views marked out, we just have to select each one in turn and use the View… extension to define the order in which they are visited during the presentation, starting at 0 for the initial state of the slide. Just zooming in on three numbers isn’t terribly useful, but by combining the zoom order with some object animation effects, you can make parts of the slide fade in and out as the viewer is panned around. Here’s the final version of this slide, looking a little more cluttered:
In practice, however, the “1” fades out during step 1 of the slide order, and the “Zoom” text fades in at the same time. Similar rules have been applied to the other areas, and the red outline is used as a final view. The result is that the slide shows 1, 2 and 3 when it’s first displayed, then zooms and pans to the red circle (showing the word “Zoom”), pans to the green one (showing “Pan”), and pans and rotates to the third one (showing “Rotate”). Finally the presentation zooms back out to the overview, which now shows the words instead of the numbers. Now that we have a finished presentation, I’d like to mention a few more features of JessyInk. Pressing “i” during a presentation will bring up an index page showing all your slides, letting you easily jump back or skip sections using the mouse or keyboard. Pressing “d” will switch to drawing mode, with which you can annotate a slide on-the-fly. By pressing particular keys, you can even change the color and size of the pen. Run the Keybindings… extension to view or change all the various keyboard shortcuts that JessyInk offers.
To conclude, JessyInk is really a remarkable example of what an Inkscape extension can achieve with a little lateral thinking and a lot of JavaScript! The smoothness of the resultant presentations, however, is highly dependent on your browser’s performance – something to bear in mind before you stand before a room full of people to give a talk. Nevertheless, if you’re more comfortable in Inkscape than LibreOffice, it could prove to be an invaluable tool to know about.