diff --git a/book/_static/my_first_svg_presentation.svg b/book/_static/my_first_svg_presentation.svg new file mode 100644 index 0000000..52fa738 --- /dev/null +++ b/book/_static/my_first_svg_presentation.svg @@ -0,0 +1,3567 @@ + + + + + + + + + + # + + + + + + + + + + My first presentation + Slide: + ## + + + + + + + + + + + diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md new file mode 100644 index 0000000..0f1135e --- /dev/null +++ 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 + + ``` + +