Jessyink

Co-Authored-By: antonmontagne <48290164+antonmontagne@users.noreply.github.com>
2026-11-13 23:05:51 +00:00 · 2025-03-18 12:30:29 +01:00 · 2025-03-18 12:30:29 +01:00 · 6c827cacbf
commit 6c827cacbf
parent 1d180409d0
2 changed files with 3672 additions and 0 deletions
--- a/book/_static/my_first_svg_presentation.svg
+++ b/book/_static/my_first_svg_presentation.svg
--- a/book/features/Jessyink.md
+++ b/book/features/Jessyink.md
@ -0,0 +1,105 @@
+# Inkscape-JessyInk SVG slides
+
+[Inkscape](https://inkscape.org/) is a drawing program with which you can create SVG files.
+
+[JessyInk](https://code.google.com/archive/p/jessyink/) is an extension to Inkscape that lets you create 
+svg slides that can be integrated in Jupyter notebooks and in Jupyter books.
+
+This document briefly explains how. You are assumed to be familiar with Inkscape. It applies to Inkscape 1.2 or later. 
+
+For more help on Inkscape and JessyInk:
+
+- [Inkscape tutorials](https://inkscape.org/learn/)
+- [Inkscape manual](https://inkscape-manuals.readthedocs.io/en/latest/index.html)
+- [JessyInk wikis](https://code.google.com/archive/p/jessyink/wikis)
+
+## Create SVG slides for Jupyter notebooks and Jupyter books
+
+1. Start Inkscape
+
+2. Activate the JessyInk extension.
+
+   From the main menu select: "Extensions" --> "JessyInk" --> "install/update..." and click "Apply".
+   
+3. Display the layers tab:
+
+   From the main menu select: "Layer"  --> "Layers And Objects..."
+   
+4. Create a master slide: the information on this slide will be displayed on all slides
+
+   1. On the layers tab right-click the layer name and select: "Rename Layer...". 
+   
+      This will bring up the "Rename Layer" dialog box. Enter the layer name e.g. "master slide" and click "Rename". 
+      
+   2. From the main menu select: "Extensions" --> "JessyInk" --> "Master slide...".
+   
+      This will bring up the "Maste slide" dialog box. Enter the name of your master slide and click "Apply".
+      
+5. Put some stuff on this master slide. Later you can adjust it or move it to a better location. In this example, will put the following information on each slide:
+
+   1. The title of the presentation
+   
+      Place a text object with the title of the presentation somewhere on this master slide
+         
+   2. The name of the slide (using a placeholder)
+   
+      1. Place a text placeholder like "#" somewhere on this master slide
+      2. Select this placeholder
+      3. From the main menu select: "Extensions" --> "JessyInk" --> "Auto-texts..."
+      4. This brings up the "Auto-texts" dialog box. Select "Slide title" and click "Apply".
+      
+   3. The slide number (using a placeholder)
+   
+      1. Place a text placeholder like "##" somewhere on this master slide
+      2. Select this placeholder
+      3. From the main menu select: "Extensions" --> "JessyInk" --> "Auto-texts..."
+      4. This brings up the "Auto-texts" dialog box. Select "Slide number" and click "Apply".
+
+6. Create your slides
+
+   Each layer is a slide. The information on the master slide is added to each layer.
+
+    - For each slide click "+" on the layers tab or copy and rename an existing slide.
+    - Moving your mouse across a layer or an object displays a few icons. You can view/hide the layer/object by toggling the *eye* icon. You can enable/disable editing by toggling the *key* icon.
+    - Create or modify the contents of the slide
+
+7. Adjust the position of the master sheet objects such that they nicely line-up with your slides.
+
+   Adjust the width, height, and scale of the presentation.
+
+    1. From the main menu select: "Document properties"
+    
+    **DO NOT SELECT "Resize to content:"**
+    
+    2. Adjust "Width:", "Height:" and "Scale:".
+    
+8. Save the presentation
+
+   1. From the main menu select: "File" --> "Save As..."
+   2. Select a folder, enter a file name, and press "Save".
+   
+9. Show the presentation
+
+    Open the presentation in a webbrowser. Use the mouse scroll wheel, "PgUp", "PgDn", "^", "⌄", "<", or ">" to go through the slides. If necessary, fix the position of the presentation in the browser by pressing the "Shift" key while scrolling through it.
+    
+10. Include the slides in a Jupyter Notebook
+
+    ```python
+    from IPython.display import IFrame
+
+    # IFrame(src, width, height)
+    # src:    source file location
+    # width:  width in pixels
+    # height: height in pixels
+    IFrame("my_first_svg_presentation.svg", 600, 400)
+    ```
+
+11. Include the slides in a Jupyter Book
+
+    Copy your presentation to the html folder in which Jupyter Book places the output of your *.myst* file with the presentation. This is not automatically done when building the Jupyter Book.
+    
+    ```html
+    <iframe width="600" height="400" title="First SVG presentation" src="my_first_svg_presentation.svg"></iframe>
+    ```
+
+