GroIMP wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Create an Interactive tutorial ======

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, the embedded HTML view and the[[user-guide:more_panels#tutorial_navigation| tutorial navigation panel]].


===== Overall concept =====

GroIMP Layouts describe the composition of the different panels in a project and can be saved using "Panels/add Layout", chosen under "Panels/set Layout" and delete using the layout explorer "Panels/Layout".

The tutorial navigation panel allows the users to "walk through" the different project layouts, starting with the first created one. 


===== First step planing! =====

Since a layout can not be renamed or edited it is not (easily) possible to later change the order of the different layouts in the walk through. Therefore it is important to properly plan your interactive tutorial.

==== 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). 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!.



===== Preparation =====

  - Preferences:
    - Create a new RGG project and open the preferences
    - Create a workbench option file (file/create...)
    - enable "hide the history navigation button in HTML view" under user interface General Options.  
    - close preferences

  - HTML files:
    - Create HTML folder in your file explorer


===== Set up your first scene =====

Our first step should only show the 2d Graph of the new RGG Project and a HTML panel with the text:

<code html 01_2DView.html> 
<html>
<head>
<title>welcome</title>
</head>
<body>
<h2> Welcome to the test tutorial</h2>

This is a test tutorial that shows in the first step the 2D graph.
</body>
</html>
</code>

To create this we need to do the follwing steps:

  - Add the file 01_2DView.html to the HTML folder.
  - Open this file
  - Close all panels but the file
  - Open the 2d Graph and the Tutorial navigation panel 
  - Arrange them in the layout below
  - Press the add layout button in the main menu (/Panels)

{{ :tutorials:interactive_tutorial_step1.png?600 |}}
===== Second scene =====

In the second step we want to show the 2D node toolbar and explain what it does with the following html text:

<code html 02_2DNode_toolbar.html> 
<html>
<head>
<title>The 2D Node toolbar</title>
</head>
<body>
<h2> The 2D Node toolbar</h2>

Using the 2D Node toolbar it is possible to edit specific nodes without XL or RGG. 
If you select a node the toolbar (right above the 2d graph view) will show the possible options. 
Please select the A node and press the appearing "addNodeSuccessor" button in the 2D toolbar to add a child of the type of successor to the node A. The then opening pop-up window can be used to describe the type of node you wish to add, for our case the suggested F is completely fine.   

</body>
</html>
</code>

To create the layout for this we need to do the following steps:

  - Open the file explorer 
  - add the second html file
  - open the html file
  - **close the file explorer !!!**
  - open the Node toolbar 2d (you can find this under panels/2d/node toolbar 2d)
  - arrange the layout to as you like (e.g.  see below)
  - use the add layout menu entry to save this layout to the list of layouts

|{{ :tutorials:ineratctive_tutorial_sep2.png?600 |}}|
|The first html view (seen in the tab on the left) could be closed if you want to. It only is open here for users to go read again |

===== 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> 
<html>
<head>
<title>The changes in 3D </title>
</head>
<body>
<h2> The changes in 3D</h2>

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.


</body>
</html>
</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.