From 6c827cacbf52c36250df74038409f41f06fbc36b Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 12:30:29 +0100 Subject: [PATCH 1/8] Jessyink Co-Authored-By: antonmontagne <48290164+antonmontagne@users.noreply.github.com> --- book/_static/my_first_svg_presentation.svg | 3567 ++++++++++++++++++++ book/features/Jessyink.md | 105 + 2 files changed, 3672 insertions(+) create mode 100644 book/_static/my_first_svg_presentation.svg create mode 100644 book/features/Jessyink.md 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 + + ``` + + From a87f88b9ff7be51a06f287c7bbcf08962ff5e456 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 12:30:58 +0100 Subject: [PATCH 2/8] Make specific for TB --- book/features/Jessyink.md | 71 +++++++++++++-------------------------- 1 file changed, 23 insertions(+), 48 deletions(-) diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index 0f1135e..ed7e46d 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -1,4 +1,12 @@ -# Inkscape-JessyInk SVG slides +# Interactive SVG images + +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} ../_static/my_first_svg_presentation.svg +:name: svg_presentation + +Click through this interactive SVG image! +``` [Inkscape](https://inkscape.org/) is a drawing program with which you can create SVG files. @@ -17,29 +25,19 @@ For more help on Inkscape and JessyInk: 1. Start Inkscape -2. Activate the JessyInk extension. - - From the main menu select: "Extensions" --> "JessyInk" --> "install/update..." and click "Apply". +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..." +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". + 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". + 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 + 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) @@ -55,21 +53,15 @@ For more help on Inkscape and JessyInk: 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. +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. +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. - Adjust the width, height, and scale of the presentation. - - 1. From the main menu select: "Document properties" - - **DO NOT SELECT "Resize to content:"** + 1. From the main menu select: "Document properties". **DO NOT SELECT "Resize to content:"** 2. Adjust "Width:", "Height:" and "Scale:". @@ -78,28 +70,11 @@ For more help on Inkscape and JessyInk: 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 +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. - # IFrame(src, width, height) - # src: source file location - # width: width in pixels - # height: height in pixels - IFrame("my_first_svg_presentation.svg", 600, 400) - ``` +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): -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 - - ``` - - +````md +```{iframe} ../_static/my_first_svg_presentation.svg +``` +```` From 0e05cb990772b1f3587eb72e1bc57f416f00dd80 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 12:33:43 +0100 Subject: [PATCH 3/8] add to toc --- book/_toc.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/book/_toc.yml b/book/_toc.yml index f87daa6..0665212 100644 --- a/book/_toc.yml +++ b/book/_toc.yml @@ -86,6 +86,7 @@ parts: sections: - file: features/widgets.ipynb - file: features/exercise_checking.ipynb + - file: features/Jessyink - file: external/sphinx-iframes/README.md - file: external/Sphinx-PRIME-applets/README.md - file: features/visuals.md From 4436021dc63c385412ae8f22e551dcbed96ef532 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 13:05:55 +0100 Subject: [PATCH 4/8] fix iframe figure --- book/features/Jessyink.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index ed7e46d..267c6f8 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -2,7 +2,7 @@ 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} ../_static/my_first_svg_presentation.svg +```{iframe-figure} ../_static/my_first_svg_presentation.svg :name: svg_presentation Click through this interactive SVG image! From 4e33fa2f17ca34b5efd5526118520e3e11ddbe01 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 13:07:12 +0100 Subject: [PATCH 5/8] add user type and badge --- book/features/Jessyink.md | 7 +++++++ book/features/overview.md | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index 267c6f8..807fc0e 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -1,5 +1,12 @@ # Interactive SVG images +{bdg-success}`External software` + +```{admonition} User types +:class: tip +This section is useful for user type 3-5. +``` + 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 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` From 2ac9634c187db6f2db38fdad259e63881c655cdf Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 13:07:27 +0100 Subject: [PATCH 6/8] Swap user type and badge --- book/features/Jessyink.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index 807fc0e..6c79e6d 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -1,12 +1,12 @@ # Interactive SVG images -{bdg-success}`External software` - ```{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 From a780c68a95eba2219ba9857f87c9013a6e6f3903 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 13:30:19 +0100 Subject: [PATCH 7/8] iframe --> iframe-figure --- book/features/Jessyink.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index 6c79e6d..ccf3602 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -82,6 +82,9 @@ For more help on Inkscape and JessyInk: 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} ../_static/my_first_svg_presentation.svg +```{iframe-figure} ../_static/my_first_svg_presentation.svg +:name: svg_presentation + +Click through this interactive SVG image! ``` ```` From 19e5f051b7b3f867d23815d53d37ac7ac7eb5005 Mon Sep 17 00:00:00 2001 From: Tom van Woudenberg Date: Tue, 18 Mar 2025 14:13:46 +0100 Subject: [PATCH 8/8] Added svg image for download --- book/features/Jessyink.md | 2 +- book/features/my_first_svg_presentation.svg | 3567 +++++++++++++++++++ 2 files changed, 3568 insertions(+), 1 deletion(-) create mode 100644 book/features/my_first_svg_presentation.svg diff --git a/book/features/Jessyink.md b/book/features/Jessyink.md index ccf3602..657bc65 100644 --- a/book/features/Jessyink.md +++ b/book/features/Jessyink.md @@ -12,7 +12,7 @@ SVG images can be made interactive by adding 'slides' to the SVG. This allows us ```{iframe-figure} ../_static/my_first_svg_presentation.svg :name: svg_presentation -Click through this interactive SVG image! +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. 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: + ## + + + + + + + + + + +