Differences

This shows you the differences between two versions of the page.

--- tutorials:create-interactive-tutorial [2025/04/03 08:13] – [Second scene] Tim
+++ tutorials:create-interactive-tutorial [2025/04/03 10:32] (current) – [Create an Interactive tutorial] Tim
@@ Line 2: / Line 2: @@
 Starting with GroIMP 2.1.7 it is possible to create interactive tutorials to present panels and workflows.
-The interaction is based on GroIMP Layouts and the embedded HTML view.
+The interaction is based on GroIMP Layouts, the embedded HTML view and the[[user-guide:more_panels#tutorial_navigation| tutorial navigation panel]].
@@ Line 18: / Line 18: @@
 ==== Content of each step ====
-For each step/layout you need to know the panels you want in and the description of the step as an HTML file. You can simply create an HTML file using any editor (e.g. https://html5-editor.net) (or Word with a bigger font size).
+For each step/layout you need to know the panels you want in and the description of the step as an HTML file. You can simply create an HTML file using any editor (e.g. https://html5-editor.net) (or Word with a bigger font size). It is hereby important to keep in mind that Java Swing and therefore the GroIMP GUI including the html-Viewer only support HTML up to version [[https://www.w3.org/TR/2018/SPSD-html32-20180315/ | 3.2]] (quite old) and no java-sript!.
@@ Line 94: / Line 95: @@
 ===== Third scene =====
+In the last step we want to show how the 2d toolbar is affecting the 3d view.
 <code html 03_3D_view.html>
@@ Line 103: / Line 106: @@
 <h2> The changes in 3D</h2>
-In the now opened 3D view you can see the F you added in the last step.
+In the now opened 3D view you can see the F you added in the last step, please select this F in one of the views (both work) and add a second F (using the same steps as before). This will appear directly in the 3D view, on top of the other F as expected.
-To now highlite an additional feature of the 2D-toolbar, please Select the F in one of the views (both work) and add a second F.
 </body>
@@ Line 111: / Line 113: @@
 </code>
+To finalize this last layout we need again to add the html file and also the 3D view, a possible layout can be seen below. And of course save the layout.
+{{ :tutorials:interatictive_tutorial_step3.png?600 |}}
+===== Finishing =====
+If you now press the next button, it should jump to the first layout and allow you to step through your three layouts. and we are done.
+===== Trouble shooting =====
+If you accidentally added a wrong layout you can remove it through the layout-explorer, which can be found in panels/layouts. Jet you can not change the order of the layouts there!
+Additionally you can always try to remove individual panels from a already saved layout, by saving and closing the project, accessing the gsz as a archive (zip) and edit the project.gs. It is reccomened to make a backup of the project before trying this.
+In the same way it is also possible to edit the HTML files later, they are also files in the gsz.