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/_toc.yml b/book/_toc.yml index d841379..6e1bf61 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -85,6 +85,7 @@ parts: sections: - file: features/widgets.ipynb - file: features/exercise_checking.ipynb + - file: features/Jessyink - file: features/jupyterquiz.ipynb - file: external/sphinx-iframes/README.md - file: external/Sphinx-PRIME-applets/README.md diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md new file mode 100644 index 0000000..657bc65 --- /dev/null +++ b/book/features/Jessyink.md @@ -0,0 +1,90 @@ +# Interactive SVG images + +```{admonition} User types +:class: tip +This section is useful for user type 3-5. +``` + +{bdg-success}`External software` + +SVG images can be made interactive by adding 'slides' to the SVG. This allows users to click through a set of images, showing dynamic processes. To make these kind of images, you can make use of Inkscape with JessyInk: + +```{iframe-figure} ../_static/my_first_svg_presentation.svg +:name: svg_presentation + +Click through this interactive SVG image, available for download [here](./my_first_svg_presentation.svg) +``` + +[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 Book: Copy your presentation to the `_static` folder. This will make sure it's available after the build. Reference to the file using relative links using [](../external/sphinx-iframes/README.md). Use `../` to go to the directory above or `./` to open the current directory, i.e. the following syntax will give you the [figure as shown above](svg_presentation): + +````md +```{iframe-figure} ../_static/my_first_svg_presentation.svg +:name: svg_presentation + +Click through this interactive SVG image! +``` +```` diff --git a/book/features/my_first_svg_presentation.svg b/book/features/my_first_svg_presentation.svg new file mode 100644 index 0000000..52fa738 --- /dev/null +++ b/book/features/my_first_svg_presentation.svg @@ -0,0 +1,3567 @@ + + + + + + + + + + # + + + + + + + + + + My first presentation + Slide: + ## + + + + + + + + + + + diff --git a/book/features/overview.md b/book/features/overview.md index 4a6cd20..4690d1d 100644 --- a/book/features/overview.md +++ b/book/features/overview.md @@ -11,7 +11,7 @@ Since the list of TeachBook features is getting quite long, we have grouped them Additionally, not all features are built and shared in the same way. We do our best to make sure that as many tools as possible are included automatically when using our TeachBooks Template Book; if you are not using the Template, we try to make sure each of our tools can be used independently. For transparency, tags will help differentiate between the different backgrounds of the features: - {bdg-warning}`Javascript overlay` -- {bdg-success}`Chrome Extension` +- {bdg-success}`External software` - {bdg-white}`GitHub App and Javascript script` - {bdg-secondary}`Python Package: teachbooks` - {bdg-light}`GitHub Reusable Action`