This is an old revision of the document!

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 and the embedded HTML view.

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

Preparation

Preferences:
1. Create a new RGG project and open the preferences
2. Create a workbench option file (file/create…)
3. enable “hide the history navigation button in HTML view” under user interface General Options.
4. close preferences

HTML files:
1. 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:

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>

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)

Second scene

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

02_2DNode_toolbar.html

<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 will show the possible options. 
 
Please select the A node and press

GroIMP wiki

Table of Contents